Skip to content
This repository has been archived by the owner on Jul 30, 2021. It is now read-only.

Interface resize #25

Merged
merged 6 commits into from
Dec 5, 2019
+342 −258
Merged

Interface resize #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d3d1482
style: sidebar size, links, colors
RitaOak Dec 3, 2019
4d4258b
style: sidebar align elements
RitaOak Dec 3, 2019
d67fc9a
style: sidebar icons color
RitaOak Dec 3, 2019
5a702f5
feat+style: top nav search
RitaOak Dec 3, 2019
a78c58f
feat: web components for buttons and styles
RitaOak Dec 3, 2019
5b60e5f
fix: indentation + removed unnecessary style files
RitaOak Dec 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions src/components/context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { html, LitElement } from 'lit-element';
import sharedStyles from '../../style/app.scss';
import TopnavButtonStyles from '../../style/topnav-buttons.scss';
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/iron-icons/social-icons.js';
import '@polymer/iron-icons/av-icons.js';
import '@polymer/iron-icons/maps-icons.js';

class Context extends LitElement {
static get styles() {
return [sharedStyles, TopnavButtonStyles];
}

render() {
return html`
<div class="navbar-item has-dropdown is-hoverable notifications-button">
<a class="navbar-link">
<span class="icon notification-icon">
<iron-icon icon="maps:map"></iron-icon>
</span>
<span class="notifications-label">Context</span>
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Notification 1
</a>
<a class="navbar-item">
Notification 2
</a>
<a class="navbar-item">
Notification 3
</a>
<hr class="navbar-divider" />
<div class="navbar-item">
See all
</div>
</div>
</div>
`;
}
}

window.customElements.define('context-button', Context);
43 changes: 43 additions & 0 deletions src/components/notifications.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { html, LitElement } from 'lit-element';
import sharedStyles from '../../style/app.scss';
import TopnavButtonStyles from '../../style/topnav-buttons.scss';
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/iron-icons/social-icons.js';
import '@polymer/iron-icons/av-icons.js';
import '@polymer/iron-icons/hardware-icons.js';

class Notifications extends LitElement {
static get styles() {
return [sharedStyles, TopnavButtonStyles];
}

render() {
return html`
<div class="navbar-item has-dropdown is-hoverable notifications-button">
<a class="navbar-link">
<span class="icon notification-icon">
<iron-icon icon="social:notifications-none"></iron-icon>
</span>
<span class="notifications-label">Notifications</span>
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Notification 1
</a>
<a class="navbar-item">
Notification 2
</a>
<a class="navbar-item">
Notification 3
</a>
<hr class="navbar-divider" />
<div class="navbar-item">
See all
</div>
</div>
</div>
`;
}
}

window.customElements.define('notifications-button', Notifications);
22 changes: 16 additions & 6 deletions src/components/sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { html, LitElement } from 'lit-element';
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/iron-icons/social-icons.js';
import '@polymer/iron-icons/av-icons.js';
import homepageStyles from '../../style/homepage.scss';
import sharedStyles from '../../style/app.scss';

Expand All @@ -19,36 +20,45 @@ class Sidebar extends LitElement {
</div>
<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>
<hr class="navbar-divider" />
<li>
<a class="user-settings">
User Settings
</a>
</li>
</ul>
</aside>
`;
Expand Down
88 changes: 21 additions & 67 deletions src/components/top-nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import { html, LitElement } from 'lit-element';
import homepageStyles from "../../style/homepage.scss";
import sharedStyles from "../../style/app.scss";
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/iron-icons/social-icons.js';
import '@polymer/iron-icons/maps-icons.js';
import homepageStyles from '../../style/homepage.scss';
import sharedStyles from '../../style/app.scss';
import './notifications.js';
import './context.js';
import './user-button.js';

class topNav extends LitElement {
static get styles() {
Expand All @@ -12,72 +18,20 @@ class topNav extends LitElement {
<section>
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<div class="navbar-item">
<div class="field has-addons has-addons-centered">
<p class="control">
<img class="search_icon" src="./../../node_modules/@mdi/svg/svg/magnify.svg"/>
<p class="control">
<input class="input" type="text" placeholder="Type to search">
</p>
</p>
</div>

<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 class="control">
<input class="input" type="text" placeholder="Type to search">
</p>
</div>
<div class="navbar-end is-small">
<div class="navbar-item has-dropdown is-hoverable notifications-button">
<a class="navbar-link">
<img class="top-menu" src="./../../node_modules/@mdi/svg/svg/bell-outline.svg"/>
Notifications
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Notification 1
</a>
<a class="navbar-item">
Notification 2
</a>
<a class="navbar-item">
Notification 3
</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
<img class="top-menu" src="./../../node_modules/@mdi/svg/svg/map-outline.svg"/>
Switch Context
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
User Area
</a>
<hr class="navbar-divider">
<a class="navbar-item">
OAE Design
</a>
<a class="navbar-item">
Open Apereo 2017
</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable is-small">
<a class="navbar-link avatar">
Hi, Rita Carvalho
<img class="top-menu avatar" src="./../../node_modules/@mdi/svg/svg/account-outline.svg"/>
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Settings
</a>
<a class="navbar-item">
Dark Mode
</a>
<a class="navbar-item">
Help
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Logout
</a>
</div>
</div>
<div class="navbar-end">
<notifications-button></notifications-button>
<context-button></context-button>
<userprofile-button></userprofile-button>
</div>
</div>
</div>
Expand Down
44 changes: 44 additions & 0 deletions src/components/user-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { html, LitElement } from 'lit-element';
import sharedStyles from '../../style/app.scss';
import TopnavButtonStyles from '../../style/topnav-buttons.scss';
import userStyles from '../../style/user.scss';
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/iron-icons/social-icons.js';
import '@polymer/iron-icons/av-icons.js';
import '@polymer/iron-icons/hardware-icons.js';

class User extends LitElement {
static get styles() {
return [sharedStyles, userStyles, TopnavButtonStyles];
}

render() {
return html`
<div class="navbar-item has-dropdown is-hoverable notifications-button">
<a class="navbar-link">
<span class="notifications-label">Hi, Rita Carvalho</span>
<span class="icon user-icon">
<iron-icon icon="social:person-outline"></iron-icon>
</span>
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Notification 1
</a>
<a class="navbar-item">
Notification 2
</a>
<a class="navbar-item">
Notification 3
</a>
<hr class="navbar-divider" />
<div class="navbar-item">
See all
</div>
</div>
</div>
`;
}
}

window.customElements.define('userprofile-button', User);
Loading