RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 19:14:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

added actions indicator notch

Browse Source
This commit is contained in:
srgooglo 2022-03-02 21:53:49 +01:00
parent 3cacf8d58c
commit 8c76830bda
2 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/src/components/PostCard/index.jsx
View File

@ -169,9 +169,11 @@ export default class PostCard extends React.Component {
message={this.props.data.message} message={this.props.data.message}
/> />
</div> </div>
<div className="actionsIndicatorWrapper">
<div className="actionsIndicator"> <div className="actionsIndicator">
<Icons.MoreHorizontal /> <Icons.MoreHorizontal />
</div> </div>
</div>
<div className="actionsWrapper"> <div className="actionsWrapper">
<PostActions <PostActions
onClickLike={this.onClickLike} onClickLike={this.onClickLike}

40
packages/app/src/components/PostCard/index.less
View File

@ -129,19 +129,35 @@
} }
} }
.actionsIndicatorWrapper {
display : flex;
flex-direction : row;
align-items : center;
justify-content: center;
transition: all 0.2s ease-in-out;
}
.actionsIndicator { .actionsIndicator {
display : flex; display : flex;
flex-direction : row; flex-direction : row;
align-items : center; align-items : center;
justify-content: center; justify-content: center;
width : 100%; width : 10vw;
margin-bottom: 5px; padding: 2px;
font-size: 18px; border-radius : 8px 8px 0 0;
background-color: var(--background-color-primary);
color : var(--background-color-contrast); color : var(--background-color-contrast);
font-size: 18px;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
svg {
margin: 0 !important;
}
} }
.actionsWrapper { .actionsWrapper {
@ -245,12 +261,12 @@
} }
.actionsWrapper { .actionsWrapper {
animation: fadeActionsIn 0.1s 0.1s linear forwards; opacity: 1;
} }
.actionsIndicator { // .actionsIndicator {
opacity: 0; // opacity: 0;
} // }
} }
@keyframes fadeActionsIn { @keyframes fadeActionsIn {
@ -262,3 +278,13 @@
opacity: 1; opacity: 1;
} }
} }
@keyframes fadeActionOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}