New edit dialog

diff --git a/www/css/blerg.css b/www/css/blerg.css
index 9149194..aaa6bdd 100644 (file)
--- 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 (file)
index 0000000..2782cbb
--- /dev/null
+++ b/www/images/corner.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>\r
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="10" width="10" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">\r
+<g>\r
+<path fill="#FFF" d="M10,10,0,10,0,0z"/>\r
+</g>\r
+</svg>\r

diff --git a/www/jssrc/blerg/Post.js b/www/jssrc/blerg/Post.js
index c1b889c..2aa7c3a 100644 (file)
--- 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 (file)
--- 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'