Mercurial > wikked
changeset 193:f6ab8af58055 0.2.0
UI improvements to page editing:
- Fixed problems with element sizing.
- Fixed preview of meta properties.
- Renamed `@color-footer` to `@color-gray`.
| author | Ludovic Chabant <ludovic@chabant.com> |
|---|---|
| date | Thu, 06 Feb 2014 08:00:05 -0800 |
| parents | 80cf68b83d32 |
| children | 07528bfadd35 |
| files | wikked/assets/css/custom-variables.less wikked/assets/css/wikked.less wikked/assets/css/wikked/base.less wikked/assets/css/wikked/page.less wikked/assets/js/wikked/views.js wikked/assets/tpl/edit-page.html |
| diffstat | 6 files changed, 66 insertions(+), 61 deletions(-) [+] |
line wrap: on
line diff
--- a/wikked/assets/css/custom-variables.less Thu Feb 06 07:59:12 2014 -0800 +++ b/wikked/assets/css/custom-variables.less Thu Feb 06 08:00:05 2014 -0800 @@ -22,3 +22,5 @@ @icon-font-path: "../bootstrap/fonts/"; +@blockquote-border-color: @color-green; +
--- a/wikked/assets/css/wikked.less Thu Feb 06 07:59:12 2014 -0800 +++ b/wikked/assets/css/wikked.less Thu Feb 06 08:00:05 2014 -0800 @@ -1,8 +1,10 @@ -// Start with Bootstrap. +// Import basic variables and mixins. +@import "wikked/base.less"; + +// Then include Bootstrap. @import "../bootstrap/less/bootstrap.less"; // Now import our styles. -@import "wikked/base.less"; @import "wikked/main.less"; @import "wikked/page.less"; @import "wikked/alerts.less";
--- a/wikked/assets/css/wikked/base.less Thu Feb 06 07:59:12 2014 -0800 +++ b/wikked/assets/css/wikked/base.less Thu Feb 06 08:00:05 2014 -0800 @@ -5,8 +5,8 @@ @color-orange: #B03500; @color-green: #B6CC95; @color-green-dark: #496B15; -@color-footer: rgb(220, 220, 220); -@color-footer-dark: rgb(170, 170, 170); +@color-gray: rgb(220, 220, 220); +@color-gray-dark: rgb(170, 170, 170); @color-code: #523C37;
--- a/wikked/assets/css/wikked/page.less Thu Feb 06 07:59:12 2014 -0800 +++ b/wikked/assets/css/wikked/page.less Thu Feb 06 08:00:05 2014 -0800 @@ -40,8 +40,8 @@ padding: 0 @line-height-computed; } footer { - color: @color-footer-dark; - border-top: 1px solid @color-footer; + color: @color-gray-dark; + border-top: 1px solid @color-gray; padding: @line-height-computed 0; font-weight: 300; font-size: @font-size-small; @@ -50,11 +50,11 @@ a { text-decoration: none; - color: @color-footer-dark; - &:link { color: @color-footer-dark; } - &:visited { color: @color-footer-dark; } + color: @color-gray-dark; + &:link { color: @color-gray-dark; } + &:visited { color: @color-gray-dark; } &:hover { color: @color-green-dark; text-decoration: none; } - &:active { color: @color-footer-dark; } + &:active { color: @color-gray-dark; } } ul { list-type: none; @@ -81,7 +81,7 @@ font-weight: 200; font-size: 0.7em; letter-spacing: 0.1em; - color: @color-footer; + color: @color-gray; .rev_id { font-family: @font-family-monospace; } @@ -94,10 +94,10 @@ section.info { margin: @line-height-computed 0 0 0; padding: @line-height-computed 0; - border-top: 1px solid @color-footer; + border-top: 1px solid @color-gray; .info-categories { - color: @color-footer-dark; + color: @color-gray-dark; font-weight: 300; font-size: @font-size-small; font-family: @font-family-sans-serif; @@ -170,8 +170,6 @@ } // Page editing -#wmd-button-bar { float: left; } -#wmd-extra-bar { width: 100px; } #wmd-preview-button span { background: url(../img/markdown-32x20.png); width: 32px; @@ -199,20 +197,17 @@ #wmd-full-preview-button { display: inline-block; } -//#wmd-preview-wrapper { -// border: 1px dashed @colorBlueDark; -// -// h3 { -// margin: 0.5em 1em 0.5em 1em; -// } -// #wmd-preview { -// margin: 1em; -// background: none; -// } -//} -//#wmd-button-bar li { -// margin-left: 0; -//} +#wmd-preview-wrapper { + border: 1px solid @gray-light; + + #wmd-preview { + margin: 1em; + background: none; + } +} +#wmd-preview { + overflow: scroll; +} .preview>h3 { margin: 0; padding: 0; @@ -223,11 +218,10 @@ color: #fff; padding: 0.2em 0.4em 0.2em 0.6em; border-radius: 0.5em 0 0 0.5em; - font-variant: small-caps; - letter-spacing: 0.18em; + letter-spacing: 0.03em; } .meta-value { - background: @color-footer; + background: @color-gray; color: black; padding: 0.2em 0.6em 0.2em 0.4em; border-radius: 0 0.5em 0.5em 0;
--- a/wikked/assets/js/wikked/views.js Thu Feb 06 07:59:12 2014 -0800 +++ b/wikked/assets/js/wikked/views.js Thu Feb 06 08:00:05 2014 -0800 @@ -366,25 +366,33 @@ // Cache some stuff. this._ctrlInput = $('#wmd-input'); + this._ctrlInputWrapper = $('#wmd-input-wrapper'); this._ctrlPreview = $('#wmd-preview'); + this._ctrlPreviewWrapper = $('#wmd-preview-wrapper'); // Create the Markdown editor. - var formatter = new Client.PageFormatter(); - formatter.baseUrl = this.model.get('path').match(/.*\//); - var converter = PageDownConverter.getSanitizingConverter(); + var m = this.model.get('path').match(/(.*)\/?/); + var baseUrl = m[1]; + var lastSlash = baseUrl.lastIndexOf('/'); + if (lastSlash >= 0) + baseUrl = baseUrl.substr(0, lastSlash); + else + baseUrl = ''; + var formatter = new Client.PageFormatter(baseUrl); + var converter = new Markdown.Converter(); converter.hooks.chain("preConversion", function(text) { return formatter.formatText(text); }); var $view = this; var editor = new PageDownConverter.Editor(converter); //TODO: pass options editor.hooks.chain("onPreviewRefresh", function() { - $view._updateUI(true); + $view._updateInputFromPreview(); }); editor.run(); // Setup UI. - this._updateUI(); $('.preview').hide(); + this._isPreviewVisible = false; // Start validation on the form. $('#page-edit').validate({ @@ -407,12 +415,13 @@ }, _inputGripMouseDown: function(e) { // Input area resizing with the grip. - var last_pageY; - last_pageY = e.pageY; + var $view = this; + var last_pageY = e.pageY; $('body') .on('mousemove.wikked.editor_resize', function(e) { - var editor_control = $('#wmd-input'); + var editor_control = $view._ctrlInput; editor_control.height(editor_control.height() + e.pageY - last_pageY); + $view._ctrlPreview.height(editor_control.height()); last_pageY = e.pageY; }) .on('mouseup.wikked.editor_resize mouseleave.wikked.editor_resize', function(e) { @@ -422,11 +431,12 @@ _togglePreview: function(e) { // Show/hide live preview. var w = $('body').width() - 40; - if (this._ctrlPreview.is(":visible")) { + if (this._isPreviewVisible) { this._removePreview(); } else { this._addPreview(); } + this._isPreviewVisible = !this._isPreviewVisible; e.preventDefault(); return false; }, @@ -437,8 +447,6 @@ $('.editing-wrapper').addClass('row'); $('.editing-wrapper>.editing').addClass('col-md-6'); $('.editing-wrapper>.preview').addClass('col-md-6').show(); - - this._updateUI(true); }, _removePreview: function() { $('article').removeClass('container-fluid').removeClass('wide'); @@ -447,8 +455,6 @@ $('.editing-wrapper').removeClass('row'); $('.editing-wrapper>.editing').removeClass('col-md-6'); $('.editing-wrapper>.preview').removeClass('col-md-6').hide(); - - this._updateUI(); }, _toggleFullPreview: function(e) { var $view = this; @@ -461,7 +467,7 @@ var previewEl = $('#wmd-preview'); previewEl.html(data.text); processWikiLinks(previewEl); - $view._updateUI(true); + $view._updateInputFromPreview(); }) .error(function() { $('#wmd-preview').html("Error running preview."); @@ -469,16 +475,13 @@ e.preventDefault(); return false; }, - _updateUI: function(setHeight) { - var inputWidth = $('#wmd-input-wrapper').innerWidth(); - this._ctrlInput.outerWidth(inputWidth); - - if (setHeight === true) { - var maxHeight = Math.max( - this._ctrlPreview.height(), - this._ctrlInput.height()); - this._ctrlInput.height(maxHeight); - } + _updateInputFromPreview: function() { + if (this._isPreviewVisible) + this._ctrlInput.height(this._ctrlPreview.height()); + }, + _updatePreviewFromInput: function() { + if (this._isPreviewVisible) + this._ctrlPreview.height(this._ctrlInput.height()); }, _submitEditedPage: function(e) { // Make the model submit the form.
--- a/wikked/assets/tpl/edit-page.html Thu Feb 06 07:59:12 2014 -0800 +++ b/wikked/assets/tpl/edit-page.html Thu Feb 06 08:00:05 2014 -0800 @@ -8,7 +8,7 @@ <span class="input-group-addon">Title</span> <input type="text" name="title" class="form-control input-xxlarge" placeholder="New Page" required="true"></input> </div> - <span class="help-block small">You can put this page in a folder by entering a title like <code>Folder/Page Title</code>.</span> + <span class="help-block small" for="title">You can put this page in a folder by entering a title like <code>Folder/Page Title</code>.</span> </div> {{else}} <h1>{{meta.title}} <span class="decorator">Editing</span></h1> @@ -60,10 +60,14 @@ </section> </div> <div class="preview"> - <h3>Preview - <button id="wmd-full-preview-button" class="btn btn-xs">Full Preview</button> - </h3> - <div id="wmd-preview"></div> + <section id="wmd-preview-button-bar-wrapper"> + <div class="form-group"> + <button id="wmd-full-preview-button" class="btn btn-xs" title="Run a full preview on the text, with queries and includes">Full Preview</button> + </div> + </section> + <section id="wmd-preview-wrapper"> + <div id="wmd-preview"></div> + </section> </div> </div> </form>