CSS: fixed position for shortcut menu and top bar. Show/hide shortcut menu.

4 files changed, 75 insertions, 10 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 6017aed64..8abf23289 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -63,6 +63,18 @@ function init_shortcut_menu(html){
                load_shortcut_menu
         );
     });
+    $(".short-menu-close").click(function(){
+        $('#shortcut-menu div').hide();
+        $('#shortcut-menu table').hide();
+        $(".short-menu-close").hide();
+        $(".short-menu-open").show();
+    });
+    $(".short-menu-open").click(function(){
+        $('#shortcut-menu div').show();
+        $('#shortcut-menu table').show();
+        $(".short-menu-open").hide();
+        $(".short-menu-close").show();
+    });
 }
 
 function init_shortcut_fields(){
diff --git a/ishtar_common/static/media/style.css b/ishtar_common/static/media/style.css
index 8aac9e2a2..729889dc8 100644
--- a/ishtar_common/static/media/style.css
+++ b/ishtar_common/static/media/style.css
@@ -22,6 +22,8 @@ div.form, ul.form {
 
 /* color  */
 
+.short-menu-open,
+.short-menu-close,
 .pin-action,
 #window hr,
 #context_menu .red,
@@ -78,7 +80,7 @@ a.add-button,
 a.add-button, a.remove,
 #progress-content,
 div.form {
-    border:0 solid #CCC;
+    border:0 solid #EAEAEA;
 }
 
 #window hr{
@@ -347,10 +349,13 @@ div.nav-button{
 }
 
 div#header{
+    position: fixed;
+    top: 0;
+    z-index: 10;
     width:100%;
     text-align:left;
     font-size: 0.9em;
-    background-color: #CCC;
+    background-color: #EAEAEA;
     margin-bottom:10px;
     line-height:30px;
     padding:0 20px;
@@ -434,6 +439,33 @@ div#language_form_div label{
     margin-top: -20px;
 }
 
+.short-menu-open:hover,
+.short-menu-close:hover{
+    cursor: pointer;
+}
+
+.short-menu-open{
+    display: none;
+}
+
+.short-menu-open,
+.short-menu-close{
+    position: absolute;
+    right: -5px;
+    top: -5px;
+    font-size: 0.8em;
+}
+
+.short-menu-open .fa-stack-2x,
+.short-menu-close .fa-stack-2x {
+    font-size: 1.7em;
+}
+
+.short-menu-open .fa-stack-1x,
+.short-menu-close .fa-stack-1x {
+    line-height: 1.7em;
+}
+
 div#context_menu{
     height:110px;
     margin-right:10px;
@@ -444,11 +476,14 @@ div#context_menu{
 
 div#context_menu fieldset{
     margin-top: 8px;
-    background-color:#f1f2f6;
-    border:0 solid #CCC;
+    background-color: #E6E6E6;
+    border:0 solid #EAEAEA;
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
+    position: fixed;
+    top: 40px;
+    right: 10px;
 }
 
 div#action_current_items{
@@ -627,7 +662,7 @@ ul#form_path li a:link, ul#form_path li a:visited {
 #reminder{
     padding:0.4em;
     margin-right:10px;
-    border:1px solid #CCC;
+    border:1px solid #EAEAEA;
     -moz-border-radius:0;
     -webkit-border-radius:0;
     border-radius:0;
@@ -809,7 +844,7 @@ ul.form .help_text{
 
 .delete td{
     text-align:center;
-    border-bottom:1px solid #CCC;
+    border-bottom:1px solid #EAEAEA;
     padding:6px;
 }
 
@@ -865,7 +900,7 @@ table.confirm tr.spacer td:last-child{
 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
     background:none;
     background-color: #F1F2F6;
-    border: 1px solid #CCC;
+    border: 1px solid #EAEAEA;
     border-radius-top: 4px;
 }
 
@@ -973,7 +1008,7 @@ a.photo{
     background: #FFF;
     text-align:left;
     padding:10px;
-    border:1px solid #CCC;
+    border:1px solid #EAEAEA;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 }
diff --git a/ishtar_common/templates/ishtar/blocks/advanced_shortcut_menu.html b/ishtar_common/templates/ishtar/blocks/advanced_shortcut_menu.html
index 581381e82..2cf80da06 100644
--- a/ishtar_common/templates/ishtar/blocks/advanced_shortcut_menu.html
+++ b/ishtar_common/templates/ishtar/blocks/advanced_shortcut_menu.html
@@ -2,7 +2,15 @@
 {% load url from future%}
 {% if menu %}
 <form method="post" action="{% url 'update-current-item' %}">
-<fieldset>
+<fieldset id='shortcut-menu'>
+<span class="fa-stack short-menu-close">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
+</span>
+<span class="fa-stack short-menu-open">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-plus fa-stack-1x fa-inverse"></i>
+</span>
 <div class="short-menu-buttons btn-group" role="group">
   <button type="button" class="btn" id='short-menu-simple' title="{% trans 'Simple menu limited to your own items. Be careful only the last 100 items are displayed.' %}">{% trans "simple" %}</button>
   <button type="button" class="btn btn-selected" id='short-menu-advanced' title="{% trans 'Advanced menu.' %}">{% trans "advanced" %}</button>
diff --git a/ishtar_common/templates/ishtar/blocks/shortcut_menu.html b/ishtar_common/templates/ishtar/blocks/shortcut_menu.html
index 5a0463c30..05aaed6d8 100644
--- a/ishtar_common/templates/ishtar/blocks/shortcut_menu.html
+++ b/ishtar_common/templates/ishtar/blocks/shortcut_menu.html
@@ -2,11 +2,20 @@
 {% load url from future%}
 {% if current_menu %}
 <form method="post" action="{% url 'update-current-item' %}">
-<fieldset>
+<fieldset id="shortcut-menu">
+<span class="fa-stack short-menu-close">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-times fa-stack-1x fa-inverse"></i>
+</span>
+<span class="fa-stack short-menu-open">
+  <i class="fa fa-circle fa-stack-2x"></i>
+  <i class="fa fa-plus fa-stack-1x fa-inverse"></i>
+</span>
 <div class="short-menu-buttons btn-group" role="group">
   <button type="button" class="btn btn-selected" id='short-menu-simple' title="{% trans 'Simple menu limited to your own items. Be careful only the last 100 items are displayed.' %}">{% trans "simple" %}</button>
   <button type="button" class="btn" id='short-menu-advanced' title="{% trans 'Advanced menu.' %}">{% trans "advanced" %}</button>
 </div>
+<div>
 <i class="icon fa fa-thumb-tack fa-2x" aria-hidden="true" title="{% trans 'Pin an item in order to constrain default searches with this item. By default only your items are displayed. New created and modified items are auto-pin.' %}"></i>
 <table id='current_items'>
 {% for lbl, model_name, main_cls, items in current_menu %}
@@ -26,6 +35,7 @@
 </tr>
 {% endfor %}
 </table>
+</div>
 </fieldset>
 </form>
 <script type='text/javascript'>var advanced_menu = false;</script>