Merge pull request #232 from alzatin/UI

Tiny UI Changes
MaslowCNC · Sep 4, 2019 · 0e78d24 · 0e78d24
2 parents 7d31a26 + fbd051b
commit 0e78d24
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 24 deletions.
diff --git a/dist/maslowCreate.css b/dist/maslowCreate.css
@@ -164,8 +164,7 @@
     background-color: #484848 ;
     color: white;
     overflow: auto;
-    padding:10px;
-    padding-right:10px;
+    padding:0px;
    /*-webkit-box-shadow: inset -2px 2px 26px 5px rgba(0,0,0,0.61);
     -moz-box-shadow: inset -2px 2px 26px 5px rgba(0,0,0,0.61);
     box-shadow: inset -2px 2px 26px 5px rgba(0,0,0,0.61); */
@@ -377,6 +376,16 @@ input.menu_search:focus {
   display: none;
 }
 
+.molecule_title {
+  background-color:#ddd;
+  color:black;
+  text-align:right;
+  margin:0px;
+  padding:10px;
+  border-bottom: 2px solid black;
+
+}
+
 .sidebar-list{
     list-style: none;
     padding:10px;
@@ -394,8 +403,6 @@ input.menu_search:focus {
 
 .sidebar-item{
     overflow: hidden;
-    margin-bottom: 30px;
-    text-align:center;
     height: 3rem;
     line-height: 1.5rem;
     font-size: 1rem;
@@ -409,11 +416,9 @@ input.menu_search:focus {
     padding-bottom:10px;
 }
 .sidebar-editable-div:hover{
-  color: #000;
+  font-weight: 200;
 }
 
-
-.label-item:hover,
 .editing-item:hover
 .laber-item:active
 .editing-item:active{
@@ -422,11 +427,22 @@ input.menu_search:focus {
 } 
 
 .sidebar-subitem{
-    display:block;
-    margin-bottom: 10px;
+    display:inline-block;
     height:1.5em;
 }
 
+.sidebar-subitem select{
+    background-color: white;
+    margin-left: 10px;
+    border-style: none;
+    width: 200%;
+    display: inline-block;
+    color: #000;
+    border-radius: 0px;
+    border-width: 0px;
+    height: 110%;
+}
+
 .label-item{
   display:block;
   font-size:1.1rem;
@@ -456,6 +472,8 @@ input.menu_search:focus {
 
 .editing-item:hover{
   background-color: #ffffff;
+  color: black;
+  padding: 3px;
 }
 
 .sidebar_button {

diff --git a/src/js/display.js b/src/js/display.js
@@ -82,7 +82,7 @@ export default class Display {
          * @type {object}
          */
         this.colorToRgbMapping = {
-            'aliceblue': [240, 248, 255],
+            'Aliceblue': [240, 248, 255],
             'antiquewhite': [250, 235, 215],
             'aqua': [0, 255, 255],
             'aquamarine': [127, 255, 212],
@@ -102,7 +102,7 @@ export default class Display {
             'cornflowerblue': [100, 149, 237],
             'cornsilk': [255, 248, 220],
             'crimson': [220, 20, 60],
-            'cyan': [0, 255, 255],
+            'Cyan': [0, 255, 255],
             'darkblue': [0, 0, 139],
             'darkcyan': [0, 139, 139],
             'darkgoldenrod': [184, 134, 11],
@@ -135,10 +135,10 @@ export default class Display {
             'ghostwhite': [248, 248, 255],
             'gold': [255, 215, 0],
             'goldenrod': [218, 165, 32],
-            'gray': [128, 128, 128],
-            'green': [0, 128, 0],
+            'Gray': [128, 128, 128],
+            'Green': [0, 128, 0],
             'greenyellow': [173, 255, 47],
-            'grey': [128, 128, 128],
+            'Grey': [128, 128, 128],
             'honeydew': [240, 255, 240],
             'hotpink': [255, 105, 180],
             'indianred': [205, 92, 92],
@@ -196,10 +196,10 @@ export default class Display {
             'palevioletred': [219, 112, 147],
             'papayawhip': [255, 239, 213],
             'peachpuff': [255, 218, 185],
-            'peru': [205, 133, 63],
-            'pink': [255, 192, 203],
+            'Brown': [205, 133, 63],
+            'Pink': [255, 192, 203],
             'plum': [221, 160, 221],
-            'powderblue': [176, 224, 230],
+            'Powder blue': [176, 224, 230],
             'purple': [128, 0, 128],
             'rebeccapurple': [102, 51, 153],
             'red': [255, 0, 0],
@@ -211,24 +211,24 @@ export default class Display {
             'seagreen': [46, 139, 87],
             'seashell': [255, 245, 238],
             'sienna': [160, 82, 45],
-            'silver': [192, 192, 192],
+            'Silver': [192, 192, 192],
             'skyblue': [135, 206, 235],
-            'slateblue': [106, 90, 205],
+            'Slate blue': [106, 90, 205],
             'slategray': [112, 128, 144],
             'slategrey': [112, 128, 144],
             'snow': [255, 250, 250],
             'springgreen': [0, 255, 127],
-            'steelblue': [70, 130, 180],
+            'Steel blue': [70, 130, 180],
             'tan': [210, 180, 140],
             'teal': [0, 128, 128],
             'thistle': [216, 191, 216],
-            'tomato': [255, 99, 71],
+            'Tomato': [255, 99, 71],
             'turquoise': [64, 224, 208],
             'violet': [238, 130, 238],
             'wheat': [245, 222, 179],
             'white': [255, 255, 255],
             'whitesmoke': [245, 245, 245],
-            'yellow': [255, 255, 0],
+            'Yellow': [255, 255, 0],
             'yellowgreen': [154, 205, 50]
         }
 

diff --git a/src/js/molecules/color.js b/src/js/molecules/color.js
@@ -28,7 +28,7 @@ export default class Color extends Atom {
          * The color options to choose from
          * @type {array}
          */
-        this.colorOptions = ["blue", "green", "pink", "black", "gray", "silver"]
+        this.colorOptions = ['Powder blue','Tomato','Steel blue','Yellow','Brown','Cyan', "Green", "Pink", "Gray", "Silver"]
 
         /**
          * The index of the currently selected color option.
@@ -66,7 +66,9 @@ export default class Color extends Atom {
      */ 
     updateSidebar(){
         const list = super.updateSidebar()
-        this.createDropDown(list, this, this.colorOptions, this.selectedColorIndex, "Color", (index)=>{this.changeColor(index)})
+        const dropdown= document.createElement('div')
+        list.appendChild(dropdown)
+        this.createDropDown(dropdown, this, this.colorOptions, this.selectedColorIndex, "Color", (index)=>{this.changeColor(index)})
     }
 
     /**

diff --git a/src/js/prototypes/atom.js b/src/js/prototypes/atom.js
@@ -420,9 +420,11 @@ export default class Atom {
             sideBar.removeChild(sideBar.firstChild)
         }
 
+        //adds the name of the molecule to sideBar
         var name2 = document.createElement('p')
         name2.textContent = this.name
         sideBar.appendChild(name2)
+        name2.setAttribute('class','molecule_title')
 
         //add the name as of project title  -- to the top bar -- permanently
         if (this.atomType == 'Molecule' ){