cha0s/reddichat-flat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: list item in channel

Browse Source
This commit is contained in:
cha0s 2020-07-21 00:49:36 -05:00
parent d30103d375
commit 1afb874028
10 changed files with 98 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/client/channel.jsx
View File

@ -32,35 +32,37 @@ export default function Channel(props) {
</> </>
); );
return ( return (
<div className="channel"> <li className="channel__item">
{React.cloneElement( <div className="channel">
href ? <Link to={href} /> : <div />, {React.cloneElement(
{className: 'channel__link', title: name}, href ? <Link to={href} /> : <div />,
[React.cloneElement(content, {key: name})], {className: 'channel__link', title: name},
)} [React.cloneElement(content, {key: name})],
<div )}
className="channel__actions" <div
> className="channel__actions"
{actions.map(({icon, label, onClick}, i) => ( >
<button {actions.map(({icon, label, onClick}, i) => (
className="channel__action" <button
// eslint-disable-next-line react/no-array-index-key className="channel__action"
key={i} // eslint-disable-next-line react/no-array-index-key
onClick={onClick} key={i}
title={label} onClick={onClick}
type="button" title={label}
> type="button"
<span
className="channel__icon"
role="img"
aria-label={label}
> >
{icon} <span
</span> className="channel__icon"
</button> role="img"
))} aria-label={label}
>
{icon}
</span>
</button>
))}
</div>
</div> </div>
</div> </li>
); );
} }

23
src/client/channel.scss
View File

@ -1,5 +1,28 @@
@import '~/client/scss/colors.scss'; @import '~/client/scss/colors.scss';
.channel__item {
position: relative;
width: 100%;
&:nth-of-type(even) {
background-color: rgba(0, 0, 0, 0.1);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
&:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.2);
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
&.active[class] {
background-color: $color-active;
&:hover {
background-color: lighten($color-active, 5%);
}
}
}
.channel { .channel {
position: relative; position: relative;
} }

50
src/client/chat--leftFriends.jsx
View File

@ -91,17 +91,13 @@ export default function ChatLeftFriends() {
}, },
]; ];
return ( return (
<li <Channel
className="friends__item" key={JSON.stringify(friendship)}
> actions={favoritesActions}
<Channel href={`/chat/u/${channel}`}
key={JSON.stringify(friendship)} name={channel}
actions={favoritesActions} prefix="/u/"
href={`/chat/u/${channel}`} />
name={channel}
prefix="/u/"
/>
</li>
); );
})} })}
</ul> </ul>
@ -120,17 +116,13 @@ export default function ChatLeftFriends() {
}, },
]; ];
return ( return (
<li <Channel
key={channel} key={channel}
className="friends__item" actions={favoritesActions}
> href={`/chat/u/${channel}`}
<Channel name={channel}
actions={favoritesActions} prefix="/u/"
href={`/chat/u/${channel}`} />
name={channel}
prefix="/u/"
/>
</li>
); );
})} })}
</ul> </ul>
@ -167,17 +159,13 @@ export default function ChatLeftFriends() {
}, },
]; ];
return ( return (
<li <Channel
key={channel} key={channel}
className="friends__item" actions={friendsActions}
> href={`/chat/u/${channel}`}
<Channel name={channel}
actions={friendsActions} prefix="/u/"
href={`/chat/u/${channel}`} />
name={channel}
prefix="/u/"
/>
</li>
); );
}) })
)} )}

23
src/client/chat--leftFriends.scss
View File

@ -37,26 +37,3 @@
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
} }
.friends__item {
position: relative;
width: 100%;
&:nth-of-type(even) {
background-color: rgba(0, 0, 0, 0.1);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
&:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.2);
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
&.active[class] {
background-color: $color-active;
&:hover {
background-color: lighten($color-active, 5%);
}
}
}

32
src/client/chat--leftRooms.jsx
View File

@ -70,17 +70,13 @@ export default function ChatLeftRooms() {
}, },
]; ];
return ( return (
<li <Channel
className="channels__item"
key={channel} key={channel}
> actions={favoritesActions}
<Channel href={`/chat/r/${channel}`}
actions={favoritesActions} name={channel}
href={`/chat/r/${channel}`} prefix="/r/"
name={channel} />
prefix="/r/"
/>
</li>
); );
})} })}
</ul> </ul>
@ -104,17 +100,13 @@ export default function ChatLeftRooms() {
}, },
]; ];
return ( return (
<li <Channel
className="channels__item"
key={channel} key={channel}
> actions={recentActions}
<Channel href={`/chat/r/${channel}`}
actions={recentActions} name={channel}
href={`/chat/r/${channel}`} prefix="/r/"
name={channel} />
prefix="/r/"
/>
</li>
); );
})} })}
</ul> </ul>

23
src/client/chat--leftRooms.scss
View File

@ -36,26 +36,3 @@
padding: 2.5em 1em 0.625em 1.375em; padding: 2.5em 1em 0.625em 1.375em;
text-transform: uppercase; text-transform: uppercase;
} }
.channels__item {
position: relative;
width: 100%;
&:nth-of-type(even) {
background-color: rgba(0, 0, 0, 0.1);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
&:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.2);
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
&.active[class] {
background-color: $color-active;
&:hover {
background-color: lighten($color-active, 5%);
}
}
}

14
src/client/chat--rightBlocked.jsx
View File

@ -28,16 +28,12 @@ export default function ChatRightBlocked(props) {
}, },
]; ];
return ( return (
<li <Channel
key={id} key={id}
className="blocked__item" actions={blockedActions}
> name={usernames[id] || '?'}
<Channel prefix="/u/"
actions={blockedActions} />
name={usernames[id]}
prefix="/u/"
/>
</li>
); );
})} })}
</ul> </ul>

23
src/client/chat--rightBlocked.scss
View File

@ -8,26 +8,3 @@
padding: 2.5em 1em 0.625em 1.375em; padding: 2.5em 1em 0.625em 1.375em;
text-transform: uppercase; text-transform: uppercase;
} }
.blocked__item {
position: relative;
width: 100%;
&:nth-of-type(even) {
background-color: rgba(0, 0, 0, 0.1);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
&:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.2);
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
&.active[class] {
background-color: $color-active;
&:hover {
background-color: lighten($color-active, 5%);
}
}
}

24
src/client/chat--rightUsers.jsx
View File

@ -114,21 +114,17 @@ export default function ChatRightUsers() {
} }
} }
return ( return (
<li <Channel
className="users__item"
key={id} key={id}
> actions={userActions}
<Channel href={(
actions={userActions} (hasFriendship && userId !== id)
href={( ? `/chat/u/${username}`
(hasFriendship && userId !== id) : null
? `/chat/u/${username}` )}
: null name={username || '?'}
)} prefix="/u/"
name={username || '?'} />
prefix="/u/"
/>
</li>
); );
})} })}
</ul> </ul>

23
src/client/chat--rightUsers.scss
View File

@ -9,26 +9,3 @@
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
} }
.users__item {
position: relative;
width: 100%;
&:nth-of-type(even) {
background-color: rgba(0, 0, 0, 0.1);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
&:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.2);
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
&.active[class] {
background-color: $color-active;
&:hover {
background-color: lighten($color-active, 5%);
}
}
}