tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

Replace the state selector switch to support more than 2 states.

Browse Source
This commit is contained in:
Naomi Guyer 2012-12-03 15:17:16 +13:00 committed by Ingo Schommer
parent 8f5acd70b3
commit 8ce272861c
5 changed files with 222 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
admin/css/screen.css
View File

@ -285,29 +285,60 @@ input.radio { margin-left: 0; }
/*************************************************************** /***************************************************************
* On/Off Switch. * On/Off Switch.
* Supports switching between two values (eg Draft/Published) * Supports switching between up to 5 values (used for Draft/Published)
* Example html set-up: * Example html set-up:
* <div class="switch-states"> * <fieldset class="switch-states size_2">
* <input type="checkbox" class="state" id="switch" checked> * <div class="switch">
* <label for="switch"> * <input id="Draft" class="first" name="view" type="radio" checked>
* <span class="switch-options">* * <label for="Draft"><span>Draft</span></label>
* <a href="" class="first active">On</a> * <input id="Published" class="last" name="view" type="radio">
* <a href="" class="last">Off</a> * <label for="Published"><span>Published</span></label>
* </span> * <span class="slide-button"></span>
* <span class="switch"></span> * </div>
* </label> * </fieldset>
*</div>
****************************************************************/ ****************************************************************/
.switch-states label { /* Single label includes both switch options*/ display: block; overflow: hidden; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } fieldset.switch-states { /*
.switch-states input:checked + label .switch-options { margin-left: 0; } Produce css for up to 5 states.
.switch-states input:checked + label .switch { right: 0px; }
.switch-states input.state { /* Hidden checkbox records the state of the switch */ display: none; } Note: with a little adjustment the switch can take more than 5 items,
.switch-states .switch-options { /* span wrapping both switch options */ display: block; width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } but a dropdown would probably be more appropriate
.switch-states .switch-options a { text-align: right; width: 50%; float: left; display: block; padding: 0 8px 0 0; height: 24px; line-height: 24px; color: #FFF; background-color: #93BE42; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJiOWMzMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY0YWIzNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2b9c32), color-stop(100%, #64ab36)); background-image: -webkit-linear-gradient(#2b9c32, #64ab36); background-image: -moz-linear-gradient(#2b9c32, #64ab36); background-image: -o-linear-gradient(#2b9c32, #64ab36); background-image: linear-gradient(#2b9c32, #64ab36); -webkit-box-shadow: #236184 0 0 2px inset; -moz-box-shadow: #236184 0 0 2px inset; box-shadow: #236184 0 0 2px inset; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } */ }
.switch-states .switch-options a:hover { text-decoration: none; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMxYjAzOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZmYmUzYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #31b038), color-stop(100%, #6fbe3c)); background-image: -webkit-linear-gradient(#31b038, #6fbe3c); background-image: -moz-linear-gradient(#31b038, #6fbe3c); background-image: -o-linear-gradient(#31b038, #6fbe3c); background-image: linear-gradient(#31b038, #6fbe3c); } fieldset.switch-states .switch { -webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.1); -moz-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.1); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.1); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-animation: bugfix infinite 1s; background: #dee0e3; display: block; height: 25px; margin-top: 3px; padding: 0; position: relative; width: 100%; z-index: 5; }
.switch-states .switch-options a.first { text-align: left; padding-left: 8px; padding-right: 0; background-color: #338dc1; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI4NzA5OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzOGRjMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #287099), color-stop(100%, #338dc1)); background-image: -webkit-linear-gradient(#287099, #338dc1); background-image: -moz-linear-gradient(#287099, #338dc1); background-image: -o-linear-gradient(#287099, #338dc1); background-image: linear-gradient(#287099, #338dc1); } fieldset.switch-states .switch label { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); color: #2c2c2c; color: rgba(31, 31, 31, 0.5); float: left; font-weight: bold; height: 100%; line-height: 25px; padding-left: 15px; position: relative; text-align: center; vertical-align: middle; z-index: 2; }
.switch-states .switch-options a.first:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzOGRjMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQxOTljZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #338dc1), color-stop(100%, #4199cd)); background-image: -webkit-linear-gradient(#338dc1, #4199cd); background-image: -moz-linear-gradient(#338dc1, #4199cd); background-image: -o-linear-gradient(#338dc1, #4199cd); background-image: linear-gradient(#338dc1, #4199cd); } fieldset.switch-states .switch label:hover { color: #2b9c32; }
.switch-states .switch { /* Divider, styled to look like a switch */ display: block; width: 8px; margin: 0px; position: absolute; top: 0; bottom: 0; right: 90px; border: 1px solid #9a9a9a; -webkit-box-shadow: white 0 0 2px inset; -moz-box-shadow: white 0 0 2px inset; box-shadow: white 0 0 2px inset; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; background: #eceff1; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgwLCAwLCAwLCAwLjIpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDAsIDAsIDAsIDApIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.2)), color-stop(100%, rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); background-image: -o-linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); background-image: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } fieldset.switch-states .switch label span { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; }
fieldset.switch-states .switch input { opacity: 0; position: absolute; }
fieldset.switch-states .switch input:checked + label { -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; color: #fff; text-shadow: 0 -1px 0 #287099; }
fieldset.switch-states .switch .slide-button { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJiOWMzMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY0YWIzNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2b9c32), color-stop(100%, #64ab36)); background-image: -webkit-linear-gradient(#2b9c32, #64ab36); background-image: -moz-linear-gradient(#2b9c32, #64ab36); background-image: -o-linear-gradient(#2b9c32, #64ab36); background-image: linear-gradient(#2b9c32, #64ab36); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2); -moz-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; background-color: #338dc1; display: block; height: 100%; left: 0; padding: 0; position: absolute; top: 0; z-index: 1; }
fieldset.switch-states.size_1 label span, fieldset.switch-states.size_1 .slide-button { width: 100%; }
fieldset.switch-states.size_1 label span { padding-right: 25px; }
fieldset.switch-states.size_1 input:checked:nth-of-type(2) ~ .slide-button { left: 100%; }
fieldset.switch-states.size_1 input:checked:nth-of-type(3) ~ .slide-button { left: 200%; }
fieldset.switch-states.size_1 input:checked:nth-of-type(4) ~ .slide-button { left: 300%; }
fieldset.switch-states.size_1 input:checked:nth-of-type(5) ~ .slide-button { left: 400%; }
fieldset.switch-states.size_2 label span, fieldset.switch-states.size_2 .slide-button { width: 50%; }
fieldset.switch-states.size_2 input:checked:nth-of-type(2) ~ .slide-button { left: 50%; }
fieldset.switch-states.size_2 input:checked:nth-of-type(3) ~ .slide-button { left: 100%; }
fieldset.switch-states.size_2 input:checked:nth-of-type(4) ~ .slide-button { left: 150%; }
fieldset.switch-states.size_2 input:checked:nth-of-type(5) ~ .slide-button { left: 200%; }
fieldset.switch-states.size_3 label span, fieldset.switch-states.size_3 .slide-button { width: 33.33333%; }
fieldset.switch-states.size_3 input:checked:nth-of-type(2) ~ .slide-button { left: 33.33333%; }
fieldset.switch-states.size_3 input:checked:nth-of-type(3) ~ .slide-button { left: 66.66667%; }
fieldset.switch-states.size_3 input:checked:nth-of-type(4) ~ .slide-button { left: 100%; }
fieldset.switch-states.size_3 input:checked:nth-of-type(5) ~ .slide-button { left: 133.33333%; }
fieldset.switch-states.size_4 label span, fieldset.switch-states.size_4 .slide-button { width: 25%; }
fieldset.switch-states.size_4 input:checked:nth-of-type(2) ~ .slide-button { left: 25%; }
fieldset.switch-states.size_4 input:checked:nth-of-type(3) ~ .slide-button { left: 50%; }
fieldset.switch-states.size_4 input:checked:nth-of-type(4) ~ .slide-button { left: 75%; }
fieldset.switch-states.size_4 input:checked:nth-of-type(5) ~ .slide-button { left: 100%; }
fieldset.switch-states.size_5 label span, fieldset.switch-states.size_5 .slide-button { width: 20%; }
fieldset.switch-states.size_5 input:checked:nth-of-type(2) ~ .slide-button { left: 20%; }
fieldset.switch-states.size_5 input:checked:nth-of-type(3) ~ .slide-button { left: 40%; }
fieldset.switch-states.size_5 input:checked:nth-of-type(4) ~ .slide-button { left: 60%; }
fieldset.switch-states.size_5 input:checked:nth-of-type(5) ~ .slide-button { left: 80%; }
@-webkit-keyframes bugfix { from { position: relative; }
to { position: relative; } }
/** /**
* This file defines most styles of the CMS: Colors, fonts, backgrounds, * This file defines most styles of the CMS: Colors, fonts, backgrounds,
@ -1097,9 +1128,14 @@ li.class-ErrorPage > a a .jstree-pageicon { background-position: 0 -112px; }
======= =======
.cms-content-controls { /* Styling the background, controls sit on */ /* Styling for icons in controls */ /* Preview selectors. Overrides default chosen styles and applies its own */ } .cms-content-controls { /* Styling the background, controls sit on */ /* Styling for icons in controls */ /* Preview selectors. Overrides default chosen styles and applies its own */ }
.cms-content-controls.cms-preview-controls { z-index: 1; background: #eceff1; height: 30px; /* should be set in js Layout to match page actions */ padding: 12px 12px; } .cms-content-controls.cms-preview-controls { z-index: 1; background: #eceff1; height: 30px; /* should be set in js Layout to match page actions */ padding: 12px 12px; }
<<<<<<< HEAD
.cms-content-controls .icon-view, .cms-content-controls .dropdown a.chzn-single { white-space: nowrap; } .cms-content-controls .icon-view, .cms-content-controls .dropdown a.chzn-single { white-space: nowrap; }
.cms-content-controls .icon-view:before, .cms-content-controls .dropdown a.chzn-single:before { display: inline-block; float: left; content: ''; width: 23px; height: 17px; overflow: hidden; } .cms-content-controls .icon-view:before, .cms-content-controls .dropdown a.chzn-single:before { display: inline-block; float: left; content: ''; width: 23px; height: 17px; overflow: hidden; }
>>>>>>> 4e83d0d... BUG preview state icon missing from edit side and ie bugs >>>>>>> 4e83d0d... BUG preview state icon missing from edit side and ie bugs
=======
.cms-content-controls .icon-view, .cms-content-controls .preview-selector.dropdown a.chzn-single { white-space: nowrap; }
.cms-content-controls .icon-view:before, .cms-content-controls .preview-selector.dropdown a.chzn-single:before { display: inline-block; float: left; content: ''; width: 23px; height: 17px; overflow: hidden; }
>>>>>>> ba1cc62... Switch dropdown changes
.cms-content-controls .icon-auto:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -108px no-repeat; } .cms-content-controls .icon-auto:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -108px no-repeat; }
.cms-content-controls .icon-desktop:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -81px no-repeat; } .cms-content-controls .icon-desktop:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -81px no-repeat; }
.cms-content-controls .icon-tablet:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -162px no-repeat; } .cms-content-controls .icon-tablet:before { background: url('../images/sprites-32x32-se93fc83bf9.png') 0 -162px no-repeat; }
@ -1139,7 +1175,7 @@ li.class-ErrorPage > a a .jstree-pageicon { background-position: 0 -112px; }
>>>>>>> 5e0cbc7... Add extra preview-mode selector to the CMS actions. >>>>>>> 5e0cbc7... Add extra preview-mode selector to the CMS actions.
======= =======
.cms-content-controls .cms-navigator { width: 100%; } .cms-content-controls .cms-navigator { width: 100%; }
.cms-content-controls .dropdown a.chzn-single { text-indent: -200px; } .cms-content-controls .preview-selector.dropdown a.chzn-single { text-indent: -200px; }
.cms-content-controls .preview-selector { float: right; border-bottom: none; position: relative; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin: 3px 0 0 4px; padding: 0; } .cms-content-controls .preview-selector { float: right; border-bottom: none; position: relative; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin: 3px 0 0 4px; padding: 0; }
.cms-content-controls .preview-selector a.chzn-single { width: 20px; padding: 6px 5px; height: 18px; margin: -3px 0 0; filter: none; /* remove ie background */ background: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .cms-content-controls .preview-selector a.chzn-single { width: 20px; padding: 6px 5px; height: 18px; margin: -3px 0 0; filter: none; /* remove ie background */ background: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.cms-content-controls .preview-selector a.chzn-single:hover, .cms-content-controls .preview-selector a.chzn-single:focus, .cms-content-controls .preview-selector a.chzn-single.chzn-single-with-drop { background-color: #dae0e5; } .cms-content-controls .preview-selector a.chzn-single:hover, .cms-content-controls .preview-selector a.chzn-single:focus, .cms-content-controls .preview-selector a.chzn-single.chzn-single-with-drop { background-color: #dae0e5; }
@ -1164,8 +1200,19 @@ li.class-ErrorPage > a a .jstree-pageicon { background-position: 0 -112px; }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul li .icon-view { margin-right: 4px; } .cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul li .icon-view { margin-right: 4px; }
.cms-content-controls .preview-selector .chzn-drop ul.chzn-results li.result-selected { background: #e6eaed; color: #444444; } .cms-content-controls .preview-selector .chzn-drop ul.chzn-results li.result-selected { background: #e6eaed; color: #444444; }
.cms-content-controls .preview-selector .chzn-drop ul.chzn-results li.result-selected.highlighted, .cms-content-controls .preview-selector .chzn-drop ul.chzn-results li.result-selected:hover, .cms-content-controls .preview-selector .chzn-drop ul.chzn-results li.result-selected:focus { background: #e6eaed; color: #444444; } .cms-content-controls .preview-selector .chzn-drop ul.chzn-results li.result-selected.highlighted, .cms-content-controls .preview-selector .chzn-drop ul.chzn-results li.result-selected:hover, .cms-content-controls .preview-selector .chzn-drop ul.chzn-results li.result-selected:focus { background: #e6eaed; color: #444444; }
<<<<<<< HEAD
>>>>>>> 6280c9b... BUG ie styles for riseup chosen selects, Menu width >>>>>>> 6280c9b... BUG ie styles for riseup chosen selects, Menu width
.cms-content-controls .cms-preview-states { float: right; position: relative; margin-top: 3px; margin-right: 7px; width: 100px; } .cms-content-controls .cms-preview-states { float: right; position: relative; margin-top: 3px; margin-right: 7px; width: 100px; }
=======
.cms-content-controls .cms-preview-states { float: right; }
<<<<<<< HEAD
>>>>>>> 37eff69... Replace switch (todo: abstract js to work with either switch or drop-up)
=======
.cms-content-controls .cms-preview-states select { max-width: 150px; }
.cms-content-controls .cms-preview-states.dropdown { max-width: 150px; }
.cms-content-controls .cms-preview-states.dropdown a.chzn-single span { margin: 0; }
.cms-content-controls .cms-preview-states.dropdown .chzn-container { max-width: 150px; }
>>>>>>> ba1cc62... Switch dropdown changes
.ModelAdmin .cms-content-fields { overflow: hidden; } .ModelAdmin .cms-content-fields { overflow: hidden; }
.ModelAdmin .cms-content-fields .cms-edit-form { overflow-y: auto; overflow-x: hidden; } .ModelAdmin .cms-content-fields .cms-edit-form { overflow-y: auto; overflow-x: hidden; }

13
admin/javascript/LeftAndMain.Preview.js
View File

@ -90,10 +90,12 @@
* Update the visual appearance to match the internal preview state. * Update the visual appearance to match the internal preview state.
*/ */
redraw: function() { redraw: function() {
if(window.debug) console.log('redraw', this.attr('class'), this.get(0)); if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
// Update preview state selector. // Update preview state selector.
var currentStateName = this.getCurrentStateName(); var currentStateName = this.getCurrentStateName();
if (currentStateName) { if (currentStateName) {
this.find('.cms-preview-states').changeVisibleState(currentStateName); this.find('.cms-preview-states').changeVisibleState(currentStateName);
} }
@ -158,8 +160,8 @@
_getNavigatorStates: function() { _getNavigatorStates: function() {
// Walk through available states and get the URLs. // Walk through available states and get the URLs.
var urlMap = $.map(this.getAllowedStates(), function(name) { var urlMap = $.map(this.getAllowedStates(), function(name) {
var stateLink = $('.cms-preview-states .switch-options a[name=' + name + ']'); var stateLink = $('.cms-preview-states .state-name[data-name=' + name + ']');
return stateLink.length ? {name: name, url: stateLink.attr('href')} : null; return stateLink.length ? {name: name, url: stateLink.attr('data-link')} : null;
}); });
return urlMap; return urlMap;
@ -341,18 +343,15 @@
} }
}); });
$('.cms-preview-states .switch-options a').entwine({ $('.cms-preview-states .state-name').entwine({
/** /**
* Reacts to the user changing the state of the preview. * Reacts to the user changing the state of the preview.
* TODO Rewrite this function to ensure we can handle 1,2,3+ states. * TODO Rewrite this function to ensure we can handle 1,2,3+ states.
*/ */
onclick: function(e) { onclick: function(e) {
var targetStateName = $(this).siblings('a').attr('name'); var targetStateName = $(this).attr('data-name');
// Reload preview with the selected state. // Reload preview with the selected state.
$('.cms-preview').changeState(targetStateName); $('.cms-preview').changeState(targetStateName);
return false;
} }
}); });

193
admin/scss/_forms.scss
View File

@ -639,106 +639,113 @@ input.radio {
/*************************************************************** /***************************************************************
* On/Off Switch. * On/Off Switch.
* Supports switching between two values (eg Draft/Published) * Supports switching between up to 5 values (used for Draft/Published)
* Example html set-up: * Example html set-up:
* <div class="switch-states"> * <fieldset class="switch-states size_2">
* <input type="checkbox" class="state" id="switch" checked> * <div class="switch">
* <label for="switch"> * <input id="Draft" class="first" name="view" type="radio" checked>
* <span class="switch-options">* * <label for="Draft"><span>Draft</span></label>
* <a href="" class="first active">On</a> * <input id="Published" class="last" name="view" type="radio">
* <a href="" class="last">Off</a> * <label for="Published"><span>Published</span></label>
* </span> * <span class="slide-button"></span>
* <span class="switch"></span> * </div>
* </label> * </fieldset>
*</div>
****************************************************************/ ****************************************************************/
.switch-states { fieldset.switch-states{
label { /* Single label includes both switch options*/ .switch{
display: block; @include box-shadow(inset 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.1));
overflow: hidden; @include border-radius(3px);
cursor: pointer; -webkit-animation: bugfix infinite 1s; //Bugfix for older Webkit, including mobile Webkit.
@include border-radius(3px); background:lighten(#2d3035,69%);
} display: block;
input:checked + label { height: 25px;
.switch-options { margin-top:3px;
margin-left: 0; padding: 0;
} position: relative;
.switch { width:100%;
right: 0px; z-index:5;
} label{
} @include text-shadow(0 1px 0 rgba(255,255,255,0.5));
input.state{ /* Hidden checkbox records the state of the switch */ color:lighten($color-text-dark,5%);
display:none; color:rgba($color-text-dark,0.5);
} float:left;
.switch-options{ /* span wrapping both switch options */ font-weight:bold;
display:block; height: 100%;
width: 200%; line-height: 25px;
margin-left: -100%; padding-left:15px;
@include transition(margin 0.3s ease-in 0s); position:relative;
a { text-align:center;
text-align: right; vertical-align: middle;
width: 50%; z-index:2;
float: left; &:hover{
display: block; color:$color-text-dark;
padding: 0 8px 0 0; //color:#2b9c32;
height: 24px; }
line-height: 24px; span{
color: #FFF; @include box-sizing('border-box');
background-color: #93BE42; padding:10px;
@include background-image(linear-gradient( }
}
input {
opacity: 0;
position: absolute;
&:checked + label {
@include transition(all 0.3s ease-out 0s);
color: #fff;
text-shadow: 0 -1px 0 darken($color-menu-button,10%);
}
}
.slide-button{
@include background-image(linear-gradient(
#2b9c32, #2b9c32,
#64ab36 #64ab36
)); ));
@include border-radius(3px);
@include box-shadow(darken($color-menu-button, 15%) 0 0 2px inset); @include box-shadow(inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2));
@include box-sizing(border-box); @include text-shadow(0 1px 0 rgba(255,255,255,0.5));
&:hover { @include transition(all 0.3s ease-out 0s);
text-decoration: none; background-color: $color-menu-button;
@include background-image(linear-gradient( display:block;
lighten(#2b9c32, 5%), height: 100%;
lighten(#64ab36, 5%) left:0;
)); padding: 0;
} position: absolute;
&.first { top: 0;
text-align: left; z-index: 1;
padding-left: 8px;
padding-right: 0;
background-color: $color-menu-button;
@include background-image(linear-gradient(
darken($color-menu-button, 10%),
$color-menu-button
));
&:hover{
@include background-image(linear-gradient(
$color-menu-button,
lighten($color-menu-button, 5%)
));
}
}
} }
} }
.switch { /* Divider, styled to look like a switch */
display:block; /*
width: 8px; Produce css for up to 5 states.
margin: 0px;
position: absolute; Note: with a little adjustment the switch can take more than 5 items,
top: 0; but a dropdown would probably be more appropriate
bottom: 0; */
right: 90px; @for $i from 1 through 5 {
border: 1px solid lighten($color-medium-separator,10%); &.size_#{$i} {
@include box-shadow(#FFF 0 0 2px inset); label span, .slide-button {
@include border-radius(3px); width: 100% / $i;
background: $color-widget-bg; }
@include background-image(linear-gradient( @if $i == 1{
rgba(0,0,0,0.2) 0%, label span{
rgba(0,0,0,0) 100% padding-right:25px; //even up the padding for a single item
)); }
@include transition(all 0.3s ease-in 0s); }
input:checked:nth-of-type(2) ~ .slide-button {
left: 100% / $i;
}
input:checked:nth-of-type(3) ~ .slide-button {
left: (100% / $i) * 2;
}
input:checked:nth-of-type(4) ~ .slide-button {
left: (100% / $i) * 3;
}
input:checked:nth-of-type(5) ~ .slide-button {
left: (100% / $i) * 4;
}
}
} }
} }
//old web-kit browser fix
@-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }

27
admin/scss/_preview.scss
View File

@ -11,7 +11,7 @@
} }
/* Styling for icons in controls */ /* Styling for icons in controls */
.icon-view, .dropdown a.chzn-single { .icon-view, .preview-selector.dropdown a.chzn-single {
white-space: nowrap; white-space: nowrap;
&:before { &:before {
display:inline-block; display:inline-block;
@ -49,7 +49,7 @@
.cms-navigator{ .cms-navigator{
width: 100%; width: 100%;
} }
.dropdown a.chzn-single{ .preview-selector.dropdown a.chzn-single{
text-indent:-200px; text-indent:-200px;
} }
@ -170,9 +170,6 @@
} }
} }
} }
&.open .chzn-drop {
//display: block;
}
.chzn-drop ul.chzn-results li.result-selected { .chzn-drop ul.chzn-results li.result-selected {
background: darken($color-widget-bg, 2%); background: darken($color-widget-bg, 2%);
color: $color-text; color: $color-text;
@ -185,10 +182,22 @@
.cms-preview-states{ .cms-preview-states{
float: right; float: right;
position: relative; select{
margin-top: 3px; max-width:150px;
margin-right: 7px; }
width: 100px;
&.dropdown{
max-width:150px;
a.chzn-single{
span{
margin:0;
}
}
.chzn-container{
max-width:150px;
}
}
} }
} }

34
admin/templates/Includes/LeftAndMain_SilverStripeNavigator.ss
View File

@ -19,17 +19,31 @@
</select> </select>
</span> </span>
<div class="cms-preview-states switch-states">
<input type="checkbox" name="cms-preview" class="state cms-preview-checkbox" id="cms-preview-state" checked> <% if Items.Count < 5 %>
<label for="cms-preview-state"> <fieldset id="preview-states" class="cms-preview-states switch-states size_{$Items.Count}">
<span class="switch-options"> <div class="switch">
<% loop Items %> <% loop Items %>
$Items.count <input id="$Title" data-name="$Name" class="state-name $FirstLast" data-link="$Link" name="view" type="radio" <% if First %>checked<% end_if %>>
<a href="$Link" name="$Name" class="$FirstLast <% if isActive %> active<% end_if %>">$Title</a> <label for="$Title"><span>$Title</span></label>
<% end_loop %> <% end_loop %>
</span> <span class="slide-button"></span>
<span class="switch"></span> </div>
</label> </fieldset>
</div> <% else %>
<span id="preview-state-dropdown" class="cms-preview-states field dropdown">
<select title="<% _t('SilverStripeNavigator.PreviewState', 'Preview State') %>" id="preview-states" class="preview-state dropdown nolabel" autocomplete="off" name="preview-state">
<% loop Items %>
<option name="$Name" data-name="$Name" data-link="$Link" class="state-name $FirstLast" value="$Link" >
$Title
</option>
<% end_loop %>
</select>
</span>
<% end_if %>
</div> </div>