EZP-29816: Make priority column in children list more prominent (ezsy…

…stems#214)
GrabowskiM · Sep 30, 2019 · bd5289d · bd5289d
1 parent e75d9c8
commit bd5289d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 22 deletions.
diff --git a/Resources/public/scss/modules/sub-items-list/_table.view.item.scss b/Resources/public/scss/modules/sub-items-list/_table.view.item.scss
@@ -36,7 +36,7 @@
             border-top: calculateRem(1px) solid $ez-ground-primary;
             line-height: 0;
             padding-top: calculateRem(16px);
-            margin-top: -0.5px;     // Fixes borders alignment on Safari and Edge
+            margin-top: -0.5px; // Fixes borders alignment on Safari and Edge
         }
 
         &--icon {
@@ -69,7 +69,7 @@
             height: calculateRem(47px);
             width: calculateRem(70px);
             padding: 0;
-            margin-top: -0.5px;     // Fixes borders alignment on Safari and Edge
+            margin-top: -0.5px; // Fixes borders alignment on Safari and Edge
         }
     }
 
@@ -79,20 +79,6 @@
         &--input {
             width: 7ch;
         }
-
-        &--disabled {
-            position: relative;
-
-            &:before {
-                position: absolute;
-                z-index: 2;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                content: '';
-            }
-        }
     }
 
     &__priority-wrapper {
@@ -109,15 +95,38 @@
     &__priority-value {
         max-width: 100%;
         height: calculateRem(40px);
-        border: calculateRem(1px) solid #b1d2e0;
+        border: calculateRem(1px) solid $ez-color-secondary;
         margin: calculateRem(2px) 0;
         padding: 0 calculateRem(10px);
 
-        &[disabled] {
-            border: 0 none;
-            background: transparent;
+        &[readonly] {
+            border-color: $ez-ground-base-dark;
+            background-color: $ez-white;
+            color: $ez-black;
             cursor: pointer;
         }
+
+        &[readonly]::-webkit-outer-spin-button,
+        &[readonly]::-webkit-inner-spin-button {
+            opacity: 0;
+        }
+
+        &[readonly]:hover::-webkit-outer-spin-button,
+        &[readonly]:hover::-webkit-inner-spin-button {
+            opacity: 1;
+        }
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            opacity: 1;
+        }
+
+        &[readonly] {
+            -webkit-appearance: textfield;
+        }
+        &[readonly]:hover {
+            -webkit-appearance: number-input;
+        }
     }
 
     &__btn {

diff --git a/src/modules/sub-items/components/table-view/table.view.item.component.js b/src/modules/sub-items/components/table-view/table.view.item.component.js
@@ -121,11 +121,10 @@ export default class TableViewItemComponent extends PureComponent {
         }
 
         if (!this.state.priorityInputEnabled) {
-            inputAttrs.disabled = true;
+            inputAttrs.readOnly = true;
             delete inputAttrs.defaultValue;
             inputAttrs.value = this.state.priorityValue;
             priorityWrapperAttrs.onClick = this.enablePriorityInput;
-            priorityWrapperAttrs.className = 'c-table-view-item__inner-wrapper c-table-view-item__inner-wrapper--disabled';
             innerWrapperAttrs.hidden = true;
         }