Selectize fixes

opendatateam · Jan 25, 2019 · 4ae1c42 · 4ae1c42
1 parent 59b93cb
commit 4ae1c42
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 218 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Protect membership accept route against flood [#1984](https://github.com/opendatateam/udata/pull/1984)
 - Ensure compatibility with IE11 and Firefox ESR [#1990](https://github.com/opendatateam/udata/pull/1990)
 - Lots of fixes on the resource form. Be explicit about uploading a new file [#1991](https://github.com/opendatateam/udata/pull/1991)
+- Centralize `selectize` handling and style in `base-completer` and apply some fixes [1992](https://github.com/opendatateam/udata/pull/1992)
 
 ## 1.6.2 (2018-11-05)
 

diff --git a/js/components/form/base-completer.vue b/js/components/form/base-completer.vue
@@ -115,3 +115,97 @@ export default {
     }
 };
 </script>
+
+<style lang="less">
+@import '~less/admin/variables';
+@import '~bootstrap/less/mixins';
+@import '~selectize/src/less/selectize.bootstrap3.less';
+
+@selectize-color-item: @label-primary-bg;
+@selectize-color-item-text: @label-color;
+@selectize-color-item-active-text: @label-link-hover-color;
+@selectize-padding-item-x: 5px;
+@selectize-padding-item-y: 2px;
+
+.selectize-control {
+    .selectize-input {
+        border-radius: 0;
+
+        // Tags
+        .multi& > div {
+            -webkit-border-radius: 0;
+               -moz-border-radius: 0;
+                    border-radius: 0;
+        }
+
+        .card {
+            margin: 0;
+        }
+
+        &.focus {
+            border-color: #3c8dbc;
+            -webkit-box-shadow: none;
+                    box-shadow: none;
+        }
+
+        .form-group.has-error & {
+            border-color: @red;
+        }
+
+        .form-group.has-success & {
+            border-color: @green;
+        }
+    }
+
+    .selectize-dropdown .selectize-option {
+        .logo {
+            width: 25px;
+            height: 25px;
+            border: 1px solid @gray-lighter;
+            margin-right: 5px;
+            img {
+                width: 100%;
+                max-width: 100%;
+                max-height: 100%;
+            }
+        }
+
+    }
+
+    .selectize-dropdown-content > .create {
+        padding: @selectize-padding-dropdown-item-y * 2 @selectize-padding-dropdown-item-x;
+    }
+
+    &.plugin-remove_button .card-input {
+        position: relative;
+        .card {
+            margin-right: 10px;
+        }
+
+        a.remove {
+            position: absolute;
+            top: 0;
+            right: 4px;
+        }
+    }
+
+    .card-input {
+        display: block;
+    }
+
+    .locked, .locked.input-active {
+        cursor: not-allowed !important;
+        background-color: #DCDCDC !important;
+        opacity: 1;
+    }
+
+    a.remove {
+        color: white;
+        margin-left: 4px;
+
+        &:hover {
+            color: red;
+        }
+    }
+}
+</style>
diff --git a/js/components/form/format-completer.vue b/js/components/form/format-completer.vue
@@ -11,7 +11,6 @@ export default {
     selectize: {
         maxItems: 1,
         valueField: 'text',
-        plugins: ['remove_button'],
         create: function(input) {
             return {
                 value: input,

diff --git a/less/admin/forms.less b/less/admin/forms.less
@@ -1,89 +1,3 @@
-@import "~selectize/src/less/selectize.bootstrap3.less";
-
-@selectize-color-item: @label-primary-bg;
-@selectize-color-item-text: @label-color;
-@selectize-color-item-active-text: @label-link-hover-color;
-@selectize-padding-item-x: 5px;
-@selectize-padding-item-y: 2px;
-
-.selectize-control {
-    .selectize-input {
-        border-radius: 0;
-
-        // Tags
-        .multi& > div {
-            -webkit-border-radius: 0;
-               -moz-border-radius: 0;
-                    border-radius: 0;
-        }
-
-        .card {
-            margin: 0;
-        }
-
-        &.focus {
-            border-color: #3c8dbc;
-            -webkit-box-shadow: none;
-                    box-shadow: none;
-        }
-
-        .form-group.has-error & {
-            border-color: @red;
-        }
-
-        .form-group.has-success & {
-            border-color: @green;
-        }
-    }
-
-    .selectize-dropdown .selectize-option {
-        .logo {
-            width: 25px;
-            height: 25px;
-            border: 1px solid @gray-lighter;
-            margin-right: 5px;
-            img {
-                width: 100%;
-                max-width: 100%;
-                max-height: 100%;
-            }
-        }
-    }
-
-    &.plugin-remove_button .card-input {
-        position: relative;
-        .card {
-            margin-right: 10px;
-        }
-
-        a.remove {
-            position: absolute;
-            top: 0;
-            right: 4px;
-        }
-    }
-
-    .card-input {
-        display: block;
-    }
-
-    .locked, .locked.input-active {
-        cursor: not-allowed !important;
-        background-color: #DCDCDC !important;
-        opacity: 1;
-    }
-
-    a.remove {
-        color: white;
-        margin-left: 4px;
-
-        &:hover {
-            color: red;
-        }
-    }
-}
-
-
 section.form {
     padding: 30px 0;
     position: relative;
@@ -128,134 +42,3 @@ form {
         font-weight: bold;
     }
 }
-
-
-/**
- * Image picker and jCrop styling
- */
-// .image-cropper {
-//     img {
-//         max-width: none !important;
-//     }
-
-//     .crop-pane {
-//         min-height: 200px;
-//         max-height: 600px;
-
-//         .jcrop-holder {
-//             margin: auto;
-
-//             border: 1px solid black;
-
-//             -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-//                -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-//                     box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-//         }
-
-//         &.centered .jcrop-holder {
-//             :not(.cropper) {
-//                 display: none;
-//             }
-
-//             .cropper {
-//                 opacity: 1 !important;
-//             }
-//         }
-//     }
-
-//     .preview-pane {
-
-//         /* The Javascript code will set the aspect ratio of the crop
-//            area based on the size of the thumbnail preview,
-//            specified here */
-//         .preview-container {
-//             overflow: hidden;
-//             border: 1px solid black;
-//             margin-bottom: 15px;
-
-//             -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-//                -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-//                     box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-
-//             &.centered {
-//                 vertical-align: middle;
-//                 text-align: center;
-
-//                 > img {
-//                     max-width: 100%;
-//                     max-height: 100%;
-//                 }
-//             }
-//         }
-//     }
-// }
-
-// .uploader {
-//     .drop-pane {
-//         padding: 15px;
-//         margin: 15px 0;
-//         border: 5px dashed @gray-light; // lighten(@gray, 10%);
-
-//         &.drop-active {
-//             border-color: blue;
-//         }
-//     }
-// }
-
-// .form-upload {
-//     color: lighten(@gray, 5%);
-
-//     .btn-file {
-//         color: lighten(@gray, 10%);
-//     }
-// }
-
-
-// .image-picker {
-//     color: lighten(@gray, 5%);
-
-//     .btn-file {
-//         color: lighten(@gray, 10%);
-//     }
-
-//     .modal-body.over & {
-//         border: 5px dashed @gray-lighter;
-//     }
-// }
-
-// .image-picker-field {
-//     .image-picker-preview {
-//         .pull-left();
-//         width: 100px;
-//         height: 100px;
-
-//         margin-right: 10px;
-
-//         img {
-//             max-width: 100%;
-//             max-height: 100%;
-//         }
-//     }
-// }
-
-
-// .btn-file {
-//     position: relative;
-//     overflow: hidden;
-
-//     input[type=file] {
-//         position: absolute;
-//         top: 0;
-//         right: 0;
-//         min-width: 100%;
-//         min-height: 100%;
-//         font-size: 100px;
-//         text-align: right;
-//         filter: alpha(opacity=0);
-//         opacity: 0;
-//         outline: none;
-//         background: white;
-//         cursor: inherit;
-//         display: block;
-//     }
-// }