Merge pull request #47 from brecke/issue-46

oaeproject · May 29, 2020 · c1c4a78 · c1c4a78
2 parents 48b22e4 + 6ea38d4
commit c1c4a78
Showing 11 changed files with 97 additions and 349 deletions.
diff --git a/src/actions/app.js b/src/actions/app.js
@@ -16,7 +16,7 @@ export const CLOSE_SNACKBAR = 'CLOSE_SNACKBAR';
 
 export const navigate = path => dispatch => {
   // Extract the page name from path.
-  const page = path === '/' ? 'view1' : path.slice(1);
+  const page = path === '/' ? 'oae' : path.slice(1);
 
   // Any other info you might want to extract from the path (like page type),
   // you can do here
@@ -28,15 +28,6 @@ export const navigate = path => dispatch => {
 
 const loadPage = page => dispatch => {
   switch (page) {
-    case 'view1':
-      import('../components/my-view1.js').then((module) /* eslint-disable-line no-unused-vars */ => {
-        // Put code in here that you want to run every time when
-        // navigating to view1 after my-view1.js is loaded.
-      });
-      break;
-    case 'view2':
-      import('../components/my-view2.js');
-      break;
     case 'oae':
       import('../components/oae.js');
       break;

diff --git a/src/components/dashboard.js b/src/components/dashboard.js
@@ -4,8 +4,8 @@ import dashboardStyles from '../../style/dashboard.scss';
 import dashboardButtonsStyles from '../../style/dashboard-filter.scss';
 import { PageViewElement } from './page-view-element.js';
 import '@polymer/iron-icons/iron-icons.js';
-import './sidebarV2.js';
-import './top-navV2.js';
+import './top-nav.js';
+import './sidebar.js';
 import './info-card.js';
 import './tag-card.js';
 import './news-feed.js';

diff --git a/src/components/groups.js b/src/components/groups.js
@@ -4,8 +4,8 @@ import sharedStyles from '../../style/app.scss';
 import groupStyles from '../../style/groups.scss';
 import groupButtonStyles from '../../style/groups-filter.scss';
 import { PageViewElement } from './page-view-element.js';
-import './sidebarV2.js';
-import './top-navV2.js';
+import './top-nav.js';
+import './sidebar.js';
 import './groups-feed.js';
 import './groups-about.js';
 import './news-feed.js';

diff --git a/src/components/library.js b/src/components/library.js
@@ -3,8 +3,8 @@ import sharedStyles from '../../style/app.scss';
 import library from '../../style/library.scss';
 import { PageViewElement } from './page-view-element.js';
 import '@polymer/iron-icons/iron-icons.js';
-import './sidebarV2.js';
-import './top-navV2.js';
+import './sidebar.js';
+import './top-nav.js';
 import './info-card.js';
 import './tag-card.js';
 import './news-feed.js';

diff --git a/src/components/my-app.js b/src/components/my-app.js
@@ -145,7 +145,6 @@ class MyApp extends connect(store)(LitElement) {
         }
 
         .main-content {
-          padding-top: 64px;
           min-height: 100vh;
         }
 
@@ -175,10 +174,6 @@ class MyApp extends connect(store)(LitElement) {
             display: none;
           }
 
-          .main-content {
-            padding-top: 107px;
-          }
-
           /* The drawer button isn't shown in the wide layout, so we don't
           need to offset the title */
           [main-title] {
@@ -193,40 +188,7 @@ class MyApp extends connect(store)(LitElement) {
     // Anything that's related to rendering should be done in here.
     return html`
       <!-- Header -->
-      <app-header condenses reveals effects="waterfall">
-        <app-toolbar class="toolbar-top">
-          <button class="menu-btn" title="Menu" @click="${this._menuButtonClicked}">${menuIcon}</button>
-          <div main-title>${this.appTitle}</div>
-        </app-toolbar>
-
-        <!-- This gets hidden on a small screen-->
-        <nav class="toolbar-list">
-          <a ?selected="${this._page === 'view1'}" href="/view1">View One</a>
-          <a ?selected="${this._page === 'view2'}" href="/view2">View Two</a>
-          <a ?selected="${this._page === 'view3'}" href="/view3">View Three</a>
-          <a ?selected="${this._page === 'oae'}" href="/oae">OAE</a>
-          <a ?selected="${this._page === 'dashboard'}" href="/dashboard">Dashboard</a>
-          <a ?selected="${this._page === 'homepage'}" href="/homepage">Homepage</a>
-          <a ?selected="${this._page === 'library'}" href="/library">Library</a>
-          <a ?selected="${this._page === 'discussions'}" href="/discussions">Discussions</a>
-          <a ?selected="${this._page === 'groups'}" href="/groups">Groups</a>
-        </nav>
-      </app-header>
-
-      <!-- Drawer content -->
-      <app-drawer .opened="${this._drawerOpened}" @opened-changed="${this._drawerOpenedChanged}">
-        <nav class="drawer-list">
-          <a ?selected="${this._page === 'view1'}" href="/view1">View One</a>
-          <a ?selected="${this._page === 'view2'}" href="/view2">View Two</a>
-          <a ?selected="${this._page === 'view3'}" href="/view3">View Three</a>
-          <a ?selected="${this._page === 'oae'}" href="/oae">OAE</a>
-          <a ?selected="${this._page === 'dashboard'}" href="/dashboard">Dashboard</a>
-          <a ?selected="${this._page === 'homepage'}" href="/homepage">Homepage</a>
-          <a ?selected="${this._page === 'library'}" href="/library">Library</a>
-          <a ?selected="${this._page === 'discussions'}" href="/discussions">Discussions</a>
-          <a ?selected="${this._page === 'groups'}" href="/groups">Groups</a>
-        </nav>
-      </app-drawer>
+      <app-header condenses reveals effects="waterfall"> </app-header>
 
       <!-- Main content -->
       <main role="main" class="main-content">
@@ -241,7 +203,6 @@ class MyApp extends connect(store)(LitElement) {
         <user-groups class="page" ?active="${this._page === 'groups'}"></user-groups>
       </main>
 
-      
       <snack-bar ?active="${this._snackbarOpened}">
         You are now ${this._offline ? 'offline' : 'online'}.
       </snack-bar>

diff --git a/src/components/my-view1.js b/src/components/my-view1.js
diff --git a/src/components/my-view2.js b/src/components/my-view2.js
diff --git a/src/components/sidebar.js b/src/components/sidebar.js
@@ -11,8 +11,13 @@ class Sidebar extends LitElement {
   }
 
   render() {
-    return html`
+    let version2 = html`
       <aside class="menu">
+        <div class="navbar-brand sidebar-brand">
+          <a class="navbar-item" href="http://0.0.0.0:8080/oae">
+            <img src="/images/logo-oae2.svg" width="112" height="28" />
+          </a>
+        </div>
         <ul class="menu-list">
           <li>
             <span class="icon sidebar-icon">
@@ -57,6 +62,55 @@ class Sidebar extends LitElement {
         </ul>
       </aside>
     `;
+
+    let version1 = html`
+      <aside class="menu">
+        <ul class="menu-list">
+          <li>
+            <span class="icon sidebar-icon">
+              <iron-icon icon="dashboard"></iron-icon>
+            </span>
+            <a class="dashboard">
+              Dashboard
+            </a>
+          </li>
+          <li>
+            <span class="icon sidebar-icon">
+              <iron-icon icon="av:library-books"></iron-icon>
+            </span>
+            <a class="library">
+              Library
+            </a>
+          </li>
+          <li>
+            <span class="icon sidebar-icon">
+              <iron-icon icon="content-paste"></iron-icon>
+            </span>
+            <a class="discussions">
+              Discussions
+            </a>
+          </li>
+          <li>
+            <span class="icon sidebar-icon">
+              <iron-icon icon="social:people-outline"></iron-icon>
+            </span>
+            <a class="groups">
+              Groups
+            </a>
+          </li>
+          <li>
+            <span class="icon sidebar-icon">
+              <iron-icon icon="social:public"></iron-icon>
+            </span>
+            <a class="network">
+              Network
+            </a>
+          </li>
+        </ul>
+      </aside>
+    `;
+
+    return version2;
   }
 }
 

diff --git a/src/components/sidebarV2.js b/src/components/sidebarV2.js
diff --git a/src/components/top-nav.js b/src/components/top-nav.js
@@ -14,7 +14,7 @@ class topNav extends LitElement {
   }
 
   render() {
-    return html`
+    let version1 = html`
       <header class="navbar">
         <div class="container top-nav">
           <div class="navbar-brand">
@@ -39,6 +39,38 @@ class topNav extends LitElement {
               <span></span>
             </span>
           </div>
+          <div id="navbarMenuHeroC" class="navbar-menu">
+            <div class="navbar-end">
+              <notifications-button></notifications-button>
+              <context-button></context-button>
+              <userprofile-button></userprofile-button>
+            </div>
+          </div>
+        </div>
+      </header>
+    `;
+
+    let version2 = html`
+      <header class="navbar">
+        <div class="container top-nav">
+            <div class="navbar-item">
+              <div class="field has-addons has-addons-centered">
+                <p class="control">
+                  <span class="icon topbar-search-icon">
+                    <iron-icon icon="search"></iron-icon>
+                  </span>
+                </p>
+                <p class="control">
+                  <input class="input top-nav-input" type="text" placeholder="Type to search" />
+                </p>
+              </div>
+            </div>
+            <span class="navbar-burger burger" data-target="navbarMenuHeroC">
+              <span></span>
+              <span></span>
+              <span></span>
+            </span>
+          </div>
           <div id="navbarMenuHeroC" class="navbar-menu">
             <div class="navbar-end">
             <notifications-button></notifications-button>
@@ -49,6 +81,7 @@ class topNav extends LitElement {
         </div>
       </header>
     `;
+    return version2;
   }
 }
 

diff --git a/src/components/top-navV2.js b/src/components/top-navV2.js