# HG changeset patch # User Ludovic Chabant # Date 1365570747 25200 # Node ID 315c32a4ce58de4857a45e35ca453047ba43ce5d # Parent e4eba42e1678bbb2cdc52a22240bcbe23f7e3eb2 Modified edit page to support side-by-side preview. diff -r e4eba42e1678 -r 315c32a4ce58 static/css/wikked.less --- 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 { diff -r e4eba42e1678 -r 315c32a4ce58 static/img/markdown-32x20-solid.png Binary file static/img/markdown-32x20-solid.png has changed diff -r e4eba42e1678 -r 315c32a4ce58 static/img/markdown-32x20.png Binary file static/img/markdown-32x20.png has changed diff -r e4eba42e1678 -r 315c32a4ce58 static/js/wikked/views.js --- 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. diff -r e4eba42e1678 -r 315c32a4ce58 static/tpl/edit-page.html --- 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 @@

{{meta.title}} Editing

-
-
-
+ +
+
+
+
+
    +
  • +
+
-
-

Preview

-
-
-
-
+
+
@@ -26,12 +28,18 @@
-
- - Cancel +
+
+ + Cancel +
- -
+
+
+

Preview

+
+
+