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-07 00:52:58 +01:00
parent 489a1d8789
commit 54870aab39
8 changed files with 141 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/jgrowl.css
View File

@ -60,7 +60,7 @@ div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
} }
div.jGrowl div.jGrowl-notification { div.jGrowl div.jGrowl-notification {
min-height: 40px; min-height: 70px;
} }
div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-notification,

30
js/core.js
View File

@ -157,8 +157,21 @@ define([
} }
} }
// Create the layout // Set the panels visibility
var layout = undefined; 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();
}
}
// Create the layout
function createLayout() { function createLayout() {
if(viewerMode === true) { if(viewerMode === true) {
return; return;
@ -175,7 +188,15 @@ define([
togglerLength_closed: 90, togglerLength_closed: 90,
stateManagement__enabled: false, stateManagement__enabled: false,
center__minWidth: 200, center__minWidth: 200,
center__minHeight: 200 center__minHeight: 200,
onopen: function() {
setPanelVisibility();
},
onclose_start: function(paneName) {
if(paneName == 'north') {
setPanelVisibility(true);
}
},
}; };
eventMgr.onLayoutConfigure(layoutGlobalConfig); eventMgr.onLayoutConfigure(layoutGlobalConfig);
if(settings.layoutOrientation == "horizontal") { if(settings.layoutOrientation == "horizontal") {
@ -202,6 +223,7 @@ define([
$(".ui-layout-toggler-north").addClass("btn btn-info").append($("<b>").addClass("caret")); $(".ui-layout-toggler-north").addClass("btn btn-info").append($("<b>").addClass("caret"));
$(".ui-layout-toggler-south").addClass("btn btn-info").append($("<b>").addClass("caret")); $(".ui-layout-toggler-south").addClass("btn btn-info").append($("<b>").addClass("caret"));
$(".ui-layout-toggler-east").addClass("btn btn-info").append($("<b>").addClass("caret")); $(".ui-layout-toggler-east").addClass("btn btn-info").append($("<b>").addClass("caret"));
setPanelVisibility();
eventMgr.onLayoutCreated(layout); eventMgr.onLayoutCreated(layout);
} }
@ -391,7 +413,7 @@ define([
e.stopPropagation(); e.stopPropagation();
}); });
var menuPanelElt = $('.menu-panel'); menuPanelElt = $('.menu-panel');
var isMenuPanelShown = false; var isMenuPanelShown = false;
menuPanelElt.on('shown.bs.collapse', function() { menuPanelElt.on('shown.bs.collapse', function() {
isMenuPanelShown = true; isMenuPanelShown = true;
@ -406,7 +428,7 @@ define([
}); });
}); });
var documentPanelElt = $('.document-panel'); documentPanelElt = $('.document-panel');
var isDocumentPanelShown = false; var isDocumentPanelShown = false;
documentPanelElt.on('shown.bs.collapse', function() { documentPanelElt.on('shown.bs.collapse', function() {
isDocumentPanelShown = true; isDocumentPanelShown = true;

15
js/extensions/documentSelector.js
View File

@ -59,9 +59,14 @@ define([
} }
liMap = {}; liMap = {};
$(".file-selector li:not(.stick)").empty(); var fileSelectorElt = $(".file-selector");
fileSelectorElt.empty();
var documentPanelSelectorElt = $(".document-panel > .panel-content > .list-group");
documentPanelSelectorElt.empty();
_.chain(fileSystem).sortBy(sortFunction).each(function(fileDesc) { _.chain(fileSystem).sortBy(sortFunction).each(function(fileDesc) {
var a = $('<a href="#">').html(composeTitle(fileDesc)).click(function() { var a = $('<a href="#">').html(composeTitle(fileDesc));
var documentPanelItemElt = a.clone().addClass('list-group-item');
documentPanelItemElt.add(a).click(function() {
if(!liMap[fileDesc.fileIndex].is(".disabled")) { if(!liMap[fileDesc.fileIndex].is(".disabled")) {
fileMgr.selectFile(fileDesc); fileMgr.selectFile(fileDesc);
} }
@ -73,8 +78,10 @@ define([
liMap[fileDesc.fileIndex] = li; liMap[fileDesc.fileIndex] = li;
if(fileDesc === selectFileDesc) { if(fileDesc === selectFileDesc) {
li.addClass("disabled"); li.addClass("disabled");
documentPanelItemElt.addClass("active");
} }
$(".file-selector").append(li); fileSelectorElt.append(li);
documentPanelSelectorElt.append(documentPanelItemElt);
}); });
liArray = _.values(liMap); liArray = _.values(liMap);
}; };
@ -94,7 +101,7 @@ define([
// Filter for search input in file selector // Filter for search input in file selector
function filterFileSelector(filter) { function filterFileSelector(filter) {
var liList = $(".file-selector li:not(.stick)"); var liList = $(".file-selector > li");
liList.show(); liList.show();
if(filter) { if(filter) {
var words = filter.toLowerCase().split(/\s+/); var words = filter.toLowerCase().split(/\s+/);

4
js/extensions/documentTitle.js
View File

@ -38,9 +38,9 @@ define([
var title = fileDesc.title; var title = fileDesc.title;
document.title = "StackEdit - " + title; document.title = "StackEdit - " + title;
$("#file-title").html(composeTitle(fileDesc)); $(".file-title-navbar").html(composeTitle(fileDesc));
$(".file-title").text(title); $(".file-title").text(title);
$("#file-title-input").val(title); $(".input-file-title").val(title);
if(layout !== undefined) { if(layout !== undefined) {
// Use defer to make sure UI has been updated // Use defer to make sure UI has been updated

30
js/fileMgr.js
View File

@ -154,6 +154,8 @@ define([
fileMgr.selectFile(); fileMgr.selectFile();
var fileTitleElt = $('.file-title-navbar');
var fileTitleInputElt = $(".input-file-title");
$(".action-create-file").click(function() { $(".action-create-file").click(function() {
var fileDesc = fileMgr.createFile(); var fileDesc = fileMgr.createFile();
fileMgr.selectFile(fileDesc); fileMgr.selectFile(fileDesc);
@ -161,42 +163,42 @@ define([
if(wmdInput.setSelectionRange) { if(wmdInput.setSelectionRange) {
wmdInput.setSelectionRange(0, 0); wmdInput.setSelectionRange(0, 0);
} }
$("#file-title").click(); fileTitleElt.click();
}); });
$(".action-remove-file").click(function() { $(".action-remove-file").click(function() {
fileMgr.deleteFile(); fileMgr.deleteFile();
}); });
$("#file-title").click(function() { fileTitleElt.click(function() {
if(viewerMode === true) { if(viewerMode === true) {
return; return;
} }
$(this).hide(); fileTitleElt.addClass('hide');
var fileTitleInput = $("#file-title-input").show(); var fileTitleInput = fileTitleInputElt.removeClass('hide');
_.defer(function() { _.defer(function() {
fileTitleInput.focus().get(0).select(); fileTitleInput.focus().get(0).select();
}); });
}); });
function applyTitle(input) { function applyTitle() {
input.hide(); fileTitleInputElt.addClass('hide');
$("#file-title").show(); fileTitleElt.removeClass('hide');
var title = $.trim(input.val()); var title = $.trim(fileTitleInputElt.val());
var fileDesc = fileMgr.currentFile; var fileDesc = fileMgr.currentFile;
if(title && title != fileDesc.title) { if(title && title != fileDesc.title) {
fileDesc.title = title; fileDesc.title = title;
eventMgr.onTitleChanged(fileDesc); eventMgr.onTitleChanged(fileDesc);
} }
input.val(fileDesc.title); fileTitleInputElt.val(fileDesc.title);
$("#wmd-input").focus(); $("#wmd-input").focus();
} }
$("#file-title-input").blur(function() { fileTitleInputElt.blur(function() {
applyTitle($(this)); applyTitle();
}).keyup(function(e) { }).keyup(function(e) {
if(e.keyCode == 13) { if(e.keyCode == 13) {
applyTitle($(this)); applyTitle();
} }
if(e.keyCode == 27) { if(e.keyCode == 27) {
$(this).val(""); fileTitleInputElt.val("");
applyTitle($(this)); applyTitle();
} }
}); });
$(".action-open-stackedit").click(function() { $(".action-open-stackedit").click(function() {

25
js/html/bodyIndex.html
View File

@ -28,11 +28,13 @@
</li> </li>
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><i class="working-indicator icon-none"></i></li> <li><a class="btn btn-success file-title-navbar" href="#"
<li><a class="btn btn-success" id="file-title" href="#"
title="Rename current document"> </a></li> title="Rename current document"> </a></li>
<li class="navbar-form"><input id="file-title-input" type="text" <li><input type="text"
class="col-lg-3 form-control hide" placeholder="Document title" /></li> class="col-lg-4 form-control hide input-file-title" placeholder="Document title" /></li>
</ul>
<ul class="nav pull-right">
<li><i class="working-indicator icon-none"></i></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -41,20 +43,23 @@
<div class="ui-layout-south preview-container"></div> <div class="ui-layout-south preview-container"></div>
<div class="document-panel nav-collapse collapse"> <div class="document-panel collapse width">
<button class="btn btn-success document-button" data-toggle="collapse" <button class="btn btn-success collapse-button" data-toggle="collapse"
data-target=".document-panel" title="Menu"> data-target=".document-panel" title="Menu">
<i class="icon-folder-open"></i> <i class="icon-right-dir"></i> <i class="icon-folder-open"></i> <i class="icon-right-dir"></i>
</button> </button>
<div class="document-container"></div> <div class="panel-content">
<div class="list-group">
</div> </div>
<div class="menu-panel nav-collapse collapse"> </div>
<button class="btn btn-success menu-button" data-toggle="collapse" </div>
<div class="menu-panel collapse width">
<button class="btn btn-success collapse-button" data-toggle="collapse"
data-target=".menu-panel" title="Menu"> data-target=".menu-panel" title="Menu">
<i class="icon-left-dir"></i> <img src="img/stackedit-64.png" <i class="icon-left-dir"></i> <img src="img/stackedit-64.png"
width="32" height="32" /> width="32" height="32" />
</button> </button>
<div class="menu-container"> <div class="panel-content">
<div class="list-group"> <div class="list-group">
<a href="viewer.html" title="StackEdit Viewer" <a href="viewer.html" title="StackEdit Viewer"
class="list-group-item"><i class="icon-resize-full"></i> class="list-group-item"><i class="icon-resize-full"></i>

2
js/html/bodyViewer.html
View File

@ -44,7 +44,7 @@
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><i class="working-indicator icon-none"></i></li> <li><i class="working-indicator icon-none"></i></li>
<li><span class="brand" id="file-title"></span></li> <li><span class="brand file-title-navbar"></span></li>
</ul> </ul>
</div> </div>
</div> </div>

122
js/styles/default.less
View File

@ -8,7 +8,7 @@
@icon-color-inv: #fff; @icon-color-inv: #fff;
@menu-panel-width: 250px; @menu-panel-width: 250px;
@document-panel-width: 250px; @document-panel-width: 250px;
@menu-bg: @bg-navbar-hover; @panel-bg: @bg-navbar-hover;
@transparent: fade(#000, 0%); @transparent: fade(#000, 0%);
/* Bootstrap */ /* Bootstrap */
@ -18,6 +18,8 @@
@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;
@list-group-border: @transparent;
@list-group-active-bg: @dropdown-link-hover-bg;
@input-color-placeholder: #ccc; @input-color-placeholder: #ccc;
@btn-default-color: #333333; @btn-default-color: #333333;
@btn-default-bg: #fff; @btn-default-bg: #fff;
@ -31,7 +33,6 @@
@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;
@list-group-border: @transparent;
body { body {
@ -158,11 +159,14 @@ Override Bootstrap
.navbar { .navbar {
position: static; position: static;
padding-left: 55px; padding: 0;
padding-right: 35px; .navbar-inner {
margin-left: 50px;
margin-right: 30px;
}
.nav { .nav {
float: left; float: left;
margin: 6px 0 0; margin: 6px 5px 0;
& > li { & > li {
display: inline-block; display: inline-block;
} }
@ -211,9 +215,8 @@ Override Bootstrap
} }
} }
#file-title { .file-title-navbar {
padding: 4px 15px; padding: 4px 15px;
margin-left: -20px;
font-size: 20px; font-size: 20px;
font-weight: 200; font-weight: 200;
color: #666; color: #666;
@ -222,12 +225,16 @@ Override Bootstrap
} }
} }
.input-file-title {
margin-right: 10px;
}
.working-indicator { .working-indicator {
background-image: none !important; background-image: none !important;
width: 43px; width: 43px;
height: 11px; height: 11px;
background-position: 0 0; background-position: 0 0;
margin-right: 30px; margin: 15px 10px 0;
&.show { &.show {
background-image: url("../../img/ajax-loader.gif") !important; background-image: url("../../img/ajax-loader.gif") !important;
} }
@ -236,37 +243,20 @@ Override Bootstrap
/********************* /*********************
* Menu panel * Menu/Document panels
*********************/ *********************/
.menu-panel { // Common style
.menu-panel, .document-panel {
background-color: @panel-bg;
position: absolute; position: absolute;
height: 100% !important; height: 100%;
width: @menu-panel-width;
z-index: 10; z-index: 10;
margin-left: (-@menu-panel-width - 30);
background-color: @menu-bg;
border-right: 1px solid @dropdown-border;
.box-shadow(0 6px 12px rgba(0,0,0,.175));
overflow: initial; overflow: initial;
-webkit-transition: margin-left 0.35s ease; .box-shadow(0 6px 12px rgba(0,0,0,.175));
-moz-transition: margin-left 0.35s ease; .panel-content {
-o-transition: margin-left 0.35s ease; padding-top: 6px;
transition: margin-left 0.35s ease; padding-bottom: 25px;
&.in {
margin-left: 0;
.menu-button {
background-color: @menu-bg;
}
}
.menu-button {
right: -80px;
position: absolute;
margin-top: 6px;
padding: 2px 20px;
z-index: -1;
}
.menu-container {
overflow: auto; overflow: auto;
height: 100%; height: 100%;
i { i {
@ -274,41 +264,60 @@ Override Bootstrap
color: inherit; color: inherit;
} }
.list-group { .list-group {
margin-top: 6px;
.list-group-item { .list-group-item {
border-radius: 0;
color: @btn-default-color; color: @btn-default-color;
&.active {
color: @text-inv;
}
}
.nav {
border-left: 10px solid @panel-bg;
margin-left: 10px;
} }
} }
} }
} }
.menu-panel {
/********************* width: @menu-panel-width !important;
* Document panel margin-left: (-@menu-panel-width - 30);
*********************/ border-right: 1px solid @dropdown-border;
-webkit-transition: margin-left 0.35s ease;
-moz-transition: margin-left 0.35s ease;
-o-transition: margin-left 0.35s ease;
transition: margin-left 0.35s ease;
&.in {
margin-left: 0;
.collapse-button {
background-color: @panel-bg;
}
}
.collapse-button {
right: -80px;
position: absolute;
margin-top: 6px;
padding: 2px 20px;
z-index: -1;
}
}
.document-panel { .document-panel {
position: absolute;
right: 0; right: 0;
height: 100% !important; width: @document-panel-width !important;
width: @document-panel-width;
z-index: 10;
margin-right: (-@document-panel-width - 30); margin-right: (-@document-panel-width - 30);
background-color: @menu-bg;
border-left: 1px solid @dropdown-border; border-left: 1px solid @dropdown-border;
.box-shadow(0 6px 12px rgba(0,0,0,.175));
overflow: initial;
-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;
transition: margin-right 0.35s ease; transition: margin-right 0.35s ease;
&.in { &.in {
margin-right: 0; margin-right: 0;
.document-button { .collapse-button {
background-color: @menu-bg; background-color: @panel-bg;
} }
} }
.document-button { .collapse-button {
left: -80px; left: -80px;
position: absolute; position: absolute;
margin-top: 6px; margin-top: 6px;
@ -319,22 +328,7 @@ Override Bootstrap
font-size: 22px; font-size: 22px;
} }
} }
.document-container {
overflow: auto;
height: 100%;
i {
margin-right: 5px;
color: inherit;
} }
.list-group {
margin-top: 6px;
.list-group-item {
color: @btn-default-color;
}
}
}
}
/******************** /********************