# HG changeset patch
# User souliane <souliane@mailoo.org>
# Date 1386677091 -3600
# Node ID 89818bca1a339c9018ff3c311de27e60e7d0e682
# Parent  3216c8d5432b1833de9715bace3b9d46d9a9169b
browser_side: set the ideal width for the blog post update dialog

diff -r 3216c8d5432b -r 89818bca1a33 browser_side/panels.py
--- a/browser_side/panels.py	Tue Dec 10 10:27:58 2013 +0100
+++ b/browser_side/panels.py	Tue Dec 10 13:04:51 2013 +0100
@@ -34,6 +34,7 @@
 from pyjamas.ui.PopupPanel import PopupPanel
 from pyjamas.ui.StackPanel import StackPanel
 from pyjamas.ui.ClickListener import ClickHandler
+from pyjamas.ui.FlowPanel import FlowPanel
 from pyjamas.ui.KeyboardListener import KEY_ENTER, KEY_UP, KEY_DOWN, KeyboardHandler
 from pyjamas.ui.Event import BUTTON_LEFT, BUTTON_MIDDLE, BUTTON_RIGHT
 from pyjamas.ui.MouseListener import MouseHandler
@@ -345,41 +346,57 @@
         self.pub_data = (mblog_entry.hash[0], mblog_entry.hash[1], mblog_entry.id)
 
         self.editable_content = (mblog_entry.xhtml, const._SYNTAX_XHTML) if mblog_entry.xhtml else (mblog_entry.content, None)
-        self.panel = HTMLPanel("""
-            <div class='mb_entry_header'><span class='mb_entry_author'>%(author)s</span> on <span class='mb_entry_timestamp'>%(timestamp)s</span></div>
-            <div class='mb_entry_delete_update'>
-                <div id="id_delete"></div>
-                <div id="id_update"></div>
-            </div>
-            <div class="mb_entry_avatar" id='id_avatar'></div>
-            <div class="mb_entry_dialog" id='id_entry_dialog'></div>
-            </div>
-            """ % {"author": html_sanitize(self.author),
-                   "timestamp": _datetime
-                    })
+
+        self.panel = FlowPanel()
+        self.panel.setStyleName('mb_entry')
+        header = HTMLPanel("""<div class='mb_entry_header'>
+                                  <span class='mb_entry_author'>%(author)s</span>
+                                  <span>on</span>
+                                  <span class='mb_entry_timestamp'>%(timestamp)s</span>
+                              </div>""" % {'author': html_sanitize(self.author), 'timestamp': _datetime})
+        self.panel.add(header)
+
+        if self.author == blog_panel.host.whoami.bare:
+            entry_delete_update = VerticalPanel()
+            entry_delete_update.setStyleName('mb_entry_delete_update')
+            self.delete_label = Label(u"✗")
+            self.delete_label.setTitle("Delete this message")
+            self.update_label = Label(u"✍")
+            self.update_label.setTitle("Edit this message")
+            entry_delete_update.add(self.delete_label)
+            entry_delete_update.add(self.update_label)
+            self.delete_label.addClickListener(self)
+            self.update_label.addClickListener(self)
+            self.panel.add(entry_delete_update)
+        else:
+            self.update_label = self.delete_label = None
+
+        entry_avatar = SimplePanel()
+        entry_avatar.setStyleName('mb_entry_avatar')
         self.avatar = Image(blog_panel.host.getAvatar(self.author))
-        self.panel.add(self.avatar, "id_avatar")
+        entry_avatar.add(self.avatar)
+        self.panel.add(entry_avatar)
+
+        self.entry_dialog = SimplePanel()
+        self.entry_dialog.setStyleName('mb_entry_dialog')
         body = addURLToText(html_sanitize(mblog_entry.content)) if not mblog_entry.xhtml else mblog_entry.xhtml
         self.bubble = HTML(body)
         self.bubble.setStyleName("bubble")
-        self.panel.add(self.bubble, "id_entry_dialog")
-        self.panel.setStyleName('mb_entry')
-        if self.author == blog_panel.host.whoami.bare:
-            self.delete_label = Label(u"✗")
-            self.delete_label.setTitle("Delete this message")
-            self.panel.add(self.delete_label, "id_delete")
-            self.update_label = Label(u"✍")
-            self.update_label.setTitle("Edit this message")
-            self.panel.add(self.update_label, "id_update")
-            self.delete_label.addClickListener(self)
-            self.update_label.addClickListener(self)
-        else:
-            self.modify_label = self.delete_label = None
+        self.entry_dialog.add(self.bubble)
+        self.panel.add(self.entry_dialog)
+
         self.editbox = None
         self.add(self.panel)
         ClickHandler.__init__(self)
         self.addClickListener(self)
 
+    def onWindowResized(self, width=None, height=None):
+        """The listener is active when the text is being modified"""
+        left = self.avatar.getAbsoluteLeft() + self.avatar.getOffsetWidth()
+        right = self.delete_label.getAbsoluteLeft()
+        ideal_width = right - left - 60
+        self.entry_dialog.setWidth("%spx" % ideal_width)
+
     def updateAvatar(self, new_avatar):
         """Change the avatar of the entry
         @param new_avatar: path to the new image"""
@@ -410,8 +427,10 @@
         """Send the new content to the backend"""
         if not self.editbox or not self.editbox.getVisible():
             return
-        self.panel.remove(self.edit_panel)
-        self.panel.add(self.bubble, "id_entry_dialog")
+        Window.removeWindowResizeListener(self)
+        self.entry_dialog.setWidth("auto")
+        self.entry_dialog.remove(self.edit_panel)
+        self.entry_dialog.add(self.bubble)
         new_text = self.editbox.getText().strip()
         self.edit_panel = self.editbox = None
         if cancel or new_text == self.editable_content[0] or new_text == "":
@@ -434,8 +453,10 @@
             panel.add(container)
             panel.setStyleName("bubble")
             panel.addStyleName('bubble-editbox')
-            self.bubble.removeFromParent()
-            self.panel.add(panel, "id_entry_dialog")
+            Window.addWindowResizeListener(self)
+            self.onWindowResized()
+            self.entry_dialog.remove(self.bubble)
+            self.entry_dialog.add(panel)
             self.editbox.setFocus(True)
             self.editbox.setSelectionRange(len(text), 0)
             self.edit_panel = panel
@@ -448,6 +469,7 @@
                 self.updateContent(result == richtext.CANCEL)
 
             editor = richtext.RichTextEditor(self._blog_panel.host, self.panel, cb, options=options)
+            editor.setWidth('100%')
             editor.setVisible(True)  # needed to build the toolbar
             self.editbox = editor.textarea
             self._blog_panel.host.bridge.call('syntaxConvert', lambda d: setOriginalText(d, editor),