From fb1a798843df7b4dd7f66bbb99a4d602a23fcbad Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 25 Dec 2019 18:06:46 +0100
Subject: [PATCH] Icons with rings

---
 FloatingSpace/CircularMenu.js        | 41 ++++++++++++++++++----------
 FloatingSpace/CircularMenuItem.js    | 15 +++++++++-
 FloatingSpace/UiObjectConstructor.js | 23 ++++++++++------
 3 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/FloatingSpace/CircularMenu.js b/FloatingSpace/CircularMenu.js
index 4e3efd955..ab9b5a958 100644
--- a/FloatingSpace/CircularMenu.js
+++ b/FloatingSpace/CircularMenu.js
@@ -48,7 +48,8 @@ function newCircularMenu () {
 /* Create the array of Menu Items */
 
     let iconAndTextArray = []
-    let iconOnlyArray = []
+    let iconOnlyArray
+    let ringsArray = [[], [], []]
 
     for (let i = 0; i < menuItemsInitialValues.length; i++) {
       let menuItem = newCircularMenuItem()
@@ -81,9 +82,15 @@ function newCircularMenu () {
       menuItem.confirmationLabel = menuItemInitialValue.confirmationLabel
       menuItem.disableIfPropertyIsDefined = menuItemInitialValue.disableIfPropertyIsDefined
       menuItem.propertyToCheckFor = menuItemInitialValue.propertyToCheckFor
+      menuItem.ring = menuItemInitialValue.ring
 
       if (menuItem.label === undefined) {
         menuItem.type = 'Icon Only'
+
+        if (menuItem.ring === undefined) {
+          menutItem.ring = 1
+        }
+        iconOnlyArray = ringsArray[menuItem.ring - 1]
         iconOnlyArray.push(menuItem)
       } else {
         menuItem.type = 'Icon & Text'
@@ -95,22 +102,28 @@ function newCircularMenu () {
       menuItems.push(menuItem)
     }
 
-    /* Here we calculate the angles for each menu item, and then apply it if it was not previously defined. */
-    let amplitud = 100
-    let initialAngle = 230
-    let step = amplitud / (iconOnlyArray.length - 1)
+    /* There are 3 possible rings of icons, we will go through each of them here. */
+    let amplitudeArray = [80, 50, 40]
+    let initialAngleArray = [220, 205, 200]
+    for (let j = 1; j < 4; j++) {
+      let iconOnlyArray = ringsArray[j - 1]
+      /* Here we calculate the angles for each menu item, and then apply it if it was not previously defined. */
+      let amplitude = amplitudeArray[j - 1]
+      let initialAngle = initialAngleArray[j - 1]
+      let step = amplitude / (iconOnlyArray.length - 1)
 
-    for (let i = 0; i < iconOnlyArray.length; i++) {
-      let menuItem = iconOnlyArray[i]
-      let angle = initialAngle - step * i
-      if (menuItem.angle === undefined) {
-        menuItem.angle = angle
+      for (let i = 0; i < iconOnlyArray.length; i++) {
+        let menuItem = iconOnlyArray[i]
+        let angle = initialAngle - step * i
+        if (menuItem.angle === undefined) {
+          menuItem.angle = angle
+        }
       }
     }
-
-    amplitud = 140
-    initialAngle = -70
-    step = amplitud / 7
+    /* Text and Icon */
+    let amplitude = 140
+    let initialAngle = -70
+    step = amplitude / 7
     let currentItem = (7 - iconAndTextArray.length) / 2 + 1
     for (let i = 0; i < iconAndTextArray.length; i++) {
       let menuItem = iconAndTextArray[i]
diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js
index e8679ff6b..71da46801 100644
--- a/FloatingSpace/CircularMenuItem.js
+++ b/FloatingSpace/CircularMenuItem.js
@@ -146,7 +146,20 @@ function newCircularMenuItem () {
 
     let radiousGrowthFactor
     if (thisObject.type === 'Icon Only') {
-      radiousGrowthFactor = 5
+      switch (thisObject.ring) {
+        case 1: {
+          radiousGrowthFactor = 5
+          break
+        }
+        case 2: {
+          radiousGrowthFactor = 3.5
+          break
+        }
+        case 3: {
+          radiousGrowthFactor = 2
+          break
+        }
+      }
     } else {
       radiousGrowthFactor = 4
     }
diff --git a/FloatingSpace/UiObjectConstructor.js b/FloatingSpace/UiObjectConstructor.js
index f232a7857..961f589bc 100644
--- a/FloatingSpace/UiObjectConstructor.js
+++ b/FloatingSpace/UiObjectConstructor.js
@@ -137,7 +137,8 @@ function newUiObjectConstructor () {
         iconPathOff: 'menu-fix-unpinned',
         rawRadius: 8,
         targetRadius: 0,
-        currentRadius: 0
+        currentRadius: 0,
+        ring: 1
       }
       )
     menuItemsInitialValues.push(
@@ -152,7 +153,8 @@ function newUiObjectConstructor () {
         iconPathOff: 'menu-tensor-free-angles',
         rawRadius: 8,
         targetRadius: 0,
-        currentRadius: 0
+        currentRadius: 0,
+        ring: 1
       }
       )
     menuItemsInitialValues.push(
@@ -167,7 +169,8 @@ function newUiObjectConstructor () {
         iconPathOff: 'menu-mobility-freeze',
         rawRadius: 8,
         targetRadius: 0,
-        currentRadius: 0
+        currentRadius: 0,
+        ring: 1
       }
       )
     menuItemsInitialValues.push(
@@ -182,7 +185,8 @@ function newUiObjectConstructor () {
         iconPathOff: 'menu-tree-minus',
         rawRadius: 8,
         targetRadius: 0,
-        currentRadius: 0
+        currentRadius: 0,
+        ring: 1
       }
       )
     menuItemsInitialValues.push(
@@ -195,7 +199,8 @@ function newUiObjectConstructor () {
         iconPathOff: 'menu-backup',
         rawRadius: 8,
         targetRadius: 0,
-        currentRadius: 0
+        currentRadius: 0,
+        ring: 2
       }
       )
     menuItemsInitialValues.push(
@@ -208,7 +213,8 @@ function newUiObjectConstructor () {
         iconPathOff: 'clone',
         rawRadius: 8,
         targetRadius: 0,
-        currentRadius: 0
+        currentRadius: 0,
+        ring: 2
       }
         )
     if (isPersonalData !== true) {
@@ -222,9 +228,10 @@ function newUiObjectConstructor () {
           iconPathOff: 'menu-share',
           rawRadius: 8,
           targetRadius: 0,
-          currentRadius: 0
+          currentRadius: 0,
+          ring: 2
         }
-                  )
+      )
     }
   }