diff --git a/resources/www/admin/styles/main.scss b/resources/www/admin/styles/main.scss index cde6eec71f..1ee2799b96 100644 --- a/resources/www/admin/styles/main.scss +++ b/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; } } diff --git a/resources/www/common/images/icons/arrow.png b/resources/www/common/images/icons/arrow.png new file mode 100644 index 0000000000..b2c1574217 Binary files /dev/null and b/resources/www/common/images/icons/arrow.png differ diff --git a/resources/www/common/images/icons/cross-white.png b/resources/www/common/images/icons/cross-white.png new file mode 100644 index 0000000000..9804aa4409 Binary files /dev/null and b/resources/www/common/images/icons/cross-white.png differ diff --git a/templates/web/admin/subdefs.html.twig b/templates/web/admin/subdefs.html.twig index fe26b7645c..d96e1be51f 100644 --- a/templates/web/admin/subdefs.html.twig +++ b/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 @@
- +
+ +
- +
+ +
- +
+ +
- +
+ +
diff --git a/templates/web/admin/users.html.twig b/templates/web/admin/users.html.twig index 75ddf9c849..68c646751f 100644 --- a/templates/web/admin/users.html.twig +++ b/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');