FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Use <menu> element to represent dropdown menus

Browse source
This commit is contained in:
silverpill 2022-04-30 09:27:03 +00:00
parent 3809d9126d
commit 0e1040a985
6 changed files with 44 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/App.vue
View file

@ -72,7 +72,7 @@ html {
body {
background: $background-color;
color: $text-color;
font-family: Arial, sans-serif;
font-family: $text-font;
font-size: $text-font-size;
}
@ -104,7 +104,7 @@ textarea {
box-shadow: none;
box-sizing: border-box;
color: $text-color;
font-family: Arial, sans-serif;
font-family: $text-font;
font-size: $text-font-size;
margin: 0;
padding: 10px;
@ -133,9 +133,15 @@ textarea {
button {
background-color: transparent;
border: none;
color: $link-color;
cursor: pointer;
font-family: $text-font;
font-size: $text-font-size;
padding: 0;
&:hover {
color: $link-hover-color;
}
}
.btn {
@ -156,6 +162,10 @@ button {
}
}
menu {
list-style: none;
}
header {
background-color: $background-color;
box-sizing: border-box;

18
src/components/Post.vue
View file

@ -141,38 +141,38 @@
<button class="icon" title="More" @click="toggleMenu()">
<img :src="require('@/assets/feather/more-horizontal.svg')">
</button>
<ul v-if="menuVisible" class="dropdown-menu">
<menu v-if="menuVisible" class="dropdown-menu">
<li v-if="canSaveToIpfs()">
<a
<button
class="icon"
title="Save to IPFS"
@click="hideMenu(); saveToIpfs()"
>
<img :src="require('@/assets/ipfs.svg')">
<span>Save to IPFS</span>
</a>
</button>
</li>
<li v-if="canMintToken()">
<a
<button
class="icon"
title="Mint NFT"
@click="hideMenu(); mintToken()"
>
<img :src="require('@/assets/forkawesome/diamond.svg')">
<span>Mint NFT</span>
</a>
</button>
</li>
<li v-if="canDeletePost()">
<a
<button
class="icon"
title="Delete post"
@click="hideMenu(); deletePost()"
>
<img :src="require('@/assets/feather/trash.svg')">
<span>Delete post</span>
</a>
</button>
</li>
</ul>
</menu>
</div>
<div class="crypto-widget">
<crypto-address
@ -653,7 +653,7 @@ export default class PostComponent extends Vue {
}
.dropdown-menu-wrapper {
@include post-dropdown-menu;
@include block-dropdown-menu;
}
.crypto-widget {

10
src/components/PostEditor.vue
View file

@ -47,18 +47,18 @@
>
<visibility-icon :visibility="visibility"></visibility-icon>
</button>
<ul v-if="visibilityMenuVisible" class="dropdown-menu">
<menu v-if="visibilityMenuVisible" class="dropdown-menu">
<li v-for="[value, display] in visibilityMap" :key="value">
<a
<button
class="icon"
:title="display"
@click="hideVisibilityMenu(); visibility = value"
>
<visibility-icon :visibility="value"></visibility-icon>
<span>{{ display }}</span>
</a>
</button>
</li>
</ul>
</menu>
</div>
<div class="character-counter" title="Characters left">
{{ characterCounter }}
@ -293,7 +293,7 @@ textarea {
}
.dropdown-menu-wrapper {
@include post-dropdown-menu;
@include block-dropdown-menu;
}
.submit-btn-wrapper {

4
src/styles/_mixins.scss
View file

@ -87,10 +87,10 @@
}
}
@mixin post-dropdown-menu {
@mixin block-dropdown-menu {
position: relative;
.dropdown-menu {
menu.dropdown-menu {
background-color: $block-background-color;
border: 1px solid $separator-color;
border-radius: $btn-border-radius;

1
src/styles/_theme.scss
View file

@ -1,5 +1,6 @@
/* color-to-filter converter https://codepen.io/sosuke/pen/Pjoqqp */
$text-font: Arial, sans-serif;
$text-font-size: 15px;
$text-color: #333;
$text-colorizer: invert(17%) sepia(0%) saturate(0%) hue-rotate(356deg) brightness(101%) contrast(91%);

30
src/views/Profile.vue
View file

@ -21,7 +21,7 @@
<button title="More" @click="toggleProfileMenu()">
<img :src="require('@/assets/feather/more-vertical.svg')">
</button>
<ul v-if="profileMenuVisible" class="dropdown-menu">
<menu v-if="profileMenuVisible" class="dropdown-menu">
<li v-if="!isLocalUser()">
<a
title="Open profile page"
@ -42,50 +42,50 @@
</a>
</li>
<li v-if="isCurrentUser()">
<a
<button
title="Verify ethereum address"
@click="hideProfileMenu(); verifyEthereumAddress()"
>
Verify ethereum address
</a>
</button>
</li>
<li v-if="canConnectWallet()">
<a
<button
title="Connect wallet"
@click="hideProfileMenu(); connectWallet()"
>
Connect wallet
</a>
</button>
</li>
<li v-if="canConfigureSubscription()">
<a
<button
title="Set up subscription"
@click="hideProfileMenu(); configureSubscription()"
>
Set up subscription
</a>
</button>
</li>
<li v-if="canSubscribe()">
<a
<button
title="Pay for subscription"
@click="hideProfileMenu(); makeSubscriptionPayment()"
>
Pay for subscription
</a>
</button>
</li>
<li v-if="canHideReposts()">
<a @click="follow(false, undefined)">Hide reposts</a>
<button @click="follow(false, undefined)">Hide reposts</button>
</li>
<li v-if="canShowReposts()">
<a @click="follow(true, undefined)">Show reposts</a>
<button @click="follow(true, undefined)">Show reposts</button>
</li>
<li v-if="canHideReplies()">
<a @click="follow(undefined, false)">Hide replies</a>
<button @click="follow(undefined, false)">Hide replies</button>
</li>
<li v-if="canShowReplies()">
<a @click="follow(undefined, true)">Show replies</a>
<button @click="follow(undefined, true)">Show replies</button>
</li>
</ul>
</menu>
</div>
</div>
<div class="name-buttons-group">
@ -574,7 +574,7 @@ $avatar-size: 170px;
}
.dropdown-menu-wrapper {
@include post-dropdown-menu;
@include block-dropdown-menu;
/* stylelint-disable-next-line selector-max-compound-selectors */
button img {