Skip to content

Commit

Permalink
feat(settings-profile): account link component/markup (#3953)
Browse files Browse the repository at this point in the history
* feat(settings-profile): account link component/markup

* fix(settings-profile): tweak spacing for main section in profile settings

* refactor(profile): create transition .less function and move keyframes to global sheet

* refactor(accounts): remove html wrappers and simplify css, move component files

* fix(profile): v bind typo fix

* fix(profile): typo

* fix(profile): show controls on mobile and remove spacer

Co-authored-by: Joe McGrath <[email protected]>
  • Loading branch information
nathan-power and josephmcg authored Jul 13, 2022
1 parent efd10b6 commit a8edeff
Show file tree
Hide file tree
Showing 9 changed files with 297 additions and 32 deletions.
27 changes: 27 additions & 0 deletions assets/styles/framework/animations.less
Original file line number Diff line number Diff line change
Expand Up @@ -192,3 +192,30 @@
20px 0px 0px 0px rgba(255, 255, 255, 1);
}
}

@-webkit-keyframes fadeinout {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}

@keyframes fadeinout {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}

.transition(@property, @duration, @function) {
transition: @property @duration @function;
-o-transition: @property @duration @function;
-moz-transition: @property @duration @function;
-webkit-transition: @property @duration @function;
}
23 changes: 5 additions & 18 deletions components/views/settings/pages/profile/Profile.html
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,9 @@
:text="$t('pages.settings.profile.about.subtitle')"
/>
<div>
<TypographySubtitle
class="about-button"
:size="6"
:text="$t('pages.settings.profile.about.edit')"
:action="() => {}"
/>
<button class="edit-button" @click="() => {}">
{{$t('global.edit')}}
</button>
</div>
</div>
<TypographySubtitle :size="6" :text="sampleProfileInfo.about" />
Expand Down Expand Up @@ -158,21 +155,11 @@
:text="$t('pages.settings.profile.accounts.subtitle_accounts')"
/>
</div>
<InteractablesInputGroup
class="status"
size="small"
input-kind="text"
type="primary"
:placeholder="$t('pages.settings.profile.accounts.accounts_placeholder')"
:action="() => {}"
>
<edit-icon size="1x" />
</InteractablesInputGroup>

<SettingsProfileAccounts />
</div>
</div>
</div>

<UiSpacer :height="isSmallScreen ? 10 : 24" />
</div>
</div>
</div>
Expand Down
15 changes: 5 additions & 10 deletions components/views/settings/pages/profile/Profile.less
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@

.profile-section {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: auto 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
Expand All @@ -40,17 +40,11 @@

.photo {
align-self: center;
grid-area: photo;
}

.username {
align-self: center;
grid-area: username;
margin: 0 @normal-spacing @xlight-spacing 0;
}

.status-input {
align-self: center;
grid-area: status-input;
}

.profile-photo-column {
Expand Down Expand Up @@ -138,6 +132,7 @@
}

.username {
align-self: center;
grid-area: username;
}

Expand Down Expand Up @@ -190,12 +185,12 @@
}
}

.about-button {
.edit-button {
font-style: italic;
white-space: nowrap;
color: @text-muted;

&:hover {
cursor: pointer;
opacity: 0.8;
}
}
Expand Down
2 changes: 1 addition & 1 deletion components/views/settings/profile/Banner.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="img-container">
<img
:v-if="url"
v-if="url"
:src="url"
:class="`${!bannerUrlExists ? 'img-default' : ''}`"
/>
Expand Down
86 changes: 86 additions & 0 deletions components/views/settings/profile/accounts/Accounts.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<template>
<div class="list">
<SettingsProfileAccountsItem
v-for="account in accounts"
:key="account.name"
:account="account"
/>
</div>
</template>

<script lang="ts">
import Vue from 'vue'
import { TwitchIcon, YoutubeIcon, TwitterIcon } from 'satellite-lucide-icons'
type Account = {
name: string
icon: string
isVerified: boolean
displayOnProfile: boolean
}
export default Vue.extend({
data() {
return {
accounts: {
reddit: {
name: 'Reddit',
// TODO: Add icon
icon: 'reddit',
username: '',
isVerified: false,
displayOnProfile: true,
verifyUrl: 'https://www.reddit.com/',
},
twitch: {
name: 'Twitch',
icon: TwitchIcon,
username: 'Sophia_Kalindi',
isVerified: true,
displayOnProfile: true,
verifyUrl: 'https://www.twitch.com/',
},
youtube: {
name: 'Youtube',
icon: YoutubeIcon,
username: 'Sophia_Kalindi94',
isVerified: false,
displayMusic: false,
displayOnProfile: true,
verifyUrl: 'https://www.youtube.com/',
},
twitter: {
name: 'Twitter',
icon: TwitterIcon,
username: 'Sophia_Kalindi94',
isVerified: true,
displayOnProfile: true,
verifyUrl: 'https://www.twitter.com/',
},
spotify: {
name: 'Spotify',
// TODO: Add icon
icon: 'spotify',
username: '',
isVerified: false,
displayMusic: true,
displayOnProfile: true,
verifyUrl: 'https://www.spotify.com/',
},
},
}
},
methods: {
toggleAccount(account: Account) {
account.displayOnProfile = !account.displayOnProfile
},
},
})
</script>

<style scoped lang="less">
.list {
display: flex;
flex-direction: column;
gap: @large-spacing;
}
</style>
47 changes: 47 additions & 0 deletions components/views/settings/profile/accounts/Item/Item.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<div class="list-item">
<div class="header" :class="{'no-bottom-radius': account.isVerified}">
<component class="icon" :is="account.icon" size="1.3x" />
<div class="titles">
<TypographyTitle :size="6" :text="account.name" />
<TypographySubtitle
v-if="account.username"
:size="6"
:text="account.username"
class="username"
/>
</div>
<InteractablesButton
v-if="!account.isVerified"
type="primary"
size="small"
:action="() => {}"
:text="$t('pages.settings.profile.accounts.verify')"
/>
<div v-else class="controls">
<button class="edit-button" @click="() => {}">
{{$t('global.edit')}}
</button>
<button class="edit-button" @click="() => {}">
<x-icon size="1x" />
</button>
</div>
</div>
<div v-if="account.isVerified" class="display-details">
<div class="display-row">
<TypographyText
:size="6"
:text="$t('pages.settings.profile.accounts.displayMusic')"
class="music-label"
/>
<InteractablesSwitch v-model="account.displayMusic" />
</div>
<div class="display-row">
<TypographyText
:size="6"
:text="$t('pages.settings.profile.accounts.displayOnProfile')"
class="music-label"
/>
<InteractablesSwitch v-model="account.displayOnProfile" />
</div>
</div>
</div>
92 changes: 92 additions & 0 deletions components/views/settings/profile/accounts/Item/Item.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
.list-item {
&:hover,
&:focus-within {
.header {
background: @foreground;
.transition(background, @animation-speed, ease-in-out);

.controls {
opacity: 1;
.transition(opacity, @animation-speed, ease-in-out);
}
}
}

.header {
display: flex;
align-items: center;
gap: @normal-spacing;
padding: @normal-spacing;
background: @midground-alt;
&:extend(.round-corners);
.transition(background, @animation-speed, ease-in-out);

&.no-bottom-radius {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

.titles {
flex: 1;
&:extend(.ellipsis);
.username {
&:extend(.ellipsis);
margin-top: @light-spacing;
}
}

.button,
.controls {
flex-shrink: 0;
}

.controls {
display: flex;
gap: @normal-spacing;
opacity: 0;
.transition(opacity, @animation-speed, ease-in-out);

.edit-button {
display: flex;
align-items: center;
font-style: italic;
white-space: nowrap;
color: @satellite-color;

&:hover,
&:focus {
opacity: 0.8;
}
}
}
}

.display-details {
display: flex;
flex-direction: column;
padding: @normal-spacing;
gap: @light-spacing;
&:extend(.bordered);
border-width: 2px;
border-top: none;
&:extend(.round-corners);
border-top-left-radius: 0;
border-top-right-radius: 0;

.display-row {
display: flex;
align-items: center;
justify-content: space-between;
}
}
}

@media only screen and (max-width: @mobile-breakpoint) {
.list-item {
.header {
.controls {
opacity: 1;
}
}
}
}
29 changes: 29 additions & 0 deletions components/views/settings/profile/accounts/Item/Item.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<template src="./Item.html"></template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import { XIcon } from 'satellite-lucide-icons'
type Account = {
name: string
icon: string
username: string
isVerified: boolean
displayOnProfile: boolean
verifyUrl: string
}
export default Vue.extend({
components: {
XIcon,
},
props: {
account: {
type: Object as PropType<Account>,
required: true,
},
},
})
</script>

<style scoped lang="less" src="./Item.less"></style>
Loading

0 comments on commit a8edeff

Please sign in to comment.