diff --git a/css/jgrowl.css b/css/jgrowl.css index e3d253b3..c1aa4f75 100644 --- a/css/jgrowl.css +++ b/css/jgrowl.css @@ -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, diff --git a/js/core.js b/js/core.js index a0f4f84d..cf9eac53 100644 --- a/js/core.js +++ b/js/core.js @@ -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($("").addClass("caret")); $(".ui-layout-toggler-south").addClass("btn btn-info").append($("").addClass("caret")); $(".ui-layout-toggler-east").addClass("btn btn-info").append($("").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; diff --git a/js/extensions/documentSelector.js b/js/extensions/documentSelector.js index 5622d71c..1b23ce95 100644 --- a/js/extensions/documentSelector.js +++ b/js/extensions/documentSelector.js @@ -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 = $('').html(composeTitle(fileDesc)).click(function() { + var a = $('').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+/); diff --git a/js/extensions/documentTitle.js b/js/extensions/documentTitle.js index 1b6d9c1a..c0a962f3 100644 --- a/js/extensions/documentTitle.js +++ b/js/extensions/documentTitle.js @@ -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 diff --git a/js/fileMgr.js b/js/fileMgr.js index 7b116661..14c48ce1 100644 --- a/js/fileMgr.js +++ b/js/fileMgr.js @@ -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() { diff --git a/js/html/bodyIndex.html b/js/html/bodyIndex.html index 998587ed..c536c065 100644 --- a/js/html/bodyIndex.html +++ b/js/html/bodyIndex.html @@ -28,11 +28,13 @@ +
    +
@@ -41,20 +43,23 @@
-
- -
+
+
+
+
-
- -
+
diff --git a/js/html/bodyViewer.html b/js/html/bodyViewer.html index 8d37a4b0..b06a7f10 100644 --- a/js/html/bodyViewer.html +++ b/js/html/bodyViewer.html @@ -44,7 +44,7 @@
    • -
    • +
diff --git a/js/styles/default.less b/js/styles/default.less index 8535ebe8..7b04126a 100644 --- a/js/styles/default.less +++ b/js/styles/default.less @@ -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 ********************/