Fix UI issues

This commit is contained in:
yflory 2018-04-18 14:19:45 +02:00
parent e21e9b9d9f
commit c190a38a6b
4 changed files with 41 additions and 29 deletions

View file

@ -639,7 +639,7 @@ define([
);
};
Pages.createCheckbox = function (id, label, checked, opts) {
Pages.createCheckbox = function (id, labelTxt, checked, opts) {
opts = opts|| {};
// Input properties
var inputOpts = {
@ -660,6 +660,7 @@ define([
var input = h('input', inputOpts);
var mark = h('span.cp-checkmark-mark', markOpts);
var label = h('span.cp-checkmark-label', labelTxt);
$(mark).keydown(function (e) {
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|| {};
// Input properties
var inputOpts = {
@ -699,12 +700,14 @@ define([
var input = h('input', inputOpts);
var mark = h('span.cp-radio-mark', markOpts);
var label = h('span.cp-checkmark-label', labelTxt);
$(mark).keydown(function (e) {
if (e.which === 32) {
e.stopPropagation();
e.preventDefault();
$(input).prop('checked', !$(input).is(':checked'));
$(input).change();
}
});
@ -767,7 +770,7 @@ define([
Pages.createCheckbox('import-recent', Msg.register_importRecent, true)
]),
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)
])

View file

@ -49,6 +49,11 @@
}
}
.cp-checkmark-label {
&:empty {
display: none;
}
}
.cp-checkmark-mark {
margin-right: 10px;
position: relative;
@ -68,6 +73,7 @@
transform: rotate(45deg);
border: solid @colortheme_checkmark-col1;
border-width: 0 @width @width 0;
position: absolute;
}
&:focus {
//border-color: #FF007C !important;
@ -114,6 +120,13 @@
}
}
}
.cp-checkmark-label {
&:empty {
display: none;
}
}
@radio-size: @dim1 * 3;
.cp-radio-mark {
margin-right: 10px;

View file

@ -54,11 +54,7 @@
}
label.noTitle {
display: inline-flex;
vertical-align: top;
& ~ .fa {
line-height: 24px;
height: 24px;
vertical-align: top;
.fa {
margin-left: 10px;
}
}

View file

@ -237,10 +237,10 @@ define([
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var cbox = UI.createCheckbox('disableThumbnails',
var $cbox = $(UI.createCheckbox('disableThumbnails',
Messages.settings_disableThumbnailsAction,
false, { label: {class: 'noTitle'} });
var $checkbox = $(cbox).find('input').on('change', function () {
false, { label: {class: 'noTitle'} }));
var $checkbox = $cbox.find('input').on('change', function () {
$spinner.show();
$ok.hide();
var val = $checkbox.is(':checked') || false;
@ -250,10 +250,10 @@ define([
});
});
$(cbox).appendTo($div);
$cbox.appendTo($div);
$ok.hide().appendTo($div);
$spinner.hide().appendTo($div);
$ok.hide().appendTo($cbox);
$spinner.hide().appendTo($cbox);
common.getAttribute(['general', 'disableThumbnails'], function (e, val) {
$checkbox[0].checked = typeof(val) === "undefined" || val;
@ -287,10 +287,10 @@ define([
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
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,
false, { label: {class: 'noTitle'} });
var $checkbox = $(cbox).find('input').on('change', function () {
false, { label: {class: 'noTitle'} }));
var $checkbox = $cbox.find('input').on('change', function () {
$spinner.show();
$ok.hide();
var val = $checkbox.is(':checked') || false;
@ -300,10 +300,10 @@ define([
});
});
$(cbox).appendTo($div);
$cbox.appendTo($div);
$ok.hide().appendTo($div);
$spinner.hide().appendTo($div);
$ok.hide().appendTo($cbox);
$spinner.hide().appendTo($cbox);
if (privateData.feedbackAllowed) {
$checkbox[0].checked = true;
@ -723,10 +723,10 @@ define([
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
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,
false, { label: {class: 'noTitle'} });
var $checkbox = $(cbox).find('input').on('change', function () {
false, { label: {class: 'noTitle'} }));
var $checkbox = $cbox.find('input').on('change', function () {
$spinner.show();
$ok.hide();
var val = $checkbox.is(':checked');
@ -735,10 +735,10 @@ define([
$ok.show();
});
});
$(cbox).appendTo($div);
$cbox.appendTo($div);
$ok.hide().appendTo($div);
$spinner.hide().appendTo($div);
$ok.hide().appendTo($cbox);
$spinner.hide().appendTo($cbox);
common.getAttribute(['pad', 'width'], function (e, val) {
@ -797,13 +797,13 @@ define([
.appendTo($div);
var cbox = UI.createCheckbox('cp-settings-codeindent');
var $checkbox = $(cbox).find('input').on('change', function () {
var $cbox = $(UI.createCheckbox('cp-settings-codeindent'));
var $checkbox = $cbox.find('input').on('change', function () {
var val = $checkbox.is(':checked');
if (typeof(val) !== 'boolean') { return; }
common.setAttribute(['codemirror', key], val);
});
$(cbox).appendTo($inputBlock);
$cbox.appendTo($inputBlock);
/*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
$input[0].checked = !!n;