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

15
js/extensions/documentSelector.js
View File

@ -59,9 +59,14 @@ define([
}
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) {
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")) {
fileMgr.selectFile(fileDesc);
}
@ -73,8 +78,10 @@ define([
liMap[fileDesc.fileIndex] = li;
if(fileDesc === selectFileDesc) {
li.addClass("disabled");
documentPanelItemElt.addClass("active");
}
$(".file-selector").append(li);
fileSelectorElt.append(li);
documentPanelSelectorElt.append(documentPanelItemElt);
});
liArray = _.values(liMap);
};
@ -94,7 +101,7 @@ define([
// Filter for search input in file selector
function filterFileSelector(filter) {
var liList = $(".file-selector li:not(.stick)");
var liList = $(".file-selector > li");
liList.show();
if(filter) {
var words = filter.toLowerCase().split(/\s+/);

4
js/extensions/documentTitle.js
View File

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

30
js/fileMgr.js
View File

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

25
js/html/bodyIndex.html
View File

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

2
js/html/bodyViewer.html
View File

@ -44,7 +44,7 @@
</ul>
<ul class="nav pull-right">
<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>
</div>
</div>

144
js/styles/default.less
View File

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