Add support for disabled item lists
authorMatthias Schmidt <gravatronics@live.com>
Sun, 13 Jan 2019 09:20:08 +0000 (10:20 +0100)
committerMatthias Schmidt <gravatronics@live.com>
Sun, 13 Jan 2019 09:27:53 +0000 (10:27 +0100)
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList.js
wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/Static.js
wcfsetup/install/files/style/bootstrap/mixin/input.scss
wcfsetup/install/files/style/ui/itemListInput.scss

index 406fc01c0e6fb894c4102d7be49aa220f26fe171..638fd3e1d003e629b114ae9774634c373328fa9c 100644 (file)
@@ -233,7 +233,7 @@ define(['Core', 'Dictionary', 'Language', 'Dom/Traverse', 'EventKey', 'WoltLabSu
                 */
                _createUI: function(element, options) {
                        var list = elCreate('ol');
-                       list.className = 'inputItemList';
+                       list.className = 'inputItemList' + (element.disabled ? ' disabled' : '');
                        elData(list, 'element-id', element.id);
                        list.addEventListener(WCF_CLICK_EVENT, function(event) {
                                if (event.target === list) {
@@ -464,18 +464,22 @@ define(['Core', 'Dictionary', 'Language', 'Dom/Traverse', 'EventKey', 'WoltLabSu
                        elData(content, 'object-id', value.objectId);
                        if (value.type) elData(content, 'type', value.type);
                        content.textContent = value.value;
-                       
-                       var button = elCreate('a');
-                       button.className = 'icon icon16 fa-times';
-                       button.addEventListener(WCF_CLICK_EVENT, _callbackRemoveItem);
                        listItem.appendChild(content);
-                       listItem.appendChild(button);
+                       
+                       if (!data.element.disabled) {
+                               var button = elCreate('a');
+                               button.className = 'icon icon16 fa-times';
+                               button.addEventListener(WCF_CLICK_EVENT, _callbackRemoveItem);
+                               listItem.appendChild(button);
+                       }
                        
                        data.list.insertBefore(listItem, data.listItem);
                        data.suggestion.addExcludedValue(value.value);
                        data.element.value = '';
                        
-                       this._handleLimit(elementId);
+                       if (!data.element.disabled) {
+                               this._handleLimit(elementId);
+                       }
                        var values = this._syncShadow(data);
                        
                        if (typeof data.options.callbackChange === 'function') {
index 4df183382209c313ede47f7825bef05c6199292f..52bb1ee1962f506e5dfdf8f39b9d85ca02bd8baa 100644 (file)
@@ -203,7 +203,7 @@ define(['Core', 'Dictionary', 'Language', 'Dom/Traverse', 'EventKey', 'Ui/Simple
                 */
                _createUI: function(element, options) {
                        var list = elCreate('ol');
-                       list.className = 'inputItemList';
+                       list.className = 'inputItemList' + (element.disabled ? ' disabled' : '');
                        elData(list, 'element-id', element.id);
                        list.addEventListener(WCF_CLICK_EVENT, function(event) {
                                if (event.target === list) {
@@ -397,17 +397,21 @@ define(['Core', 'Dictionary', 'Language', 'Dom/Traverse', 'EventKey', 'Ui/Simple
                        content.className = 'content';
                        elData(content, 'object-id', value.objectId);
                        content.textContent = value.value;
-                       
-                       var button = elCreate('a');
-                       button.className = 'icon icon16 fa-times';
-                       button.addEventListener(WCF_CLICK_EVENT, _callbackRemoveItem);
                        listItem.appendChild(content);
-                       listItem.appendChild(button);
+                       
+                       if (!data.element.disabled) {
+                               var button = elCreate('a');
+                               button.className = 'icon icon16 fa-times';
+                               button.addEventListener(WCF_CLICK_EVENT, _callbackRemoveItem);
+                               listItem.appendChild(button);
+                       }
                        
                        data.list.insertBefore(listItem, data.listItem);
                        data.element.value = '';
                        
-                       this._handleLimit(elementId);
+                       if (!data.element.disabled) {
+                               this._handleLimit(elementId);
+                       }
                        var values = this._syncShadow(data);
                        
                        if (typeof data.options.callbackChange === 'function') {
index f7338f2a770676e0a89f028feae49735189e4be1..378d1800726100da77f3d5b5ddb2a5ff7b3f8721 100644 (file)
@@ -19,7 +19,8 @@
                color: $wcfInputTextActive;
        }
        
-       &[disabled] {
+       &[disabled],
+       &.disabled {
                background-color: $wcfInputDisabledBackground !important;
                border-color: $wcfInputDisabledBorder !important;
                color: $wcfInputDisabledText !important;
index 1c60d4902a052c303efcfbcc9a3fb3c2b3da6efe..a8b0718c7c4d33cb89135455e22999be6addc9f3 100644 (file)
                        color: inherit;
                }
                
-               &.active,
-               &:hover {
+               &.active {
+                       background-color: $wcfButtonBackgroundActive;
+                       color: $wcfButtonTextActive;
+               }
+       }
+       
+       &:not(.disabled) {
+               > item:hover {
                        background-color: $wcfButtonBackgroundActive;
                        color: $wcfButtonTextActive;
                }
-               
        }
        
        > .input > input {