caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade to Bootstrap 3

Browse Source
This commit is contained in:
benweet 2013-08-25 22:38:44 +02:00
parent 1e8d77f909
commit 3db9b24e84
4 changed files with 11 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
js/core.js
View File

@ -455,16 +455,11 @@ define([
$menuPanelElt = $('.menu-panel').collapse({ $menuPanelElt = $('.menu-panel').collapse({
toggle: false toggle: false
}); });
$menuPanelElt.click(function(e) {
console.log(e);
}).find('.panel-content').click(function(e) {
e.stopPropagation();
});
var menuPanelBackdropElt = undefined; var menuPanelBackdropElt = undefined;
$menuPanelElt.on('show.bs.collapse', function(e) { $menuPanelElt.on('show.bs.collapse', function(e) {
if(e.target === $menuPanelElt[0]) { if(e.target === $menuPanelElt[0]) {
isMenuPanelShown = true; isMenuPanelShown = true;
menuPanelBackdropElt = utils.createBackdrop(); menuPanelBackdropElt = utils.createBackdrop('collapse', '.menu-panel');
$menuPanelElt.addClass('move-to-front'); $menuPanelElt.addClass('move-to-front');
} }
else { else {

6
js/html/bodyIndex.html
View File

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

12
js/styles/main.less
View File

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

4
js/utils.js
View File

@ -181,9 +181,7 @@ define([
// Create a backdrop and add to the body // Create a backdrop and add to the body
utils.createBackdrop = function(toggle, target) { utils.createBackdrop = function(toggle, target) {
var result = crel('div', { var result = crel('div', {
'class': 'modal-backdrop in', 'class': 'modal-backdrop in'
'data-toggle': toggle,
'data-target': target,
}); });
document.body.appendChild(result); document.body.appendChild(result);
return result; return result;