Skip to content

Commit 65e8764

Browse files
AlecRustAlecRust
authored
Tidy modals (hestiacp#2981)
* Use .dialog instead of .u-hidden for initially hiding modals * Upgrade jQuery UI 1.13.0 -> 1.13.2 * Tidy jQuery UI CSS * Tidy spacing * Better integrate jQuery UI CSS Reduces custom overrides. * Disable resizable modals Which we don't have CSS for. * Further refine dialog CSS
1 parent c74e34b commit 65e8764

33 files changed

+100
-101
lines changed

‎web/css/dependencies/jquery-ui.custom.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/css/src/dependencies/jquery-ui.custom.css‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
/*!
2-
* JQuery UI Custom + few changes
2+
* jQuery UI v1.13.2 + few changes
33
*/
4+
5+
/* Dialog */
46
.ui-dialog {
57
position: absolute;
68
top: 0;
79
left: 0;
810
padding: .2em;
911
outline: 0;
10-
z-index: 1000 !important;
1112
}
1213
.ui-dialog .ui-dialog-titlebar {
1314
padding: .4em 1em;
@@ -90,6 +91,8 @@
9091
left: 0;
9192
top: 0;
9293
}
94+
95+
/* Tabs */
9396
.ui-tabs {
9497
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
9598
padding: .2em;
@@ -131,20 +134,35 @@
131134
padding: 1em 1.4em;
132135
background: none;
133136
}
134-
.ui-dialog-titlebar-close{
135-
display: none !important;
136-
}
137137

138-
.ui-tabs-panel{
139-
clear:both !important;
138+
/* Layout helpers */
139+
.ui-helper-clearfix:before,
140+
.ui-helper-clearfix:after {
141+
content: "";
142+
display: table;
143+
border-collapse: collapse;
144+
}
145+
.ui-helper-clearfix:after {
146+
clear: both;
140147
}
141148

149+
/* Overlays */
142150
.ui-widget-overlay {
143-
background-color: rgba(0,0,0,0.9);
144-
height: 100%;
145-
width:100%;
146-
z-index: 999 !important;
147-
position: absolute;
148-
top:0px;
149-
left:0px;
150-
}
151+
position: fixed;
152+
top: 0;
153+
left: 0;
154+
width: 100%;
155+
height: 100%;
156+
}
157+
158+
/* NOTE: Custom changes follow */
159+
160+
/* Hide the default close button in dialog header */
161+
.ui-dialog-titlebar-close {
162+
display: none;
163+
}
164+
165+
/* Set high z-index for dialog to override .l-header */
166+
.ui-front {
167+
z-index: 1000;
168+
}

‎web/css/src/themes/dark.css‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1304,8 +1304,7 @@ form#vstobjects.suspended {
13041304
}
13051305

13061306
.ui-dialog .ui-dialog-buttonpane {
1307-
border-color: #404040 !important;
1308-
background-color: #252525 !important;
1307+
border-top: 1px solid #404040 !important;
13091308
}
13101309

13111310
.shortcuts {
@@ -1432,18 +1431,6 @@ form#vstobjects.suspended {
14321431
font-weight: 600;
14331432
}
14341433

1435-
.ui-dialog-buttonpane {
1436-
1437-
}
1438-
1439-
.ui-widget {
1440-
1441-
}
1442-
1443-
.ui-widget-overlay {
1444-
1445-
}
1446-
14471434
.helper-container {
14481435
box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
14491436
border: 1px solid #606060;

‎web/css/src/themes/default.css‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2530,15 +2530,22 @@ td.hint {
25302530

25312531
.ftp-path-prefix { padding-top: 12px; font-size: 0.8rem; color: #555; }
25322532

2533+
.dialog {
2534+
display: none;
2535+
}
2536+
25332537
.ui-dialog .ui-dialog-buttonpane button {
2538+
margin-bottom: 4px;
25342539
box-shadow:
25352540
0 1px 4px rgb(0 0 0 / 20%),
25362541
inset 0 0 1px #fff,
25372542
inset 0 0 3px rgb(255 255 255 / 50%) !important;
25382543
}
25392544

25402545
.ui-dialog .ui-dialog-buttonpane {
2541-
margin-bottom: -6px !important;
2546+
border-color: #fff !important;
2547+
box-shadow: inset 0 0 2px rgb(0 0 0 / 25%);
2548+
margin-top: 0 !important;
25422549
padding: 0 !important;
25432550
}
25442551

@@ -3549,23 +3556,13 @@ form#vstobjects.suspended {
35493556
font-weight: 500;
35503557
}
35513558

3552-
.ui-dialog-buttonpane {
3553-
border-color: #fff !important;
3554-
box-shadow: inset 0 0 2px rgb(0 0 0 / 25%);
3555-
border-bottom: 1px solid #fff !important;
3556-
background: #e0e0e0;
3557-
margin-top: 0 !important;
3558-
padding-top: 0 !important;
3559-
}
3560-
35613559
.ui-widget {
3562-
font-size: 0.85rem !important;
3560+
font-size: 0.85rem;
35633561
}
35643562

35653563
.ui-widget-overlay {
3566-
opacity: 0.8 !important;
3567-
background: rgb(10 10 10 / 90%) !important;
3568-
position: fixed !important;
3564+
opacity: 0.8;
3565+
background: rgb(10 10 10 / 90%);
35693566
}
35703567

35713568
.helper-container {

‎web/css/themes/dark.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/css/themes/default.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/js/events.js‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ VE.core.dispatch = function(evt, elm, event_type) {
7575
VE.callbacks.click.do_suspend = function(evt, elm) {
7676
var ref = elm.hasClass('actions-panel') ? elm : elm.parents('.actions-panel');
7777
var url = $('input[name="suspend_url"]', ref).val();
78-
var dialog_elm = ref.find('.confirmation-text-suspention');
78+
var dialog_elm = ref.find('.js-confirm-dialog-suspend');
7979
VE.helpers.createConfirmationDialog(dialog_elm, $(elm).parent().attr('title'), url);
8080
}
8181

@@ -85,7 +85,7 @@ VE.callbacks.click.do_suspend = function(evt, elm) {
8585
VE.callbacks.click.do_unsuspend = function(evt, elm) {
8686
var ref = elm.hasClass('actions-panel') ? elm : elm.parents('.actions-panel');
8787
var url = $('input[name="unsuspend_url"]', ref).val();
88-
var dialog_elm = ref.find('.confirmation-text-suspention');
88+
var dialog_elm = ref.find('.js-confirm-dialog-suspend');
8989
VE.helpers.createConfirmationDialog(dialog_elm, $(elm).parent().attr('title'), url);
9090
}
9191

@@ -95,21 +95,21 @@ VE.callbacks.click.do_unsuspend = function(evt, elm) {
9595
VE.callbacks.click.do_delete = function(evt, elm) {
9696
var ref = elm.hasClass('actions-panel') ? elm : elm.parents('.actions-panel');
9797
var url = $('input[name="delete_url"]', ref).val();
98-
var dialog_elm = ref.find('.confirmation-text-delete');
98+
var dialog_elm = ref.find('.js-confirm-dialog-delete');
9999
VE.helpers.createConfirmationDialog(dialog_elm, $(elm).parent().attr('title'), url);
100100
}
101101

102102
VE.callbacks.click.do_servicerestart = function(evt, elm) {
103103
var ref = elm.hasClass('actions-panel') ? elm : elm.parents('.actions-panel');
104104
var url = $('input[name="servicerestart_url"]', ref).val();
105-
var dialog_elm = ref.find('.confirmation-text-servicerestart');
105+
var dialog_elm = ref.find('.js-confirm-dialog-servicerestart');
106106
VE.helpers.createConfirmationDialog(dialog_elm, $(elm).parent().attr('title'), url);
107107
}
108108

109109
VE.callbacks.click.do_servicestop = function(evt, elm) {
110110
var ref = elm.hasClass('actions-panel') ? elm : elm.parents('.actions-panel');
111111
var url = $('input[name="servicestop_url"]', ref).val();
112-
var dialog_elm = ref.find('.confirmation-text-servicestop');
112+
var dialog_elm = ref.find('.js-confirm-dialog-servicestop');
113113
VE.helpers.createConfirmationDialog(dialog_elm, $(elm).parent().attr('title'), url);
114114
}
115115

@@ -148,10 +148,6 @@ VE.helpers.createConfirmationDialog = function(elm, dialog_title, confirmed_loca
148148
.find(".ui-button")
149149
.eq(1) // the first button
150150
.addClass("cancel");
151-
$(this).closest(".ui-dialog")
152-
.find(".ui-dialog-content:first")
153-
.removeClass('u-hidden');
154-
155151
}
156152
}
157153

‎web/js/init.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ $(document).ready(function(){
162162
shortcut.add("Ctrl+Backspace", function(){
163163
var redirect = $('a.ui-button#btn-back').attr('href')
164164
if(VE.tmp.form_changed && redirect){
165-
VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', redirect);
165+
VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', redirect);
166166
} else if($('form#vstobjects .button.cancel')[0]){
167167
location.href=$('form#vstobjects input.cancel').attr('onclick').replace("location.href='", "").replace("'","");
168168
} else if(redirect){
@@ -216,7 +216,7 @@ $(document).ready(function(){
216216
return;
217217
}
218218
if(VE.tmp.form_changed){
219-
VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
219+
VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
220220
} else {
221221
location.href=target.attr('href');
222222
}
@@ -234,7 +234,7 @@ $(document).ready(function(){
234234
return;
235235
}
236236
if(VE.tmp.form_changed){
237-
VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
237+
VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
238238
} else {
239239
location.href=target.attr('href');
240240
}
@@ -252,7 +252,7 @@ $(document).ready(function(){
252252
return;
253253
}
254254
if(VE.tmp.form_changed){
255-
VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
255+
VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
256256
} else {
257257
location.href=target.attr('href');
258258
}
@@ -270,7 +270,7 @@ $(document).ready(function(){
270270
return;
271271
}
272272
if(VE.tmp.form_changed){
273-
VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
273+
VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
274274
} else {
275275
location.href=target.attr('href');
276276
}
@@ -288,7 +288,7 @@ $(document).ready(function(){
288288
return;
289289
}
290290
if(VE.tmp.form_changed){
291-
VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
291+
VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
292292
} else {
293293
location.href=target.attr('href');
294294
}
@@ -306,7 +306,7 @@ $(document).ready(function(){
306306
return;
307307
}
308308
if(VE.tmp.form_changed){
309-
VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
309+
VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
310310
} else {
311311
location.href=target.attr('href');
312312
}
@@ -324,7 +324,7 @@ $(document).ready(function(){
324324
return;
325325
}
326326
if(VE.tmp.form_changed){
327-
VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
327+
VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
328328
} else {
329329
location.href=target.attr('href');
330330
}
@@ -512,7 +512,7 @@ $(document).ready(function(){
512512

513513
if(VE.tmp.form_changed){
514514
if(!$('.ui-dialog').is(':visible')){
515-
VE.helpers.createConfirmationDialog($('.confirmation-text-redirect')[0], '', $(VE.navigation.state.menu_selector + '.focus a').attr('href'));
515+
VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect')[0], '', $(VE.navigation.state.menu_selector + '.focus a').attr('href'));
516516
} else { // if dialog is opened - submitting confirm box by "enter" shortcut
517517
$('.ui-dialog button.submit').click();
518518
}

‎web/js/jquery/jquery-ui.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/templates/footer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414
}
1515
?>
16-
<div title="<?=_('Confirmation');?>" class="confirmation-text-redirect u-hidden">
16+
<div title="<?=_('Confirmation');?>" class="dialog js-confirm-dialog-redirect">
1717
<p class="confirmation"><?=_('LEAVE_PAGE_CONFIRMATION')?></p>
1818
</div>
1919

0 commit comments

Comments
 (0)