ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean: make use of design tokens

Browse Source
This commit is contained in:
Raphael Beer 2020-03-28 12:54:35 +01:00
parent 95bc6d9719
commit d62be2b0fb
No known key found for this signature in database
GPG Key ID: C1AC5E018B25EF11
2 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
webapp/components/features/FollowList/FollowList.story.js
View File

@ -7,66 +7,66 @@ import FollowList from './FollowList.vue'
helpers.init() helpers.init()
const sevenConnectionsUser = { const user = {
name: 'Jenny Rostock', name: 'Jenny Rostock',
id: 'u3', id: 'u3',
followedByCount: 12, followedByCount: 12,
followedBy: helpers.fakeUser(7), followedBy: helpers.fakeUser(7),
followingCount: 28,
following: helpers.fakeUser(7),
} }
const allConnectionsUser = { const allConnectionsUser = {
...sevenConnectionsUser, ...user,
followedBy: [...sevenConnectionsUser.followedBy, ...helpers.fakeUser(5)], followedBy: [...user.followedBy, ...helpers.fakeUser(5)],
following: [...user.following, ...helpers.fakeUser(21)],
}
const noConnectionsUser = {
...user,
followedBy: [],
followedByCount: 0,
following: [],
followingCount: 0,
} }
storiesOf('FollowList', module) storiesOf('FollowList', module)
.addDecorator(withA11y) .addDecorator(withA11y)
.addDecorator(helpers.layout) .addDecorator(helpers.layout)
.add('without connections', () => { .add('without connections', () => {
const user = {
...sevenConnectionsUser,
followedBy: [],
followedByCount: 0,
}
return { return {
components: { FollowList }, components: { FollowList },
store: helpers.store, store: helpers.store,
data() { data() {
return { user } return { user: noConnectionsUser }
}, },
template: `<follow-list :user="user" type="followedBy" />`, template: `<div><follow-list :user="user" /><div style="margin: 1rem"></div><follow-list :user="user" type="followedBy" /></div>`,
} }
}) })
.add('with up to 7 connections', () => { .add('with up to 7 connections', () => {
const user = sevenConnectionsUser
return { return {
components: { FollowList }, components: { FollowList },
store: helpers.store, store: helpers.store,
data() { data() {
return { return { user: { ...user } }
user,
}
}, },
methods: { methods: {
fetchAllConnections(type) { fetchAllConnections(type) {
this.user = allConnectionsUser this.user[type] = allConnectionsUser[type]
action('fetchAllConnections')(type, this.user) action('fetchAllConnections')(type, this.user)
}, },
}, },
template: `<follow-list :user="user" type="followedBy" @fetchAllConnections="fetchAllConnections"/>`, template: `<div style="display: flex; flex-wrap: wrap;"><div style="margin: 8px;"><follow-list :user="user" @fetchAllConnections="fetchAllConnections"/></div><div style="margin: 8px;"><follow-list :user="user" type="followedBy" @fetchAllConnections="fetchAllConnections"/></div></div>`,
} }
}) })
.add('with more than 7 connections', () => { .add('with all connections', () => {
const user = allConnectionsUser
return { return {
components: { FollowList }, components: { FollowList },
store: helpers.store, store: helpers.store,
data() { data() {
return { return { user: allConnectionsUser }
user,
}
}, },
template: `<follow-list :user="user" type="followedBy" />`, template: `<div style="display: flex; flex-wrap: wrap;"><div style="margin: 8px;"><follow-list :user="user" /></div><div style="margin: 8px;"><follow-list :user="user" type="followedBy"/></div></div>`,
} }
}) })

6
webapp/components/features/FollowList/FollowList.vue
View File

@ -117,7 +117,7 @@ export default {
<style lang="scss"> <style lang="scss">
.follow-list { .follow-list {
position: relative; position: relative;
max-height: 424px; max-height: ($size-avatar-small + $space-x-small * 2) * 8;
width: auto; width: auto;
> .no-connections { > .no-connections {
@ -126,8 +126,8 @@ export default {
} }
> .overflow-container { > .overflow-container {
height: $size-avatar-base * 7; height: ($size-avatar-base + $space-x-small * 2) * 5;
margin-top: -8px; margin-top: -$space-x-small;
overflow-y: auto; overflow-y: auto;
} }
} }