mirror of
https://github.com/styppo/hamstr.git
synced 2024-10-18 05:23:28 +00:00
Delete obsolete files
This commit is contained in:
parent
bef9fad696
commit
ccec96a67d
File diff suppressed because it is too large
Load Diff
@ -1,365 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- <q-dialog persistent> -->
|
|
||||||
<!-- <div v-if="showKeyInitialization"> -->
|
|
||||||
<q-card class='relative-position full-width'>
|
|
||||||
<q-btn icon='close' size='md' flat round class='absolute-top-right z-top' @click='$emit("look-around")'/>
|
|
||||||
<h1 class="text-h6 q-pr-md">welcome to hamstr</h1>
|
|
||||||
<q-expansion-item
|
|
||||||
dense
|
|
||||||
expand-icon='help'
|
|
||||||
expanded-icon='expand_less'
|
|
||||||
class="intro no-padding full-width items-center"
|
|
||||||
header-class='items-center'
|
|
||||||
>
|
|
||||||
<template #header>
|
|
||||||
<span class='full-width'>click here to learn about Nostr, your keys, and how to use hamstr</span>
|
|
||||||
</template>
|
|
||||||
<BaseInformation/>
|
|
||||||
<span style='padding: .2rem 0 0 .2rem;'>note: after login this same information can be found in
|
|
||||||
the <strong>faq</strong> section at the bottom of the settings page</span>
|
|
||||||
</q-expansion-item>
|
|
||||||
<h2 class="text-subtitle2 q-pr-md">enter your key</h2>
|
|
||||||
<q-form @submit="proceed">
|
|
||||||
<q-card-section class="key-entry no-padding">
|
|
||||||
<q-btn-group spread unelevated>
|
|
||||||
<q-btn
|
|
||||||
size="sm"
|
|
||||||
color="primary"
|
|
||||||
label="public key"
|
|
||||||
:outline="!watchOnly"
|
|
||||||
:text-color="!watchOnly ? '' : 'dark'"
|
|
||||||
value="true"
|
|
||||||
@click="watchOnly = true"
|
|
||||||
:disable='isBech32Sec'
|
|
||||||
/>
|
|
||||||
<q-btn
|
|
||||||
size="sm"
|
|
||||||
color="primary"
|
|
||||||
label="private key"
|
|
||||||
:outline="watchOnly"
|
|
||||||
:text-color="watchOnly ? '' : 'dark'"
|
|
||||||
value="false"
|
|
||||||
@click="watchOnly = false"
|
|
||||||
:disable='isBech32Pub'
|
|
||||||
/>
|
|
||||||
</q-btn-group>
|
|
||||||
<q-input
|
|
||||||
v-model="key"
|
|
||||||
ref="keyInput"
|
|
||||||
bottom-slots
|
|
||||||
outlined
|
|
||||||
:label="watchOnly ? 'enter public key' : 'enter private key'"
|
|
||||||
dense
|
|
||||||
>
|
|
||||||
<template #hint>
|
|
||||||
<p v-if="!key && watchOnly">
|
|
||||||
entering public key means you will need to enter private key
|
|
||||||
each time you post content (either manually or by Nostr browser
|
|
||||||
extension)
|
|
||||||
</p>
|
|
||||||
<p v-if="!key && !watchOnly">
|
|
||||||
entering private key means hamstr will automatically sign with
|
|
||||||
your private key each time you post content
|
|
||||||
</p>
|
|
||||||
<p v-if="key && !isKeyValid">not a valid key</p>
|
|
||||||
<p v-if="isKeyValid">key is valid</p>
|
|
||||||
</template>
|
|
||||||
<template #append>
|
|
||||||
<q-btn
|
|
||||||
v-if="!isKeyValid"
|
|
||||||
size="sm"
|
|
||||||
color="primary"
|
|
||||||
outline
|
|
||||||
@click="generate"
|
|
||||||
>
|
|
||||||
generate keys
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
v-if="hasExtension && !isKeyValid"
|
|
||||||
size="sm"
|
|
||||||
color="primary"
|
|
||||||
outline
|
|
||||||
@click="getFromExtension"
|
|
||||||
>
|
|
||||||
use public key from extension
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
type="submit"
|
|
||||||
unelevated
|
|
||||||
size="sm"
|
|
||||||
color="positive"
|
|
||||||
:label="isKeyValid ? 'proceed' : ''"
|
|
||||||
icon-right="login"
|
|
||||||
style='color: var(--q-background) !important;'
|
|
||||||
@click="proceed"
|
|
||||||
:disabled="!isKeyValid"
|
|
||||||
></q-btn>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</q-card-section>
|
|
||||||
<!-- <div v-if='isBech32Key(key)'>
|
|
||||||
{{ hexKey }}
|
|
||||||
</div> -->
|
|
||||||
</q-form>
|
|
||||||
<q-expansion-item
|
|
||||||
v-if='isKeyValid'
|
|
||||||
dense
|
|
||||||
dense-toggle
|
|
||||||
default-opened
|
|
||||||
id='bootstrap-relays'
|
|
||||||
>
|
|
||||||
<template #header>
|
|
||||||
<div class='full-width flex row no-wrap items-center'>
|
|
||||||
<h2 class="text-subtitle2 q-pr-md">enter bootstrap relays (optional)</h2>
|
|
||||||
<q-icon name='info'>
|
|
||||||
<q-tooltip>
|
|
||||||
the selected relays below will be queried to load your user profile, follows, and relay data from Nostr network.
|
|
||||||
please ensure the list of selected relays includes relays you publish your Nostr data to, otherwise hamstr may
|
|
||||||
not be able to find your data.
|
|
||||||
</q-tooltip>
|
|
||||||
</q-icon>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class='flex row justify-between no-wrap items-end' >
|
|
||||||
<span>selected relays</span>
|
|
||||||
<div class='flex row items-end' id='new-relay-input'>
|
|
||||||
<q-input v-model='newRelay' placeholder='add a relay...' input-style='padding: 0; width: 10rem;' @keypress.enter='addNewRelay' dense borderless/>
|
|
||||||
<q-btn icon='add' color='positive' size='sm' flat dense @click.stop='addNewRelay'/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<BaseSelectMultiple>
|
|
||||||
<template #selected>
|
|
||||||
<pre class='relay-list' style='border: 1px solid var(--q-primary);'>
|
|
||||||
<li
|
|
||||||
v-for='(relay, index) in Object.keys(selectedRelays)'
|
|
||||||
:key='index + "-" + relay'
|
|
||||||
class='relay-item'
|
|
||||||
@click.stop='delete selectedRelays[relay]'
|
|
||||||
>
|
|
||||||
<div class='flex row justify-between no-wrap'>
|
|
||||||
<span style='overflow: auto;'>{{relay}}</span>
|
|
||||||
<q-icon name='remove' size='xs' color='negative'/>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</pre>
|
|
||||||
</template>
|
|
||||||
<template #options>
|
|
||||||
<div style='max-height: 6.75rem;'>
|
|
||||||
<pre class='relay-list' >
|
|
||||||
<li
|
|
||||||
v-for='(relay, index) in optionalRelays'
|
|
||||||
:key='index + "-" + relay'
|
|
||||||
class='relay-item'
|
|
||||||
@click.stop='selectedRelays[relay]={read: true, write:false}'
|
|
||||||
>
|
|
||||||
<div class='flex row justify-between no-wrap'>
|
|
||||||
<span style='overflow: auto;'>{{relay}}</span>
|
|
||||||
<q-icon name='add' size='xs' color='positive' flat/>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</BaseSelectMultiple>
|
|
||||||
</q-expansion-item>
|
|
||||||
<div style='min-height: 1rem;'/>
|
|
||||||
</q-card>
|
|
||||||
<!-- </div> -->
|
|
||||||
<!-- </q-dialog> -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
import helpersMixin from '../utils/mixin'
|
|
||||||
import { validateWords } from 'nostr-tools/nip06'
|
|
||||||
import { generatePrivateKey } from 'nostr-tools'
|
|
||||||
import { decode } from 'bech32-buffer'
|
|
||||||
import BaseSelectMultiple from 'components/BaseSelectMultiple.vue'
|
|
||||||
import BaseInformation from 'components/BaseInformation.vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'TheKeyInitializationDialog',
|
|
||||||
mixins: [helpersMixin],
|
|
||||||
emits: ['look-around'],
|
|
||||||
|
|
||||||
components: {
|
|
||||||
BaseSelectMultiple,
|
|
||||||
BaseInformation,
|
|
||||||
},
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
return {
|
|
||||||
focusKeyInput() {
|
|
||||||
this.$refs.keyInput.focus()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
watchOnly: false,
|
|
||||||
key: null,
|
|
||||||
hasExtension: false,
|
|
||||||
selectedRelays: this.$store.state.defaultRelays,
|
|
||||||
newRelay: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
icon() {
|
|
||||||
return document.getElementById('icon').href
|
|
||||||
},
|
|
||||||
|
|
||||||
// showKeyInitialization() {
|
|
||||||
// if (['profile', 'event', 'hashtag', 'feed'].includes(this.$route.name)) return false
|
|
||||||
// return true
|
|
||||||
// },
|
|
||||||
|
|
||||||
isKeyKey() {
|
|
||||||
if (this.isKey(this.hexKey)) return true
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
|
|
||||||
isKeyValid() {
|
|
||||||
if (this.isKeyKey) return true
|
|
||||||
if (validateWords(this.key?.toLowerCase())) return true
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
|
|
||||||
isKeyInvalid() {
|
|
||||||
return !this.isKeyValid
|
|
||||||
},
|
|
||||||
|
|
||||||
hexKey() {
|
|
||||||
// npub1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s
|
|
||||||
// nsec1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzs46ahj9
|
|
||||||
// 32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245
|
|
||||||
if (this.isBech32Key(this.key)) {
|
|
||||||
return this.bech32ToHex(this.key)
|
|
||||||
}
|
|
||||||
return this.key?.toLowerCase()
|
|
||||||
},
|
|
||||||
|
|
||||||
isBech32Pub() {
|
|
||||||
if (this.isBech32Key(this.key)) {
|
|
||||||
let { prefix } = decode(this.key.toLowerCase())
|
|
||||||
return prefix === 'npub'
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
|
|
||||||
isBech32Sec() {
|
|
||||||
if (this.isBech32Key(this.key)) {
|
|
||||||
let { prefix } = decode(this.key.toLowerCase())
|
|
||||||
return prefix === 'nsec'
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
|
|
||||||
optionalRelays() {
|
|
||||||
let options = this.$store.state.optionalRelaysList.filter(relay => {
|
|
||||||
if (this.newRelay.length && !relay.toLowerCase().includes(this.newRelay.toLowerCase())) return false
|
|
||||||
if (this.selectedRelays[relay]) return false
|
|
||||||
return true
|
|
||||||
})
|
|
||||||
return options
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async created() {
|
|
||||||
if (!this.$store.state.keys.pub) {
|
|
||||||
// keys not set up, offer the option to try to get a pubkey from window.nostr
|
|
||||||
setTimeout(() => {
|
|
||||||
if (window.nostr) {
|
|
||||||
this.hasExtension = true
|
|
||||||
}
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
async getFromExtension() {
|
|
||||||
try {
|
|
||||||
this.key = await window.nostr.getPublicKey()
|
|
||||||
this.watchOnly = true
|
|
||||||
this.focusKeyInput()
|
|
||||||
} catch (err) {
|
|
||||||
this.$q.notify({
|
|
||||||
message: `Failed to get a public key from a Nostr extension: ${err}`,
|
|
||||||
color: 'warning',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
generate() {
|
|
||||||
this.key = generatePrivateKey()
|
|
||||||
this.watchOnly = false
|
|
||||||
this.focusKeyInput()
|
|
||||||
},
|
|
||||||
|
|
||||||
proceed() {
|
|
||||||
let key = this.hexKey
|
|
||||||
|
|
||||||
var keys = {}
|
|
||||||
if (validateWords(key)) {
|
|
||||||
keys.mnemonic = key
|
|
||||||
} else if (this.isKey(key)) {
|
|
||||||
if (this.watchOnly) keys.pub = key
|
|
||||||
else keys.priv = key
|
|
||||||
} else {
|
|
||||||
console.warn('Proceed called with invalid key', key)
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$store.commit('setDefaultRelays', this.selectedRelays)
|
|
||||||
this.$store.dispatch('initKeys', keys)
|
|
||||||
this.$store.dispatch('launch')
|
|
||||||
this.initializeKeys = false
|
|
||||||
this.$router.push({
|
|
||||||
name: 'settings',
|
|
||||||
params: { initUser: true },
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
addNewRelay() {
|
|
||||||
if (this.newRelay && this.newRelay.length) this.selectedRelays[this.newRelay] = {read: true, write: false}
|
|
||||||
this.newRelay = ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='css' scoped>
|
|
||||||
.q-card {
|
|
||||||
background: var(--q-background);
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang='css'>
|
|
||||||
.relay-list {
|
|
||||||
column-width: 15rem;
|
|
||||||
column-gap: .5rem;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 1px;
|
|
||||||
font-size: .8rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding: 0 .5rem;
|
|
||||||
border-radius: .5rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
.relay-item {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
#new-relay-input {
|
|
||||||
background: rgba(0, 0, 0, 0.05);
|
|
||||||
border-radius: .3rem;
|
|
||||||
padding: 0 0 0 .5rem;
|
|
||||||
}
|
|
||||||
.body--dark #new-relay-input {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
#new-relay-input .q-field--dense .q-field__control {
|
|
||||||
height: 1.4rem !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,31 +0,0 @@
|
|||||||
<template>
|
|
||||||
<q-toolbar>
|
|
||||||
<q-btn dense flat round icon='menu' @click='toggleLeftDrawer' />
|
|
||||||
<q-toolbar-title class='flex justify-center'>hamstr</q-toolbar-title>
|
|
||||||
<q-btn dense flat round icon='groups' @click='toggleRightDrawer' />
|
|
||||||
</q-toolbar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineComponent, ref } from 'vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'TheToolbar',
|
|
||||||
|
|
||||||
setup() {
|
|
||||||
const leftDrawerOpen = ref(false)
|
|
||||||
const rightDrawerOpen = ref(false)
|
|
||||||
|
|
||||||
return {
|
|
||||||
leftDrawerOpen,
|
|
||||||
rightDrawerOpen,
|
|
||||||
toggleLeftDrawer() {
|
|
||||||
leftDrawerOpen.value = !leftDrawerOpen.value
|
|
||||||
},
|
|
||||||
toggleRightDrawer() {
|
|
||||||
rightDrawerOpen.value = !rightDrawerOpen.value
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
@ -1,291 +0,0 @@
|
|||||||
<template>
|
|
||||||
<q-list
|
|
||||||
:class='compactMode ? "flex row no-wrap justify-around items-center full-width" : "text-right"'
|
|
||||||
:dense='compactMode'
|
|
||||||
>
|
|
||||||
<q-item
|
|
||||||
v-if='$store.state.keys.pub'
|
|
||||||
class='col no-padding flex items-center'
|
|
||||||
:class="compactMode ? 'justify-center' : 'justify-end'"
|
|
||||||
clickable
|
|
||||||
@click='toProfile($store.state.keys.pub)'
|
|
||||||
>
|
|
||||||
<BaseUserCard
|
|
||||||
v-if='!compactMode'
|
|
||||||
:pubkey='$store.state.keys.pub'
|
|
||||||
:align-right='true'
|
|
||||||
:wrap='true'
|
|
||||||
class='gt-sm'
|
|
||||||
/>
|
|
||||||
<BaseUserAvatar
|
|
||||||
v-if='!compactMode'
|
|
||||||
:pubkey="$store.state.keys.pub"
|
|
||||||
:align-right='true'
|
|
||||||
:show-verified='true'
|
|
||||||
size='lg'
|
|
||||||
class='q-mr-sm lt-md'
|
|
||||||
/>
|
|
||||||
<BaseUserAvatar
|
|
||||||
v-if='$store.state.keys.pub && compactMode'
|
|
||||||
:pubkey="$store.state.keys.pub"
|
|
||||||
:align-right='true'
|
|
||||||
size='1.5rem'
|
|
||||||
/>
|
|
||||||
</q-item>
|
|
||||||
<!-- <q-separator v-if='!compactMode' color='accent' spaced/> -->
|
|
||||||
<div v-if='!compactMode' style='min-height: 1rem;'/>
|
|
||||||
<q-item
|
|
||||||
v-for='item in filteredUserMenuItems'
|
|
||||||
clickable
|
|
||||||
class='menu-item'
|
|
||||||
:dense='compactMode'
|
|
||||||
:style='compactMode ? "" : "min-height: 2.75rem;"'
|
|
||||||
:active="($route.name === item.title || $route.path.split('/')[1] === item.title)"
|
|
||||||
active-class=''
|
|
||||||
@click='(event) => handleClick(event, item)'
|
|
||||||
:key='item.title'
|
|
||||||
:class="(($route.name === item.title || $route.path.split('/')[1] === item.title) ? 'menu-item-active text-accent ' : '') +
|
|
||||||
(compactMode ? 'no-margin no-padding col' : 'self-end q-px-none')"
|
|
||||||
>
|
|
||||||
<q-item-section v-if='!compactMode' class='gt-sm text-uppercase' style='font-size: 1rem;'>
|
|
||||||
<div>
|
|
||||||
{{ $t(item.title) }}
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
|
|
||||||
<q-item-section
|
|
||||||
v-if="item.icon && !compactMode"
|
|
||||||
avatar
|
|
||||||
class="relative-position no-padding"
|
|
||||||
style="min-width: 2.5rem;"
|
|
||||||
>
|
|
||||||
<q-icon outline :name="item.icon"/>
|
|
||||||
<!-- <q-badge
|
|
||||||
v-if="item.badge && $store.getters[item.badge]"
|
|
||||||
color="secondary"
|
|
||||||
floating
|
|
||||||
class='q-mr-md text-bold'
|
|
||||||
outline
|
|
||||||
>
|
|
||||||
{{ $store.getters[item.badge] }}
|
|
||||||
</q-badge> -->
|
|
||||||
<q-badge
|
|
||||||
v-if="item.title === 'notifications' && $store.state.unreadNotifications"
|
|
||||||
color="secondary"
|
|
||||||
floating
|
|
||||||
class='q-mr-md text-bold'
|
|
||||||
outline
|
|
||||||
>
|
|
||||||
{{ $store.state.unreadNotifications }}
|
|
||||||
</q-badge>
|
|
||||||
<q-badge
|
|
||||||
v-if="item.title === 'messages' && $store.getters.unreadChats"
|
|
||||||
color="secondary"
|
|
||||||
floating
|
|
||||||
class='q-mr-md text-bold'
|
|
||||||
outline
|
|
||||||
>
|
|
||||||
{{ $store.getters.unreadChats }}
|
|
||||||
</q-badge>
|
|
||||||
</q-item-section>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-if="item.icon && compactMode"
|
|
||||||
avatar
|
|
||||||
class="q-mx-auto no-padding relative-position"
|
|
||||||
>
|
|
||||||
<q-icon :name="item.icon" size='sm'/>
|
|
||||||
<q-badge
|
|
||||||
v-if="item.badge && $store.getters[item.badge]"
|
|
||||||
color="secondary"
|
|
||||||
floating
|
|
||||||
rounded
|
|
||||||
style='margin-top: .2rem; margin-left: .1rem;'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-item>
|
|
||||||
<!-- <q-separator v-if='!compactMode' color='accent' spaced/> -->
|
|
||||||
<div v-if='!compactMode' style='min-height: 1rem;'/>
|
|
||||||
<div
|
|
||||||
color="primary"
|
|
||||||
class='flex '
|
|
||||||
:class='compactMode ? "col justify-center" : "q-my-md justify-end"'
|
|
||||||
>
|
|
||||||
<BaseButtonPost
|
|
||||||
v-if='$store.state.keys.pub'
|
|
||||||
:is-open='posting'
|
|
||||||
:verbose='true'
|
|
||||||
@open="$emit('toggle-post-entry')"
|
|
||||||
:outline='!compactMode'
|
|
||||||
:flat='compactMode'
|
|
||||||
color='primary'
|
|
||||||
:size='compactMode ? "sm" : "lg"'
|
|
||||||
:class='compactMode ? "" : "q-px-sm"'
|
|
||||||
/>
|
|
||||||
<BaseButtonSetUser
|
|
||||||
v-if='!$store.state.keys.pub'
|
|
||||||
@click='(event) => handleClick(event, {title: "set-user"})'
|
|
||||||
:verbose='true'
|
|
||||||
:outline='!compactMode'
|
|
||||||
:flat='compactMode'
|
|
||||||
color='primary'
|
|
||||||
:size='compactMode ? "sm" : "lg"'
|
|
||||||
:class='compactMode ? "" : "q-px-sm"'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- <q-dialog
|
|
||||||
v-model='post'
|
|
||||||
seamless
|
|
||||||
position='bottom'
|
|
||||||
transition-show='slide-up'
|
|
||||||
transition-hide='slide-down'
|
|
||||||
>
|
|
||||||
<q-card unelevated class='flex column no-wrap post-entry relative-position'
|
|
||||||
>
|
|
||||||
<div class='absolute-top-right'>
|
|
||||||
<q-btn class='z-top' icon="close" flat dense v-close-popup/>
|
|
||||||
</div>
|
|
||||||
<BasePostEntry class='q-pa-md' @sent='post = false'/>
|
|
||||||
<div class='compact-user-menu-space'/>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog> -->
|
|
||||||
<!-- <input type='color' /> -->
|
|
||||||
</q-list>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
import helpersMixin from '../utils/mixin'
|
|
||||||
import BaseUserCard from 'components/BaseUserCard.vue'
|
|
||||||
import BaseButtonPost from 'components/BaseButtonPost.vue'
|
|
||||||
import BaseButtonSetUser from 'components/BaseButtonSetUser.vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'TheUserMenu',
|
|
||||||
mixins: [helpersMixin],
|
|
||||||
emits: ['toggle-post-entry', 'scroll-to-rect', 'set-user'],
|
|
||||||
props: {
|
|
||||||
iconMode: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
compactMode: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
showCompactModeItems: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
posting: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// isOpen: this.posting,
|
|
||||||
// position: 'bottom',
|
|
||||||
userMenuItems: [
|
|
||||||
{
|
|
||||||
title: 'feed',
|
|
||||||
icon: 'newspaper',
|
|
||||||
to: '/',
|
|
||||||
match: 'feed',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'notifications',
|
|
||||||
badge: 'unreadNotifications',
|
|
||||||
icon: 'notifications',
|
|
||||||
to: '/notifications',
|
|
||||||
match: 'notifications',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'messages',
|
|
||||||
badge: 'unreadChats',
|
|
||||||
icon: 'mail_lock',
|
|
||||||
to: '/messages/inbox',
|
|
||||||
match: 'messages',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'settings',
|
|
||||||
icon: 'settings',
|
|
||||||
to: '/settings',
|
|
||||||
match: 'settings',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'follow',
|
|
||||||
icon: 'search',
|
|
||||||
to: '/follow',
|
|
||||||
match: 'follow',
|
|
||||||
compactMenuOnly: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
components: {
|
|
||||||
BaseUserCard,
|
|
||||||
BaseButtonPost,
|
|
||||||
BaseButtonSetUser,
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
filteredUserMenuItems() {
|
|
||||||
if (!this.$store.state.keys.pub) return this.userMenuItems.filter(item => item.title === 'feed')
|
|
||||||
if (!this.compactMode && !this.showCompactModeItems) return this.userMenuItems.filter(item => !item.compactMenuOnly)
|
|
||||||
return this.userMenuItems
|
|
||||||
},
|
|
||||||
// isOpen() {
|
|
||||||
// return this.posting
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
handleClick(event, item) {
|
|
||||||
if (item.title === 'set-user') {
|
|
||||||
this.$emit('scroll-to-rect', {top: 0})
|
|
||||||
this.$emit('set-user')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (item.title === 'feed' && this.$route.name === 'feed') {
|
|
||||||
event.preventDefault()
|
|
||||||
this.$emit('scroll-to-rect', {top: 0})
|
|
||||||
} else this.$router.push(item.to)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='css' scoped>
|
|
||||||
.q-item {
|
|
||||||
transition: all .2s ease-in-out
|
|
||||||
}
|
|
||||||
.menu-item {
|
|
||||||
letter-spacing: .1rem;
|
|
||||||
opacity: .7;
|
|
||||||
}
|
|
||||||
.menu-item:hover {
|
|
||||||
opacity: 1;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.menu-item-active {
|
|
||||||
color: var(--q-accent);
|
|
||||||
opacity: 1;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.q-dialog .post-entry {
|
|
||||||
width: 600px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.compact-user-menu-space {
|
|
||||||
height: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 700px) {
|
|
||||||
.compact-user-menu-space {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,31 +0,0 @@
|
|||||||
<template>
|
|
||||||
<q-page class="flex column justify-center items-center">
|
|
||||||
<img
|
|
||||||
alt="astral logo"
|
|
||||||
src="~assets/astral-logo.svg"
|
|
||||||
style="width: 200px; height: 200px;"
|
|
||||||
>
|
|
||||||
<TheKeyInitializationDialog v-if='!$store.state.keys.pub' />
|
|
||||||
</q-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
import TheKeyInitializationDialog from 'components/TheKeyInitializationDialog.vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'IndexPage',
|
|
||||||
components: {
|
|
||||||
TheKeyInitializationDialog,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang='css' scoped>
|
|
||||||
/*.q-page {
|
|
||||||
background-image: url("~assets/astral-logo.svg");
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
}*/
|
|
||||||
</style>
|
|
Loading…
Reference in New Issue
Block a user