Mercurial > wikked
changeset 91:315c32a4ce58
Modified edit page to support side-by-side preview.
| author | Ludovic Chabant <ludovic@chabant.com> |
|---|---|
| date | Tue, 09 Apr 2013 22:12:27 -0700 |
| parents | e4eba42e1678 |
| children | 30784c036ead |
| files | static/css/wikked.less static/img/markdown-32x20-solid.png static/img/markdown-32x20.png static/js/wikked/views.js static/tpl/edit-page.html |
| diffstat | 5 files changed, 91 insertions(+), 45 deletions(-) [+] |
line wrap: on
line diff
--- a/static/css/wikked.less Sun Apr 07 13:31:20 2013 -0700 +++ b/static/css/wikked.less Tue Apr 09 22:12:27 2013 -0700 @@ -110,7 +110,7 @@ background: @colorGreen; } -// Other classes +// Search form.form-search { display: inline-block; margin: 0; @@ -123,6 +123,12 @@ ul.search-results { list-style: none; } +b.match { + padding: 0 0.2em; + background: #ffeb84; +} + +// Page editing #page-edit { textarea { height: 10em; @@ -132,18 +138,22 @@ border-radius: 0; } } -#wmd-input-wrapper { - padding: 1em 0; - - #wmd-input-grip { - background: @grayLighter; - border: 1px solid @grayLight; - border-width: 0 1px 1px 1px; - height: 12px; - cursor: ns-resize; - } +#wmd-form-wrapper>section { + margin: 1em; } -#wmd-preview-wrapper { +#wmd-input-grip { + background: @grayLighter; + border: 1px solid @grayLight; + border-width: 0 1px 1px 1px; + height: 12px; + cursor: ns-resize; +} +#wmd-preview-button span { + background: url(../img/markdown-32x20.png); + width: 32px; + height: 20px; +} +/*#wmd-preview-wrapper { border: 1px dashed @colorBlueDark; h3 { @@ -156,7 +166,7 @@ } #wmd-button-bar li { margin-left: 0; -} +}*/ .preview-wiki-meta { .meta-name { background: @colorBlueDark; @@ -177,10 +187,6 @@ margin-top: 1em; margin-bottom: 1em; } -b.match { - padding: 0 0.2em; - background: #ffeb84; -} // Page alerts article .alert {
--- a/static/js/wikked/views.js Sun Apr 07 13:31:20 2013 -0700 +++ b/static/js/wikked/views.js Tue Apr 09 22:12:27 2013 -0700 @@ -292,12 +292,15 @@ }); var editor = new Markdown.Editor(converter); //TODO: pass options editor.run(); - var editor_control = this.$('textarea#wmd-input'); - editor_control.outerWidth(this.$('#wmd-input-wrapper').innerWidth()); + + // Setup UI. + this._updateUI(); + $('#wmd-preview-wrapper').hide(); + this.originalHeight = $('#wmd-input').height(); }, events: { "mousedown #wmd-input-grip": "_inputGripMouseDown", - "click #wmd-preview-wrapper>h3>a": "_togglePreview", + "click #wmd-preview-button": "_togglePreview", "submit #page-edit": "_submitEditedPage" }, _inputGripMouseDown: function(e) { @@ -306,7 +309,7 @@ last_pageY = e.pageY; $('body') .on('mousemove.wikked.editor_resize', function(e) { - var editor_control = $('textarea#wmd-input'); + var editor_control = $('#wmd-input'); editor_control.height(editor_control.height() + e.pageY - last_pageY); last_pageY = e.pageY; }) @@ -316,16 +319,45 @@ }, _togglePreview: function(e) { // Show/hide live preview. - $('#wmd-preview').fadeToggle(function() { - var icon = $('#wmd-preview-wrapper>h3>a i'); - if (icon.hasClass('icon-minus')) { - icon.removeClass('icon-minus'); - icon.addClass('icon-plus'); - } else { - icon.removeClass('icon-plus'); - icon.addClass('icon-minus'); - } - }); + var w = $('body').width() - 40; + if ($('#wmd-preview').is(":visible")) { + $('#wmd-form-wrapper') + .removeClass('span6') + .addClass('span12'); + $('#wmd-preview-wrapper') + .hide() + .removeClass('span6'); + $('#page-edit') + .removeClass('row-fluid') + .addClass('row'); + $('#app') + .removeClass('container-fluid') + .addClass('container'); + $('#wmd-input').height(this.originalHeight); + this._updateUI(); + } else { + $('#app') + .removeClass('container') + .addClass('container-fluid'); + $('#page-edit') + .removeClass('row') + .addClass('row-fluid'); + $('#wmd-form-wrapper') + .removeClass('span12') + .addClass('span6'); + $('#wmd-preview-wrapper') + .show() + .addClass('span6'); + $('#wmd-input').height($('#wmd-preview').height()); + this._updateUI(); + } + e.preventDefault(); + return false; + }, + _updateUI: function() { + var inputWidth = $('#wmd-input-wrapper').innerWidth(); + $('#wmd-input') + .outerWidth(inputWidth); }, _submitEditedPage: function(e) { // Make the model submit the form.
--- a/static/tpl/edit-page.html Sun Apr 07 13:31:20 2013 -0700 +++ b/static/tpl/edit-page.html Tue Apr 09 22:12:27 2013 -0700 @@ -2,20 +2,22 @@ <header> <h1>{{meta.title}} <span class="decorator">Editing</span></h1> </header> - <section> - <form id="page-edit"> - <section id="wmd-button-bar"> + <form id="page-edit" class="row"> + <div id="wmd-form-wrapper" class="span12"> + <section id="wmd-button-bar-wrapper"> + <div id="wmd-button-bar"></div> + <div id="wmd-extra-bar"> + <ul class="wmd-button-row"> + <li class="wmd-button" id="wmd-preview-button" title="Toggle Preview"><span></span></li> + </ul> + </div> </section> <section id="wmd-input-wrapper"> <textarea id="wmd-input" name="text" placeholder="Your page's contents go here...">{{content}}</textarea> <div id="wmd-input-grip"></div> </section> - <section id="wmd-preview-wrapper"> - <h3><a class="btn"><i class="icon-minus"></i></a> Preview</h3> - <div id="wmd-preview"></div> - </section> - <section> - <div class="controls commit-meta"> + <section id="wmd-meta-wrapper"> + <div id="wmd-meta" class="controls commit-meta"> <div class="control-group input-prepend"> <label for="author" class="control-label add-on">Author: </label> <input type="text" name="author" class="" placeholder="{{commit_meta.author}}"></input> @@ -26,12 +28,18 @@ </div> </div> </section> - <section> - <button type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i> Save</button> - <a href="{{url_read}}" class="btn">Cancel</a> + <section id="wmd-commit-wrapper" class="row"> + <div id="wmd-commit"> + <button type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i> Save</button> + <a href="{{url_read}}" class="btn">Cancel</a> + </div> </section> - </form> - <section> + </div> + <div id="wmd-preview-wrapper"> + <h3>Preview</h3> + <div id="wmd-preview"></div> + </div> + </form> </article> <script type="text/javascript" src="/js/pagedown/Markdown.Converter.js"></script> <script type="text/javascript" src="/js/pagedown/Markdown.Sanitizer.js"></script>