From 18d08994b29c977d6a24a23be07ee1918176ded8 Mon Sep 17 00:00:00 2001 From: Mike Ng Date: Fri, 1 Jun 2018 15:33:06 +0400 Subject: [PATCH] refactor dialog for subdef creation and new user --- resources/www/admin/styles/main.scss | 113 ++++++++++++++---- resources/www/common/images/icons/arrow.png | Bin 0 -> 233 bytes .../www/common/images/icons/cross-white.png | Bin 0 -> 626 bytes templates/web/admin/subdefs.html.twig | 60 ++++++---- templates/web/admin/users.html.twig | 14 ++- 5 files changed, 132 insertions(+), 55 deletions(-) create mode 100644 resources/www/common/images/icons/arrow.png create mode 100644 resources/www/common/images/icons/cross-white.png 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 0000000000000000000000000000000000000000..b2c15742170f29781edc5613331a9a53d182db99 GIT binary patch literal 233 zcmeAS@N?(olHy`uVBq!ia0vp^96-#+!N$PAm>QT1WHT@p2e~^jtUD+363AKX>Eak7 zA(=bDSIE^sprvx@ori1h`$p_^4!f7QW7gyww}t=qwkX7!+TXP`%IadOcyB%FcgK~I z-b3#B8{0zIDp$MwQ}g~A=`1u;LU6{8#Vtv!m0PslH6`R7Z81>Xlpp$ZzeDvD72}KQ zHED+z7|dzAv1rFX5q3q1$j>!y&VtPHo3;f1buyY^e9QR~_nnH~_iCbRHx`=CQJyzN h^4IrFRV$^~P0VZdZacVOUS})F@t&@JF6*2UngIIZTP6Si literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..9804aa4409b938d31849b15505dcc2904b96d907 GIT binary patch literal 626 zcmV-&0*(ENP)Px%EJ;K`R9FeERzXt3Fbr(MS31*gz_rsq0e@<9g?IEZ4PC){)`}b}EuJBk<=xd< zNg8&$XdI8n8F|iz2^W?;olYMHxnB?uOx$j__i37j!so^S9(GCs0pQ~}exA?gqQ|Pg z8h-@7IoLK4R?MB<|Ou!$Kbi8>WT`>gtl9x6+Ln%@#@Vb6np_!LAyK2m4i8su0g_n~u&uFGqcT9zts>w(!T~QdfDMd{C~*A7Aohc;_Ia*X4G`2bLY&UM z!o;Qw5S%fRElkbud%#VdGsS_&cO?2BO0_iZb|70=MHy$h(KOI2tm0d+G{<>i;2E(; zxW&LDWS+v$TeMcc1rXL&`$D~S#)x$w0zOmN8%yg0h(9mzU+YN!2jubv2C4lDN&o-= M07*qoM6N<$f^ruQ8UO$Q literal 0 HcmV?d00001 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');