From 9be6156890dcbe3c5559e3606ef82abce5769b03 Mon Sep 17 00:00:00 2001 From: benweet Date: Sun, 1 Dec 2013 15:43:46 +0000 Subject: [PATCH] New UI design --- bower.json | 8 +- public/res-min/img/stackedit-32.ico | Bin 5430 -> 5430 bytes public/res/core.js | 94 +- public/res/eventMgr.js | 4 +- public/res/extensions/buttonShare.js | 52 -- .../res/extensions/dialogManagePublication.js | 4 +- public/res/extensions/dialogManageSharing.js | 50 + public/res/extensions/welcomeTour.js | 10 +- public/res/extensions/workingIndicator.js | 4 +- public/res/html/bodyIndex.html | 86 +- public/res/html/buttonShare.html | 17 - public/res/html/buttonShareLocation.html | 5 - .../res/html/dialogManageSharingLocation.html | 5 + public/res/html/userCustomSettingsBlock.html | 2 +- public/res/img/stackedit-32.ico | Bin 5430 -> 5430 bytes public/res/libs/fontello/LICENSE.txt | 18 +- public/res/libs/fontello/config.json | 14 +- .../res/libs/fontello/css/fontello-codes.css | 486 +++++----- .../libs/fontello/css/fontello-embedded.css | 498 +++++----- .../libs/fontello/css/fontello-ie7-codes.css | 486 +++++----- public/res/libs/fontello/css/fontello-ie7.css | 486 +++++----- public/res/libs/fontello/css/fontello.css | 498 +++++----- public/res/libs/fontello/demo.html | 860 +++++++++--------- public/res/libs/fontello/font/fontello.eot | Bin 96472 -> 96884 bytes public/res/libs/fontello/font/fontello.svg | 638 ++++++------- public/res/libs/fontello/font/fontello.ttf | Bin 96304 -> 96716 bytes public/res/libs/fontello/font/fontello.woff | Bin 52216 -> 53740 bytes public/res/styles/base.less | 20 +- public/res/styles/main.less | 125 ++- 29 files changed, 2294 insertions(+), 2176 deletions(-) delete mode 100644 public/res/extensions/buttonShare.js create mode 100644 public/res/extensions/dialogManageSharing.js delete mode 100644 public/res/html/buttonShare.html delete mode 100644 public/res/html/buttonShareLocation.html create mode 100644 public/res/html/dialogManageSharingLocation.html diff --git a/bower.json b/bower.json index 7b42d98a..37e83d68 100644 --- a/bower.json +++ b/bower.json @@ -3,7 +3,7 @@ "version": "2.3.3", "description": "StackEdit is a free, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.", "dependencies": { - "bootstrap": "~3.0.2", + "bootstrap": "v3.0.0", "jquery": "2.0.3", "underscore": "1.5.1", "requirejs": "~2.1.8", @@ -17,10 +17,10 @@ "FileSaver": "*", "stacktrace": "~0.5.3", "requirejs-text": "~2.0.10", - "bootstrap-tour": "~0.6.0", + "bootstrap-tour": "~0.7.1", "ace": "4bbe5346f2ae5ad35c0c47defa244ab27aedd451", "pagedown-ace": "https://github.com/benweet/pagedown-ace.git#72a27932f6f4f78e93a186aa2947d1f15c1cd7d5", - "pagedown-extra": "https://github.com/jmcmanus/pagedown-extra.git#c7f99ad0b8abfa0b9c9b8d406253b6d6695c4fb3", + "pagedown-extra": "https://github.com/jmcmanus/pagedown-extra.git#bb1d4ec19edd01e4364e98dd4ec149a31f2f5c9a", "crel": "git@github.com:KoryNunn/crel.git#8dbda04b129fc0aec01a2a080d1cab26816e11c1", "waitForImages": "git@github.com:alexanderdickson/waitForImages.git#~1.4.2", "to-markdown": "git@github.com:benweet/to-markdown.git#jquery", @@ -31,6 +31,6 @@ }, "resolutions": { "jquery": "2.0.3", - "bootstrap": "~3.0.2" + "bootstrap": "v3.0.0" } } diff --git a/public/res-min/img/stackedit-32.ico b/public/res-min/img/stackedit-32.ico index 4a8562b30f1491bcef4fcda15b521e161a9d3b53..3d5d2858c89022f071ed2bb53fcae847b487d75e 100644 GIT binary patch literal 5430 zcmeHLO>7%g5Poh61tkVM0ri4J#Geon91E%93jqGiG2Um%VVVJE*Z& zI@|+byYy3_trrSLJ|65V7JfbZQUHd!0fxF1vPWB@o4+mR0YF(^UgivdILgYYiG0Nt z?Yp6#y)fcG)6>&pIy*ZH<#L(C!j60x*{`gu!06~GOiWCG&*uZb-w!AgL#(|qemb3o zY&I(>l}g<)K4Ky^t^wC_r}+5HGcz*+mtxV(`klY0SGk^ox=Tw-!er+iC|jA}D#cD4 zf1W>;_wT#tWzp>tiviT5mPol2yUcT^62tAk;@>}cpYLlolN7n0omO^0l4bvJkDKS8 zpX?8f|L{1Iz{AN9TlIlD5;!kkJ^dKj|C5|Yia8H5cG}WBp+4FnVV&vZbd(d;qkr3I zJr0NOIRTHDLDu8&KvU2ED%@@Dg?D(pOB>ayy~>5pUU-ik1-=W^8AFbi`!D`@ez!Wg zS8TGwI{VAVuUz2YSxfZ_I@}+=D{A%dwJ_JulZ{#Yp;Nc>tDn6X7T@?_*V{GtuKp<1 zdi!_7QEQ))H4FPuM=rZDcqF=0U$EB4s`1-h{bj;OZvXzvL|dPn+3y;ja%3`FgU=^4 z*od#zI9i7mo96Z#Uu3MW%Za_N;kh^CiS5B>Gga8SJ#sgET*ndbmDONU*(_TiG z`9ajDm2SAmrL|Q*w3JjZkULVelZ8# zZZ{+n2^9wWsmaMn^;$PE86SOD=iuVvqKHA=95fMseturWANx*>Ilc=dd>5Dl7z5PN z4HNNWv6#RhJj_AFL_&P*i%~~6OvER@>+9g zX6zGRTYt5_!{IQ@&CRJI%t4Glu1y^#)ZZ6^-=qS6Y!^!!x2k`G3F?LlrDExNPijB$ zZ}*&yTB4g-^^9O}elfa#c#iiS=XHIDnh&(^5$|vf6t#Pw-ScV4B5mc3d^an%MR?zJ zVW;n+TsYTNBwXSge~R#J-k|`K%7tbz8tL5|<>&iLbiU_jWX*pBgx~J&KZW?V24}@a zSVs5tXUr}K;cB?WI(Gd`GiOaBj7D-iqu#js*83XF+GzxiaXjf{{YjAcq|*it0xb&{sp3>p7c_%7q2RqOPhERvIRxx#X_Z* zP;0RIRHC{1A0aLD@M4VAW8khPp|@ zutT26vzLxr#y2aReDCUX`h|&42Fvcnr7g6(FYBqsSEe_!Fz@@t_|aq#sJR|*Bvks% zbK0Gc1!Ml=55$9vCmXMGd*2NM+Af-VmD%4bhc6Wfdl(*p3bbj?V5|k+R91Ex-2W=x zPz9d@LH88v_h9~T4y^wCyp8IrXJG7pNpG8YU8|YTKQR~eBA*Ukw6S| zUj=k6!FX358XAjVIerA3VCN^5JYOI9ac? z5A(5p`LGAH-jg1Dtm(<-Fsu?R=8~3T`{~|ETNlQSU$FTd~yJUEF_FCm%W1jWOvGW_7K* z{nwF>bUZh8Iu|W1H@^9#Jm9=z=}824IOj maxWidth) { + $rightBtnDropdown.show().find('.dropdown-menu').append($rightBtnElts); + if(marginWidth + titleWidth + leftButtonsWidth + rightButtonsDropdown > maxWidth) { + $leftBtnDropdown.show().find('.dropdown-menu').append($leftBtnElts); + } + else { + $leftBtnDropdown.hide().after($leftBtnElts); + } + } + else { + $leftBtnDropdown.hide().after($leftBtnElts); + $rightBtnDropdown.hide().after($rightBtnElts); + } + if(window.lightMode) { + $leftBtnElts.hide(); + $leftBtnDropdown.hide(); + } + layout.resizeAll(); + } + // Create the PageDown editor var editor; var $editorElt; @@ -609,6 +643,12 @@ define([ else { document.body.innerHTML = bodyIndexHTML; } + $navbarElt = $('.navbar'); + $leftBtnElts = $navbarElt.find('.left-buttons'); + $rightBtnElts = $navbarElt.find('.right-buttons'); + $leftBtnDropdown = $navbarElt.find('.left-buttons-dropdown'); + $rightBtnDropdown = $navbarElt.find('.right-buttons-dropdown'); + $(window).bind("resize", adjustWindow); // Populate shortcuts in settings shortcutMgr.addSettingEntries(); @@ -723,6 +763,8 @@ define([ }, 1000); eventMgr.onReady(); + // Adjust the layout after the dom has changed + adjustWindow(); }; // Other initialization that are not prioritary @@ -740,10 +782,14 @@ define([ $documentPanelElt.collapse('hide'); isModalShown = true; }).on('shown.bs.modal', function() { - // Focus on the first input when modal opens - var elt = $(this); + var $elt = $(this); setTimeout(function() { - elt.find("input:enabled:visible:first").focus(); + // When modal opens focus on the first button + $elt.find('.btn:first').focus(); + // Or on the first link if any + $elt.find('button:first').focus(); + // Or on the first input if any + $elt.find("input:enabled:visible:first").focus(); }, 50); }).on('hidden.bs.modal', function() { // Focus on the editor when modal is gone @@ -891,6 +937,19 @@ define([ }); // Tooltips + var openedTooltip; + function openTooltip(e) { + var elt = this; + if(openedTooltip && openedTooltip[0] === elt) return; + _.defer(function() { + $(document).on("click.close-tooltip", function() { + openedTooltip && openedTooltip.tooltip('hide'); + openedTooltip = undefined; + $(document).off("click.close-tooltip"); + }); + openedTooltip = $(elt).tooltip('show'); + }); + } $(".tooltip-lazy-rendering").tooltip({ container: '.modal-settings', placement: 'right', @@ -907,23 +966,13 @@ define([ 'NOTE: Backlinks in Stack Exchange Q/A are not welcome.' ].join('') }); - var tooltipOpen = false; $(".tooltip-usercustom-extension").tooltip({ html: true, container: '.modal-settings', placement: 'right', trigger: 'manual', title: settingsUserCustomExtensionTooltipHTML - }).click(function(e) { - $(this).tooltip('show'); - $(document).on("click.tooltip-usercustom-extension", function() { - tooltipOpen = false; - $(".tooltip-usercustom-extension").tooltip('hide'); - $(document).off("click.tooltip-usercustom-extension"); - }); - !tooltipOpen && e.stopPropagation(); - tooltipOpen = true; - }); + }).click(openTooltip); _.each(document.querySelectorAll(".tooltip-template"), function(tooltipElt) { var $tooltipElt = $(tooltipElt); $tooltipElt.tooltip({ @@ -932,16 +981,7 @@ define([ placement: 'right', trigger: 'manual', title: settingsTemplateTooltipHTML - }).click(function(e) { - $tooltipElt.tooltip('show'); - $(document).on("click.tooltip-template", function() { - tooltipOpen = false; - $(".tooltip-template").tooltip('hide'); - $(document).off("click.tooltip-template"); - }); - !tooltipOpen && e.stopPropagation(); - tooltipOpen = true; - }); + }).click(openTooltip); }); // Avoid dropdown panels to close on click diff --git a/public/res/eventMgr.js b/public/res/eventMgr.js index 39c50528..75fc3fd3 100644 --- a/public/res/eventMgr.js +++ b/public/res/eventMgr.js @@ -15,6 +15,7 @@ define([ "extensions/dialogAbout", "extensions/dialogManagePublication", "extensions/dialogManageSynchronization", + "extensions/dialogManageSharing", "extensions/dialogOpenHarddrive", "extensions/documentTitle", "extensions/documentSelector", @@ -30,7 +31,6 @@ define([ "extensions/buttonFocusMode", "extensions/buttonSync", "extensions/buttonPublish", - "extensions/buttonShare", "extensions/buttonStat", "extensions/buttonHtmlCode", "extensions/buttonViewer", @@ -257,7 +257,7 @@ define([ _.each(onCreateButtonListenerList, function(listener) { extensionButtonsFragment.appendChild(createBtn(listener)); }); - document.getElementById('extension-buttons').appendChild(extensionButtonsFragment); + document.querySelector('.extension-buttons').appendChild(extensionButtonsFragment); // Create extension editor buttons logger.log("onCreateEditorButton"); diff --git a/public/res/extensions/buttonShare.js b/public/res/extensions/buttonShare.js deleted file mode 100644 index 788bd9d4..00000000 --- a/public/res/extensions/buttonShare.js +++ /dev/null @@ -1,52 +0,0 @@ -define([ - "jquery", - "underscore", - "classes/Extension", - "text!html/buttonShare.html", - "text!html/buttonShareLocation.html", -], function($, _, Extension, buttonShareHTML, buttonShareLocationHTML) { - - var buttonShare = new Extension("buttonShare", 'Button "Share"', true, true); - buttonShare.settingsBlock = '

Adds a "Share document" button in the navigation bar.

'; - - buttonShare.onCreateButton = function() { - return buttonShareHTML; - }; - - var fileDesc; - var linkListElt; - var $noLinkElt; - var refreshDocumentSharing = function(fileDescParameter) { - if(fileDescParameter !== undefined && fileDescParameter !== fileDesc) { - return; - } - - var linkListHtml = _.reduce(fileDesc.publishLocations, function(result, attributes) { - if(attributes.sharingLink) { - result += _.template(buttonShareLocationHTML, { - link: attributes.sharingLink - }); - } - return result; - }, ''); - linkListElt.innerHTML = linkListHtml; - $noLinkElt.toggleClass('hide', linkListHtml.length !== 0); - }; - - buttonShare.onFileSelected = function(fileDescParameter) { - fileDesc = fileDescParameter; - refreshDocumentSharing(fileDescParameter); - }; - - buttonShare.onNewPublishSuccess = refreshDocumentSharing; - buttonShare.onPublishRemoved = refreshDocumentSharing; - - buttonShare.onReady = function() { - var linkContainerElt = document.querySelector('.link-container'); - linkListElt = linkContainerElt.querySelector('.link-list'); - $noLinkElt = $(linkContainerElt.querySelector('.no-link')); - }; - - return buttonShare; - -}); \ No newline at end of file diff --git a/public/res/extensions/dialogManagePublication.js b/public/res/extensions/dialogManagePublication.js index 24664500..66934c4f 100644 --- a/public/res/extensions/dialogManagePublication.js +++ b/public/res/extensions/dialogManagePublication.js @@ -32,9 +32,7 @@ define([ var publishListHtml = _.reduce(fileDesc.publishLocations, function(result, publishAttributes) { var formattedAttributes = _.omit(publishAttributes, "provider", "publishIndex", "sharingLink"); - if(formattedAttributes.password) { - formattedAttributes.password = "********"; - } + formattedAttributes.password && (formattedAttributes.password = "********"); formattedAttributes = JSON.stringify(formattedAttributes).replace(/{|}|"/g, "").replace(/,/g, ", "); return result + _.template(dialogManagePublicationLocationHTML, { publishAttributes: publishAttributes, diff --git a/public/res/extensions/dialogManageSharing.js b/public/res/extensions/dialogManageSharing.js new file mode 100644 index 00000000..5d92e2de --- /dev/null +++ b/public/res/extensions/dialogManageSharing.js @@ -0,0 +1,50 @@ +define([ + "jquery", + "underscore", + "classes/Extension", + "text!html/dialogManageSharingLocation.html", +], function($, _, Extension, dialogManageSharingLocationHTML) { + + var dialogManageSharing = new Extension("dialogManageSharing", 'Button "Share"', false, true); + + var fileDesc; + var shareListElt; + var $msgShareListElt; + var $msgNoShareElt; + var refreshDocumentSharing = function(fileDescParameter) { + if(fileDescParameter !== undefined && fileDescParameter !== fileDesc) { + return; + } + + var linkListHtml = _.reduce(fileDesc.publishLocations, function(result, attributes) { + if(attributes.sharingLink) { + result += _.template(dialogManageSharingLocationHTML, { + link: attributes.sharingLink + }); + } + return result; + }, ''); + shareListElt.innerHTML = linkListHtml; + + $msgShareListElt.toggleClass('hide', linkListHtml.length === 0); + $msgNoShareElt.toggleClass('hide', linkListHtml.length !== 0); + }; + + dialogManageSharing.onFileSelected = function(fileDescParameter) { + fileDesc = fileDescParameter; + refreshDocumentSharing(fileDescParameter); + }; + + dialogManageSharing.onNewPublishSuccess = refreshDocumentSharing; + dialogManageSharing.onPublishRemoved = refreshDocumentSharing; + + dialogManageSharing.onReady = function() { + var modalElt = document.querySelector('.modal-manage-sharing'); + shareListElt = modalElt.querySelector('.share-list'); + $msgShareListElt = $(modalElt.querySelectorAll('.msg-share-list')); + $msgNoShareElt = $(modalElt.querySelectorAll('.msg-no-share')); + }; + + return dialogManageSharing; + +}); \ No newline at end of file diff --git a/public/res/extensions/welcomeTour.js b/public/res/extensions/welcomeTour.js index e4298741..cde952c0 100644 --- a/public/res/extensions/welcomeTour.js +++ b/public/res/extensions/welcomeTour.js @@ -46,7 +46,7 @@ define([ placement: 'bottom', }, { - element: '.navbar .action-create-file', + element: '.navbar-inner > .nav .action-create-file, .navbar .right-buttons-dropdown > .nav > .btn:not(:hidden)', title: 'New document', content: 'Click the New document button to create a new document.', placement: 'left', @@ -73,17 +73,17 @@ define([ reflex: true, }, { - element: '#extension-buttons .button-synchronize', + element: '.navbar-inner > .nav .button-synchronize, .navbar .right-buttons-dropdown > .nav > .btn:not(:hidden)', title: 'Synchronize', content: '

Once imported or exported, use the Synchronize button to force the synchronization

This is done automatically every 3 minutes.', - placement: 'bottom', + placement: 'left', reflex: true, }, { - element: '#extension-buttons .button-publish', + element: '.navbar-inner > .nav .button-publish, .navbar .right-buttons-dropdown > .nav > .btn:not(:hidden)', title: 'Update publication', content: 'Once published, use the Publish button to update the publication.', - placement: 'bottom', + placement: 'left', reflex: true, }, { diff --git a/public/res/extensions/workingIndicator.js b/public/res/extensions/workingIndicator.js index f28beca1..1202a6ea 100644 --- a/public/res/extensions/workingIndicator.js +++ b/public/res/extensions/workingIndicator.js @@ -19,8 +19,8 @@ define([ $('.working-indicator').append($workingIndicatorElt); for (var i = 0; i < 4; i++) { $workingIndicatorElt.append($('
').css({ - 'animation-delay': (i*2/10).toPrecision(3) + 's', - '-webkit-animation-delay': (i*2/10).toPrecision(3) + 's', + 'animation-delay': (i*15/100).toPrecision(3) + 's', + '-webkit-animation-delay': (i*15/100).toPrecision(3) + 's', })); } }; diff --git a/public/res/html/bodyIndex.html b/public/res/html/bodyIndex.html index 9098a27d..f5f91a2e 100644 --- a/public/res/html/bodyIndex.html +++ b/public/res/html/bodyIndex.html @@ -2,19 +2,39 @@
-
-

NOTE: You can use a +

Tip: You can use a YAML front matter to specify the title and the tags/labels of your publication.

Interpreted variables: title, tags

@@ -848,7 +871,7 @@
"" is not published yet.

- NOTE: You can add publications using the Publish on sub-menu. + Tip: You can add publications using the Publish on sub-menu.
@@ -859,6 +882,38 @@
+
+
+
+ +
+ +

Sharing

+
+
+

+ "" can be shared using the following link(s): +

+ +

To share this document within StackEdit you need first to publish it as a Gist in + Markdown format. +

+
+ Tip: You can open any URL within StackEdit using viewer#!url=. +
+
+
+ Close +
+
+
+
+ +
@@ -906,9 +961,7 @@
Create - your own theme... +
@@ -963,7 +1016,7 @@ You need to revoke any existing token in + You have to revoke any existing token in Google Dashboard for this change to take effect.
@@ -1025,7 +1078,7 @@
@@ -1102,7 +1155,8 @@

Redirection

-
NOTE:
+

+
Please click OK to proceed.
Cancel diff --git a/public/res/html/buttonShare.html b/public/res/html/buttonShare.html deleted file mode 100644 index 9dae8a4f..00000000 --- a/public/res/html/buttonShare.html +++ /dev/null @@ -1,17 +0,0 @@ - -
-

Sharing

-
-

To share this document you need first to publish it as a Gist in - Markdown format. -

-
- NOTE: You can open any URL within StackEdit using viewer#!url=... -
-
diff --git a/public/res/html/buttonShareLocation.html b/public/res/html/buttonShareLocation.html deleted file mode 100644 index 102e46b5..00000000 --- a/public/res/html/buttonShareLocation.html +++ /dev/null @@ -1,5 +0,0 @@ -
- -
diff --git a/public/res/html/dialogManageSharingLocation.html b/public/res/html/dialogManageSharingLocation.html new file mode 100644 index 00000000..16237f68 --- /dev/null +++ b/public/res/html/dialogManageSharingLocation.html @@ -0,0 +1,5 @@ +
+ +
diff --git a/public/res/html/userCustomSettingsBlock.html b/public/res/html/userCustomSettingsBlock.html index 4f45e46b..718c3ea8 100644 --- a/public/res/html/userCustomSettingsBlock.html +++ b/public/res/html/userCustomSettingsBlock.html @@ -9,4 +9,4 @@
-More info \ No newline at end of file +More info \ No newline at end of file diff --git a/public/res/img/stackedit-32.ico b/public/res/img/stackedit-32.ico index 4a8562b30f1491bcef4fcda15b521e161a9d3b53..4f1fcd28e3db3712c799dea813462382dedf279e 100644 GIT binary patch literal 5430 zcmeHLZ%kWN6u;fXX`tGIW?xJs{);hjA0WnQ#t(ip>Zg6sWQm}0 zQ5i1VG*iM#2LUSogi_jcGX6A_e|>e56h=c<)3re^IXQeTq7&ztZ=J=Qg#~b zdlKs8w9@Zg$I8yYr1cCyag>?<`Ml#ra#QYWn6!Q432+~BA$wb0O1}N&8v(dj9n{z> z6}|?rUF{w%tA&J-kH_n_6U!G~ABCoBfTk*i?9rCUv+{c!0F;G=1!u^32_bl>=hiP(L8ePS;6i!aME_McZ=+gjC4KAB=B=G#8!Qvjs)Io&U4R@{Xfb1N-^(Y#?D!aC)7tfB+N6FoKA4U zeDrT?rKjNNL#N>>Gst=h9xLko-+~9NweTU&cXy0()qdr|XDxipP5?gzc4 z$;MaaHQ0!+<~W*%7MuEZ_qQ?YJDK_Y&f(?vZqKJ1Uy9{m>(0o%@Npi;1J~DsQDsX` ziIiW|59w0T23;-}ghC+|2J5N*{(g0=>zIs>zVSW1Uatx>GczM%Fq6rsGPPqO{=~$DSbwa6 zam{frkZ>19`Qc` DJ@&Ko literal 5430 zcmeHL&1(};5P!AeM@>jf{{YjAcq|*it0xb&{sp3>p7c_%7q2RqOPhERvIRxx#X_Z* zP;0RIRHC{1A0aLD@M4VAW8khPp|@ zutT26vzLxr#y2aReDCUX`h|&42Fvcnr7g6(FYBqsSEe_!Fz@@t_|aq#sJR|*Bvks% zbK0Gc1!Ml=55$9vCmXMGd*2NM+Af-VmD%4bhc6Wfdl(*p3bbj?V5|k+R91Ex-2W=x zPz9d@LH88v_h9~T4y^wCyp8IrXJG7pNpG8YU8|YTKQR~eBA*Ukw6S| zUj=k6!FX358XAjVIerA3VCN^5JYOI9ac? z5A(5p`LGAH-jg1Dtm(<-Fsu?R=8~3T`{~|ETNlQSU$FTd~yJUEF_FCm%W1jWOvGW_7K* z{nwF>bUZh8Iu|W1H@^9#Jm9=z=}824IOj - + + - + +