Merge pull request #141 from ParticipaPY/ticket134

Improvement of the issue #134 - fly-out menu
ParticipaPY · May 11, 2018 · 0bd0630 · 0bd0630
2 parents 2e9b53f + 2cb8293
commit 0bd0630
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 22 deletions.
diff --git a/frontoffice/src/components/Header.vue b/frontoffice/src/components/Header.vue
@@ -10,41 +10,45 @@
     <ul class="nav navbar-nav ml-auto">
       <dropdown size="nav">
         <span slot="button">
-          <img src="static/img/avatars/6.jpg" class="img-avatar" alt="avatar-user">
+          <div style="cursor:pointer">
+            <img src="static/img/avatars/6.jpg" class="img-avatar" alt="avatar-user">
+            <i class="fa fa-caret-down" style="margin-right:10px"></i>
+          </div>
         </span>    
           <div slot="dropdown-menu" class="dropdown-menu dropdown-menu-right">
 
-            <div class="row" style="margin-left: 0px; margin-right: -25px;">
+            <div class="row" style="margin-left: 0px; margin-right: -25px; margin-bottom:10px">
 
               <div class="col-sm-7" >
 
                 <div class="row" style=" margin-left: 0px; margin-right: -25px; margin-top: 15px;">
                   <div style="color:white"><span style="display:block;text-overflow: ellipsis;width: 155px;overflow: hidden; white-space: nowrap;">{{ DisplayName () }}</span></div>
                 </div>
 
-                <div class="row" style="; margin-bottom: 5px; margin-left: 10px; margin-right: -25px;">
+                <div class="row" style="margin-bottom: 5px; margin-left: 10px; margin-right: -25px;">
                   <a style="color:silver  ; font-size: 13px">{{ DisplayUsername () }}</a>
                 </div>
 
               </div>
 
               <div class="col-sm-4" >
-                  <button @click="logout" type="button" class="btn btn-outline-primary" style="margin-top: 20px; margin-left: -10px;color:silver; font-size: 10px"><i class="fa fa-power-off" style="color:rgb(171,12,12); margin-right:5px"></i>LOGOUT</button>
+                <button @click="logout" type="button" class="btn btn-outline-danger" style="margin-top: 20px; margin-left: -10px;font-size: 10px"><i class="icon fa fa-power-off" style="color.hover: white; margin-right:5px"></i>LOGOUT</button>
               </div>
 
             </div>
 
-            <li class="dropdown-divider mb-2"></li>
+            <li class="dropdown-divider"></li>
 
-            <div class="row" style=" margin-left: 0px; margin-right: -25px; margin-top:11px;" >
+            <div class="row">
               <div class="col-lg-12 btn-group-vertical" >
-                  <button type="button" class="btn btn-outline-primary btn-block text-left" @click="openModal()" style="margin-left: -12px;font-size: 12px;border-color: transparent;color: silver;">My Profile</button>
-                  <button type="button" class="btn btn-outline-primary btn-block text-left" @click="openModal()" style="margin-left: -12px;margin-top: 5px;font-size: 12px;border-color: transparent;color: silver;">Settings</button>
+                  <button type="button" class="nav-item btn btn-outline-primary text-left" @click="openModal('0')" style="font-size: 13px; height:40px">My Profile</button>
+                  <button type="button" class="nav-item btn btn-outline-primary text-left" @click="openModal('1')" style="font-size: 13px; height:40px">Settings</button>
               </div>
             </div>
 
             <div id="wrapper" class="container"> 
              <modal v-if="showModal"> 
+              <h3 slot="header" class="modal-title"> {{ modalTitle }} </h3>
                <div slot="footer">
                   <button type="button" class="btn btn-outline-info" @click="closeModal()"> Close </button>
                </div>
@@ -75,7 +79,8 @@ export default {
   data () {
     return {
       showModal: false,
-      flName: ''
+      flName: '',
+      modalTitle: ''
     }
   },
   methods: {
@@ -115,7 +120,12 @@ export default {
       e.preventDefault()
       document.body.classList.toggle('aside-menu-hidden')
     },
-    openModal () {
+    openModal (id) {
+      if (id === '0') {
+        this.modalTitle = 'My Profile'
+      } else {
+        this.modalTitle = 'Settings'
+      }
       this.showModal = true
     },
     closeModal () {

diff --git a/frontoffice/src/components/Modal.vue b/frontoffice/src/components/Modal.vue
@@ -4,9 +4,7 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h3 slot="header" class="modal-title">
-          Title
-        </h3>
+        <slot name="header"></slot>
       </div>
 
       <div class="modal-body">

diff --git a/frontoffice/static/css/style.css b/frontoffice/static/css/style.css
@@ -1960,11 +1960,12 @@ fieldset[disabled] a.btn {
     border-color: #f53231; }
 
 .btn-outline-primary {
-  color: #20a8d8;
+  color: #C0C0C0;
   background-color: transparent;
   background-image: none;
-  border-color: #ad0c0c; }
+  border-color: transparent; }
   .btn-outline-primary:hover {
+    text-color: #12ff00;
     color: #fff;
     background-color: #20a8d8;
     border-color: #20a8d8; }
@@ -2060,14 +2061,14 @@ fieldset[disabled] a.btn {
     border-color: #f8cb00; }
 
 .btn-outline-danger {
-  color: #f86c6b;
+  color: #C0C0C0;
   background-color: transparent;
   background-image: none;
-  border-color: #f86c6b; }
+  border-color: #ad0c0c; }
   .btn-outline-danger:hover {
     color: #fff;
-    background-color: #f86c6b;
-    border-color: #f86c6b; }
+    background-color: transparent;
+    border-color: #ad0c0c; }
   .btn-outline-danger:focus, .btn-outline-danger.focus {
     box-shadow: 0 0 0 2px rgba(248, 108, 107, 0.5); }
   .btn-outline-danger.disabled, .btn-outline-danger:disabled {
@@ -2166,7 +2167,7 @@ tbody.collapse.show {
   border-bottom: 0.3em solid; }
 
 .dropdown-menu {
-  height: 163px !important;
+  height: 153.5px !important;
   width: 284px !important;
   position: absolute;
   top: 100%;
@@ -2188,9 +2189,8 @@ tbody.collapse.show {
 
 .dropdown-divider {
   height: 0;
-  margin: 0.5rem 0;
   overflow: hidden;
-  border-top: 1px solid #eceff1; }
+  border-top: 1px solid #C0C0C0; }
 
 .dropdown-item {
   display: block;