extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-23 14:28:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Implement slide-switch, representing checkbox on/off status

Browse Source 
- Replace calendar toggle weekend checkbox with slide-switch
This commit is contained in:
Hadi Nategh 2015-11-18 15:42:32 +00:00
parent fbb6f817b1
commit 3a5aa9ac5c
3 changed files with 123 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
calendar/templates/default/sidebox.xet
View File

@ -33,7 +33,7 @@ Egroupware
<buttononly align="center" class="sideboxstar" id="month" image="month" label="Month view" onclick="app.calendar.update_state({view:'month'});"/>
<buttononly align="center" class="sideboxstar" id="planner" image="planner" label="Group planner" onclick="app.calendar.update_state({view:'planner',planner_days:0});"/>
<buttononly align="center" class="sideboxstar" id="listview" image="list" label="Listview" onclick="app.calendar.update_state({view:'listview'});"/>
<checkbox class="sideboxstar" id="weekend" label="Toggle weekend" onchange="app.calendar.update_state({weekend: widget.getValue()}); return false;"/>
<checkbox class="sideboxstar" id="weekend" toggle_on="7" toggle_off="5" statustext="Toggle weekend" onchange="app.calendar.update_state({weekend: widget.getValue()}); return false;"/>
</row>
</rows>
</grid>

53
etemplate/js/et2_widget_checkbox.js
View File

@ -53,6 +53,18 @@ var et2_checkbox = et2_inputWidget.extend(
"value": {
// Stop framework from messing with value
"type": "any"
},
"toggle_on": {
"name": "Toggle on caption",
"type": "string",
"default": "",
"description": "String caption to show for ON status"
},
"toggle_off": {
"name": "Toggle off caption",
"type": "string",
"default": "",
"description": "String caption to show OFF status"
}
},
@ -74,10 +86,39 @@ var et2_checkbox = et2_inputWidget.extend(
createInputWidget: function() {
this.input = $j(document.createElement("input")).attr("type", "checkbox");
this.input.addClass("et2_checkbox");
this.setDOMNode(this.input[0]);
if (this.options.toggle_on || this.options.toggle_off)
{
var self = this;
// checkbox container
this.toggle = $j(document.createElement('span'))
.addClass('et2_checkbox_slideSwitch')
.append(this.input);
// update switch status on change
this.input.change(function(){
self.getValue();
return true;
});
// switch container
var area = jQuery(document.createElement('span')).addClass('slideSwitch_container').appendTo(this.toggle);
// on span tag
var on = jQuery(document.createElement('span')).addClass('on').appendTo(area);
// off span tag
var off = jQuery(document.createElement('span')).addClass('off').appendTo(area);
on.text(this.options.toggle_on);
off.text(this.options.toggle_off);
// handle a tag
var handle = jQuery(document.createElement('a')).appendTo(area);
this.setDOMNode(this.toggle[0]);
}
else
{
this.setDOMNode(this.input[0]);
}
},
/**
@ -98,9 +139,11 @@ var et2_checkbox = et2_inputWidget.extend(
if(_value == this.options.selected_value ||
_value && this.options.selected_value == this.attributes.selected_value["default"] &&
_value != this.options.unselected_value) {
this.input.prop("checked", true);
if (this.options.toggle_on || this.options.toggle_off) this.input.prop("checked", true);
this.toggle.addClass('switchOn');
} else {
this.input.prop("checked", false);
if (this.options.toggle_on || this.options.toggle_off) this.toggle.removeClass('switchOn');
}
}
},
@ -120,8 +163,10 @@ var et2_checkbox = et2_inputWidget.extend(
*/
getValue: function() {
if(this.input.prop("checked")) {
if (this.options.toggle_on || this.options.toggle_off) this.toggle.addClass('switchOn');
return this.options.selected_value;
} else {
if (this.options.toggle_on || this.options.toggle_off) this.toggle.removeClass('switchOn');
return this.options.unselected_value;
}
}

73
etemplate/templates/default/etemplate2.css
View File

@ -1661,6 +1661,79 @@ div.et2_toolbar_activeList h.ui-accordion-header {
.et2_label > input.et2_checkbox {
margin-right: 5px;
}
/*slide switch representing checkbox*/
span.et2_checkbox_slideSwitch {
position: relative;
display: inline-block;
vertical-align: middle;
}
span.et2_checkbox_slideSwitch > span.slideSwitch_container {
width: 50px;
height: 12px;
display: block;
position: relative;
background-color: #B4B4B4;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
padding: 3px;
margin: 1px;
}
span.et2_checkbox_slideSwitch > span.slideSwitch_container > span:first-child {
width: 50%;
display: -webkit-inline-box;
text-align: -webkit-center;
position: absolute;
left:0;
z-index: 6;
font-weight: bold;
color:#5A5A5A;
}
span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container > span:first-child {
color:white;
}
span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container> span:nth-child(2) {
color:#5A5A5A;
}
span.et2_checkbox_slideSwitch > span.slideSwitch_container> span:nth-child(2) {
width: 50%;
display: -webkit-inline-box;
text-align: -webkit-center;
position: absolute;
z-index: 6;
left:50%;
font-weight: bold;
color:white;
}
span.et2_checkbox_slideSwitch > span.slideSwitch_container a {
position: absolute;
right: 0%;
top: 0;
z-index: 4;
display: block;
width: 50%;
height: 100%;
padding-bottom: 0px;
margin-top: -1px;
border: 1px solid #000000;
background-color: #0c5da5;
border-radius: 3px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
span.et2_checkbox_slideSwitch > input {
opacity: 0;
position: absolute;
z-index: 7;
width: 100%;
height: 100%;
}
span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container a {
right:50%;
}
.et2_radiobox {
margin-right: 5px;
}