From: Chip Black Date: Mon, 17 Mar 2014 00:28:28 +0000 (-0500) Subject: New edit dialog X-Git-Tag: v1.8.3~9 X-Git-Url: http://git.bytex64.net/?a=commitdiff_plain;h=f3923c00ac2967a36685d35fa42224538c6a2d79;p=blerg.git New edit dialog --- diff --git a/www/css/blerg.css b/www/css/blerg.css index 9149194..aaa6bdd 100644 --- a/www/css/blerg.css +++ b/www/css/blerg.css @@ -179,39 +179,66 @@ h1, h2, h3 { } .blerg-post { - padding: 20pt 20pt 16pt 20pt; + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-color: #1E1E1E; } .blerg-post h2 { font-size: 14pt; - margin: 0; + margin: 12pt 12pt 8pt 12pt; +} + +.blerg-post .content-decorator { + display: block; + border-color: #999; + margin: 8pt 12pt 12pt; + height: 35%; +} + +.blerg-post .content { + display: block; + width: 100%; + height: 100%; + font-size: 14pt; + font-family: sans-serif; } -.blerg-post .buttons { +.blerg-post .toolbar .switcher { + color: black; + background-color: white; + height: 60px; + padding: 12pt 8pt 4pt 12pt; +} + +.blerg-post .toolbar .buttons { + height: 60px; + padding: 0 12pt 0 60px; text-align: right; + vertical-align: top; + background-image: url(/images/corner.svg); + background-position: left bottom; + background-repeat: no-repeat; + background-size: auto 100%; } -.blerg-post .buttons .onyx-button { +.blerg-post .toolbar .buttons .onyx-button { margin-left: 4pt; height: 0.4in; width: 1in; } -.blerg-post .onyx-input-decorator { - display: block; - border-color: #999; - margin: 4pt 0; -} - -.blerg-post .onyx-textarea { - display: block; - width: 100%; +.blerg-post .bottom-panel { + height: 45%; + color: black; + background-color: white; } -.blerg-post .content { - font-size: 14pt; - font-family: sans-serif; - height: 51pt; +.blerg-post .bottom-panel > div { + padding: 12pt; } .login { diff --git a/www/images/corner.svg b/www/images/corner.svg new file mode 100644 index 0000000..2782cbb --- /dev/null +++ b/www/images/corner.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/www/jssrc/blerg/Post.js b/www/jssrc/blerg/Post.js index c1b889c..2aa7c3a 100644 --- a/www/jssrc/blerg/Post.js +++ b/www/jssrc/blerg/Post.js @@ -1,27 +1,39 @@ enyo.kind({ name: "blerg.Post", - kind: "Control", + kind: "FittableRows", classes: "blerg-post", handlers: { onPostVisibility: "postVisibilityUpdate", onLogin: "loggedIn", onLogout: "loggedOut" }, - resizePostContentTimeout: null, components: [ - {name: "helpContent", allowHtml: true, showing: false}, - {style: "position: relative;", components: [ - {tag: "h2", content: "What's on your mind?", style: "width: 75%;",}, - {name: "showHelpLink", kind: "blerg.Link", onNavigate: "showHelp", content: "Help!", style: "position: absolute; right: 1pt; bottom: 1pt; font-weight: bold; font-size: large;"}, - {name: "hideHelpLink", kind: "blerg.Link", onNavigate: "hideHelp", content: "Hide Help", style: "position: absolute; right: 1pt; bottom: 1pt; font-weight: bold; font-size: large;", showing: false} + {tag: "h2", content: "What's on your mind?"}, + {kind: "onyx.InputDecorator", alwaysLooksFocused: true, classes: "content-decorator", fit: true, components: [ + {name: "postContent", kind: "onyx.TextArea", classes: "content", onkeyup: "updatePreview", attributes: {tabindex: 4}} ]}, - {kind: "onyx.InputDecorator", components: [ - {name: "postContent", classes: "content", kind: "onyx.TextArea", onkeydown: "resizePostContent", attributes: {tabindex: 4}} + {name: "toolbar", kind: "FittableColumns", classes: "toolbar", components: [ + {classes: "switcher", components: [ + {kind: "onyx.RadioGroup", onActivate: "switchBottomPanel", components: [ + {content: "Replying to"}, + {content: "Preview"}, + {content: "Help"} + ]} + ]}, + {classes: "buttons", fit: true, components: [ + {name: "loginReminder", tag: "span", classes: "blerg-error", style: "margin-right: 8px", content: "You must log in before posting."}, + {kind: "onyx.Button", content: "Close", onclick: "closePost", classes: "onyx-negative", attributes: {tabindex: 6}}, + {name: "postButton", kind: "onyx.Button", content: "Post", onclick: "doPost", classes: "onyx-affirmative", disabled: true, attributes: {tabindex: 5}} + ]}, ]}, - {classes: "buttons", components: [ - {name: "loginReminder", tag: "span", classes: "blerg-error", style: "margin-right: 8px; vertical-align: 60%;", content: "You must log in before posting."}, - {kind: "onyx.Button", content: "Close", onclick: "closePost", classes: "onyx-negative", attributes: {tabindex: 6}}, - {name: "postButton", kind: "onyx.Button", content: "Post", onclick: "doPost", classes: "onyx-affirmative", disabled: true, attributes: {tabindex: 5}} + {name: "bottomPanel", kind: "Panels", classes: "bottom-panel", draggable: false, fit: true, components: [ + {content: "In reply to:"}, + {kind: "Scroller", components: [ + {name: "preview", classes: "record", allowHtml: true}, + ]}, + {kind: "Scroller", components: [ + {name: "helpContent", allowHtml: true}, + ]} ]}, {name: "api", kind: "blerg.API", onPostSuccessful: "postSuccessful", @@ -58,6 +70,9 @@ enyo.kind({ postVisibilityUpdate: function(inSender, inEvent) { if (inEvent.showing) { this.show(); + // Need to reflow manually because this is hidden by default + this.$.toolbar.reflow(); + this.reflow(); this.$.postContent.focus(); if (inEvent.data && this.getData() == "") { this.setData(inEvent.data); @@ -67,25 +82,8 @@ enyo.kind({ this.hide(); } }, - resizePostContent: function(inSender, inEvent) { - if (this.resizePostContentTimeout) - clearTimeout(this.resizePostContentTimeout); - this.resizePostContentTimeout = setTimeout(function() { - var n = this.$.postContent.hasNode(); - if (!n) - return; - var c = this.getData(); - var lines = Math.floor(c.length / (100 * (n.clientWidth / 1000))) + 1; - var m = c.match(/\r?\n/g); - if (m) - lines += m.length; - if (lines <= 3) { - this.$.postContent.setStyle(""); - } else { - this.$.postContent.setStyle("height: " + (lines * 17) + "pt"); - } - this.resizePostContentTimeout = null; - }.bind(this), 150); + updatePreview: function(inSender, inEvent) { + this.$.preview.setContent(blerg.Util.blergFormat(this.getData())); }, loggedIn: function() { this.$.postButton.setDisabled(false); @@ -95,10 +93,7 @@ enyo.kind({ this.$.postButton.setDisabled(true); this.$.loginReminder.show(); }, - showHelp: function() { - this.$.helpContent.show(); - this.$.showHelpLink.hide(); - this.$.hideHelpLink.show(); + loadHelp: function() { if (this.$.helpContent.getContent() == '') { var req = new enyo.Ajax({ url: baseURL + '/doc/post_help.html', @@ -110,9 +105,12 @@ enyo.kind({ req.go(); } }, - hideHelp: function() { - this.$.helpContent.hide(); - this.$.showHelpLink.show(); - this.$.hideHelpLink.hide(); - } + switchBottomPanel: function(inSender, inEvent) { + var active = inSender.getActive(); + var index = inSender.children.indexOf(active); + this.$.bottomPanel.setIndex(index); + if (index == 2) { + this.loadHelp(); + } + }, }); diff --git a/www/jssrc/package.js b/www/jssrc/package.js index c611a9d..9b2394e 100644 --- a/www/jssrc/package.js +++ b/www/jssrc/package.js @@ -1,5 +1,6 @@ enyo.depends( '$lib/onyx', + '$lib/layout', '$lib/OldSchoolSpinner.js', '$lib/blergmedia.js', 'blerg'