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 (
<div className="channel">
{React.cloneElement(
href ? <Link to={href} /> : <div />,
{className: 'channel__link', title: name},
[React.cloneElement(content, {key: name})],
)}
<div
className="channel__actions"
>
{actions.map(({icon, label, onClick}, i) => (
<button
className="channel__action"
// eslint-disable-next-line react/no-array-index-key
key={i}
onClick={onClick}
title={label}
type="button"
>
<span
className="channel__icon"
role="img"
aria-label={label}
<li className="channel__item">
<div className="channel">
{React.cloneElement(
href ? <Link to={href} /> : <div />,
{className: 'channel__link', title: name},
[React.cloneElement(content, {key: name})],
)}
<div
className="channel__actions"
>
{actions.map(({icon, label, onClick}, i) => (
<button
className="channel__action"
// eslint-disable-next-line react/no-array-index-key
key={i}
onClick={onClick}
title={label}
type="button"
>
{icon}
</span>
</button>
))}
<span
className="channel__icon"
role="img"
aria-label={label}
>
{icon}
</span>
</button>
))}
</div>
</div>
</div>
</li>
);
}

23
src/client/channel.scss
View File

@ -1,5 +1,28 @@
@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 {
position: relative;
}

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

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

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

@ -37,26 +37,3 @@
text-transform: uppercase;
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 (
<li
className="channels__item"
<Channel
key={channel}
>
<Channel
actions={favoritesActions}
href={`/chat/r/${channel}`}
name={channel}
prefix="/r/"
/>
</li>
actions={favoritesActions}
href={`/chat/r/${channel}`}
name={channel}
prefix="/r/"
/>
);
})}
</ul>
@ -104,17 +100,13 @@ export default function ChatLeftRooms() {
},
];
return (
<li
className="channels__item"
<Channel
key={channel}
>
<Channel
actions={recentActions}
href={`/chat/r/${channel}`}
name={channel}
prefix="/r/"
/>
</li>
actions={recentActions}
href={`/chat/r/${channel}`}
name={channel}
prefix="/r/"
/>
);
})}
</ul>

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

@ -36,26 +36,3 @@
padding: 2.5em 1em 0.625em 1.375em;
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 (
<li
<Channel
key={id}
className="blocked__item"
>
<Channel
actions={blockedActions}
name={usernames[id]}
prefix="/u/"
/>
</li>
actions={blockedActions}
name={usernames[id] || '?'}
prefix="/u/"
/>
);
})}
</ul>

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

@ -8,26 +8,3 @@
padding: 2.5em 1em 0.625em 1.375em;
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 (
<li
className="users__item"
<Channel
key={id}
>
<Channel
actions={userActions}
href={(
(hasFriendship && userId !== id)
? `/chat/u/${username}`
: null
)}
name={username || '?'}
prefix="/u/"
/>
</li>
actions={userActions}
href={(
(hasFriendship && userId !== id)
? `/chat/u/${username}`
: null
)}
name={username || '?'}
prefix="/u/"
/>
);
})}
</ul>

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

@ -9,26 +9,3 @@
text-transform: uppercase;
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%);
}
}
}