mirrors
/
semaphore
mirror of https://github.com/NickColley/semaphore.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move profile options next to follow button

This commit is contained in:
Nick Colley 2023-02-02 11:24:07 +00:00
parent 3ba8bb9bd1
commit b57525f082
4 changed files with 48 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bin/svgs.js
View File

@ -12,6 +12,7 @@ export default [
{ id: 'fa-star', src: 'src/thirdparty/font-awesome-svg-png/white/svg/star.svg' },
{ id: 'fa-star-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/star-o.svg' },
{ id: 'fa-ellipsis-h', src: 'src/thirdparty/font-awesome-svg-png/white/svg/ellipsis-h.svg' },
{ id: 'fa-ellipsis-v', src: 'src/thirdparty/font-awesome-svg-png/white/svg/ellipsis-v.svg' },
{ id: 'fa-spinner', src: 'src/thirdparty/font-awesome-svg-png/white/svg/spinner.svg' },
{ id: 'fa-user', src: 'src/thirdparty/font-awesome-svg-png/white/svg/user.svg' },
{ id: 'fa-play-circle', src: 'src/thirdparty/font-awesome-svg-png/white/svg/play-circle.svg' },

10
src/routes/_components/profile/AccountProfile.html
View File

@ -47,6 +47,7 @@
grid-column-gap: 15px;
grid-row-gap: 5px;
padding: 20px;
padding-bottom: 0;
justify-content: center;
border-bottom: var(--main-border-size) solid var(--main-border);
}
@ -81,11 +82,13 @@
}
}
@media (max-width: 240px) {
@media (max-width: 400px) {
.account-profile-grid {
grid-template-areas: "avatar name"
"avatar label"
grid-template-areas: "avatar avatar"
"avatar avatar"
"name name"
"username username"
"label label"
"followed-by followed-by"
"follow follow"
"note note"
@ -93,7 +96,6 @@
"details details";
grid-template-columns: min-content 1fr;
grid-column-gap: 5px;
grid-row-gap: 0;
}
}

59
src/routes/_components/profile/AccountProfileDetails.html
View File

@ -32,47 +32,21 @@
{intl.followers}
</span>
</a>
<!-- TODO: re-enable this when we support profile editing -->
{#if account && verifyCredentials && account.id !== verifyCredentials.id}
<div class="account-profile-more-options">
<IconButton
label="{intl.moreOptions}"
href="#fa-bars"
muted="true"
on:click="onMoreOptionsClick()"
/>
</div>
{/if}
</div>
<style>
.account-profile-details {
grid-area: details;
display: grid;
margin: 0 5px;
align-items: center;
grid-template-columns: 1fr 1fr 1fr min-content;
display: flex;
gap: 20px;
margin-bottom: 10px;
}
.account-profile-details-item {
display: flex;
flex-direction: row;
padding: 5px;
justify-content: center;
font-size: 1.1em;
}
.account-profile-details-item[href]:hover {
text-decoration: none;
background: var(--button-bg-hover);
cursor: pointer;
}
.account-profile-details-item[href]:active {
background: var(--button-bg-active);
}
.account-profile-details-item-title {
color: var(--deemphasized-text-color);
padding: 10px 0;
}
.account-profile-details-item-datum {
@ -82,6 +56,9 @@
}
@media (max-width: 767px) {
.account-profile-details {
margin-bottom: 0;
}
.account-profile-details-item {
flex-direction: column;
margin-left: 5px;
@ -108,20 +85,8 @@
font-size: 1em;
}
}
@media (max-width: 240px) {
.account-profile-details {
grid-template-columns: 1fr 1fr 1fr;
}
.account-profile-more-options {
justify-self: flex-end;
grid-column: 1 / 4;
}
}
</style>
<script>
import IconButton from '../IconButton.html'
import { importShowAccountProfileOptionsDialog } from '../dialog/asyncDialogs/importShowAccountProfileOptionsDialog.js'
import { LOCALE } from '../../_static/intl.js'
import { formatIntl } from '../../_utils/formatIntl.js'
import { thunk } from '../../_utils/thunk.js'
@ -147,16 +112,6 @@
followingLabel: ({ numFollowing }) => (
formatIntl('intl.followingLabel', { count: numFollowing })
)
},
methods: {
async onMoreOptionsClick () {
const { account, relationship, verifyCredentials } = this.get()
const showAccountProfileOptionsDialog = await importShowAccountProfileOptionsDialog()
showAccountProfileOptionsDialog(account, relationship, verifyCredentials)
}
},
components: {
IconButton
}
}
</script>

37
src/routes/_components/profile/AccountProfileFollow.html
View File

@ -9,6 +9,16 @@
<button class="account-profile-follow-button" on:click="onFollowButtonClick(event)">
{pressed ? pressedLabel : label}
</button>
<!-- TODO: re-enable this when we support profile editing -->
{#if account && verifyCredentials && account.id !== verifyCredentials.id}
<IconButton
className="account-profile-more-options-button"
label="{intl.moreOptions}"
href="#fa-ellipsis-v"
muted="true"
on:click="onMoreOptionsClick()"
/>
{/if}
</div>
<style>
.account-profile-follow {
@ -17,29 +27,47 @@
display: none;
}
.account-profile-follow.shown {
display: block;
display: flex;
gap: 5px;
}
@media (max-width: 240px) {
@media (max-width: 400px) {
.account-profile-follow {
justify-self: flex-end;
}
}
:global(.account-profile-more-options-button),
.account-profile-follow-button {
padding: 0.6em;
padding: 10px;
font-size: 1.1em;
}
:global(.icon-button.account-profile-more-options-button) {
border: 1px solid var(--button-border);
padding-left: 6px;
padding-right: 6px;
}
.account-profile-follow-button {
min-width: 10ch;
}
</style>
<script>
import { store } from '../../_store/store.js'
import IconButton from '../IconButton.html'
import { importShowAccountProfileOptionsDialog } from '../dialog/asyncDialogs/importShowAccountProfileOptionsDialog.js'
import { setAccountFollowed } from '../../_actions/follow.js'
import { setAccountBlocked } from '../../_actions/block.js'
import { formatIntl } from '../../_utils/formatIntl.js'
export default {
methods: {
async onMoreOptionsClick () {
const { account, relationship, verifyCredentials } = this.get()
const showAccountProfileOptionsDialog = await importShowAccountProfileOptionsDialog()
showAccountProfileOptionsDialog(account, relationship, verifyCredentials)
},
oncreate () {
if (process.browser) {
window.__button = this
@ -99,6 +127,9 @@
pressed: ({ blocking, following, followRequested }) => (
!blocking && (following || followRequested)
)
},
components: {
IconButton
}
}
</script>