refactor dialog for subdef creation and new user

resources/www/admin/styles/main.scss

@@ -232,12 +232,83 @@ div.switch_right.unchecked {
   z-index: 1500;
 }
 
-#template_add_dialog.ui-dialog-content {
-  margin-bottom: 0;
-  margin-top: 8px;
+.dialog_container {
+  #template_add_dialog, #user_add_dialog, #dialog-form {
+    &.ui-dialog-content {
+      margin-bottom: 0;
+      margin-top: 8px;
+    }
+    form {
+      margin-bottom: 10px;
+    }
+    label {
+      font-family: Roboto;
+      font-size: 14px;
+      font-weight: normal;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      color: #1d1d1d;
+    }
+    input[type=text] {
+      width: 94%;
+      background-color: #ffffff;
+      border: solid 1px #979797;
+    }
+  }
 }
 
-.template_add_dialog_container {
+.dialog_container {
+  #dialog-form {
+    .selectdiv {
+      position: relative;
+    }
+    select::-ms-expand {
+      display: none;
+    }
+    .selectdiv:after {
+      content: "";
+      /* background-color: #000; */
+      background-image: url(/assets/common/images/icons/arrow.png);
+      background-position: center;
+      background-size: cover;
+      right: 18px;
+      top: 9px;
+      position: absolute;
+      width: 8px;
+      height: 12px;
+      pointer-events: none;
+    }
+    .selectdiv select {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      display: block;
+      width: 98%;
+      height: 30px;
+      margin: 5px 0px;
+      padding: 0px 8px;
+      line-height: 1.75;
+      -ms-word-break: normal;
+      word-break: normal;
+      border: solid 1px #979797;
+      background-image: linear-gradient(16deg, transparent 50%, transparent 50%),
+      linear-gradient(135deg, transparent, transparent), linear-gradient(to right, #979797, #979797);
+      background-position: calc(100% - 3px) calc(1em + 2px), calc(100% - 4px) calc(1em + 2px), 100% 0;
+      background-size: 5px 5px, 5px 5px, 30px 2.5em;
+      background-repeat: no-repeat;
+      margin-bottom: 20px;
+    }
+    input[type=text] {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.dialog_container {
   .ui-dialog-title {
     font-family: Roboto;
     font-size: 18px;
@@ -253,8 +324,12 @@ div.switch_right.unchecked {
     margin-right: 4px;
   }
   .ui-icon.ui-icon-closethick {
-    background-image: url("/assets/common/images/icons/button-close-gray.png");
+    background-image: url("/assets/common/images/icons/cross-white.png");
     background-position: center;
+    background-size: cover;
+  }
+  .ui-dialog-buttonpane {
+    border-top: solid 1px #979797;
   }
   .ui-dialog-buttonpane .ui-button {
     border-radius: 15px;
@@ -272,30 +347,20 @@ div.switch_right.unchecked {
     min-width: 135px;
     padding-left: 20px;
     padding-right: 20px;
+    margin-left: 10px;
+    margin-right: 10px;
   }
   .ui-dialog-buttonpane .ui-button:nth-child(2) {
     background-color: #4a4a4a;
     color: #FFFFFF;
   }
-  #template_add_dialog {
-    form {
-      margin-bottom: 10px;
-    }
-    label: {
-      font-family: Roboto;
-      font-size: 14px;
-      font-weight: normal;
-      font-style: normal;
-      font-stretch: normal;
-      line-height: normal;
-      letter-spacing: normal;
-      color: #1d1d1d;
-    }
-    #template-add-input {
-      width: 94%;
-      background-color: #ffffff;
-      border: solid 1px #979797;
-    }
+  .ui-button-icon-only {
+    text-indent: -9999px;
+    background: transparent;
+  }
+  .ui-dialog-buttonpane .ui-dialog-buttonset {
+    float: none;
+    text-align: center;
   }
 }
 

templates/web/admin/subdefs.html.twig

@@ -244,12 +244,14 @@
             }
 
 
-            $("#dialog-form").dialog({
+            var subdefCreateDialog = $("#dialog-form").dialog({
                 autoOpen: false,
-                height: 420,
-                width: 300,
+                width: 382,
                 modal: true,
                 buttons: {
+                    Cancel: function () {
+                        $(this).dialog("close");
+                    },
                     "Create a Subdef": function () {
                         var bValid = true;
 
@@ -268,9 +270,6 @@
                             $(this).dialog("close");
                             $('form.subdefs').submit();
                         }
-                    },
-                    Cancel: function () {
-                        $(this).dialog("close");
                     }
                 },
                 close: function () {
@@ -278,6 +277,8 @@
                 }
             });
 
+            subdefCreateDialog.closest('.ui-dialog').addClass('dialog_container');
+
             $("#create-subdef")
             // .button()
                 .click(function () {
@@ -335,28 +336,37 @@
                 <label for="name">{{ 'create_subdef_modal_subdefinition_name' | trans }}</label>
                 <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" value=""/><br/>
                 <label for="accessclass">{{ 'create_subdef_modal_access_class' | trans }}</label>
-                <select name="accessclass" id="accessclass">
-                    <option value="document">{{ 'create_subdef_modal_access_class_document' | trans }}</option>
-                    <option value="preview" selected="selected">{{ 'create_subdef_modal_access_class_preview' | trans }}</option>
-                    <option value="thumbnail">{{ 'create_subdef_modal_access_class_no_restriction' | trans }}</option>
-                </select>
+                <div class="selectdiv">
+                    <select name="accessclass" id="accessclass">
+                        <option value="document">{{ 'create_subdef_modal_access_class_document' | trans }}</option>
+                        <option value="preview"
+                                selected="selected">{{ 'create_subdef_modal_access_class_preview' | trans }}</option>
+                        <option value="thumbnail">{{ 'create_subdef_modal_access_class_no_restriction' | trans }}</option>
+                    </select>
+                </div>
                 <label for="subviewType">{{ 'create_subdef_modal_record_phraseanet_type' | trans }}</label>
-                <select name="subviewType" id="subviewType" onchange="subview_type(this)">
-                    <option>{{ 'Choisir' | trans }}</option>
-                    <option value="image">{{ 'image' | trans }}</option>
-                    <option value="video">{{ 'video' | trans }}</option>
-                    <option value="audio">{{ 'audio' | trans }}</option>
-                    <option value="document">{{ 'document' | trans }}</option>
-                    <option value="flash">{{ 'flash' | trans }}</option>
-                </select>
+                <div class="selectdiv">
+                    <select name="subviewType" id="subviewType" onchange="subview_type(this)">
+                        <option>{{ 'Choisir' | trans }}</option>
+                        <option value="image">{{ 'image' | trans }}</option>
+                        <option value="video">{{ 'video' | trans }}</option>
+                        <option value="audio">{{ 'audio' | trans }}</option>
+                        <option value="document">{{ 'document' | trans }}</option>
+                        <option value="flash">{{ 'flash' | trans }}</option>
+                    </select>
+                </div>
                 <label for="mediaType">{{ 'create_subdef_modal_preview_mediatype' | trans }}</label>
-                <select name="mediaType" id="mediaType" onchange="media_type(this)">
-                    <option>{{ 'Choisir' | trans }}</option>
-                </select>
+                <div class="selectdiv">
+                    <select name="mediaType" id="mediaType" onchange="media_type(this)">
+                        <option>{{ 'Choisir' | trans }}</option>
+                    </select>
+                </div>
                 <label for="presets">{{ 'create_subdef_modal_presets' | trans }}</label>
-                <select name="presets" id="presets">
-                    <option>{{ 'Choisir' | trans }}</option>
-                </select>
+                <div class="selectdiv">
+                    <select name="presets" id="presets">
+                        <option>{{ 'Choisir' | trans }}</option>
+                    </select>
+                </div>
             </fieldset>
         </form>
     </div>

templates/web/admin/users.html.twig

@@ -292,21 +292,23 @@
             });
 
             var buttons = {};
-            buttons[language.create_user] = function () {
-                check_new_user(false);
-            };
             buttons[language.annuler] = function () {
                 $('#user_add_dialog').dialog('close')
             };
+            buttons[language.create_user] = function () {
+                check_new_user(false);
+            };
 
-            $('#user_add_dialog').dialog({
+            var userAddDialog = $('#user_add_dialog').dialog({
                 buttons: buttons,
                 modal: true,
                 resizable: false,
                 draggable: false,
-                width: 500
+                width: 382,
             }).dialog('close');
 
+            userAddDialog.closest('.ui-dialog').addClass('dialog_container');
+
             var buttons = {};
             buttons[language.annuler] = function () {
                 $('#template_add_dialog').dialog('close');
@@ -324,7 +326,7 @@
 
             }).dialog('close');
 
-            templateAddDialog.closest('.ui-dialog').addClass('template_add_dialog_container');
+            templateAddDialog.closest('.ui-dialog').addClass('dialog_container');
 
             function check_new_user(is_template) {
                 var container = is_template ? $('#template_add_dialog') : $('#user_add_dialog');