caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated UI for publishing understandability

Browse Source
This commit is contained in:
benweet 2014-03-14 15:00:11 +00:00
parent ca05d89a10
commit 296f24eaa5
17 changed files with 102 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.jshintrc Normal file
View File

@ -0,0 +1,14 @@
{
"curly": true,
"browser": true,
"devel": true,
"indent": 4,
"latedef": true,
"undef": true,
"unused": true,
"expr": true,
"globals": {
"define": false,
"require": false
}
}

13
Gruntfile.js
View File

@ -15,18 +15,7 @@ module.exports = function(grunt) {
pkg: grunt.file.readJSON('package.json'), pkg: grunt.file.readJSON('package.json'),
jshint: { jshint: {
options: { options: {
curly: true, jshintrc: true,
browser: true,
devel: true,
indent: 4,
latedef: true,
undef: true,
unused: true,
expr: true,
globals: {
"define": false,
"require": false,
},
ignores: [ ignores: [
'node_modules/**/*.js', 'node_modules/**/*.js',
'public/libs/**/*.js', 'public/libs/**/*.js',

2
bower.json
View File

@ -17,7 +17,7 @@
"stacktrace": "~0.5.3", "stacktrace": "~0.5.3",
"requirejs-text": "~2.0.10", "requirejs-text": "~2.0.10",
"bootstrap-tour": "~0.7.1", "bootstrap-tour": "~0.7.1",
"ace": "4bbe5346f2ae5ad35c0c47defa244ab27aedd451", "ace": "https://github.com/benweet/ace.git#798a03b2f8b1315fa8ba2d867cee242b90960557",
"pagedown-ace": "https://github.com/benweet/pagedown-ace.git#84d5e1b7ff233a1c8cafa9716e825228d275120c", "pagedown-ace": "https://github.com/benweet/pagedown-ace.git#84d5e1b7ff233a1c8cafa9716e825228d275120c",
"pagedown-extra": "https://github.com/jmcmanus/pagedown-extra.git#bd0870e3e871e15bde1fa5a427e3e10028a09789", "pagedown-extra": "https://github.com/jmcmanus/pagedown-extra.git#bd0870e3e871e15bde1fa5a427e3e10028a09789",
"crel": "https://github.com/KoryNunn/crel.git#8dbda04b129fc0aec01a2a080d1cab26816e11c1", "crel": "https://github.com/KoryNunn/crel.git#8dbda04b129fc0aec01a2a080d1cab26816e11c1",

17
public/res/core.js
View File

@ -704,7 +704,7 @@ define([
screenWidth = screenWidth || 0; screenWidth = screenWidth || 0;
//var codeFontSize = settings.editorFontSize; //var codeFontSize = settings.editorFontSize;
//var codeLineHeight = Math.round(codeFontSize * 20 / 12); //var codeLineHeight = Math.round(codeFontSize * 20 / 12);
var previewFontSize = Math.round(size * 8 / 7); var previewFontSize = size * 13 / 12;
styleContent += [ styleContent += [
'@media (min-width: ' + screenWidth + 'px) {', '@media (min-width: ' + screenWidth + 'px) {',
'#wmd-input, .textarea-helper {', '#wmd-input, .textarea-helper {',
@ -717,9 +717,9 @@ define([
'}', '}',
].join('\n'); ].join('\n');
} }
applyFont(14); applyFont(15);
applyFont(15, 600); applyFont(16, 600);
applyFont(16, 1200); applyFont(17, 1200);
function applyMaxWidth(maxWidth, screenWidth) { function applyMaxWidth(maxWidth, screenWidth) {
styleContent += [ styleContent += [
@ -837,7 +837,14 @@ define([
}); });
// Editor // Editor
if(window.lightMode) { if(window.preMode) {
// In light mode, we replace ACE with a textarea
$('#wmd-input').addClass('form-control').attr('contenteditable', true);
// Create UI layout after textarea
createLayout();
}
else if(window.lightMode) {
// In light mode, we replace ACE with a textarea // In light mode, we replace ACE with a textarea
$('#wmd-input').replaceWith(function() { $('#wmd-input').replaceWith(function() {
return $('<textarea id="wmd-input">').addClass(this.className).addClass('form-control'); return $('<textarea id="wmd-input">').addClass(this.className).addClass('form-control');

17
public/res/extensions/dialogManagePublication.js
View File

@ -14,21 +14,13 @@ define([
var fileDesc; var fileDesc;
var publishListElt; var publishListElt;
var $msgPublishListElt; var $showAlreadyPublishedElt;
var $msgNoPublishElt;
var refreshDialog = function(fileDescParameter) { var refreshDialog = function(fileDescParameter) {
if(fileDescParameter !== undefined && fileDescParameter !== fileDesc) { if(fileDescParameter !== undefined && fileDescParameter !== fileDesc) {
return; return;
} }
if(_.size(fileDesc.publishLocations) > 0) { $showAlreadyPublishedElt.toggleClass("hide", _.size(fileDesc.publishLocations) === 0);
$msgPublishListElt.removeClass("hide");
$msgNoPublishElt.addClass("hide");
}
else {
$msgPublishListElt.addClass("hide");
$msgNoPublishElt.removeClass("hide");
}
var publishListHtml = _.reduce(fileDesc.publishLocations, function(result, publishAttributes) { var publishListHtml = _.reduce(fileDesc.publishLocations, function(result, publishAttributes) {
var formattedAttributes = _.omit(publishAttributes, "provider", "publishIndex", "sharingLink"); var formattedAttributes = _.omit(publishAttributes, "provider", "publishIndex", "sharingLink");
@ -62,10 +54,9 @@ define([
dialogManagePublication.onReady = function() { dialogManagePublication.onReady = function() {
var modalElt = document.querySelector(".modal-manage-publish"); var modalElt = document.querySelector(".modal-manage-publish");
publishListElt = modalElt.querySelector(".publish-list"); publishListElt = modalElt.querySelector(".publish-list");
$msgPublishListElt = $(modalElt.querySelectorAll(".msg-publish-list"));
$msgNoPublishElt = $(modalElt.querySelectorAll(".msg-no-publish")); $showAlreadyPublishedElt = $(document.querySelectorAll(".show-already-published"));
}; };
return dialogManagePublication; return dialogManagePublication;
}); });

2
public/res/extensions/documentPanel.js
View File

@ -178,7 +178,7 @@ define([
// Scroll to the active file // Scroll to the active file
var activeElt = documentListElt.querySelector('.file.active'); var activeElt = documentListElt.querySelector('.file.active');
activeElt && (panelContentElt.scrollTop += activeElt.getBoundingClientRect().top - 120); activeElt && (panelContentElt.scrollTop += activeElt.getBoundingClientRect().top - 240);
} }
}); });

BIN
public/res/font/AnonymousPro-Bold-webfont.woff Normal file
View File

Binary file not shown.

BIN
public/res/font/AnonymousPro-BoldItalic-webfont.woff Normal file
View File

Binary file not shown.

BIN
public/res/font/AnonymousPro-Italic-webfont.woff Normal file
View File

Binary file not shown.

BIN
public/res/font/AnonymousPro-Regular-webfont.woff Normal file
View File

Binary file not shown.

39
public/res/html/bodyIndex.html
View File

@ -90,22 +90,23 @@
class="icon-provider-dropbox"></i> Export to Dropbox</a></li> class="icon-provider-dropbox"></i> Export to Dropbox</a></li>
<li><a href="#" class="submenu-sync-gdrive action-sync-export-dialog-gdrive"><i <li><a href="#" class="submenu-sync-gdrive action-sync-export-dialog-gdrive"><i
class="icon-provider-gdrive"></i> Export to Google Drive</a></li> class="icon-provider-gdrive"></i> Export to Google Drive</a></li>
<li><a href="#" class="submenu-sync-gdrivesec action-sync-export-dialog-gdrivesec"><i
class="icon-provider-gdrive"></i> Export to Google Drive <small>(2nd account)</small></a></li>
<li><a href="#" class="submenu-sync-gdriveter action-sync-export-dialog-gdriveter"><i
class="icon-provider-gdrive"></i> Export to Google Drive <small>(3rd account)</small></a></li>
<li><a href="#" class="submenu-sync-gdrive action-autosync-dialog-gdrive"><i <li><a href="#" class="submenu-sync-gdrive action-autosync-dialog-gdrive"><i
class="icon-provider-gdrive"></i> Google Drive AutoSync</a></li> class="icon-provider-gdrive"></i> Google Drive AutoSync</a></li>
<li><a href="#" class="submenu-sync-gdrivesec action-sync-export-dialog-gdrivesec"><i
class="icon-provider-gdrive"></i> Export to Google Drive<br>(2nd account)</a></li>
<li><a href="#" class="submenu-sync-gdrivesec action-autosync-dialog-gdrivesec"><i <li><a href="#" class="submenu-sync-gdrivesec action-autosync-dialog-gdrivesec"><i
class="icon-provider-gdrive"></i> Google Drive AutoSync<br>(2nd account)</a></li> class="icon-provider-gdrive"></i> Google Drive AutoSync <small>(2nd account)</small></a></li>
<li><a href="#" class="submenu-sync-gdriveter action-sync-export-dialog-gdriveter"><i
class="icon-provider-gdrive"></i> Export to Google Drive<br>(3rd account)</a></li>
<li><a href="#" class="submenu-sync-gdriveter action-autosync-dialog-gdriveter"><i <li><a href="#" class="submenu-sync-gdriveter action-autosync-dialog-gdriveter"><i
class="icon-provider-gdrive"></i> Google Drive AutoSync<br>(3rd account)</a></li> class="icon-provider-gdrive"></i> Google Drive AutoSync <small>(3rd account)</small></a></li>
</ul> </ul>
</div> </div>
<a href="#" data-toggle="collapse" data-target=".collapse-publish-on" <a href="#" data-toggle="collapse" data-target=".collapse-publish-on"
class="list-group-item"><i class="icon-share"></i> Publish...</a> class="list-group-item"><i class="icon-share"></i> Publish...</a>
<div class="sub-menu collapse collapse-publish-on clearfix"> <div class="sub-menu collapse collapse-publish-on clearfix">
<ul class="nav"> <ul class="nav alert alert-danger show-already-published">
<li><div>"<span class="file-title"></span>" is already published.</div></li>
<li><a href="#" class="action-update-publication" <li><a href="#" class="action-update-publication"
data-toggle="collapse" data-target=".menu-panel"><i class="icon-share"></i> data-toggle="collapse" data-target=".menu-panel"><i class="icon-share"></i>
Update publication</a></li> Update publication</a></li>
@ -144,11 +145,11 @@
<a href="#" class="list-group-item submenu-sync-gdrivesec action-sync-import-gdrivesec" <a href="#" class="list-group-item submenu-sync-gdrivesec action-sync-import-gdrivesec"
data-toggle="collapse" data-target=".menu-panel"><i data-toggle="collapse" data-target=".menu-panel"><i
class="icon-provider-gdrive"></i> Import from class="icon-provider-gdrive"></i> Import from
Google Drive<br>(2nd account)</a> Google Drive <small>(2nd account)</small></a>
<a href="#" class="list-group-item submenu-sync-gdriveter action-sync-import-gdriveter" <a href="#" class="list-group-item submenu-sync-gdriveter action-sync-import-gdriveter"
data-toggle="collapse" data-target=".menu-panel"><i data-toggle="collapse" data-target=".menu-panel"><i
class="icon-provider-gdrive"></i> Import from class="icon-provider-gdrive"></i> Import from
Google Drive<br>(3rd account)</a> Google Drive <small>(3rd account)</small></a>
</div> </div>
<ul class="nav"> <ul class="nav">
<li><a href="#" data-toggle="modal" <li><a href="#" data-toggle="modal"
@ -358,7 +359,7 @@
Are you sure you want to delete "<span class="file-title"></span>"? Are you sure you want to delete "<span class="file-title"></span>"?
</p> </p>
<blockquote> <blockquote>
<b>NOTE:</b> This will not delete the file on synchronized <b>Note:</b> This will not delete the file on synchronized
locations. locations.
</blockquote> </blockquote>
</div> </div>
@ -506,7 +507,7 @@
</div> </div>
</div> </div>
<blockquote> <blockquote>
<b>NOTE:</b> <b>Note:</b>
<ul> <ul>
<li>Dropbox file path does not depend on document title.</li> <li>Dropbox file path does not depend on document title.</li>
<li>The title of your document will not be synchronized.</li> <li>The title of your document will not be synchronized.</li>
@ -541,7 +542,7 @@
</p> </p>
<div class="msg-sync-list sync-list hide"></div> <div class="msg-sync-list sync-list hide"></div>
<blockquote class="msg-sync-list hide"> <blockquote class="msg-sync-list hide">
<b>NOTE:</b> Removing a synchronized location will not delete any <b>Note:</b> Removing a synchronized location will not delete any
file. file.
</blockquote> </blockquote>
<p class="msg-no-sync hide">"<span class="file-title"></span>" is not synchronized yet.</p> <p class="msg-no-sync hide">"<span class="file-title"></span>" is not synchronized yet.</p>
@ -828,19 +829,13 @@
<h2 class="modal-title">Publication</h2> <h2 class="modal-title">Publication</h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p class="msg-publish-list hide"> <p>
"<span class="file-title"></span>" is published on the following "<span class="file-title"></span>" is published on the following
location(s): location(s):
</p> </p>
<div class="msg-publish-list publish-list hide"></div> <div class="publish-list"></div>
<blockquote class="msg-publish-list hide"> <blockquote>
<b>NOTE:</b> Removing a publish location will not delete the actual publication. <b>Note:</b> Removing a publish location will not delete the actual publication.
</blockquote>
<p class="msg-no-publish hide">
"<span class="file-title"></span>" is not published yet.
</p>
<blockquote class="msg-no-publish hide">
<b>Tip:</b> You can add publications using the <i class="icon-share"></i> <code>Publish on</code> sub-menu.
</blockquote> </blockquote>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">

2
public/res/html/dialogAutoSyncGdrive.html
View File

@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<blockquote> <blockquote>
<b>NOTE:</b> Removing a local document will not delete the linked file on Google <b>Note:</b> Removing a local document will not delete the linked file on Google
Drive. Drive.
</blockquote> </blockquote>
</div> </div>

2
public/res/html/partialRenderingSettingsBlock.html
View File

@ -1,5 +1,5 @@
<p>Renders modified sections only.</p> <p>Renders modified sections only.</p>
<blockquote> <blockquote>
<b>NOTE:</b> Document sections are based on title elements (h1, h2...). Therefore if <b>Note:</b> Document sections are based on title elements (h1, h2...). Therefore if
your document does not contain any title, performance will not be increased. your document does not contain any title, performance will not be increased.
</blockquote> </blockquote>

2
public/res/html/scrollLinkSettingsBlock.html
View File

@ -1,6 +1,6 @@
<p>Binds together editor and preview scrollbars.</p> <p>Binds together editor and preview scrollbars.</p>
<blockquote> <blockquote>
<b>NOTE:</b> The mapping between Markdown and HTML is based on the <b>Note:</b> The mapping between Markdown and HTML is based on the
position of the title elements (h1, h2...) in the page. Therefore if position of the title elements (h1, h2...) in the page. Therefore if
your document does not contain any title, the mapping will be linear and your document does not contain any title, the mapping will be linear and
consequently less accurate. consequently less accurate.

27
public/res/styles/base.less
View File

@ -68,9 +68,34 @@
src: local('Source Code Pro Bold'), local('SourceCodePro-Bold'), url("../font/SourceCodePro-Bold-webfont.woff") format('woff'); src: local('Source Code Pro Bold'), local('SourceCodePro-Bold'), url("../font/SourceCodePro-Bold-webfont.woff") format('woff');
} }
@font-face {
font-family: 'Anonymous Pro';
font-style: normal;
font-weight: 400;
src: local('Anonymous Pro'), local('AnonymousPro'), url("../font/AnonymousPro-Regular-webfont.woff") format('woff');
}
@font-face {
font-family: 'Anonymous Pro';
font-style: normal;
font-weight: 700;
src: local('Anonymous Pro Bold'), local('AnonymousPro-Bold'), url("../font/AnonymousPro-Bold-webfont.woff") format('woff');
}
@font-face {
font-family: 'Anonymous Pro';
font-style: italic;
font-weight: 400;
src: local('Anonymous Pro Italic'), local('AnonymousPro-Italic'), url("../font/AnonymousPro-Italic-webfont.woff") format('woff');
}
@font-face {
font-family: 'Anonymous Pro';
font-style: italic;
font-weight: 700;
src: local('Anonymous Pro Bold Italic'), local('AnonymousPro-BoldItalic'), url("../font/AnonymousPro-BoldItalic-webfont.woff") format('woff');
}
@font-family-sans-serif: "Source Sans Pro", sans-serif; @font-family-sans-serif: "Source Sans Pro", sans-serif;
@font-family-monospace: "Source Code Pro", monospace; @font-family-monospace: "Source Code Pro", monospace;
@font-family-monospace-letter-spacing: -0.06em; @font-family-monospace-letter-spacing: -0.02em;
body { body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;

27
public/res/styles/main.less
View File

@ -57,7 +57,7 @@
@document-panel-width: 320px; @document-panel-width: 320px;
@jgrowl-width: 260px; @jgrowl-width: 260px;
@resizer-size: 32px; @resizer-size: 32px;
@editor-line-weight: 1.7; @editor-line-weight: 1.6;
/* Bootstrap */ /* Bootstrap */
@body-bg: @secondary-bg-light; @body-bg: @secondary-bg-light;
@ -128,6 +128,7 @@
@popover-arrow-color: @secondary-bg; @popover-arrow-color: @secondary-bg;
@popover-arrow-outer-color: @secondary-border-color; @popover-arrow-outer-color: @secondary-border-color;
@popover-title-bg: @transparent; @popover-title-bg: @transparent;
@alert-border-radius: 0;
body { body {
@ -318,7 +319,12 @@ a {
/******************** /********************
* Input * Input
********************/ ********************/
@form-control-inset-shadow: inset 0 1px 1px rgba(0,0,0,.025);
.form-control {
.box-shadow(~"@{form-control-inset-shadow}");
}
// Fix form-inline broken since Bootstrap v3 // Fix form-inline broken since Bootstrap v3
.form-inline { .form-inline {
.form-control { .form-control {
@ -344,13 +350,13 @@ a {
&:focus { &:focus {
border-color: @input-border; border-color: @input-border;
outline: 0; outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.05), 0 0 12px -1px @{color-rgba}"); .box-shadow(~"@{form-control-inset-shadow}, 0 0 12px -1px @{color-rgba}");
} }
} }
.form-control.error { .form-control.error {
border-color: @error-border; border-color: @error-border;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.05), 0 0 8px rgba(255, 134, 97, 0.6)"); .box-shadow(~"@{form-control-inset-shadow}, 0 0 8px rgba(255, 134, 97, 0.6)");
} }
.help-block { .help-block {
@ -359,7 +365,7 @@ a {
// Input add-on // Input add-on
.input-group-addon { .input-group-addon {
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .box-shadow(~"@{form-control-inset-shadow}");
a& { a& {
color: @link-color; color: @link-color;
} }
@ -459,7 +465,7 @@ a {
overflow: hidden; overflow: hidden;
height: @input-height-slim; height: @input-height-slim;
width: 60px; width: 60px;
padding-top: 9px; padding-top: 8px;
.bar { .bar {
display: inline-block; display: inline-block;
width: 14px; width: 14px;
@ -553,10 +559,15 @@ a {
background-color: @secondary-bg-lighter; background-color: @secondary-bg-lighter;
.box-shadow(~"inset 1px 0 1px rgba(0,0,0,.1), inset 1px 1px 4px rgba(0,0,0,.025)"); .box-shadow(~"inset 1px 0 1px rgba(0,0,0,.1), inset 1px 1px 4px rgba(0,0,0,.025)");
} }
.alert {
padding: 15px 0;
}
.nav { .nav {
margin: 20px 0; margin: 20px 0;
> li > * {
padding: 8px 30px;
}
> li > a { > li > a {
padding: 8px 15px 8px 25px;
&:hover, &:hover,
&:focus { &:focus {
background-color: @transparent; background-color: @transparent;
@ -1152,7 +1163,7 @@ a {
vertical-align: middle; vertical-align: middle;
background-color: @secondary-bg-lighter; background-color: @secondary-bg-lighter;
border-color: @input-border; border-color: @input-border;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .box-shadow(~"@{form-control-inset-shadow}");
} }
.ace_searchbtn { .ace_searchbtn {
background-image: none; background-image: none;

7
public/res/themes/original.less
View File

@ -54,7 +54,7 @@
@panel-button-bg-color: #e0e0e0; @panel-button-bg-color: #e0e0e0;
@panel-button-box-shadow: ~"0 0 1px rgba(255,255,255,0.75)"; @panel-button-box-shadow: ~"0 0 1px rgba(255,255,255,0.75)";
@input-bg: #fff; @input-bg: #fff;
@modal-backdrop-bg: #505050; @modal-backdrop-bg: #606060;
@input-color: @secondary-color-darkest; @input-color: @secondary-color-darkest;
@disabled-color: mix(@secondary-color, @input-bg, 50%); @disabled-color: mix(@secondary-color, @input-bg, 50%);
@ -103,8 +103,9 @@ a.list-group-item,
&:hover, &:hover,
&:focus { &:focus {
color: #333; color: #333;
border-top-color: fade(@secondary, 10%); border-top-color: fade(@secondary, 15%);
border-bottom-color: fade(#fff, 85%); border-bottom-color: fade(#fff, 85%);
.box-shadow(inset 1px 1px 4px rgba(0,0,0,.025))
} }
} }
@ -116,7 +117,7 @@ a.list-group-item,
color: #606060; color: #606060;
border-top-color: fade(@secondary, 10%); border-top-color: fade(@secondary, 10%);
border-bottom-color: fade(#fff, 80%); border-bottom-color: fade(#fff, 80%);
.box-shadow(inset 1px 1px 4px rgba(0,0,0,.025))
} }
} }