From c190a38a6ba513afeef69e3c422991ddd416e8f7 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 18 Apr 2018 14:19:45 +0200 Subject: [PATCH] Fix UI issues --- customize.dist/pages.js | 9 ++-- .../src/less2/include/checkmark.less | 13 ++++++ .../src/less2/include/sidebar-layout.less | 6 +-- www/settings/inner.js | 42 +++++++++---------- 4 files changed, 41 insertions(+), 29 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 10a3060fa..4d20f3775 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -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) ]) diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less index 5dbf2d125..fa52f3ec9 100644 --- a/customize.dist/src/less2/include/checkmark.less +++ b/customize.dist/src/less2/include/checkmark.less @@ -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; diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 293b43c47..5640e014b 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -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; } } diff --git a/www/settings/inner.js b/www/settings/inner.js index a6069c21b..bb5fc3319 100644 --- a/www/settings/inner.js +++ b/www/settings/inner.js @@ -237,10 +237,10 @@ define([ var $ok = $('', {'class': 'fa fa-check', title: Messages.saved}); var $spinner = $('', {'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 = $('', {'class': 'fa fa-check', title: Messages.saved}); var $spinner = $('', {'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 = $('', {'class': 'fa fa-check', title: Messages.saved}); var $spinner = $('', {'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;