mirror of
https://github.com/styppo/hamstr.git
synced 2024-10-18 13:33:22 +00:00
Add sign-in buttons to main menu and sidebar
This commit is contained in:
parent
cb06ac099c
commit
84c772d443
@ -36,8 +36,9 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
.load-more button {
|
.load-more button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding: 1rem 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -45,6 +45,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ProfilePopup v-if="$store.getters.isSignedIn" />
|
<ProfilePopup v-if="$store.getters.isSignedIn" />
|
||||||
|
<div v-else class="sign-in" @click="signIn">
|
||||||
|
<q-icon class="icon" name="login" size="sm" />
|
||||||
|
<div class="label">Log in</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="mobile-close-menu-button"
|
class="mobile-close-menu-button"
|
||||||
@ -89,6 +93,10 @@ export default {
|
|||||||
createPost() {
|
createPost() {
|
||||||
this.$emit('mobile-menu-close')
|
this.$emit('mobile-menu-close')
|
||||||
this.$store.dispatch('createPost')
|
this.$store.dispatch('createPost')
|
||||||
|
},
|
||||||
|
signIn() {
|
||||||
|
this.$emit('mobile-menu-close')
|
||||||
|
this.$store.dispatch('signIn', {}).catch(() => {})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -149,6 +157,26 @@ menu {
|
|||||||
.mobile-close-menu-button {
|
.mobile-close-menu-button {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.sign-in {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 1rem 1rem;
|
||||||
|
padding: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 999px;
|
||||||
|
transition: 120ms ease-in-out;
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba($color: $color-dark-gray, $alpha: 0.3);
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
.label {
|
||||||
|
margin-left: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $tablet) and (min-width: $phone) {
|
@media screen and (max-width: $tablet) and (min-width: $phone) {
|
||||||
@ -167,6 +195,11 @@ menu {
|
|||||||
fill: #fff;
|
fill: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.sign-in {
|
||||||
|
.label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -34,7 +34,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<hr class="popup-spacing">
|
<hr class="popup-spacing">
|
||||||
<div class="popup-body">
|
<div class="popup-body">
|
||||||
<div class="popup-body-item" @click="$store.dispatch('signIn').catch(() => {})" v-close-popup>
|
<div class="popup-body-item" @click="$store.dispatch('signIn', {}).catch(() => {})" v-close-popup>
|
||||||
<p>Add an account</p>
|
<p>Add an account</p>
|
||||||
</div>
|
</div>
|
||||||
<hr class="popup-spacing">
|
<hr class="popup-spacing">
|
||||||
@ -96,15 +96,15 @@ export default {
|
|||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
padding: .5rem 1rem;
|
padding: .5rem 1rem;
|
||||||
cursor: pointer !important;
|
cursor: pointer;
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
transition: 120ms ease-in-out;
|
transition: 120ms ease-in-out;
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba($color: $color-dark-gray, $alpha: 0.3);
|
||||||
|
}
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
&:hover {
|
|
||||||
background-color: rgba($color: $color-primary, $alpha: 0.3);
|
|
||||||
}
|
|
||||||
&-pic {
|
&-pic {
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
img {
|
img {
|
||||||
|
@ -63,7 +63,7 @@ export default defineComponent({
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: $color-bg;
|
background-color: $color-bg;
|
||||||
z-index: 1001;
|
z-index: 500;
|
||||||
h2 {
|
h2 {
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
55
src/components/Sidebar/WelcomeBox.vue
Normal file
55
src/components/Sidebar/WelcomeBox.vue
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<div class="welcome" v-if="!$store.getters.isSignedIn">
|
||||||
|
<div class="welcome-header">
|
||||||
|
<h3>New to Nostr?</h3>
|
||||||
|
</div>
|
||||||
|
<div class="welcome-content">
|
||||||
|
<button class="btn btn-primary" @click="signUp">Create Account</button>
|
||||||
|
<button class="btn" @click="signIn">Log in</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'WelcomeBox',
|
||||||
|
methods: {
|
||||||
|
signUp() {
|
||||||
|
this.$store.dispatch('signIn', {fragment: 'sign-up'}).catch(() => {})
|
||||||
|
},
|
||||||
|
signIn() {
|
||||||
|
this.$store.dispatch('signIn', {fragment: 'sign-in'}).catch(() => {})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "assets/theme/colors.scss";
|
||||||
|
|
||||||
|
.welcome {
|
||||||
|
background-color: rgba($color: $color-dark-gray, $alpha: 0.1);
|
||||||
|
border-radius: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
&-header {
|
||||||
|
padding: 1rem;
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-content {
|
||||||
|
border-top: $border-dark;
|
||||||
|
padding: 1rem;
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
padding: .5rem;
|
||||||
|
&:first-child {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
@ -1,8 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<q-dialog v-model="$store.state.signInDialogOpen" @hide="onClose">
|
<q-dialog v-model="$store.state.signInDialogOpen" @before-show="updateFragment" @hide="onClose">
|
||||||
<div class="sign-in-dialog">
|
<div class="sign-in-dialog">
|
||||||
<q-btn v-if="fragment === 'welcome'" icon="close" size="md" flat round class="icon" v-close-popup />
|
<q-btn
|
||||||
<q-btn v-else-if="fragment !== 'complete'" icon="arrow_back" size="md" flat round class="icon" @click="fragment = 'welcome'" />
|
v-if="showClose"
|
||||||
|
icon="close"
|
||||||
|
size="md"
|
||||||
|
class="icon"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
v-close-popup
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
v-if="showBack"
|
||||||
|
@click="fragment = 'welcome'"
|
||||||
|
icon="arrow_back"
|
||||||
|
size="md"
|
||||||
|
class="icon"
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
/>
|
||||||
|
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<BaseUserAvatar v-if="pubkey" :pubkey="pubkey" />
|
<BaseUserAvatar v-if="pubkey" :pubkey="pubkey" />
|
||||||
@ -57,6 +73,16 @@ export default {
|
|||||||
return {
|
return {
|
||||||
fragment: 'welcome',
|
fragment: 'welcome',
|
||||||
pubkey: null,
|
pubkey: null,
|
||||||
|
backAllowed: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
showClose() {
|
||||||
|
return this.fragment === 'welcome'
|
||||||
|
|| (this.fragment !== 'complete' && !this.backAllowed)
|
||||||
|
},
|
||||||
|
showBack() {
|
||||||
|
return this.fragment !== 'complete' && !this.showClose
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -81,6 +107,10 @@ export default {
|
|||||||
this.pubkey = pubkey
|
this.pubkey = pubkey
|
||||||
this.fragment = 'complete'
|
this.fragment = 'complete'
|
||||||
},
|
},
|
||||||
|
updateFragment() {
|
||||||
|
this.fragment = this.$store.state.signInDialogFragment || 'welcome'
|
||||||
|
this.backAllowed = this.fragment === 'welcome'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -47,7 +47,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import 'assets/theme/colors.scss';
|
@import "assets/theme/colors.scss";
|
||||||
|
|
||||||
.trends {
|
.trends {
|
||||||
background-color: rgba($color: $color-dark-gray, $alpha: 0.1);
|
background-color: rgba($color: $color-dark-gray, $alpha: 0.1);
|
||||||
@ -58,7 +58,7 @@ export default {
|
|||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
h3 {
|
h3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1.5rem;
|
font-size: 1.4rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
<div class="layout" @click="mobileMenuOpen = false">
|
<div class="layout" @click="mobileMenuOpen = false">
|
||||||
<div class="layout-menu">
|
<div class="layout-menu">
|
||||||
<div class="layout-menu-fixed" :class="{active: mobileMenuOpen}">
|
<div class="layout-menu-fixed" :class="{active: mobileMenuOpen}">
|
||||||
<MainMenu @click.stop @mobile-menu-close="mobileMenuOpen = false" />
|
<MainMenu @click.stop @mobile-menu-close="mobileMenuOpen = false" hide-items-requiring-sign-in />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -20,6 +20,7 @@
|
|||||||
<div class="layout-sidebar">
|
<div class="layout-sidebar">
|
||||||
<div class="layout-sidebar-fixed">
|
<div class="layout-sidebar-fixed">
|
||||||
<SearchBox />
|
<SearchBox />
|
||||||
|
<WelcomeBox />
|
||||||
<Trends />
|
<Trends />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -48,11 +49,13 @@ import Trends from 'components/Trends/index.vue'
|
|||||||
import BaseIcon from 'components/BaseIcon/index.vue'
|
import BaseIcon from 'components/BaseIcon/index.vue'
|
||||||
import SignInDialog from 'components/SignIn/SignInDialog.vue'
|
import SignInDialog from 'components/SignIn/SignInDialog.vue'
|
||||||
import CreatePostDialog from 'components/CreatePost/CreatePostDialog.vue'
|
import CreatePostDialog from 'components/CreatePost/CreatePostDialog.vue'
|
||||||
|
import WelcomeBox from 'components/Sidebar/WelcomeBox.vue'
|
||||||
import { setCssVar, getCssVar } from 'quasar'
|
import { setCssVar, getCssVar } from 'quasar'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'MainLayout',
|
name: 'MainLayout',
|
||||||
components: {
|
components: {
|
||||||
|
WelcomeBox,
|
||||||
CreatePostDialog,
|
CreatePostDialog,
|
||||||
SignInDialog,
|
SignInDialog,
|
||||||
BaseIcon,
|
BaseIcon,
|
||||||
|
@ -268,7 +268,7 @@ export default defineComponent({
|
|||||||
position: sticky;
|
position: sticky;
|
||||||
top: 78px;
|
top: 78px;
|
||||||
background-color: $color-bg;
|
background-color: $color-bg;
|
||||||
z-index: 1001;
|
z-index: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-page::-webkit-scrollbar {
|
.q-page::-webkit-scrollbar {
|
||||||
@ -280,11 +280,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.feed {
|
.feed {
|
||||||
> .load-more {
|
|
||||||
button {
|
|
||||||
padding: 1rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .load-more:first-child {
|
> .load-more:first-child {
|
||||||
border-bottom: $border-dark;
|
border-bottom: $border-dark;
|
||||||
}
|
}
|
||||||
|
@ -444,10 +444,10 @@ export async function useNip05(store, {metadata}) {
|
|||||||
|
|
||||||
// --------
|
// --------
|
||||||
|
|
||||||
export async function signIn(store) {
|
export async function signIn(store, {fragment}) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
console.assert(!store.state.signInDialogOpen)
|
console.assert(!store.state.signInDialogOpen)
|
||||||
store.commit('openSignInDialog', {resolve, reject})
|
store.commit('openSignInDialog', {resolve, reject, fragment})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -173,15 +173,17 @@ export function setUnreadMessages(state, {peer, count}) {
|
|||||||
state.unreadMessages[peer] = count
|
state.unreadMessages[peer] = count
|
||||||
}
|
}
|
||||||
|
|
||||||
export function openSignInDialog(state, {resolve, reject}) {
|
export function openSignInDialog(state, {resolve, reject, fragment}) {
|
||||||
state.signInSuccess = resolve
|
state.signInSuccess = resolve
|
||||||
state.signInFailure = reject
|
state.signInFailure = reject
|
||||||
|
state.signInDialogFragment = fragment
|
||||||
state.signInDialogOpen = true
|
state.signInDialogOpen = true
|
||||||
}
|
}
|
||||||
|
|
||||||
export function dismissSignInDialog(state) {
|
export function dismissSignInDialog(state) {
|
||||||
state.signInSuccess = null
|
state.signInSuccess = null
|
||||||
state.signInFailure = null
|
state.signInFailure = null
|
||||||
|
state.signInDialogFragment = null
|
||||||
state.signInDialogOpen = false
|
state.signInDialogOpen = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -102,6 +102,7 @@ export default function () {
|
|||||||
accounts: LocalStorage.getItem('accounts') || {}, // { pubkey: { secret } }
|
accounts: LocalStorage.getItem('accounts') || {}, // { pubkey: { secret } }
|
||||||
|
|
||||||
signInDialogOpen: false,
|
signInDialogOpen: false,
|
||||||
|
signInDialogFragment: null,
|
||||||
signInSuccess: null,
|
signInSuccess: null,
|
||||||
signInFailure: null,
|
signInFailure: null,
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user