From 8ce272861c29f6eaa4e83f40b7a60332700f1116 Mon Sep 17 00:00:00 2001 From: Naomi Guyer Date: Mon, 3 Dec 2012 15:17:16 +1300 Subject: [PATCH] Replace the state selector switch to support more than 2 states. --- admin/css/screen.css | 91 ++++++-- admin/javascript/LeftAndMain.Preview.js | 17 +- admin/scss/_forms.scss | 195 +++++++++--------- admin/scss/_preview.scss | 27 ++- .../LeftAndMain_SilverStripeNavigator.ss | 38 ++-- 5 files changed, 222 insertions(+), 146 deletions(-) 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 %> +
+
+ <% loop Items %> + checked<% end_if %>> + + <% end_loop %> + +
+
+ <% else %> + + + + <% end_if %> + + + +