From b41ebbb9d923ad31739672dcf87b3587868050d9 Mon Sep 17 00:00:00 2001 From: PhilW Date: Fri, 29 Dec 2017 11:07:03 +0000 Subject: [PATCH] pretty radio buttons --- styles/colors.less | 5 +++++ styles/widgets/common.less | 2 +- styles/widgets/forms.less | 37 ++++++++++++++++++++++++++++--------- styles/widgets/lists.less | 2 +- styles/widgets/toolbar.less | 4 ++-- ui.js | 32 ++++++++++++++++---------------- 6 files changed, 53 insertions(+), 29 deletions(-) diff --git a/styles/colors.less b/styles/colors.less index 10f74bf..3a0f30f 100644 --- a/styles/colors.less +++ b/styles/colors.less @@ -142,6 +142,11 @@ @color-checkbox-focus: darken(@color-checkbox, 30%); @color-checkbox-checked-focus: darken(@color-checkbox-checked, 30%); +@color-radio: @color-checkbox; +@color-radio-checked: @color-checkbox-checked; +@color-radio-focus: @color-checkbox-focus; +@color-radio-checked-focus: @color-checkbox-checked-focus; + @color-form-hint: @color-black-shade-text; @color-image-upload-background: @color-black-shade-bg; diff --git a/styles/widgets/common.less b/styles/widgets/common.less index 359873d..dcb2d50 100644 --- a/styles/widgets/common.less +++ b/styles/widgets/common.less @@ -421,7 +421,7 @@ table.table { overflow: hidden; text-align: center; - input.icon-checkbox + label { + input.icon-checkbox-radio + label { padding: 0; &:before { diff --git a/styles/widgets/forms.less b/styles/widgets/forms.less index 8eb4d83..1b3dbd4 100644 --- a/styles/widgets/forms.less +++ b/styles/widgets/forms.less @@ -430,7 +430,7 @@ html.ms .propform { & > *:last-child { width: 1%; - min-width: 2.2em; // for icon-checkbox + min-width: 2.2em; // for icon-checkbox-radio padding-right: 15px; } @@ -549,7 +549,7 @@ ul.proplist { margin: 0; } - .icon-checkbox { + .icon-checkbox-radio { height: 2.4rem !important; margin-left: -1.2em; @@ -623,7 +623,7 @@ ul.proplist { html.touch .popupmenu.form { li { - input.icon-checkbox + label:before { + input.icon-checkbox-radio + label:before { line-height: 1.4; } } @@ -909,9 +909,9 @@ html.touch .popupmenu.form { } -/*** Pretty icon checkbox ***/ +/*** Pretty icon checkbox and radio ***/ -input.icon-checkbox { +input.icon-checkbox-radio { opacity: 0; margin-left: -1.5em; cursor: pointer; @@ -945,26 +945,45 @@ input.icon-checkbox { pointer-events: none; } - &:checked + label:before { + &[type="checkbox"]:checked + label:before { content: @fa-var-toggle-on; color: @color-checkbox-checked; } - &:focus + label:before { + &[type="radio"] + label:before { + .font-icon-regular(@fa-var-circle); + font-size: 1em; + color: @color-radio; + } + + &[type="radio"]:checked + label:before { + .font-icon-solid(@fa-var-check-circle); + color: @color-radio-checked; + } + + &[type="checkbox"]:focus + label:before { color: @color-checkbox-focus; } - &:checked:focus + label:before { + &[type="checkbox"]:checked:focus + label:before { color: @color-checkbox-checked-focus; } + &[type="radio"]:focus + label:before { + color: @color-radio-focus; + } + + &[type="radio"]:checked:focus + label:before { + color: @color-radio-checked-focus; + } + &.form-check-input + label { font-size: 1.25rem; padding-top: .25rem; } } -html.touch input.icon-checkbox + label { +html.touch input.icon-checkbox-radio + label { font-size: 1.5rem; } diff --git a/styles/widgets/lists.less b/styles/widgets/lists.less index de87a28..4aac6eb 100644 --- a/styles/widgets/lists.less +++ b/styles/widgets/lists.less @@ -164,7 +164,7 @@ ul.listing { } } - input.icon-checkbox + label, + input.icon-checkbox-radio + label, input[type=checkbox] { position: absolute; padding: 0; diff --git a/styles/widgets/toolbar.less b/styles/widgets/toolbar.less index 8139d31..c119f78 100644 --- a/styles/widgets/toolbar.less +++ b/styles/widgets/toolbar.less @@ -417,7 +417,7 @@ margin: 0; width: 100%; - input.icon-checkbox { + input.icon-checkbox-radio { right: auto; & + label { @@ -612,7 +612,7 @@ html.touch { } .toolbarmenu li { - input.icon-checkbox + label { + input.icon-checkbox-radio + label { font-size: 1.3rem; } } diff --git a/ui.js b/ui.js index 25ff91d..e75da31 100644 --- a/ui.js +++ b/ui.js @@ -72,7 +72,7 @@ function rcube_elastic_ui() this.form_errors = form_errors; this.switch_nav_list = switch_nav_list; this.searchbar_init = searchbar_init; - this.pretty_checkbox = pretty_checkbox; + this.pretty_checkbox_radio = pretty_checkbox_radio; // Initialize layout @@ -278,7 +278,7 @@ function rcube_elastic_ui() // Modify normal checkboxes on lists so they are different // than those used for row selection, i.e. use icons $('[data-list]').each(function() { - $('input[type=checkbox]', this).each(function() { pretty_checkbox(this); }); + $('input[type=checkbox],input[type=radio]', this).each(function() { pretty_checkbox_radio(this); }); }); // Assign .formcontainer class to the iframe body, when it @@ -601,7 +601,7 @@ function rcube_elastic_ui() // Forms $('input:not(.button,[type=file],[type=radio],[type=checkbox]),select,textarea', $('.propform', context)).addClass('form-control'); - $('[type=checkbox]', $('.propform', context)).addClass('form-check-input'); + $('[type=checkbox],[type=radio]', $('.propform', context)).addClass('form-check-input'); $('table.propform', context).each(function() { var text_rows = 0, form_rows = 0; @@ -618,7 +618,7 @@ function rcube_elastic_ui() first.addClass('col-sm-4'); last.addClass('col-sm-8'); - if (last.find('[type=checkbox]').length == 1 && !last.find('.proplist').length) { + if (last.find('[type=checkbox],[type=radio]').length == 1 && !last.find('.proplist').length) { row_classes.push('form-check'); if (last.find('a').length) { @@ -750,12 +750,12 @@ function rcube_elastic_ui() // The same for some other checkboxes // We do this here, not in setup() because we want to cover dialogs - $('.propform input[type=checkbox], .form-check > input, .popupmenu.form input[type=checkbox], .toolbarmenu input[type=checkbox]', context) - .each(function() { pretty_checkbox(this); }); + $('.propform input[type=checkbox], .propform input[type=radio], .form-check > input, .popupmenu.form input[type=checkbox], .popupmenu.form input[type=radio], .toolbarmenu input[type=checkbox], .toolbarmenu input[type=radio]', context) + .each(function() { pretty_checkbox_radio(this); }); // Also when we add action-row of the form, e.g. Managesieve plugin adds them after the page is ready if ($(context).is('.actionrow')) { - $('input[type=checkbox]', context).each(function() { pretty_checkbox(this); }); + $('input[type=checkbox],input[type=radio]', context).each(function() { pretty_checkbox_radio(this); }); } // Make message-objects alerts pretty (the same as UI alerts) @@ -2622,21 +2622,21 @@ function rcube_elastic_ui() }; /** - * Checkbox wrapper + * Checkbox/radio wrapper */ - function pretty_checkbox(checkbox) + function pretty_checkbox_radio(input) { - var checkbox = $(checkbox), - id = checkbox.attr('id'); + var input = $(input), + id = input.attr('id'); if (!id) { - if (!env.icon_checkbox) env.icon_checkbox = 0; - id = 'icochk' + (++env.icon_checkbox); - checkbox.attr('id', id); + if (!env.icon_checkbox_radio) env.icon_checkbox_radio = 0; + id = 'icochkrdo' + (++env.icon_checkbox_radio); + input.attr('id', id); } - checkbox.addClass('icon-checkbox form-check-input').after( - $('