[top-bar redesign] index.html

2 files changed, 55 insertions, 48 deletions

diff --git a/res/client/css/partials/top-bar.scss b/res/client/css/partials/top-bar.scss
index 25d4c7bf..5658198e 100644
--- a/res/client/css/partials/top-bar.scss
+++ b/res/client/css/partials/top-bar.scss
@@ -1,58 +1,53 @@
-.top-bar{
-    line-height: 40px;
-    background-color: $dark-grey;
-    overflow-y: auto;
-    padding-top: 5px;
-    padding-bottom: 5px;
+.username {
+    display: inline-block;
+    text-align: right;
+}
+
+.profile-username {
+    font-size: 14px;
+    margin-right: 10px;
 }
 
-.top-bar__user-area {
+#top-bar__user-area {
+    float: right;
     margin-right: 20px;
     vertical-align: middle;
 }
 
-.username {
-    display: inline-block;
-    text-align: right;
+#top-bar{
 }
 
-.profile-circle{
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-    background: $cyan;
-    display: none;
+#top-bar__brand-area {
+    float: right;
+    margin-right: 10px;
+    vertical-align: middle;
 }
 
-.profile-initials {
-    display: inline-block;
-    color: $light-grey;
-    font-size: $h4-size;
-    position: relative;
-    left: -27px;
-    top: -10px;
+#top-bar_L1 {
+    // background-color: #363636;
+    border-bottom: 2px solid lightgray;
+    line-height: 40px;
+    overflow: auto;
+    padding-left: $graph-margin-left;
 }
 
-.profile-username {
-    color: $light-grey;
+#top-bar_L2 {
+    background-color: #CFE5FF;
 }
 
-#top-bar_float-left {
-    float: left;
-    margin-left: 40px;
-}
+#top-bar__logout-btn {
+    margin-left: 15px;
+    font-size: 14px;
 
-#top-bar_float-right {
-    float: right;
-    margin-right: 20px;
+    @include btn-change-on-hover__opacity
 }
 
 #rzdoc-bar {
-    color: $light-grey;
-    position: relative;
-    overflow-x: auto;
-    margin-right: 20px;
+    // color: $light-grey;
+    float: left;
     min-width: 250px;
+    overflow-x: auto;
+    position: relative;
 }
 
 #rzdoc-bar_doc-label {
diff --git a/res/domain-fragment.d/default/template.d/index.html b/res/domain-fragment.d/default/template.d/index.html
index a2079eb7..4939a8cf 100644
--- a/res/domain-fragment.d/default/template.d/index.html
+++ b/res/domain-fragment.d/default/template.d/index.html
@@ -23,21 +23,33 @@ var RZ_VERSION = '{% include "version.txt" %}';
 <script src="/static/js/local_config.js"></script>
 {% endblock %}
 {% block content %}
-  <div class="top-bar">
-    <span id="top-bar_float-left">
+  <div id="top-bar">
+    <div id="top-bar_L1">
       <div id="rzdoc-bar">
         <span id="rzdoc-bar_doc-label"></span>
-        <span class="tool_bar_btn" id="btn_rzdoc__new" title="New"></span>
-        <span class="tool_bar_btn" id="btn_rzdoc__open" title="Open"></span>
       </div>
-    </span>
-    <span id="top-bar_float-right">
-      <span class="top-bar__user-area">
-           <span id="profile-circle"></span>
-           <span class="profile-username">Hello&nbsp;<span id="user_id">{{ rz_username }}</span>!<span id="btn-logout" class="button">Logout</span></span>
-      </span>
-      <span class="site-logo"><a tabindex="-1"><img id="site-logo" src="{{ fragment_d_path }}/img/site-logo.png"></a></span>
-    </span>
+      <div id="top-bar__brand-area">
+        <span class="site-logo"><a tabindex="-1"><img id="site-logo" src="{{ fragment_d_path }}/img/site-logo.png"></a></span>
+      </div>
+      <div id="top-bar__user-area">
+        <span class="profile-username">Hello&nbsp;<span id="user_id">{{ rz_username }}!</span>
+        <span id="top-bar__logout-btn">Logout</span></span>
+      </div>
+    </div>
+    <div id="top-bar_L2">
+      <div id="menu-bar">
+        <div class="menu-bar__item" id="menu-bar__rzdoc-new" title="New">New</div>
+        <span class="menu-bar__delimiter">・</span>
+        <div class="menu-bar__item" id="menu-bar__rzdoc-open" title="Open">Open</div>
+        <span class="menu-bar__delimiter">・</span>
+        <div class="menu-bar__item" id="menu-bar__activity-view-toggle" title="Enable checkbox to display activity log">
+          <span>Show Activity Log</span><input id="checkbox__activity-view-toggle" type="checkbox" name="activity-view-toggle">
+        </div>
+        <div class="menu-bar__item" id="menu-bar__rzdoc-search" title="Search for Rhizi documents">
+          <input id="menu-bar__rzdoc-search__input" placeholder="Search for documents">
+        </div>
+      </div>
+    </div>
   </div>
   <div id="status-bar" style="display:none"></div>
   <div id="intro-task" class="task-alert" style="display:none">