finalise control panel ui

add background prettify links and buttons add fotter remove unnecessary links etc
LibreOffice · Aug 24, 2019 · 856282e · 856282e
1 parent 53655be
commit 856282e
Show file tree

Hide file tree

Showing 3 changed files with 192 additions and 22 deletions.
diff --git a/libresign/static/bg_blue.jpg b/libresign/static/bg_blue.jpg
diff --git a/libresign/static/css/style.css b/libresign/static/css/style.css
@@ -1,6 +1,8 @@
 body
 {
     font-family: Arial, Helvetica, sans-serif;
+    background-image: url('/static/bg_blue.jpg');
+    overflow: hidden;
 }
 
 a:link
@@ -13,9 +15,60 @@ a:visited
     color: blue;
 }
 
+h3
+{
+    border-bottom: 1px solid black;
+}
+
+.menu_button
+{
+    position: relative;
+    background-color: #6B4;
+    padding: 5px 8px;
+    color: #FFF;
+    box-shadow: 2px 2px #333;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.menu_button:hover
+{
+    background-color: #7FCF5F;
+}
+
+.menu_button:visited
+{
+    color: #FFF;
+}
+
+.menu_button:active
+{
+    left: 2px;
+    top: 2px;
+    color: #FFF;
+    box-shadow: 0px 0px;
+}
+
+.inactive
+{
+    background-color: #AAA;
+}
+
+#main_center
+{
+    position: absolute;
+    left: 50%;
+}
+
 #main_holder
 {
+    position: relative;
+    left: -50%;
+    width: 700px;
     max-width: 700px;
+    background-color: #FFF;
+    padding: 20px;
+    box-shadow: 5px 10px #333;
 }
 
 #topheader
@@ -35,31 +88,104 @@ a:visited
     padding: 0px;
 }
 
+.playlist_button
+{
+    position: relative;
+    top: 4px;
+    float: right;
+    margin: 0px 4px;
+    padding: 2px 4px;
+    background-color: #46B;
+    color: #FFF;
+    box-shadow: 2px 2px #333;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.playlist_button:link
+{
+    color: #fff;
+}
+
+.playlist_button:visited
+{
+    color: #fff;
+}
+
+.playlist_button:hover
+{
+    color: #fff;
+}
+
+.playlist_button:active
+{
+    left: 2px;
+    top: 6px;
+    color: #fff;
+    box-shadow: 0px 0px;
+}
+
 .playlist_item
 {
-    height: 15px;
-    margin: 2px;
-    padding: 10px;
+    height: 30px;
+    margin: 0px;
+    padding: 0px;
+    border-color: grey;
+    border-width: 1px 0px 0px 0px;
+    border-style: solid;
+}
+
+.playlist_item:hover
+{
+    background-color: #EEE;
+}
+
+.playlist_item_selected
+{
+    height: 30px;
+    margin: 0px;
+    padding: 0px;
     border-color: grey;
     border-width: 1px 0px 0px 0px;
     border-style: solid;
+    background-color: #EFE;
+}
+
+.playlist_item_selected:hover
+{
+    background-color: #EEFEEE;
 }
 
 .playlist_title
 {
     float: left;
-    margin: 0px;
+    margin: 5px;
 }
 
 .playlist_dropdown
 {
     text-decoration: none;
     float: right;
+    outline: none;
+    background-color: inherit;
+    margin: 0px;
+    padding: 5px;
+    border: none;
+}
+
+.playlist_dropdown:hover
+{
+    font-weight: bold;
 }
 
 .playlist_dropdown_menu
 {
     display: none;
+    float: none;
+    z-index: 1;
+    position: absolute;
+    border: 1px black solid;
+    width: 100px;
 }
 
 .files_dropdown
@@ -88,3 +214,21 @@ a:visited
 #upload_title
 {
 }
+
+#footer
+{
+}
+
+#footer p
+{
+    float: left;
+    margin: 2px 8px;
+    font-size: 14px;
+}
+
+#footer a
+{
+    float: right;
+    margin: 2px 8px;
+    font-size: 14px;
+}
diff --git a/libresign/templates/index.html b/libresign/templates/index.html
@@ -1,31 +1,47 @@
 {% extends "base.html" %}
 {% block body %}
 <section class="">
+  <div id="main_center">
   <div id="main_holder">
     <h1 id="topheader">LibreOffice Screen Control Panel</h1> 
 
-    <button onclick="request('play');">Play presentation</button>
-    <button onclick="request('pause');">Pause presentation</button>
-    <button onclick="request('next');">Next presentation</button>
-    <button onclick="request('previous');">Previous presentation</button>
+    <!-- <button onclick="request('play');">Play presentation</button> -->
+    <!-- <button onclick="request('pause');">Pause presentation</button> -->
+    <!-- <button onclick="request('next');">Next presentation</button> -->
+    <!-- <button onclick="request('previous');">Previous presentation</button> -->
 
-    <a href="#">Impress Remote</a>
+    <a class="menu_button" href="http://127.0.0.1:8080">Impress Remote</a>
+    <a class="menu_button inactive" href="#">Conference Mode</a>
+    <a class="menu_button" href="#">Sign Mode</a>
 
     <h3>Playlist</h3>
     <div>
 		<ul class="sortablePlaylist" id="playlist">
         {% for item in playlist %}
-            <li class="playlist_item">
-                {% if item.file == currently_playing %}
-                <p class="playlist_title">[[[Playing now]]]</p>
-                {% endif %}
+            {% if item.file == currently_playing %}
+                <li class="playlist_item_selected">
+            {% else %}
+                <li class="playlist_item">
+            {% endif %}
                 <p class="playlist_title">{{item["file"]}}</p>
 
-<!--                 <a href="#" onclick="request('play_file', 'file={{item.file}}');">Play</a> -->
-<!--                 <a href="download/{{item["file"]}}" download>Download</a> -->
-<!--                 <a href="#" onclick="request('remove_file', 'file={{item.file}}');">Remove</a> -->
-
-                <a href="#" class="playlist_dropdown">More v</a>
+                <a class="playlist_button" 
+                   href="#" onclick="request('play_file', 'file={{item.file}}');">
+                    Play
+                </a>
+                <a class="playlist_button" 
+                   href="#" onclick="request('remove_file', 'file={{item.file}}');">
+                    Remove
+                </a>
+
+                <!-- <button class="playlist_dropdown" --> 
+                <!--         onmouseover="hover_playlist();"> -->
+                <!--     More v -->
+                <!-- </button> -->
+
+            <!-- <div class="playlist_dropdown_menu"> -->
+            <!--     <p>hi</p> -->
+            <!-- </div> -->
             </li>
         {% endfor %}
 		</ul>
@@ -36,11 +52,11 @@ <h3>Uploaded presentations</h3>
 		<ul class="sortableFiles" id="files">
         {% for item in files%}
             <li class="playlist_item" id="{{item}}">
-                {{item}}
+                <p class="playlist_title">{{item}}</p>
 
-                <!-- <a href="#" onclick="queue_file('{{item}}', 0);">Add to playlist</a> -->
-                <!-- <a href="download/{{item}}" download>Download</a> -->
-                <a href="#" class="playlist_dropdown">More v</a>
+                <a class="playlist_button" href="#" onclick="queue_file('{{item}}', 0);">Add to playlist</a>
+                <a class="playlist_button" href="topdownload/{{item}}" download>Download</a>
+                <!-- <button class="playlist_dropdown">More v</button> -->
             </li>
         {% endfor %}
 		</ul>
@@ -57,6 +73,12 @@ <h1 id="upload_title">Upload presentation</h1>
         </form>
     </div>
 
+    <div id="footer">
+    <p>The Document Foundation</p>
+    <a href="https://rptr.github.io/gsoc">Website</a>
+    <a href="https://github.com/rptr/libresign">Github</a>
+    </div>
+  </div>
   </div>
 </section>
 
@@ -107,6 +129,10 @@ <h1 id="upload_title">Upload presentation</h1>
         r.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         r.send(data);
     }
+
+    function hover_playlist (index)
+    {
+    }
 </script>
 
 {% endblock %}