mirror of
https://github.com/jsbin/jsbin.git
synced 2026-01-18 15:18:04 +00:00
Save button now split in two
This commit is contained in:
Remy Sharp
parent
fa84cf8b2e
commit
cfea0240a7
137
css/style.css
137
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;}
|
||||
#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;
|
||||
}
|
||||
18
index.php
18
index.php
@ -57,16 +57,20 @@ if ($code_id) {
|
||||
<div id="control">
|
||||
<div class="control">
|
||||
<div class="buttons">
|
||||
<div class="button group menu">
|
||||
<a href="<?php echo ROOT?>save" class="save title button icon icon-chevron-down">Save</a>
|
||||
<div class="menu">
|
||||
<div class="group">
|
||||
<a href="<?php echo ROOT?>save" class="save title button">Save</a><a href="#savemenu" class="button button-dropdown"><span class="icon icon-chevron-down"></span></a>
|
||||
</div>
|
||||
<div class="dropdown" id="savemenu">
|
||||
<?php if ($code_id) : ?>
|
||||
<a id="clone" title="Create a new copy" class="button clone group light" href="<?php echo ROOT?>clone">Clone</a>
|
||||
<a id="save" title="Save new a new revision" class="button light save group" href="<?php echo $code_id_path?>save">Save</a>
|
||||
<a id="clone" title="Create a new copy" class="button clone group" href="<?php echo ROOT?>clone">Clone</a>
|
||||
<a id="save" title="Save new a new revision" class="button save group" href="<?php echo $code_id_path?>save">Save</a>
|
||||
<?php else : ?>
|
||||
<a id="save" title="Save new bin" class="button save group" href="<?php echo ROOT?>save">Save</a>
|
||||
<a id="save" title="Save new bin" class="button save group" href="<?php echo ROOT?>save">Save</a>
|
||||
<?php endif ?>
|
||||
<a id="download" title="Save to drive" class="button download group light icon icon-download-alt" href="<?php echo ROOT?>download">Download</a>
|
||||
<a id="startingpoint" title="Set as starting code" class="button group" href="<?php echo ROOT?>save">As template</a>
|
||||
<a id="download" title="Save to drive" class="button download group icon icon-download-alt" href="<?php echo ROOT?>download">Download</a>
|
||||
<a id="startingpoint" title="Set as starting code" class="button group" href="<?php echo ROOT?>save">As template</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="panels"></div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -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;
|
||||
|
||||
@ -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');
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user