Skip to content

Commit

Permalink
Merge pull request openwrt#7153 from TDT-AG/pr/20240607-luci-base
Browse files Browse the repository at this point in the history 
treewide: add new css class button-row
  • Loading branch information
@feckert
feckert authored Jul 17, 2024
2 parents ff4dead + 6d2657f commit a0dcba5
Show file tree
Hide file tree
Showing 8 changed files with 180 additions and 133 deletions.
4 changes: 2 additions & 2 deletions applications/luci-app-opkg/htdocs/luci-static/resources/view/opkg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -886,7 +886,7 @@ function handleConfig(ev)
}, '%h'.format(conf[file])));
});

body.push(E('div', { 'class': 'right' }, [
body.push(E('div', { 'class': 'button-row' }, [
E('div', {
'class': 'btn cbi-button-neutral',
'click': ui.hideModal
Expand Down Expand Up @@ -1012,7 +1012,7 @@ function handleOpkg(ev)
if (res.code !== 0)
dlg.appendChild(E('p', _('The <em>opkg %h</em> command failed with code <code>%d</code>.').format(cmd, (res.code & 0xff) || -1)));

dlg.appendChild(E('div', { 'class': 'right' },
dlg.appendChild(E('div', { 'class': 'button-row' },
E('div', {
'class': 'btn',
'click': L.bind(function(res) {
Expand Down
6 changes: 3 additions & 3 deletions modules/luci-base/htdocs/luci-static/resources/form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3218,13 +3218,13 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p
else {
ui.showModal(title, [
nodes,
E('div', { 'class': 'right' }, [
E('div', { 'class': 'button-row' }, [
E('button', {
'class': 'cbi-button',
'class': 'btn cbi-button',
'click': ui.createHandlerFn(this, 'handleModalCancel', m)
}, [ _('Dismiss') ]), ' ',
E('button', {
'class': 'cbi-button cbi-button-positive important',
'class': 'btn cbi-button cbi-button-positive important',
'click': ui.createHandlerFn(this, 'handleModalSave', m),
'disabled': m.readonly || null
}, [ _('Save') ])
Expand Down
242 changes: 119 additions & 123 deletions modules/luci-base/htdocs/luci-static/resources/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3626,7 +3626,7 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ {
/** @private */
cancelModal: function(ev) {
if (ev.key == 'Escape') {
var btn = modalDiv.querySelector('.right > button, .right > .btn');
var btn = modalDiv.querySelector('.right > button, .right > .btn, .button-row > .btn');

if (btn)
btn.click();
Expand Down Expand Up @@ -4209,99 +4209,94 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ {
return new Promise(function(resolveFn, rejectFn) {
UI.prototype.showModal(_('Uploading file…'), [
E('p', _('Please select the file to upload.')),
E('div', { 'style': 'display:flex' }, [
E('div', { 'class': 'left', 'style': 'flex:1' }, [
E('input', {
type: 'file',
style: 'display:none',
change: function(ev) {
var modal = dom.parent(ev.target, '.modal'),
body = modal.querySelector('p'),
upload = modal.querySelector('.cbi-button-action.important'),
file = ev.currentTarget.files[0];

if (file == null)
return;

dom.content(body, [
E('ul', {}, [
E('li', {}, [ '%s: %s'.format(_('Name'), file.name.replace(/^.*[\\\/]/, '')) ]),
E('li', {}, [ '%s: %1024mB'.format(_('Size'), file.size) ])
])
]);

upload.disabled = false;
upload.focus();
}
}),
E('button', {
'class': 'btn',
'click': function(ev) {
ev.target.previousElementSibling.click();
}
}, [ _('Browse…') ])
]),
E('div', { 'class': 'right', 'style': 'flex:1' }, [
E('button', {
'class': 'btn',
'click': function() {
E('div', { 'class': 'button-row' }, [
E('div', {
'class': 'btn cbi-button',
'click': function() {
UI.prototype.hideModal();
rejectFn(new Error(_('Upload has been cancelled')));
}
}, [ _('Cancel') ]),
E('input', {
type: 'file',
style: 'display:none',
change: function(ev) {
var modal = dom.parent(ev.target, '.modal'),
body = modal.querySelector('p'),
upload = modal.querySelector('.cbi-button-action.important'),
file = ev.currentTarget.files[0];

if (file == null)
return;

dom.content(body, [
E('ul', {}, [
E('li', {}, [ '%s: %s'.format(_('Name'), file.name.replace(/^.*[\\\/]/, '')) ]),
E('li', {}, [ '%s: %1024mB'.format(_('Size'), file.size) ])
])
]);

upload.disabled = false;
upload.focus();
}
}),
E('div', {
'class': 'btn cbi-button',
'click': function(ev) {
ev.target.previousElementSibling.click();
}
}, [ _('Browse…') ]),
E('div', {
'class': 'btn cbi-button-action important',
'disabled': true,
'click': function(ev) {
var input = dom.parent(ev.target, '.modal').querySelector('input[type="file"]');

if (!input.files[0])
return;

var progress = E('div', { 'class': 'cbi-progressbar', 'title': '0%' }, E('div', { 'style': 'width:0' }));

UI.prototype.showModal(_('Uploading file…'), [ progress ]);

var data = new FormData();

data.append('sessionid', rpc.getSessionID());
data.append('filename', path);
data.append('filedata', input.files[0]);

var filename = input.files[0].name;

request.post(L.env.cgi_base + '/cgi-upload', data, {
timeout: 0,
progress: function(pev) {
var percent = (pev.loaded / pev.total) * 100;

if (progressStatusNode)
progressStatusNode.data = '%.2f%%'.format(percent);

progress.setAttribute('title', '%.2f%%'.format(percent));
progress.firstElementChild.style.width = '%.2f%%'.format(percent);
}
}).then(function(res) {
var reply = res.json();

UI.prototype.hideModal();
rejectFn(new Error(_('Upload has been cancelled')));
}
}, [ _('Cancel') ]),
' ',
E('button', {
'class': 'btn cbi-button-action important',
'disabled': true,
'click': function(ev) {
var input = dom.parent(ev.target, '.modal').querySelector('input[type="file"]');

if (!input.files[0])
return;

var progress = E('div', { 'class': 'cbi-progressbar', 'title': '0%' }, E('div', { 'style': 'width:0' }));

UI.prototype.showModal(_('Uploading file…'), [ progress ]);

var data = new FormData();

data.append('sessionid', rpc.getSessionID());
data.append('filename', path);
data.append('filedata', input.files[0]);

var filename = input.files[0].name;

request.post(L.env.cgi_base + '/cgi-upload', data, {
timeout: 0,
progress: function(pev) {
var percent = (pev.loaded / pev.total) * 100;

if (progressStatusNode)
progressStatusNode.data = '%.2f%%'.format(percent);

progress.setAttribute('title', '%.2f%%'.format(percent));
progress.firstElementChild.style.width = '%.2f%%'.format(percent);
}
}).then(function(res) {
var reply = res.json();

UI.prototype.hideModal();

if (L.isObject(reply) && reply.failure) {
UI.prototype.addNotification(null, E('p', _('Upload request failed: %s').format(reply.message)));
rejectFn(new Error(reply.failure));
}
else {
reply.name = filename;
resolveFn(reply);
}
}, function(err) {
UI.prototype.hideModal();
rejectFn(err);
});
}
}, [ _('Upload') ])
])

if (L.isObject(reply) && reply.failure) {
UI.prototype.addNotification(null, E('p', _('Upload request failed: %s').format(reply.message)));
rejectFn(new Error(reply.failure));
}
else {
reply.name = filename;
resolveFn(reply);
}
}, function(err) {
UI.prototype.hideModal();
rejectFn(err);
});
}
}, [ _('Upload') ])
])
]);
});
Expand Down Expand Up @@ -4480,26 +4475,29 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ {
E('var', {}, E('ins', '&#160;')), ' ', _('Option changed') ]),
E('div', { 'class': 'uci-change-legend-label' }, [
E('var', {}, E('del', '&#160;')), ' ', _('Option removed') ])]),
E('br'), list,
E('div', { 'class': 'right' }, [
E('button', {
'class': 'btn',
'click': UI.prototype.hideModal
}, [ _('Close') ]), ' ',
new UIComboButton('0', {
0: [ _('Save & Apply') ],
1: [ _('Apply unchecked') ]
}, {
classes: {
0: 'btn cbi-button cbi-button-positive important',
1: 'btn cbi-button cbi-button-negative important'
},
click: L.bind(function(ev, mode) { this.apply(mode == '0') }, this)
}).render(), ' ',
E('button', {
'class': 'cbi-button cbi-button-reset',
'click': L.bind(this.revert, this)
}, [ _('Revert') ])])])
E('br'),
list,
]),
E('div', { 'class': 'button-row' }, [
E('div', {
'class': 'btn cbi-button',
'click': UI.prototype.hideModal
}, [ _('Close') ]), ' ',
new UIComboButton('0', {
0: [ _('Save & Apply') ],
1: [ _('Apply unchecked') ]
}, {
classes: {
0: 'btn cbi-button cbi-button-positive important',
1: 'btn cbi-button cbi-button-negative important'
},
click: L.bind(function(ev, mode) { this.apply(mode == '0') }, this)
}).render(), ' ',
E('div', {
'class': 'btn cbi-button cbi-button-reset',
'click': L.bind(this.revert, this)
}, [ _('Revert') ])
])
]);

for (var config in this.changes) {
Expand Down Expand Up @@ -4732,22 +4730,20 @@ var UI = baseclass.extend(/** @lends LuCI.ui.prototype */ {

UI.prototype.changes.displayStatus('warning', [
E('h4', _('Connectivity change')),
E('p', _('"%h" interface changes could inhibit access to this device.').format(affected)),
E('p', _('Any IP change requires <strong>connecting to the new IP</strong> within %d seconds to retain the changes.').format(L.env.apply_rollback)),
E('p', _('Choose how to apply changes:')),
E('div', { 'class': 'right' }, [
E('button', {
'class': 'btn',
E('p', _('Changes have been made to the existing connection via "%h". This could inhibit access to this device. Any IP change requires <strong>connecting to the new IP</strong> within %d seconds to retain the changes.').format(affected, L.env.apply_rollback)),
E('div', { 'class': 'button-row' }, [
E('div', {
'class': 'btn cbi-button',
'click': rejectFn,
}, [ _('Cancel') ]), ' ',
E('button', {
E('div', {
'class': 'btn cbi-button-action important',
'click': resolveFn.bind(null, true)
}, [ _('Apply, reverting if GUI remains unreachable') ]), ' ',
E('button', {
}, [ _('Apply, reverting in case of connectivity loss') ]), ' ',
E('div', {
'class': 'btn cbi-button-negative important',
'click': resolveFn.bind(null, false)
}, [ _('Apply, committing now') ])
}, [ _('Apply unchecked') ])
])
]);
});
Expand Down
10 changes: 5 additions & 5 deletions modules/luci-mod-network/htdocs/luci-static/resources/view/network/interfaces.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,9 +175,9 @@ function iface_updown(up, id, ev, force) {

ui.showModal(_('Confirm disconnect'), [
E('p', _('You appear to be currently connected to the device via the "%h" interface. Do you really want to shut down the interface?').format(id)),
E('div', { 'class': 'right' }, [
E('button', {
'class': 'cbi-button cbi-button-neutral',
E('div', { 'class': 'button-row' }, [
E('div', {
'class': 'btn cbi-button cbi-button-neutral',
'click': function(ev) {
btns[1].classList.remove('spinning');
btns[1].disabled = false;
Expand All @@ -187,8 +187,8 @@ function iface_updown(up, id, ev, force) {
}
}, _('Cancel')),
' ',
E('button', {
'class': 'cbi-button cbi-button-negative important',
E('div', {
'class': 'btn cbi-button cbi-button-negative important',
'click': function(ev) {
dsc.setAttribute('disconnect', '');
dom.content(dsc, E('em', _('Interface is shutting down...')));
Expand Down
13 changes: 13 additions & 0 deletions themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1394,6 +1394,19 @@ footer ul.breadcrumb {
width: 100%;
}

.modal > .button-row {
display: flex;
justify-content: space-between;
}

.modal > .button-row > button:not(:last-of-type) {
margin-right: .5em;
}

.modal > .button-row > button:first-of-type {
margin-right: auto;
}

body.modal-overlay-active {
overflow: hidden;
height: 100vh;
Expand Down
13 changes: 13 additions & 0 deletions themes/luci-theme-material/htdocs/luci-static/material/cascade.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1749,6 +1749,19 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
max-height: none;
}

.modal .button-row {
display: flex;
justify-content: space-between;
}

.modal .button-row > :not(:last-child) {
margin-right: .5em;
}

.modal .button-row > :first-child {
margin-right: auto;
}

body.modal-overlay-active {
overflow: hidden;
height: 100vh;
Expand Down
12 changes: 12 additions & 0 deletions themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,18 @@ body.modal-overlay-active #modal_overlay {

.modal .cbi-section > legend:first-child { font-size: 120%; }

.modal .button-row {
display: flex;
justify-content: space-between;
}

.modal .button-row > :not(:last-child) {
margin-right: .5em;
}

.modal .button-row > :first-child {
margin-right: auto;
}

/*
* table layout
Expand Down
Loading

0 comments on commit a0dcba5

Please sign in to comment.