Just a better design

Author: nikitaeverywhere

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cache-visual-editor",
   "printableName": "Cache Visual Editor",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Visual class editor for InterSystems Caché",
   "main": "index.js",
   "keywords": [

source/client/js/classEditor/card.js

@@ -10,9 +10,19 @@ function getPropertyBlock (prop) {
     let item = block(`item`),
         icon = block(`icon ${ prop["Private"] ? "private" : "public" }`),
         text = block(`label`, `span`),
-        type = prop["Type"] || prop["ReturnType"] || prop["MimeType"] || "";
+        pName = block(`name`, `span`),
+        type = prop["Type"] || prop["ReturnType"] || prop["MimeType"] || "",
+        pTypeText = type ? block("", "span") : null,
+        pType = type ? block(`type`, `span`) : null;
     item.appendChild(icon);
-    text.textContent = `${ prop["Name"] }${ type ? ": " + type : "" }`;
+    pName.textContent = prop["Name"];
+    text.appendChild(pName);
+    if (type) {
+        pTypeText.textContent = ": ";
+        text.appendChild(pTypeText);
+        pType.textContent = type;
+        text.appendChild(pType);
+    }
     item.appendChild(text);
     return item;
 }
@@ -29,7 +39,7 @@ function getBlock (key, data) {
         break;
     }
     for (let prop in data[key]) {
-        section.appendChild(getPropertyBlock(data[key][prop]));
+        body.appendChild(getPropertyBlock(data[key][prop]));
     }
     return section;
 

source/client/scss/classBuilder/card.scss

@@ -6,15 +6,15 @@ $headerIconWidth: 32px;
 .card {
 
     position: relative;
-    @include transition(all .3s ease);
+    @include transition($defaultTransition);
 
     &.package {
 
-        background: #f4efff;
+        background: #fff;
         cursor: pointer;
 
         &:hover {
-            background: #e4ccff;
+            background: $colorP1;
             left: -2px;
             top: -2px;
             padding: $defaultPadding + 2px;
@@ -23,6 +23,7 @@ $headerIconWidth: 32px;
         > .head {
             > .cardIcon {
                 border: 1px solid black;
+                background: $colorP1;
             }
         }
 
@@ -54,49 +55,49 @@ $headerIconWidth: 32px;
             }
 
             &.registered {
-                background: #08f;
+                background: #7DC3FF;
                 &:before {
                     content: "R"
                 }
             }
 
             &.persistent {
-                background: #f90;
+                background: #FFB85F;
                 &:before {
                     content: "P"
                 }
             }
 
             &.serial {
-                background: #df0;
+                background: #EFEC2E;
                 &:before {
                     content: "S"
                 }
             }
 
             &.view {
-                background: #e6f;
+                background: #ED99FF;
                 &:before {
                     content: "V"
                 }
             }
 
             &.datatype {
-                background: #7cf;
+                background: #96E4E2;
                 &:before {
                     content: "T"
                 }
             }
 
             &.stream {
-                background: #0f8;
+                background: #74E8B2;
                 &:before {
                     content: "s"
                 }
             }
 
             &.donotuse {
-                background: #f00;
+                background: $colorP2;
                 &:before {
                     content: "X"
                 }
@@ -132,6 +133,34 @@ $headerIconWidth: 32px;
 
             > .item {
 
+                overflow: hidden;
+                white-space: pre;
+                text-overflow: ellipsis;
+                cursor: pointer;
+                @include transition($defaultTransition);
+
+                &:hover {
+
+                    padding-left: 4px;
+                    background: $colorP1;
+                    border-radius: 3px;
+
+                    .name {
+                        text-decoration: underline;
+                    }
+
+                }
+
+                .type {
+
+                    @include transition($defaultTransition);
+
+                    &:hover {
+                        color: $colorP2;
+                    }
+
+                }
+
             }
 
         }

source/client/scss/const.scss

@@ -5,4 +5,8 @@ $huge: 64px;
 
 $defaultMargin: 5px;
 $defaultPadding: 6px;
-$defaultShadow: 0 1px 3px rgba(0, 0, 0, .4);
+$defaultShadow: 0 1px 3px rgba(0, 0, 0, .4);
+$defaultTransition: all .3s ease;
+
+$colorP1: #FFF5C3;
+$colorP2: #FF5656;