Skip to content
This repository has been archived by the owner on Jul 7, 2020. It is now read-only.

pretty radio buttons #53

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

pretty radio buttons #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions styles/colors.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion styles/widgets/common.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -421,7 +421,7 @@ table.table {
overflow: hidden;
text-align: center;

input.icon-checkbox + label {
input.icon-checkbox-radio + label {
padding: 0;

&:before {
Expand Down
37 changes: 28 additions & 9 deletions styles/widgets/forms.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -549,7 +549,7 @@ ul.proplist {
margin: 0;
}

.icon-checkbox {
.icon-checkbox-radio {
height: 2.4rem !important;
margin-left: -1.2em;

Expand Down Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion styles/widgets/lists.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ ul.listing {
}
}

input.icon-checkbox + label,
input.icon-checkbox-radio + label,
input[type=checkbox] {
position: absolute;
padding: 0;
Expand Down
4 changes: 2 additions & 2 deletions styles/widgets/toolbar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,7 +417,7 @@
margin: 0;
width: 100%;

input.icon-checkbox {
input.icon-checkbox-radio {
right: auto;

& + label {
Expand Down Expand Up @@ -612,7 +612,7 @@ html.touch {
}

.toolbarmenu li {
input.icon-checkbox + label {
input.icon-checkbox-radio + label {
font-size: 1.3rem;
}
}
Expand Down
32 changes: 16 additions & 16 deletions ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;

Expand All @@ -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) {
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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(
$('<label>').attr({'for': id, title: checkbox.attr('title') || ''})
input.addClass('icon-checkbox-radio form-check-input').after(
$('<label>').attr({'for': id, title: input.attr('title') || ''})
.on('click', function(e) { e.stopPropagation(); })
);
};
Expand Down