Updated cursor for canvas and when worker is busy

* Added hover style when mouse over slider value box
* CSS cleanup

src/app_context.ts

@@ -435,7 +435,7 @@ export class AppContext {
 
     public draw() {
         Renderer.Get.update();
-        this._ui.tick();
+        this._ui.tick(this._workerController.isBusy());
         Renderer.Get.draw();
     }
 }

src/ui/elements/label.ts

@@ -15,13 +15,13 @@ export class LabelElement {
     public generateHTML(): string {
         if (this._description === undefined) {
             return `
-                <div class="prop-left" id="${this._id}">
+                <div class="prop-key-container" id="${this._id}">
                     ${this._text}
                 </div>
             `;
         } else {
             return `
-                <div class="prop-left" id="${this._id}">
+                <div class="prop-key-container" id="${this._id}">
                     <abbr title="${this._description}">${this._text}</abbr>
                 </div>
             `;
@@ -33,9 +33,9 @@ export class LabelElement {
         ASSERT(element !== null);
 
         if (isEnabled) {
-            element.classList.remove('prop-left-disabled');
+            element.classList.remove('prop-key-container-disabled');
         } else {
-            element.classList.add('prop-left-disabled');
+            element.classList.add('prop-key-container-disabled');
         }
     }
 }

src/ui/elements/labelled_element.ts

@@ -13,7 +13,7 @@ export abstract class LabelledElement<Type> extends BaseUIElement<Type> {
     public generateHTML() {
         return `
             ${this._labelElement.generateHTML()}
-            <div class="prop-right">
+            <div class="prop-value-container">
                 ${this.generateInnerHTML()}
             </div>
         `;

src/ui/layout.ts

@@ -311,7 +311,13 @@ export class UI {
         this._ui.assign.elements.fallable.addDescription('Read tooltips for more info');
     }
 
-    public tick() {
+    public tick(isBusy: boolean) {
+        if (isBusy) {
+            document.body.style.cursor = 'progress';
+        } else {
+            document.body.style.cursor = 'default';
+        }
+
         for (const groupName in this._toolbarLeftDull) {
             const toolbarGroup = this._toolbarLeftDull[groupName];
             for (const toolbarItem of toolbarGroup.elementsOrder) {
@@ -332,15 +338,15 @@ export class UI {
         for (const groupName in this._ui) {
             const group = this._uiDull[groupName];
             groupHTML[groupName] = `
-            <div class="item item-body">
-                <div class="prop-right">
+            <div class="property">
+                <div class="prop-value-container">
                     <div class="h-div">
                     </div>
                 </div>
                 <div class="group-heading">
                     ${group.label.toUpperCase()}
                 </div>
-                <div class="prop-right">
+                <div class="prop-value-container">
                     <div class="h-div">
                     </div>
                 </div>
@@ -414,13 +420,13 @@ export class UI {
 
         return `
             ${groupHTML}
-            <div class="item item-body">
-                <div class="prop-right">
+            <div class="property">
+                <div class="prop-value-container">
                     ${group.submitButton.generateHTML()}
                 </div>
             </div>
-            <div class="item item-body">
-                <div class="prop-right">
+            <div class="property">
+                <div class="prop-value-container">
                     ${group.output.generateHTML()}
                 </div>
             </div>
@@ -430,7 +436,7 @@ export class UI {
 
     private _buildSubcomponent(element: BaseUIElement<any>) {
         return `
-            <div class="item item-body">
+            <div class="property">
                 ${element.generateHTML()}
             </div>
         `;

styles.css

@@ -50,6 +50,7 @@ canvas {
   margin-left: var(--properties-width);
   width: calc(100% - var(--properties-width));
   height: 100%;
+  cursor: crosshair;
 }
 
 .container {
@@ -58,16 +59,20 @@ canvas {
   margin: 10px;
 }
 
-.item {
+.property {
   padding: 0px 0px;
   display: flex;
   flex-direction: row;
   align-items: center;
   color: var(--text-standard);
+  font-size: 85%;
+  margin: 0px 0px;
+  min-height: 30px;
+  padding: 5px 0px;
 }
 
 .group-heading {
-  padding: 0px 0px 0px 0px;
+  padding: 0px 10px;
   color: #303030;
   font-weight: 400;
   font-size: 85%;
@@ -75,28 +80,18 @@ canvas {
 }
 
 
-.prop-left {
+.prop-key-container {
   align-self: center;
   padding: 0px 10px;
   width: 125px;
 }
 
-.prop-left-disabled {
+.prop-key-container-disabled {
   color: var(--text-disabled) !important;
 }
 
-.prop-right {
+.prop-value-container {
   flex-grow: 1;
-  padding: 0px 10px;
-  width: 0px;
-}
-
-
-.item-body {
-  font-size: 85%;
-  margin: 0px 0px;
-  min-height: 30px;
-  padding: 5px 0px;
 }
 
 .item-body-sunken {
@@ -124,6 +119,12 @@ input {
   font-weight: 300;
   color: var(--text-standard);
   outline-color: var(--prop-accent-hovered);
+  border: 1px solid rgb(255, 255, 255, 0.0);
+}
+input:hover:enabled {
+  color: #C6C6C6;
+  border: 1px solid rgb(255, 255, 255, 0.1);
+  background: var(--prop-hovered);
 }
 input:disabled {
   background: var(--prop-disabled);
@@ -148,11 +149,13 @@ select {
   max-width: 100%;
   outline-color: var(--prop-accent-hovered);
   opacity: 1.0;
+  cursor: inherit;
 }
 select:hover:enabled {
   color: #C6C6C6;
   background: var(--prop-hovered);
   border: 1px solid rgb(255, 255, 255, 0.1);
+  cursor: pointer;
 }
 select:disabled {
   background: var(--prop-disabled) !important;
@@ -192,7 +195,7 @@ select:disabled {
 
 .new-slider-disabled {
   background: var(--prop-disabled) !important;
-  cursor: default !important;
+  cursor: inherit !important;
 }
 
 
@@ -211,7 +214,7 @@ select:disabled {
 
 .new-slider-bar-disabled {
   background: var(--prop-accent-disabled) !important;
-  cursor: default !important;
+  cursor: inherit !important;
   border: 1px solid rgb(255, 255, 255, 0.0) !important;
 }
 
@@ -228,7 +231,7 @@ select:disabled {
   position: relative;
   cursor: pointer;
   display: inline-block;
-  width: 100%;
+  width: calc(100% - 2px);
 }
 
 .button:hover {
@@ -252,7 +255,7 @@ select:disabled {
 }
 
 .button-disabled {
-  cursor: default !important;
+  cursor: inherit !important;
   background: var(--prop-accent-disabled) !important;
   border: 1px solid rgb(255, 255, 255, 0) !important;
   color: #808080 !important;
@@ -293,7 +296,7 @@ select:disabled {
 
 .disabled {
   opacity: 0.5;
-  cursor: default !important;
+  cursor: inherit !important;
 }
 
 
@@ -391,6 +394,8 @@ select:disabled {
   flex-direction: row;
   width: 100%;
   justify-content: space-between;
+  cursor: inherit;
+  pointer-events: none;
 }
 
 .toolbar-column {
@@ -420,6 +425,7 @@ select:disabled {
   font-size: 85%;
   background-color: var(--prop-standard);
   border: 1px solid var(--prop-standard);
+  pointer-events: all;
 }
 
 .toolbar-item-hover {
@@ -436,6 +442,7 @@ select:disabled {
 .toolbar-item-disabled {
   background-color: var(--prop-disabled) !important;
   border: 1px solid var(--prop-disabled) !important;
+  cursor: default;
 }
 
 .toolbar-item-active {