diff --git a/admin/css/screen.css b/admin/css/screen.css
index eebb827e7..70f15af3b 100644
--- a/admin/css/screen.css
+++ b/admin/css/screen.css
@@ -285,29 +285,60 @@ input.radio { margin-left: 0; }
/***************************************************************
* 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:
-*
-*
-*
-*
+*
****************************************************************/
-.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; }
-.switch-states input:checked + label .switch-options { margin-left: 0; }
-.switch-states input:checked + label .switch { right: 0px; }
-.switch-states input.state { /* Hidden checkbox records the state of the switch */ display: none; }
-.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; }
-.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); }
-.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); }
-.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); }
-.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 { /*
+ Produce css for up to 5 states.
+
+ Note: with a little adjustment the switch can take more than 5 items,
+ but a dropdown would probably be more appropriate
+ */ }
+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; }
+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; }
+fieldset.switch-states .switch label:hover { color: #2b9c32; }
+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,
@@ -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.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: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
+=======
+.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-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; }
@@ -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.
=======
.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 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; }
@@ -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-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; }
+<<<<<<< HEAD
>>>>>>> 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; }
+<<<<<<< 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 .cms-edit-form { overflow-y: auto; overflow-x: hidden; }
diff --git a/admin/javascript/LeftAndMain.Preview.js b/admin/javascript/LeftAndMain.Preview.js
index 1f3c68c81..95f6b1c0a 100644
--- a/admin/javascript/LeftAndMain.Preview.js
+++ b/admin/javascript/LeftAndMain.Preview.js
@@ -40,7 +40,7 @@
* Switch the preview to different state.
* stateName can be one of the "AllowedStates".
*/
- changeState: function(stateName) {
+ changeState: function(stateName) {
this.setCurrentStateName(stateName);
this._updatePreview();
this.redraw();
@@ -90,10 +90,12 @@
* Update the visual appearance to match the internal preview state.
*/
redraw: function() {
+
if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
// Update preview state selector.
var currentStateName = this.getCurrentStateName();
+
if (currentStateName) {
this.find('.cms-preview-states').changeVisibleState(currentStateName);
}
@@ -158,8 +160,8 @@
_getNavigatorStates: function() {
// Walk through available states and get the URLs.
var urlMap = $.map(this.getAllowedStates(), function(name) {
- var stateLink = $('.cms-preview-states .switch-options a[name=' + name + ']');
- return stateLink.length ? {name: name, url: stateLink.attr('href')} : null;
+ var stateLink = $('.cms-preview-states .state-name[data-name=' + name + ']');
+ return stateLink.length ? {name: name, url: stateLink.attr('data-link')} : null;
});
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.
* TODO Rewrite this function to ensure we can handle 1,2,3+ states.
*/
onclick: function(e) {
- var targetStateName = $(this).siblings('a').attr('name');
-
+ var targetStateName = $(this).attr('data-name');
// Reload preview with the selected state.
- $('.cms-preview').changeState(targetStateName);
-
- return false;
+ $('.cms-preview').changeState(targetStateName);
}
});
diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss
index ea32426c1..781e8987e 100644
--- a/admin/scss/_forms.scss
+++ b/admin/scss/_forms.scss
@@ -639,106 +639,113 @@ input.radio {
/***************************************************************
* 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:
-*
-*
-*
-*
+*
****************************************************************/
-.switch-states {
- label { /* Single label includes both switch options*/
- display: block;
- overflow: hidden;
- cursor: pointer;
- @include border-radius(3px);
- }
- input:checked + label {
- .switch-options {
- margin-left: 0;
- }
- .switch {
- right: 0px;
- }
- }
- input.state{ /* Hidden checkbox records the state of the switch */
- display:none;
- }
- .switch-options{ /* span wrapping both switch options */
- display:block;
- width: 200%;
- margin-left: -100%;
- @include transition(margin 0.3s ease-in 0s);
- 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;
- @include background-image(linear-gradient(
+fieldset.switch-states{
+ .switch{
+ @include box-shadow(inset 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.1));
+ @include border-radius(3px);
+ -webkit-animation: bugfix infinite 1s; //Bugfix for older Webkit, including mobile Webkit.
+ background:lighten(#2d3035,69%);
+ display: block;
+ height: 25px;
+ margin-top:3px;
+ padding: 0;
+ position: relative;
+ width:100%;
+ z-index:5;
+ label{
+ @include text-shadow(0 1px 0 rgba(255,255,255,0.5));
+ color:lighten($color-text-dark,5%);
+ color:rgba($color-text-dark,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;
+ &:hover{
+ color:$color-text-dark;
+ //color:#2b9c32;
+ }
+ span{
+ @include box-sizing('border-box');
+ padding:10px;
+ }
+ }
+ 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,
#64ab36
- ));
-
- @include box-shadow(darken($color-menu-button, 15%) 0 0 2px inset);
- @include box-sizing(border-box);
- &:hover {
- text-decoration: none;
- @include background-image(linear-gradient(
- lighten(#2b9c32, 5%),
- lighten(#64ab36, 5%)
- ));
- }
- &.first {
- text-align: left;
- 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%)
- ));
- }
- }
-
+ ));
+ @include border-radius(3px);
+ @include box-shadow(inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2));
+ @include text-shadow(0 1px 0 rgba(255,255,255,0.5));
+ @include transition(all 0.3s ease-out 0s);
+ background-color: $color-menu-button;
+ display:block;
+ height: 100%;
+ left:0;
+ padding: 0;
+ position: absolute;
+ top: 0;
+ z-index: 1;
}
}
- .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 lighten($color-medium-separator,10%);
- @include box-shadow(#FFF 0 0 2px inset);
- @include border-radius(3px);
- background: $color-widget-bg;
- @include background-image(linear-gradient(
- rgba(0,0,0,0.2) 0%,
- rgba(0,0,0,0) 100%
- ));
- @include transition(all 0.3s ease-in 0s);
- }
-
-}
-
+ /*
+ Produce css for up to 5 states.
+ Note: with a little adjustment the switch can take more than 5 items,
+ but a dropdown would probably be more appropriate
+ */
+ @for $i from 1 through 5 {
+ &.size_#{$i} {
+ label span, .slide-button {
+ width: 100% / $i;
+ }
+ @if $i == 1{
+ label span{
+ padding-right:25px; //even up the padding for a single item
+ }
+ }
+ 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; } }
diff --git a/admin/scss/_preview.scss b/admin/scss/_preview.scss
index 5a4a6be71..d8ee87c6b 100644
--- a/admin/scss/_preview.scss
+++ b/admin/scss/_preview.scss
@@ -11,7 +11,7 @@
}
/* Styling for icons in controls */
- .icon-view, .dropdown a.chzn-single {
+ .icon-view, .preview-selector.dropdown a.chzn-single {
white-space: nowrap;
&:before {
display:inline-block;
@@ -49,7 +49,7 @@
.cms-navigator{
width: 100%;
}
- .dropdown a.chzn-single{
+ .preview-selector.dropdown a.chzn-single{
text-indent:-200px;
}
@@ -170,9 +170,6 @@
}
}
}
- &.open .chzn-drop {
- //display: block;
- }
.chzn-drop ul.chzn-results li.result-selected {
background: darken($color-widget-bg, 2%);
color: $color-text;
@@ -185,10 +182,22 @@
.cms-preview-states{
float: right;
- position: relative;
- margin-top: 3px;
- margin-right: 7px;
- width: 100px;
+ select{
+ max-width:150px;
+ }
+
+ &.dropdown{
+ max-width:150px;
+ a.chzn-single{
+ span{
+ margin:0;
+ }
+ }
+ .chzn-container{
+ max-width:150px;
+ }
+ }
}
+
}
diff --git a/admin/templates/Includes/LeftAndMain_SilverStripeNavigator.ss b/admin/templates/Includes/LeftAndMain_SilverStripeNavigator.ss
index 1c8519997..4b391300d 100644
--- a/admin/templates/Includes/LeftAndMain_SilverStripeNavigator.ss
+++ b/admin/templates/Includes/LeftAndMain_SilverStripeNavigator.ss
@@ -19,17 +19,31 @@
-
-
-
-
+
+ <% if Items.Count < 5 %>
+
+ <% else %>
+
+
+
+ <% end_if %>
+
+
+
+