From cfea0240a786dac03aa2e2d752dfaa2be27f494c Mon Sep 17 00:00:00 2001 From: Remy Sharp Date: Mon, 26 Mar 2012 23:21:27 +0100 Subject: [PATCH] Save button now split in two --- css/style.css | 137 ++++++++++++++++++++++++++++------------ index.php | 18 ++++-- js/chrome/esc.js | 3 + js/chrome/navigation.js | 23 +++++++ js/chrome/splitter.js | 1 + 5 files changed, 136 insertions(+), 46 deletions(-) diff --git a/css/style.css b/css/style.css index 1f419f09..6c031e9c 100644 --- a/css/style.css +++ b/css/style.css @@ -41,7 +41,12 @@ p { left: 0; right: 0; border-bottom: 1px solid #aaa; - background: #fff -webkit-gradient(linear, 0% 0%, 0% 50%, from(transparent), to(rgba(0, 0, 0, 0.15))) + background-color: #fff; + background-image: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%); + background-image: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%); + background-image: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%); + background-image: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%); + background-image: linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.15) 50%); } #control, .label { @@ -72,7 +77,7 @@ p { .help { /* width: 10%;*/ - min-width: 134px; + /*min-width: 134px;*/ text-align: right; position: absolute; right: 0; @@ -240,9 +245,9 @@ iframe.javascript { .button { border: 1px solid #CCC; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; + /*-webkit-border-radius: 3px;*/ + /*-moz-border-radius: 3px;*/ + /*border-radius: 3px;*/ height: 24px; line-height: 24px; padding: 6px 10px; @@ -360,33 +365,33 @@ body.preview a.preview { } .group { - -moz-border-radius: 0; + /*-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; - border-left: 0; +*/ border-left: 0; } .left { border-left: 1px solid #ccc; - -moz-border-radius-topleft: 3px; + /*-moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; - border-bottom-left-radius: 3px; + border-bottom-left-radius: 3px;*/ } .right { border-right: 1px solid #ccc; - -moz-border-radius-topright: 3px; + /*-moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-top-right-radius: 3px; - border-bottom-right-radius: 3px; + border-bottom-right-radius: 3px;*/ } -div.group { +div.menu { margin-left: -1px; border-left: 1px solid #ccc; float: left; @@ -396,13 +401,12 @@ div.group { z-index: 20; padding: 0; height: 36px; - overflow: hidden; + /*overflow: hidden;*/ } -div.group:hover, +/*div.group:hover, div.group.hover { background: #fff; - /*height: 102px;*/ height: auto; overflow: visible; -moz-border-radius-bottomleft: 3px; @@ -413,40 +417,29 @@ div.group.hover { -o-box-shadow: 1px 1px 2px #ccc; box-shadow: 1px 1px 2px #ccc; } - -#control div.group .title { - display: block; +*/ +#control div.group > * { + display: inline-block; float: none; padding: 6px 10px; - padding-right: 64px; text-align: center; - /*background: url(../images/down.png) repeat-y 75px center;*/ font-weight: normal; text-decoration: none; position: relative; + border: 0; } -#control div.group:hover .title { +#control div.group :hover { background: #eee; } -#control div.group .title:after { - position: absolute; - right: 10px; - border-left: 1px solid #bbb; - padding-left: 10px; +#control .group .title { + padding-right: 40px; } -#control div.group:hover .title { - /*background: #eee url(../images/down-hover.png) no-repeat 75px center;*/ -} - -#control div.group .button { - padding-left: 12px; - border: 0; - display: block; - /*width: 74px;*/ - float: none; +#control div.group .button-dropdown { + border-left: 1px solid #ccc; + border-right: 1px solid #ccc; } #control .group a { @@ -953,7 +946,18 @@ ie6, li { } .button.download { - padding-left: 24px; + position: relative; +} + +.button.download:before { + display: block; + width: 16px; + height: 16px; + position: absolute; + left: 6px; + font-weight: normal; + + /*padding-left: 24px;*/ /* background-image: url(/images/arrow_down_12x12.png);*/ /*background-image: url(../images/download.png);*/ /*background-repeat: no-repeat;*/ @@ -1864,7 +1868,7 @@ div.CodeMirror-selected { background: #d9d9d9; } } .icon.icon-download-alt:before { - padding-right: 10px; + /*padding-right: 10px;*/ } .icon { font-family: 'FontAwesome', sans-serif; } @@ -1946,4 +1950,59 @@ div.CodeMirror-selected { background: #d9d9d9; } #output .atn { color: #606; } #output .atv { color: #080; } #output .dec { color: #606; } -#output .error span { color: #E81D20;} \ No newline at end of file +#output .error span { color: #E81D20;} + +.dropdown { + display: none; + background: white; + box-shadow: 1px 4px 7px rgba(0,0,0,0.2); + height: auto; + margin: 3px; + border: 1px solid #CCC; + /*border-bottom-right-radius: 5px;*/ + position: absolute; +} + +.open .dropdown { + display: block; +} + +.dropdown > * { + display: block; + float: none; + border-right: 0; + padding: 5px 20px 5px 25px; +} + +.dropdown a:last-child:hover { + /*border-bottom-right-radius: 5px;*/ +} + +.dropdown > a:hover { + background: #aaa; + color: #333; + text-shadow: 0px 1px 0 rgba(255,255,255,0.3); +} + +.menu > a.button { + display: inline-block; +} + +#panels { + width: 480px; + margin: 0 auto; + overflow: hidden; +} + +.button-dropdown:hover, +.open .button-dropdown { + box-shadow: inset 0 1px 6px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05) !important; +} + +.open .button-dropdown { + background: #eee; +} + +#panels .button:first-child { + border-left: 1px solid #ccc; +} \ No newline at end of file diff --git a/index.php b/index.php index 548c5e71..06850e7c 100644 --- a/index.php +++ b/index.php @@ -57,16 +57,20 @@ if ($code_id) {
-
- Save +
+
+ Save +
+
diff --git a/js/chrome/esc.js b/js/chrome/esc.js index 41f0989f..6db33ff1 100644 --- a/js/chrome/esc.js +++ b/js/chrome/esc.js @@ -6,6 +6,9 @@ $(document).keydown(function (event) { } else if (prefsOpen) { $body.toggleClass('prefsOpen'); prefsOpen = false; + } else if (dropdownOpen) { + $('.menu.open').removeClass('open'); + dropdownOpen = false; } } }); \ No newline at end of file diff --git a/js/chrome/navigation.js b/js/chrome/navigation.js index 290de99a..4f54acfd 100644 --- a/js/chrome/navigation.js +++ b/js/chrome/navigation.js @@ -153,6 +153,29 @@ $('.prefsButton a').click(function (e) { $body.toggleClass('prefsOpen'); }); +var dropdownOpen = false; +$('.button-dropdown').click(function (e) { + if (!dropdownOpen) { + $(this).closest('.menu').addClass('open'); + dropdownOpen = true; + } else { + $(this).closest('.menu').removeClass('open'); + dropdownOpen = false; + } + e.preventDefault(); +}); + +$body.click(function (event) { + if (dropdownOpen) { + if (!$(event.target).closest('.menu').length) { + $('.menu.open').removeClass('open'); + dropdownOpen = false; + return false; + } + } +}); + + // $('#control div.help a:last').click(function () { // $(window).trigger('togglehelp'); // return false; diff --git a/js/chrome/splitter.js b/js/chrome/splitter.js index cc6f8a13..0f78dd52 100644 --- a/js/chrome/splitter.js +++ b/js/chrome/splitter.js @@ -167,6 +167,7 @@ $.fn.splitter = function () { $prev.css('border-top', '1px solid #ccc'); } else { // $el.css('border-right', '1px solid #ccc'); + $el.css('border-top', 0); $prev.css('border-right', '1px solid #ccc'); }