Fix UI issues
This commit is contained in:
parent
e21e9b9d9f
commit
c190a38a6b
4 changed files with 41 additions and 29 deletions
|
@ -639,7 +639,7 @@ define([
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
Pages.createCheckbox = function (id, label, checked, opts) {
|
Pages.createCheckbox = function (id, labelTxt, checked, opts) {
|
||||||
opts = opts|| {};
|
opts = opts|| {};
|
||||||
// Input properties
|
// Input properties
|
||||||
var inputOpts = {
|
var inputOpts = {
|
||||||
|
@ -660,6 +660,7 @@ define([
|
||||||
|
|
||||||
var input = h('input', inputOpts);
|
var input = h('input', inputOpts);
|
||||||
var mark = h('span.cp-checkmark-mark', markOpts);
|
var mark = h('span.cp-checkmark-mark', markOpts);
|
||||||
|
var label = h('span.cp-checkmark-label', labelTxt);
|
||||||
|
|
||||||
$(mark).keydown(function (e) {
|
$(mark).keydown(function (e) {
|
||||||
if (e.which === 32) {
|
if (e.which === 32) {
|
||||||
|
@ -677,7 +678,7 @@ define([
|
||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
|
|
||||||
Pages.createRadio = function (name, id, label, checked, opts) {
|
Pages.createRadio = function (name, id, labelTxt, checked, opts) {
|
||||||
opts = opts|| {};
|
opts = opts|| {};
|
||||||
// Input properties
|
// Input properties
|
||||||
var inputOpts = {
|
var inputOpts = {
|
||||||
|
@ -699,12 +700,14 @@ define([
|
||||||
|
|
||||||
var input = h('input', inputOpts);
|
var input = h('input', inputOpts);
|
||||||
var mark = h('span.cp-radio-mark', markOpts);
|
var mark = h('span.cp-radio-mark', markOpts);
|
||||||
|
var label = h('span.cp-checkmark-label', labelTxt);
|
||||||
|
|
||||||
$(mark).keydown(function (e) {
|
$(mark).keydown(function (e) {
|
||||||
if (e.which === 32) {
|
if (e.which === 32) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
$(input).prop('checked', !$(input).is(':checked'));
|
$(input).prop('checked', !$(input).is(':checked'));
|
||||||
|
$(input).change();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -767,7 +770,7 @@ define([
|
||||||
Pages.createCheckbox('import-recent', Msg.register_importRecent, true)
|
Pages.createCheckbox('import-recent', Msg.register_importRecent, true)
|
||||||
]),
|
]),
|
||||||
h('div.checkbox-container', [
|
h('div.checkbox-container', [
|
||||||
$(Pages.createCheckbox('import-recent')).append(Msg.register_acceptTerms)[0]
|
$(Pages.createCheckbox('accept-terms')).find('.cp-checkmark-label').append(Msg.register_acceptTerms).parent()[0]
|
||||||
]),
|
]),
|
||||||
h('button#register.btn.cp-login-register', Msg.login_register)
|
h('button#register.btn.cp-login-register', Msg.login_register)
|
||||||
])
|
])
|
||||||
|
|
|
@ -49,6 +49,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cp-checkmark-label {
|
||||||
|
&:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
.cp-checkmark-mark {
|
.cp-checkmark-mark {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -68,6 +73,7 @@
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
border: solid @colortheme_checkmark-col1;
|
border: solid @colortheme_checkmark-col1;
|
||||||
border-width: 0 @width @width 0;
|
border-width: 0 @width @width 0;
|
||||||
|
position: absolute;
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
//border-color: #FF007C !important;
|
//border-color: #FF007C !important;
|
||||||
|
@ -114,6 +120,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cp-checkmark-label {
|
||||||
|
&:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@radio-size: @dim1 * 3;
|
@radio-size: @dim1 * 3;
|
||||||
.cp-radio-mark {
|
.cp-radio-mark {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
|
@ -54,11 +54,7 @@
|
||||||
}
|
}
|
||||||
label.noTitle {
|
label.noTitle {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
vertical-align: top;
|
.fa {
|
||||||
& ~ .fa {
|
|
||||||
line-height: 24px;
|
|
||||||
height: 24px;
|
|
||||||
vertical-align: top;
|
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -237,10 +237,10 @@ define([
|
||||||
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
|
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
|
||||||
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
|
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
|
||||||
|
|
||||||
var cbox = UI.createCheckbox('disableThumbnails',
|
var $cbox = $(UI.createCheckbox('disableThumbnails',
|
||||||
Messages.settings_disableThumbnailsAction,
|
Messages.settings_disableThumbnailsAction,
|
||||||
false, { label: {class: 'noTitle'} });
|
false, { label: {class: 'noTitle'} }));
|
||||||
var $checkbox = $(cbox).find('input').on('change', function () {
|
var $checkbox = $cbox.find('input').on('change', function () {
|
||||||
$spinner.show();
|
$spinner.show();
|
||||||
$ok.hide();
|
$ok.hide();
|
||||||
var val = $checkbox.is(':checked') || false;
|
var val = $checkbox.is(':checked') || false;
|
||||||
|
@ -250,10 +250,10 @@ define([
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
$(cbox).appendTo($div);
|
$cbox.appendTo($div);
|
||||||
|
|
||||||
$ok.hide().appendTo($div);
|
$ok.hide().appendTo($cbox);
|
||||||
$spinner.hide().appendTo($div);
|
$spinner.hide().appendTo($cbox);
|
||||||
|
|
||||||
common.getAttribute(['general', 'disableThumbnails'], function (e, val) {
|
common.getAttribute(['general', 'disableThumbnails'], function (e, val) {
|
||||||
$checkbox[0].checked = typeof(val) === "undefined" || val;
|
$checkbox[0].checked = typeof(val) === "undefined" || val;
|
||||||
|
@ -287,10 +287,10 @@ define([
|
||||||
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
|
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
|
||||||
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
|
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
|
||||||
|
|
||||||
var cbox = UI.createCheckbox('cp-settings-userfeedback',
|
var $cbox = $(UI.createCheckbox('cp-settings-userfeedback',
|
||||||
Messages.settings_userFeedback,
|
Messages.settings_userFeedback,
|
||||||
false, { label: {class: 'noTitle'} });
|
false, { label: {class: 'noTitle'} }));
|
||||||
var $checkbox = $(cbox).find('input').on('change', function () {
|
var $checkbox = $cbox.find('input').on('change', function () {
|
||||||
$spinner.show();
|
$spinner.show();
|
||||||
$ok.hide();
|
$ok.hide();
|
||||||
var val = $checkbox.is(':checked') || false;
|
var val = $checkbox.is(':checked') || false;
|
||||||
|
@ -300,10 +300,10 @@ define([
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
$(cbox).appendTo($div);
|
$cbox.appendTo($div);
|
||||||
|
|
||||||
$ok.hide().appendTo($div);
|
$ok.hide().appendTo($cbox);
|
||||||
$spinner.hide().appendTo($div);
|
$spinner.hide().appendTo($cbox);
|
||||||
|
|
||||||
if (privateData.feedbackAllowed) {
|
if (privateData.feedbackAllowed) {
|
||||||
$checkbox[0].checked = true;
|
$checkbox[0].checked = true;
|
||||||
|
@ -723,10 +723,10 @@ define([
|
||||||
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
|
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
|
||||||
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
|
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
|
||||||
|
|
||||||
var cbox = UI.createCheckbox('cp-settings-padwidth',
|
var $cbox = $(UI.createCheckbox('cp-settings-padwidth',
|
||||||
Messages.settings_padWidthLabel,
|
Messages.settings_padWidthLabel,
|
||||||
false, { label: {class: 'noTitle'} });
|
false, { label: {class: 'noTitle'} }));
|
||||||
var $checkbox = $(cbox).find('input').on('change', function () {
|
var $checkbox = $cbox.find('input').on('change', function () {
|
||||||
$spinner.show();
|
$spinner.show();
|
||||||
$ok.hide();
|
$ok.hide();
|
||||||
var val = $checkbox.is(':checked');
|
var val = $checkbox.is(':checked');
|
||||||
|
@ -735,10 +735,10 @@ define([
|
||||||
$ok.show();
|
$ok.show();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
$(cbox).appendTo($div);
|
$cbox.appendTo($div);
|
||||||
|
|
||||||
$ok.hide().appendTo($div);
|
$ok.hide().appendTo($cbox);
|
||||||
$spinner.hide().appendTo($div);
|
$spinner.hide().appendTo($cbox);
|
||||||
|
|
||||||
|
|
||||||
common.getAttribute(['pad', 'width'], function (e, val) {
|
common.getAttribute(['pad', 'width'], function (e, val) {
|
||||||
|
@ -797,13 +797,13 @@ define([
|
||||||
.appendTo($div);
|
.appendTo($div);
|
||||||
|
|
||||||
|
|
||||||
var cbox = UI.createCheckbox('cp-settings-codeindent');
|
var $cbox = $(UI.createCheckbox('cp-settings-codeindent'));
|
||||||
var $checkbox = $(cbox).find('input').on('change', function () {
|
var $checkbox = $cbox.find('input').on('change', function () {
|
||||||
var val = $checkbox.is(':checked');
|
var val = $checkbox.is(':checked');
|
||||||
if (typeof(val) !== 'boolean') { return; }
|
if (typeof(val) !== 'boolean') { return; }
|
||||||
common.setAttribute(['codemirror', key], val);
|
common.setAttribute(['codemirror', key], val);
|
||||||
});
|
});
|
||||||
$(cbox).appendTo($inputBlock);
|
$cbox.appendTo($inputBlock);
|
||||||
|
|
||||||
/*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
|
/*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
|
||||||
$input[0].checked = !!n;
|
$input[0].checked = !!n;
|
||||||
|
|
Loading…
Reference in a new issue