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-10 01:28:48 +01:00
parent 519e336114
commit 907c721459
3 changed files with 119 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
js/core.js
View File

@ -158,22 +158,8 @@ define([
} }
} }
// Set the panels visibility
var layout = undefined;
var menuPanelElt = undefined;
var documentPanelElt = undefined;
function setPanelVisibility(forceHide) {
if(forceHide === true || layout.state.north.isClosed) {
menuPanelElt.hide();
documentPanelElt.hide();
}
else {
menuPanelElt.show();
documentPanelElt.show();
}
}
// Set the preview button visibility // Set the preview button visibility
var layout = undefined;
var previewButtonsElt = undefined; var previewButtonsElt = undefined;
function setPreviewButtonsVisibility(forceHide) { function setPreviewButtonsVisibility(forceHide) {
if(forceHide === true || layout.state.east.isClosed) { if(forceHide === true || layout.state.east.isClosed) {
@ -190,28 +176,24 @@ define([
return; return;
} }
var layoutGlobalConfig = { var layoutGlobalConfig = {
closable: true, closable: false,
resizable: false, resizable: false,
slidable: false, slidable: false,
livePaneResizing: true, livePaneResizing: true,
enableCursorHotkey: false, enableCursorHotkey: false,
resizerDblClickToggle: false, north__spacing_open: 6,
spacing_open: 15, spacing_open: 35,
spacing_closed: 15, spacing_closed: 35,
togglerLength_open: 90, togglerLength_open: 60,
togglerLength_closed: 90, togglerLength_closed: 60,
stateManagement__enabled: false, stateManagement__enabled: false,
center__minWidth: 200, center__minWidth: 200,
center__minHeight: 200, center__minHeight: 200,
onopen: function() { onopen: function() {
setPanelVisibility();
setPreviewButtonsVisibility(); setPreviewButtonsVisibility();
}, },
onclose_start: function(paneName) { onclose_start: function(paneName) {
if(paneName == 'north') { if(paneName == 'east') {
setPanelVisibility(true);
}
else if(paneName == 'east') {
setPreviewButtonsVisibility(true); setPreviewButtonsVisibility(true);
} }
}, },
@ -221,6 +203,7 @@ define([
$(".ui-layout-south").remove(); $(".ui-layout-south").remove();
$(".preview-container").html('<div id="preview-contents"><div id="wmd-preview" class="preview-content"></div></div>'); $(".preview-container").html('<div id="preview-contents"><div id="wmd-preview" class="preview-content"></div></div>');
layout = $('body').layout($.extend(layoutGlobalConfig, { layout = $('body').layout($.extend(layoutGlobalConfig, {
east__closable: true,
east__resizable: true, east__resizable: true,
east__size: .5, east__size: .5,
east__minSize: 250 east__minSize: 250
@ -230,6 +213,7 @@ define([
$(".ui-layout-east").remove(); $(".ui-layout-east").remove();
$(".preview-container").html('<div id="preview-contents"><div id="wmd-preview" class="preview-content"></div></div>'); $(".preview-container").html('<div id="preview-contents"><div id="wmd-preview" class="preview-content"></div></div>');
layout = $('body').layout($.extend(layoutGlobalConfig, { layout = $('body').layout($.extend(layoutGlobalConfig, {
south__closable: true,
south__resizable: true, south__resizable: true,
south__size: .5, south__size: .5,
south__minSize: 200 south__minSize: 200
@ -238,9 +222,8 @@ define([
$(".navbar").click(function() { $(".navbar").click(function() {
layout.allowOverflow('north'); layout.allowOverflow('north');
}); });
$(".ui-layout-toggler-north").addClass("btn btn-info").html('<b class="caret"></b>'); $(".ui-layout-toggler-south").addClass("btn btn-info").html('<i class="icon-none"></i>');
$(".ui-layout-toggler-south").addClass("btn btn-info").html('<b class="caret"></b>'); $(".ui-layout-toggler-east").addClass("btn btn-info").html('<i class="icon-none"></i>');
$(".ui-layout-toggler-east").addClass("btn btn-info").html('<b class="caret"></b>');
// We attach the preview buttons to the UI layout resizer in order to have fixed position // We attach the preview buttons to the UI layout resizer in order to have fixed position
previewButtonsElt = $('<div class="extension-preview-buttons">'); previewButtonsElt = $('<div class="extension-preview-buttons">');
@ -251,7 +234,6 @@ define([
$('.ui-layout-resizer-south').append(previewButtonsElt); $('.ui-layout-resizer-south').append(previewButtonsElt);
} }
setPanelVisibility();
setPreviewButtonsVisibility(); setPreviewButtonsVisibility();
eventMgr.onLayoutCreated(layout); eventMgr.onLayoutCreated(layout);
@ -447,13 +429,18 @@ define([
menuPanelElt.on('shown.bs.collapse', function() { menuPanelElt.on('shown.bs.collapse', function() {
isMenuPanelShown = true; isMenuPanelShown = true;
// Register a click listener when menu panel is open // Register a click listener when menu panel is open
$('body').on('click.hide-menu-panel', '.action-close-panel, :not(.menu-panel, .menu-panel *)', function(e) { $('body').on('click.hide-menu-panel', function(e) {
// If click outside the panel, close the panel and unregister // If click outside the panel, close the panel and unregister
// the listener // the listener
menuPanelElt.collapse('hide'); if($(e.target).is('.action-close-panel, :not(.menu-panel, .menu-panel *)')) {
$('body').off('click.hide-menu-panel'); menuPanelElt.collapse('hide');
isMenuPanelShown = false; $('body').off('click.hide-menu-panel');
isMenuPanelShown = false;
}
}); });
}).on('hidden.bs.collapse', function() {
// Close all collapsed sub-menu when menu panel is closed
menuPanelElt.find('.in').collapse('hide');
}); });
documentPanelElt = $('.document-panel'); documentPanelElt = $('.document-panel');
@ -461,13 +448,18 @@ define([
documentPanelElt.on('shown.bs.collapse', function() { documentPanelElt.on('shown.bs.collapse', function() {
isDocumentPanelShown = true; isDocumentPanelShown = true;
// Register a click listener when document panel is open // Register a click listener when document panel is open
$('body').on('click.hide-document-panel', '.action-close-panel, :not(.document-panel, .document-panel *)', function(e) { $('body').on('click.hide-document-panel', function(e) {
// If click outside the panel, close the panel and unregister // If click outside the panel, close the panel and unregister
// the listener // the listener
documentPanelElt.collapse('hide'); if($(e.target).is('.action-close-panel, :not(.document-panel, .document-panel *)')) {
$(document).off('click.hide-document-panel'); documentPanelElt.collapse('hide');
isDocumentPanelShown = false; $('body').off('click.hide-document-panel');
isDocumentPanelShown = false;
}
}); });
}).on('hidden.bs.collapse', function() {
// Close all collapsed sub-menu when document panel is closed
documentPanelElt.find('.in').collapse('hide');
}); });
var isModalShown = false; var isModalShown = false;

6
js/html/bodyIndex.html
View File

@ -11,7 +11,7 @@
title="New local document"> title="New local document">
<i class="icon-file"></i> <i class="icon-file"></i>
</button> </button>
<button class="btn btn-success" title="Delete local document" <button class="btn btn-success" title="Delete current document"
data-toggle="modal" data-target="#modal-remove-file-confirm"> data-toggle="modal" data-target="#modal-remove-file-confirm">
<i class="icon-trash"></i> <i class="icon-trash"></i>
</button></li> </button></li>
@ -111,10 +111,10 @@
<ul class="nav"> <ul class="nav">
<li><a href="#" data-toggle="modal" <li><a href="#" data-toggle="modal"
data-target="#modal-settings" data-target="#modal-settings"
class="action-load-settings list-group-item"><i class="icon-cog"></i> class="action-load-settings list-group-item action-close-panel"><i class="icon-cog"></i>
Settings</a></li> Settings</a></li>
<li><a href="#" data-toggle="modal" data-target="#modal-about" <li><a href="#" data-toggle="modal" data-target="#modal-about"
class=" list-group-item"><i class="icon-help-circled"></i> About</a></li> class="list-group-item action-close-panel"><i class="icon-help-circled"></i> About</a></li>
</ul> </ul>
</div> </div>

178
js/styles/default.less
View File

@ -6,7 +6,7 @@
@error-border: #ff8661; @error-border: #ff8661;
@icon-color: #525252; @icon-color: #525252;
@icon-color-inv: #fff; @icon-color-inv: #fff;
@menu-panel-width: 250px; @menu-panel-width: 280px;
@document-panel-width: 300px; @document-panel-width: 300px;
@panel-bg: @bg-navbar-hover; @panel-bg: @bg-navbar-hover;
@transparent: fade(#000, 0%); @transparent: fade(#000, 0%);
@ -15,6 +15,7 @@
@body-bg: #f5f5f5; @body-bg: #f5f5f5;
@input-border: #ddd; @input-border: #ddd;
@dropdown-border: #ddd; @dropdown-border: #ddd;
@pre-border-color: #ddd;
@navbar-bg: #ddd; @navbar-bg: #ddd;
@dropdown-link-hover-bg: #888; @dropdown-link-hover-bg: #888;
@dropdown-link-active-color: #fff; @dropdown-link-active-color: #fff;
@ -25,7 +26,7 @@
@btn-default-bg: #fff; @btn-default-bg: #fff;
@btn-default-border: @transparent; @btn-default-border: @transparent;
@btn-primary-color: #fff; @btn-primary-color: #fff;
@btn-primary-bg: #777; @btn-primary-bg: #888;
@btn-primary-border: @transparent; @btn-primary-border: @transparent;
@btn-success-color: #333333; @btn-success-color: #333333;
@btn-success-bg: @navbar-bg; @btn-success-bg: @navbar-bg;
@ -33,6 +34,9 @@
@btn-info-bg: @body-bg; @btn-info-bg: @body-bg;
@btn-info-border: @transparent; @btn-info-border: @transparent;
@gray-lighter: @body-bg; @gray-lighter: @body-bg;
@modal-header-border-color: #e8e8e8;
@modal-content-border-color: #e8e8e8;
@modal-footer-border-color: #e8e8e8;
body { body {
@ -40,7 +44,7 @@ body {
} }
#preview-contents { #preview-contents {
padding: 19px; padding: 8px 15px 8px 5px;
margin-bottom: 50px; margin-bottom: 50px;
} }
@ -97,7 +101,7 @@ Override Bootstrap
} }
.modal-content { .modal-content {
border-width: 0; border-width: 5px;
} }
@ -248,12 +252,17 @@ Override Bootstrap
// Common style // Common style
.menu-panel, .document-panel { .menu-panel, .document-panel {
display: block;
background-color: @panel-bg; background-color: @panel-bg;
position: absolute; position: absolute;
height: 100%; height: 100%;
z-index: 10; z-index: 10;
overflow: initial; overflow: initial;
.box-shadow(0 6px 12px rgba(0,0,0,.175)); .box-shadow(0 6px 12px rgba(0,0,0,.175));
.collapse-button i {
color: #777;
font-size: 18px;
}
.panel-content { .panel-content {
padding-top: 6px; padding-top: 6px;
padding-bottom: 25px; padding-bottom: 25px;
@ -272,7 +281,7 @@ Override Bootstrap
} }
} }
.nav { .nav {
border-left: 10px solid @panel-bg; border-left: 10px solid fade(#000, 5%);
margin-left: 10px; margin-left: 10px;
} }
} }
@ -284,8 +293,7 @@ Override Bootstrap
.menu-panel { .menu-panel {
width: @menu-panel-width !important; width: @menu-panel-width !important;
margin-left: (-@menu-panel-width - 30); margin-left: (-@menu-panel-width - 32);
border-right: 1px solid @dropdown-border;
-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;
@ -303,13 +311,15 @@ Override Bootstrap
padding: 2px 20px; padding: 2px 20px;
z-index: -1; z-index: -1;
} }
.panel-content {
border-right: 5px solid @preview-bg-light;
}
} }
.document-panel { .document-panel {
right: 0; right: 0;
width: @document-panel-width !important; width: @document-panel-width !important;
margin-right: (-@document-panel-width - 30); margin-right: (-@document-panel-width - 32);
border-left: 1px solid @dropdown-border;
-webkit-transition: margin-right 0.35s ease; -webkit-transition: margin-right 0.35s ease;
-moz-transition: margin-right 0.35s ease; -moz-transition: margin-right 0.35s ease;
-o-transition: margin-right 0.35s ease; -o-transition: margin-right 0.35s ease;
@ -327,10 +337,12 @@ Override Bootstrap
padding: 7px 18px; padding: 7px 18px;
z-index: -1; z-index: -1;
i.icon-folder-open { i.icon-folder-open {
color: #777;
font-size: 22px; font-size: 22px;
} }
} }
.panel-content {
border-left: 5px solid @preview-bg-light;
}
} }
@ -377,35 +389,18 @@ Override Bootstrap
* Preview extensions buttons * Preview extensions buttons
********************/ ********************/
.ui-layout-resizer-north, .ui-layout-resizer-south {
overflow: visible !important;
}
.extension-preview-buttons { .extension-preview-buttons {
position: absolute; position: absolute;
top: 15px; right: 40px;
right: 25px;
z-index: 1; z-index: 1;
font-size: 14px; top: 6px;
.ui-layout-resizer-closed > & {
display: none;
}
.dropdown-menu { .dropdown-menu {
border: 0; border: 0;
margin-top: 1px; margin-top: 1px;
} }
.btn {
background-color: fade(@navbar-bg, 50%);
float: none;
i {
color: fade(@icon-color, 30%);
}
&:hover,
&:focus,
&:active,
&.active {
i {
color: @icon-color
}
}
}
.btn-group { .btn-group {
margin: 0 0 0 1px; margin: 0 0 0 1px;
.btn { .btn {
@ -428,7 +423,7 @@ Override Bootstrap
overflow-x: hidden; overflow-x: hidden;
padding-right: 20px; padding-right: 20px;
margin-right: -20px; margin-right: -20px;
width: 300px; width: 320px;
} }
.markdown-syntax { .markdown-syntax {
@ -447,6 +442,54 @@ Override Bootstrap
} }
/*********************************
* UI Layout
*********************************/
.ui-layout-resizer {
overflow: visible !important;
font-size: 14px !important;
.btn {
background-color: fade(@navbar-bg, 50%);
float: none;
i {
color: fade(@icon-color, 30%);
}
&:hover,
&:focus,
&:active,
&.active {
background-color: fade(@navbar-bg, 50%);
i {
color: @icon-color
}
}
}
.ui-layout-toggler {
font-size: 22px !important;
background-color: transparent;
&.ui-layout-toggler-east-open i {
margin: 18px 0 0 2px !important;
&:before {
content: '\e950';
}
}
&.ui-layout-toggler-east-closed i {
margin: 18px 0 0 -2px !important;
&:before {
content: '\e94f';
}
}
&.ui-layout-toggler-south-open i:before {
content: '\e94d';
}
&.ui-layout-toggler-south-closed i:before {
content: '\e94e';
}
}
}
/********************* /*********************
* Markdown * Markdown
*********************/ *********************/
@ -592,10 +635,6 @@ div.dropdown-menu textarea {
} }
// Custom icons (not from Font Awesome) // Custom icons (not from Font Awesome)
.icon-down-dir {
margin-right: -5px;
}
.icon-code { .icon-code {
font-size: 80%; font-size: 80%;
margin-left: -1px; margin-left: -1px;
@ -663,55 +702,6 @@ div.dropdown-menu textarea {
background-position: -144px 0; background-position: -144px 0;
} }
.ui-layout-toggler-north .caret,.ui-layout-toggler-south .caret {
margin-top: 5px;
}
.ui-layout-toggler-north-open .caret,.ui-layout-toggler-south-closed .caret
{
border-bottom: 5px solid #525252;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-top: 0;
}
.ui-layout-toggler-north-closed .caret,.ui-layout-toggler-south-open .caret
{
border-top: 5px solid #525252;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-bottom: 0;
}
.ui-layout-toggler-east .caret,.ui-layout-toggler-west .caret {
margin-top: 40px;
}
.ui-layout-toggler-east-open .caret,.ui-layout-toggler-west-closed .caret
{
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-left: 5px solid #525252;
border-right: 0;
}
.ui-layout-toggler-east-closed .caret,.ui-layout-toggler-west-opened .caret
{
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 5px solid #525252;
border-left: 0;
}
/* Google picker */
.picker-dialog {
z-index: 1050 !important;
}
.action-import-image-gplus {
float: left;
}
/************************** /**************************
* Settings * Settings
**************************/ **************************/
@ -789,6 +779,15 @@ div.dropdown-menu textarea {
} }
} }
/* Google picker */
.picker-dialog {
z-index: 1050 !important;
}
.action-import-image-gplus {
float: left;
}
/* /*
.nav>li>a:hover,.nav>li>a:focus { .nav>li>a:hover,.nav>li>a:focus {
background-color: @bg-light; background-color: @bg-light;
@ -847,13 +846,8 @@ table tbody+tbody {
border-top: 2px solid #dddddd; border-top: 2px solid #dddddd;
} }
// Duplicate from .well blockquote
#preview-contents blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
blockquote { blockquote {
border-left: 10px solid fade(#000, 5%);
p { p {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 14px; font-size: 14px;