# HG changeset patch
# User souliane <souliane@mailoo.org>
# Date 1385555636 -3600
# Node ID e76ec07be8e55f33213e8fb0e1045fecd0a0fae2
# Parent  4f0c2fea358a4fe29e584f64618469d746c3d421
browser_side (plugin radiocol): the UI uses CaptionPanel

diff -r 4f0c2fea358a -r e76ec07be8e5 browser_side/radiocol.py
--- a/browser_side/radiocol.py	Tue Nov 26 19:51:02 2013 +0100
+++ b/browser_side/radiocol.py	Wed Nov 27 13:33:56 2013 +0100
@@ -29,6 +29,7 @@
 from pyjamas.ui.ClickListener import ClickHandler
 from pyjamas.ui.Hidden import Hidden
 from pyjamas.ui.HTML import HTML
+from pyjamas.ui.CaptionPanel import CaptionPanel
 from pyjamas import Window
 from pyjamas.Timer import Timer
 from __pyjamas__ import JS
@@ -81,28 +82,26 @@
         self.setMethod(FormPanel.METHOD_POST)
         self.setAction("upload_radiocol")
         self._parent = parent
+        vPanel = VerticalPanel()
 
-        hPanel = HorizontalPanel()
-        hPanel.setSpacing(5)
         types = [('audio/ogg', '*.ogg', 'Ogg Vorbis Audio'),
                  ('video/ogg', '*.ogv', 'Ogg Vorbis Video'),
                  ('application/ogg', '*.ogx', 'Ogg Vorbis Multiplex')]
         self.file_upload = FilterFileUpload("song", 5, types)
-        hPanel.add(self.file_upload)
+        vPanel.add(self.file_upload)
 
+        hPanel = HorizontalPanel()
         self.upload_btn = Button("Upload song", getattr(self, "onBtnClick"))
         hPanel.add(self.upload_btn)
-
         self.status = Label()
         self.updateStatus()
         hPanel.add(self.status)
-
-
         #We need to know the referee
         referee_field = Hidden('referee', self._parent.referee)
         hPanel.add(referee_field)
+        vPanel.add(hPanel)
 
-        self.add(hPanel)
+        self.add(vPanel)
         self.addFormHandler(self)
 
     def updateStatus(self):
@@ -190,31 +189,27 @@
 class RadioColPanel(HorizontalPanel, ClickHandler):
 
     def __init__(self, parent, referee, player_nick, players, queue_data):
-        HorizontalPanel.__init__(self)
+        # We need to set it here and not in the CSS :(
+        HorizontalPanel.__init__(self, Height="90px")
         ClickHandler.__init__(self)
         self._parent = parent
         self.referee = referee
         self.queue_data = queue_data
         self.setStyleName("radiocolPanel")
-        self.setHeight('30%')
 
         # Now we set up the layout
-        self.left_panel = VerticalPanel()
-        self.left_panel.setStyleName("radiocol_left_panel")
-        self.left_panel.setHeight('100%')
-        self.add(self.left_panel)
-        self.right_panel = VerticalPanel()
         self.metadata_panel = MetadataPanel()
-        self.right_panel.add(self.metadata_panel)
+        self.add(CaptionPanel("Now playing", self.metadata_panel))
+        self.playlist_panel = VerticalPanel()
+        self.add(CaptionPanel("Songs queue", self.playlist_panel))
         self.control_panel = ControlPanel(self)
-        self.right_panel.add(self.control_panel)
-        self.add(self.right_panel)
-        #self.right_panel.setBorderWidth(1)
+        self.add(CaptionPanel("Controls", self.control_panel))
+
         self.next_songs = []
         self.players = [Player("player_%d" % i, self.metadata_panel) for i in range(4)]
         self.current_player = None
         for player in self.players:
-            self.right_panel.add(player)
+            self.add(player)
         self.addClickListener(self)
 
         help_msg = HTML("""- This radio plays Ogg Vorbis files.<br />
@@ -230,17 +225,17 @@
         next_song = Label(title)
         next_song.setStyleName("radiocol_next_song")
         self.next_songs.append(next_song)
-        self.left_panel.append(next_song)
+        self.playlist_panel.append(next_song)
 
     def popNextSong(self):
         """Remove the first song of next songs list
         should be called when the song is played"""
         #FIXME: should check that the song we remove is the one we play
         next_song = self.next_songs.pop(0)
-        self.left_panel.remove(next_song)
+        self.playlist_panel.remove(next_song)
 
     def getQueueSize(self):
-        return len(self.left_panel.getChildren())
+        return len(self.playlist_panel.getChildren())
 
     def radiocolPreload(self, filename, title, artist, album):
         preloaded = False
diff -r 4f0c2fea358a -r e76ec07be8e5 public/libervia.css
--- a/public/libervia.css	Tue Nov 26 19:51:02 2013 +0100
+++ b/public/libervia.css	Wed Nov 27 13:33:56 2013 +0100
@@ -946,15 +946,13 @@
 
 /* Radiocol */
 
-.radiocol_left_panel {
-    min-width: 80px;
-    margin: 5px;
-    border-right-style: dotted;
-    border-right-width: 2px;
+.radiocolPanel {
+
 }
 
 .radiocol_metadata_lbl {
     font-weight: bold;
+    padding-right: 5px;
 }
 
 .radiocol_next_song {
@@ -1406,6 +1404,21 @@
     cursor: pointer;
 }
 
+/* Caption Panel */
+
+.gwt-CaptionPanel {
+    overflow: auto;
+    background-color: #fff;
+    border-radius: 5px 5px 5px 5px;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    -moz-border-radius: 5px 5px 5px 5px;
+	 padding: 3px 5px 3px 5px;
+	 margin: 10px 5px 10px 5px;
+	 color: #444;
+	 font-size: 1em;
+	 border: solid 1px gray;
+}
+
 /* Radio buttons */
 
 .gwt-RadioButton {