Upgrade to Bootstrap 3

This commit is contained in:
benweet 2013-08-25 02:45:14 +02:00
parent 840896faf0
commit 1e8d77f909
3 changed files with 22 additions and 15 deletions

View File

@ -455,12 +455,17 @@ define([
$menuPanelElt = $('.menu-panel').collapse({
toggle: false
});
$menuPanelElt.click(function(e) {
console.log(e);
}).find('.panel-content').click(function(e) {
e.stopPropagation();
});
var menuPanelBackdropElt = undefined;
$menuPanelElt.on('show.bs.collapse', function(e) {
if(e.target === $menuPanelElt[0]) {
isMenuPanelShown = true;
menuPanelBackdropElt = utils.createBackdrop('collapse', '.menu-panel');
//$menuPanelElt.addClass('move-to-front');
menuPanelBackdropElt = utils.createBackdrop();
$menuPanelElt.addClass('move-to-front');
}
else {
// Close all open sub-menus when one submenu opens
@ -470,7 +475,7 @@ define([
if(e.target === $menuPanelElt[0]) {
isMenuPanelShown = false;
menuPanelBackdropElt.remove();
//$menuPanelElt.removeClass('move-to-front');
$menuPanelElt.removeClass('move-to-front');
}
}).on('hidden.bs.collapse', function(e) {
if(e.target === $menuPanelElt[0]) {
@ -487,7 +492,7 @@ define([
if(e.target === $documentPanelElt[0]) {
isDocumentPanelShown = true;
documentPanelBackdropElt = utils.createBackdrop('collapse', '.document-panel');
//$documentPanelElt.addClass('move-to-front');
$documentPanelElt.addClass('move-to-front');
}
else {
// Close all open sub-menus when one submenu opens
@ -497,7 +502,7 @@ define([
if(e.target === $documentPanelElt[0]) {
isDocumentPanelShown = false;
documentPanelBackdropElt.remove();
//$documentPanelElt.removeClass('move-to-front');
$documentPanelElt.removeClass('move-to-front');
}
}).on('hidden.bs.collapse', function(e) {
if(e.target === $documentPanelElt[0]) {

View File

@ -45,9 +45,9 @@
<div class="ui-layout-south preview-container"></div>
<div id="wmd-button-bar" class="hide"></div>
<div class="menu-panel collapse width">
<button class="btn btn-success collapse-button" data-toggle="collapse"
data-target=".menu-panel" title="Menu">
<div class="menu-panel collapse width" data-toggle="collapse"
data-target=".menu-panel">
<button class="btn btn-success collapse-button" title="Menu">
<i class="icon-left-dir"></i> <img data-stackedit-src="stackedit-64.png"
width="32" height="32" />
</button>

View File

@ -317,14 +317,14 @@ body {
position: absolute;
top: 0;
height: 100%;
z-index: 2000;
z-index: 10;
overflow: initial;
.box-shadow(0 6px 12px rgba(0,0,0,.175));
.collapse-button i {
color: @panel-button-color;
font-size: 19px;
}
.panel-content {
.box-shadow(0 6px 12px rgba(0,0,0,.175));
overflow: auto;
padding-bottom: 30px;
height: 100%;
@ -336,9 +336,8 @@ body {
}
.menu-panel {
background-color: @panel-bg;
width: @menu-panel-width !important;
margin-left: (-@menu-panel-width - 32);
width: 0 !important;
margin-left: (-@menu-panel-width - 38);
-webkit-transition: margin-left 0.35s ease;
-moz-transition: margin-left 0.35s ease;
-o-transition: margin-left 0.35s ease;
@ -347,19 +346,22 @@ body {
background-color: @list-group-bg;
}
&.in {
width: 100% !important;
margin-left: 0;
.collapse-button {
background-color: @panel-bg;
}
}
.collapse-button {
right: -80px;
left: 260px;
position: absolute;
margin-top: 6px;
padding: 2px 20px;
z-index: -1;
}
.panel-content {
background-color: @panel-bg;
width: @menu-panel-width;
padding-top: 6px;
border-right: 5px solid @panel-border-color;
}