Separate the menus

App switcher goes to the top right. User menu on top right. App specific navigation stays in the left sidebar.
owncloud · Dec 11, 2019 · b53de56 · b53de56
1 parent d7d89a1
commit b53de56
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 19 deletions.
diff --git a/src/elements/OCAvatar.vue b/src/elements/OCAvatar.vue
@@ -1,7 +1,7 @@
 <template>
   <oc-img
     class="oc-avatar"
-    width="50"
+    :width="width"
     :src="src"
     :alt="accessibilityLabel"
     :aria-hidden="accessibilityLabel === ''"
@@ -34,6 +34,12 @@ export default {
       required: false,
       default: "",
     },
+
+    width: {
+      type: Number,
+      required: false,
+      default: 50,
+    },
   },
 }
 </script>

diff --git a/src/pages/Files.vue b/src/pages/Files.vue
@@ -59,22 +59,67 @@ export default {
         <router-link to="/" class="oc-topbar-icon">ownCloud X</router-link>
       </oc-navbar-item>
       <oc-navbar-item position="right">
-        <router-link
-          tag="div"
-          to="/personal"
+        <div
           class="oc-topbar-personal"
-          uk-tooltip="title: Personal setting; pos: bottom-right;"
         >
+          <oc-icon name="menu" variation="inverted" id="_apps"/>
           <oc-avatar
             class="oc-topbar-personal-avatar"
             src="https://picsum.photos/64/64?image=1027"
             :loading="loading"
-          /><span class="oc-topbar-personal-label">Alice Habanero</span>
-        </router-link>
+            id="_account"
+          />
+          </div>
       </oc-navbar-item>
     </oc-navbar>
 
+    <oc-drop toggle="#_apps" mode="click" :options="{pos:'bottom-right'}" class="uk-width-large">
+      <div class="uk-grid-small uk-text-center" uk-grid>
+        <div class="uk-width-1-3">
+          <oc-icon name="folder" size="large"/>
+          <div>Files</div>
+        </div>
+        <div class="uk-width-1-3">
+          <oc-icon name="movie_filter" size="large"/>
+          <div>Video</div>
+        </div>
+        <div class="uk-width-1-3">
+          <oc-icon name="group" size="large"/>
+          <div>Contacts</div>
+        </div>
+      </div>
+      <div class="uk-grid-small uk-text-center" uk-grid>
+        <div class="uk-width-1-3">
+          <oc-icon name="linked_camera" size="large"/>
+          <div>Album</div>
+        </div>
+        <div class="uk-width-1-3">
+          <oc-icon name="lock" size="large"/>
+          <div>Passwords</div>
+        </div>
+        <div class="uk-width-1-3">
+          <oc-icon name="timer" size="large"/>
+          <div>Run Tracker</div>
+        </div>
+      </div>
+    </oc-drop>
 
+    <oc-drop toggle="#_account" mode="click" :options="{pos:'bottom-right'}" class="uk-width-large">
+      <div class="uk-card-body uk-flex uk-flex-middle uk-flex-column">
+        <oc-avatar
+          src="https://picsum.photos/128/128?image=1027"
+          :width="128"
+        />
+        <h3 class="uk-card-title">Alice Wonderland</h3>
+        <span>alice@wonder.land</span>
+        <oc-button>Manage your account</oc-button>
+        <br/>
+        <oc-button>Sign out</oc-button>
+      </div>
+      <div class="uk-card-footer uk-flex uk-flex-middle uk-flex-column">
+        <span>version: 0.2.6</span>
+      </div>
+    </oc-drop>
 
     <oc-application-menu v-model="leftMenuOpen" name="leftMenu" @close="leftMenuOpen = false">
       <oc-sidebar-nav-item active icon="folder" target="home">
@@ -89,20 +134,15 @@ export default {
           <oc-sidebar-nav-item>Deleted files</oc-sidebar-nav-item>
         </template>
       </oc-sidebar-nav-item>
-
-      <oc-sidebar-nav-item icon="account_circle" :isolate="true">Personal settings</oc-sidebar-nav-item>
-      <oc-sidebar-nav-divider />
-      <oc-sidebar-nav-item icon="application">Administration</oc-sidebar-nav-item>
-
-      <oc-sidebar-nav-item icon="exit_to_app" target="login" :isolate="true">Exit ownCloud</oc-sidebar-nav-item>
     </oc-application-menu>
 
-    <oc-app-layout :rightHidden="rightHidden">
+    <oc-app-layout :rightHidden="rightHidden" :leftHidden="true">
+
 
       <template slot="center">
         <oc-app-bar id="files-app-bar">
           <div class="uk-width-expand">
-              <oc-breadcrumb :home="goHome" :items="[{text:'Folder',to:{path:'folder'}},{text:'Subfolder'}]"></oc-breadcrumb>
+              <oc-breadcrumb :home="true" :items="[{text:'Folder',to:{path:'folder'}},{text:'Subfolder'}]"></oc-breadcrumb>
           </div>
           <div class="uk-width-auto uk-visible@m">
             <oc-search-bar label="Search"></oc-search-bar>
@@ -187,7 +227,7 @@ export default {
           </template>
         </oc-dialog>
 
-        <oc-file-actions />
+        <!-- <oc-file-actions /> -->
 
       </template>
       <template slot="right">
@@ -285,9 +325,6 @@ export default {
       }
     },
     methods: {
-      goHome () {
-        alert('Going home')
-      },
       selectFile(file) {
         this.$root.$emit('oc-file-actions:open', {
           filename: file.name + "." + file.extension,

diff --git a/src/styles/theme/oc-app-menu.scss b/src/styles/theme/oc-app-menu.scss
@@ -3,6 +3,7 @@
   @extend .uk-nav-default;
   @extend .uk-nav-parent-icon;
   @extend .uk-margin-medium-top;
+  @extend .uk-margin-small-left;
 
   // Immediate anchor
   & > li > a {