diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/desktop_nav/desktop_nav.js | 89 | ||||
| -rw-r--r-- | src/components/desktop_nav/desktop_nav.scss | 112 | ||||
| -rw-r--r-- | src/components/desktop_nav/desktop_nav.vue | 79 | ||||
| -rw-r--r-- | src/components/mobile_nav/mobile_nav.vue | 267 | ||||
| -rw-r--r-- | src/components/search_bar/search_bar.vue | 77 |
5 files changed, 459 insertions, 165 deletions
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js new file mode 100644 index 00000000..ee99ec10 --- /dev/null +++ b/src/components/desktop_nav/desktop_nav.js @@ -0,0 +1,89 @@ +import SearchBar from 'components/search_bar/search_bar.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faSignInAlt, + faSignOutAlt, + faHome, + faComments, + faBell, + faUserPlus, + faBullhorn, + faSearch, + faTachometerAlt, + faCog, + faInfoCircle +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faSignInAlt, + faSignOutAlt, + faHome, + faComments, + faBell, + faUserPlus, + faBullhorn, + faSearch, + faTachometerAlt, + faCog, + faInfoCircle +) + +export default { + components: { + SearchBar + }, + data: () => ({ + searchBarHidden: true, + supportsMask: window.CSS && window.CSS.supports && ( + window.CSS.supports('mask-size', 'contain') || + window.CSS.supports('-webkit-mask-size', 'contain') || + window.CSS.supports('-moz-mask-size', 'contain') || + window.CSS.supports('-ms-mask-size', 'contain') || + window.CSS.supports('-o-mask-size', 'contain') + ) + }), + computed: { + enableMask () { return this.supportsMask && this.$store.state.instance.logoMask }, + logoStyle () { + return { + 'visibility': this.enableMask ? 'hidden' : 'visible' + } + }, + logoMaskStyle () { + return this.enableMask ? { + 'mask-image': `url(${this.$store.state.instance.logo})` + } : { + 'background-color': this.enableMask ? '' : 'transparent' + } + }, + logoBgStyle () { + return Object.assign({ + 'margin': `${this.$store.state.instance.logoMargin} 0`, + opacity: this.searchBarHidden ? 1 : 0 + }, this.enableMask ? {} : { + 'background-color': this.enableMask ? '' : 'transparent' + }) + }, + logo () { return this.$store.state.instance.logo }, + sitename () { return this.$store.state.instance.name }, + hideSitename () { return this.$store.state.instance.hideSitename }, + logoLeft () { return this.$store.state.instance.logoLeft }, + currentUser () { return this.$store.state.users.currentUser }, + privateMode () { return this.$store.state.instance.private }, + }, + methods: { + scrollToTop () { + window.scrollTo(0, 0) + }, + logout () { + this.$router.replace('/main/public') + this.$store.dispatch('logout') + }, + onSearchBarToggled (hidden) { + this.searchBarHidden = hidden + }, + openSettingsModal () { + this.$store.dispatch('openSettingsModal') + }, + } +} diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss new file mode 100644 index 00000000..028692a9 --- /dev/null +++ b/src/components/desktop_nav/desktop_nav.scss @@ -0,0 +1,112 @@ +@import '../../_variables.scss'; + +.DesktopNav { + height: 50px; + width: 100%; + position: fixed; + + .inner-nav { + display: grid; + grid-template-rows: 50px; + grid-template-columns: 2fr auto 2fr; + grid-template-areas: "sitename logo actions"; + box-sizing: border-box; + padding: 0 1.2em; + margin: auto; + max-width: 980px; + } + + &.-logoLeft { + grid-template-columns: auto 2fr 2fr; + grid-template-areas: "logo sitename actions"; + } + + button { + &, svg { + color: $fallback--text; + color: var(--btnTopBarText, $fallback--text); + } + + &:active { + background-color: $fallback--fg; + background-color: var(--btnPressedTopBar, $fallback--fg); + color: $fallback--text; + color: var(--btnPressedTopBarText, $fallback--text); + } + + &:disabled { + color: $fallback--text; + color: var(--btnDisabledTopBarText, $fallback--text); + } + + &.toggled { + color: $fallback--text; + color: var(--btnToggledTopBarText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--btnToggledTopBar, $fallback--fg) + } + } + + .logo { + grid-area: logo; + position: relative; + transition: opacity; + transition-timing-function: ease-out; + transition-duration: 100ms; + + @media all and (min-width: 800px) { + opacity: 1 !important; + } + + .mask { + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + background-color: $fallback--fg; + background-color: var(--topBarText, $fallback--fg); + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + + img { + display: inline-block; + height: 50px; + } + } + + .nav-icon { + margin-left: 0.2em; + width: 2em; + text-align: center; + } + + a, a svg { + color: $fallback--link; + color: var(--topBarLink, $fallback--link); + } + + .sitename { + grid-area: sitename; + } + + .actions { + grid-area: actions; + } + + .item { + flex: 1; + line-height: 50px; + height: 50px; + overflow: hidden; + display: flex; + flex-wrap: wrap; + + &.right { + justify-content: flex-end; + text-align: right; + } + } +} diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue new file mode 100644 index 00000000..d166be08 --- /dev/null +++ b/src/components/desktop_nav/desktop_nav.vue @@ -0,0 +1,79 @@ +<template> + <nav + id="nav" + class="DesktopNav" + :class="{ '-logoLeft': logoLeft }" + @click="scrollToTop()" + > + <div class="inner-nav"> + <div class="item sitename"> + <router-link + v-if="!hideSitename" + class="site-name" + :to="{ name: 'root' }" + active-class="home" + > + {{ sitename }} + </router-link> + </div> + <router-link + class="logo" + :to="{ name: 'root' }" + :style="logoBgStyle" + > + <div + class="mask" + :style="logoMaskStyle" + /> + <img + :src="logo" + :style="logoStyle" + > + </router-link> + <div class="item right actions"> + <search-bar + v-if="currentUser || !privateMode" + @toggled="onSearchBarToggled" + @click.stop.native + /> + <a + href="#" + class="nav-icon" + @click.stop="openSettingsModal" + > + <FAIcon + fixed-width + class="fa-scale-110 fa-old-padding" + icon="cog" + :title="$t('nav.preferences')" + /> + </a> + <a + v-if="currentUser && currentUser.role === 'admin'" + href="/pleroma/admin/#/login-pleroma" + class="nav-icon" + target="_blank" + ><FAIcon + fixed-width + class="fa-scale-110 fa-old-padding" + icon="tachometer-alt" + :title="$t('nav.administration')" + /></a> + <a + v-if="currentUser" + href="#" + class="nav-icon" + @click.prevent="logout" + ><FAIcon + fixed-width + class="fa-scale-110 fa-old-padding" + icon="sign-out-alt" + :title="$t('login.logout')" + /></a> + </div> + </div> + </nav> +</template> +<script src="./desktop_nav.js"></script> + +<style src="./desktop_nav.scss" lang="scss"></style> diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index d2bc65ab..30b15149 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -1,55 +1,53 @@ <template> - <div> + <div + class="MobileNav" + > <nav id="nav" - class="nav-bar container" + class="mobile-nav" :class="{ 'mobile-hidden': isChat }" + @click="scrollToTop()" > - <div - class="mobile-inner-nav" - @click="scrollToTop()" - > - <div class="item"> - <a - href="#" - class="mobile-nav-button" - @click.stop.prevent="toggleMobileSidebar()" - > - <FAIcon - class="fa-scale-110 fa-old-padding" - icon="bars" - /> - <div - v-if="unreadChatCount" - class="alert-dot" - /> - </a> - <router-link - v-if="!hideSitename" - class="site-name" - :to="{ name: 'root' }" - active-class="home" - > - {{ sitename }} - </router-link> - </div> - <div class="item right"> - <a - v-if="currentUser" - class="mobile-nav-button" - href="#" - @click.stop.prevent="openMobileNotifications()" - > - <FAIcon - class="fa-scale-110 fa-old-padding" - icon="bell" - /> - <div - v-if="unseenNotificationsCount" - class="alert-dot" - /> - </a> - </div> + <div class="item"> + <a + href="#" + class="mobile-nav-button" + @click.stop.prevent="toggleMobileSidebar()" + > + <FAIcon + class="fa-scale-110 fa-old-padding" + icon="bars" + /> + <div + v-if="unreadChatCount" + class="alert-dot" + /> + </a> + <router-link + v-if="!hideSitename" + class="site-name" + :to="{ name: 'root' }" + active-class="home" + > + {{ sitename }} + </router-link> + </div> + <div class="item right"> + <a + v-if="currentUser" + class="mobile-nav-button" + href="#" + @click.stop.prevent="openMobileNotifications()" + > + <FAIcon + class="fa-scale-110 fa-old-padding" + icon="bell" + /> + <div + v-if="unseenNotificationsCount" + class="alert-dot" + /> + </a> </div> </nav> <div @@ -93,100 +91,113 @@ <style lang="scss"> @import '../../_variables.scss'; -.mobile-inner-nav { - width: 100%; - display: flex; - align-items: center; -} +.MobileNav { + .mobile-nav { + display: grid; + line-height: 50px; + height: 50px; + grid-template-rows: 50px; + grid-template-columns: 2fr auto; + width: 100%; + position: fixed; + box-sizing: border-box; + } -.mobile-nav-button { - text-align: center; - margin: 0 1em; - position: relative; - cursor: pointer; -} + .mobile-inner-nav { + width: 100%; + display: flex; + align-items: center; + } -.alert-dot { - border-radius: 100%; - height: 8px; - width: 8px; - position: absolute; - left: calc(50% - 4px); - top: calc(50% - 4px); - margin-left: 6px; - margin-top: -6px; - background-color: $fallback--cRed; - background-color: var(--badgeNotification, $fallback--cRed); -} + .mobile-nav-button { + text-align: center; + margin: 0 1em; + position: relative; + cursor: pointer; + } + + .alert-dot { + border-radius: 100%; + height: 8px; + width: 8px; + position: absolute; + left: calc(50% - 4px); + top: calc(50% - 4px); + margin-left: 6px; + margin-top: -6px; + background-color: $fallback--cRed; + background-color: var(--badgeNotification, $fallback--cRed); + } -.mobile-notifications-drawer { - width: 100%; - height: 100vh; - overflow-x: hidden; - position: fixed; - top: 0; - left: 0; - box-shadow: 1px 1px 4px rgba(0,0,0,.6); - box-shadow: var(--panelShadow); - transition-property: transform; - transition-duration: 0.25s; - transform: translateX(0); - z-index: 1001; - -webkit-overflow-scrolling: touch; + .mobile-notifications-drawer { + width: 100%; + height: 100vh; + overflow-x: hidden; + position: fixed; + top: 0; + left: 0; + box-shadow: 1px 1px 4px rgba(0,0,0,.6); + box-shadow: var(--panelShadow); + transition-property: transform; + transition-duration: 0.25s; + transform: translateX(0); + z-index: 1001; + -webkit-overflow-scrolling: touch; - &.closed { - transform: translateX(100%); + &.closed { + transform: translateX(100%); + } } -} -.mobile-notifications-header { - display: flex; - align-items: center; - justify-content: space-between; - z-index: 1; - width: 100%; - height: 50px; - line-height: 50px; - position: absolute; - color: var(--topBarText); - background-color: $fallback--fg; - background-color: var(--topBar, $fallback--fg); - box-shadow: 0px 0px 4px rgba(0,0,0,.6); - box-shadow: var(--topBarShadow); + .mobile-notifications-header { + display: flex; + align-items: center; + justify-content: space-between; + z-index: 1; + width: 100%; + height: 50px; + line-height: 50px; + position: absolute; + color: var(--topBarText); + background-color: $fallback--fg; + background-color: var(--topBar, $fallback--fg); + box-shadow: 0px 0px 4px rgba(0,0,0,.6); + box-shadow: var(--topBarShadow); - .title { - font-size: 1.3em; - margin-left: 0.6em; + .title { + font-size: 1.3em; + margin-left: 0.6em; + } } -} -.mobile-notifications { - margin-top: 50px; - width: 100vw; - height: calc(100vh - 50px); - overflow-x: hidden; - overflow-y: scroll; + .mobile-notifications { + margin-top: 50px; + width: 100vw; + height: calc(100vh - 50px); + overflow-x: hidden; + overflow-y: scroll; - color: $fallback--text; - color: var(--text, $fallback--text); - background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg); + color: $fallback--text; + color: var(--text, $fallback--text); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); - .notifications { - padding: 0; - border-radius: 0; - box-shadow: none; - .panel { - border-radius: 0; - margin: 0; - box-shadow: none; - } - .panel:after { - border-radius: 0; - } - .panel .panel-heading { + .notifications { + padding: 0; border-radius: 0; box-shadow: none; + .panel { + border-radius: 0; + margin: 0; + box-shadow: none; + } + .panel:after { + border-radius: 0; + } + .panel .panel-heading { + border-radius: 0; + box-shadow: none; + } } } } diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue index f1c3fd7a..8d971287 100644 --- a/src/components/search_bar/search_bar.vue +++ b/src/components/search_bar/search_bar.vue @@ -1,46 +1,47 @@ <template> - <div> - <div class="search-bar-container"> - <a - v-if="hidden" - href="#" - class="nav-icon" - :title="$t('nav.search')" +<div + class="SearchBar" + :class="{ '-expanded': !hidden }" + > + <a + v-if="hidden" + href="#" + class="nav-icon" + :title="$t('nav.search')" ><FAIcon fixed-width class="fa-scale-110 fa-old-padding" icon="search" @click.prevent.stop="toggleHidden" - /></a> - <template v-else> - <input - id="search-bar-input" - ref="searchInput" - v-model="searchTerm" - class="search-bar-input" - :placeholder="$t('nav.search')" - type="text" - @keyup.enter="find(searchTerm)" + /></a> + <template v-else> + <input + id="search-bar-input" + ref="searchInput" + v-model="searchTerm" + class="search-bar-input" + :placeholder="$t('nav.search')" + type="text" + @keyup.enter="find(searchTerm)" > - <button - class="btn search-button" - @click="find(searchTerm)" + <button + class="btn search-button" + @click="find(searchTerm)" > - <FAIcon - fixed-width - icon="search" + <FAIcon + fixed-width + icon="search" /> - </button> - <span> - <FAIcon - fixed-width - icon="times" - class="cancel-icon fa-scale-110 fa-old-padding" - @click.prevent.stop="toggleHidden" + </button> + <span> + <FAIcon + fixed-width + icon="times" + class="cancel-icon fa-scale-110 fa-old-padding" + @click.prevent.stop="toggleHidden" /> - </span> - </template> - </div> + </span> + </template> </div> </template> @@ -49,21 +50,23 @@ <style lang="scss"> @import '../../_variables.scss'; -.search-bar-container { - max-width: 100%; +.SearchBar { display: inline-flex; align-items: baseline; vertical-align: baseline; justify-content: flex-end; + &.-expanded { + width: 100%; + } + .search-bar-input, .search-button { height: 29px; } .search-bar-input { - // TODO: do this properly without a rough guesstimate of 2 icons + paddings - max-width: calc(100% - 30px - 30px - 20px); + flex: 1 0 auto; } .cancel-icon { |