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}

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

@ -17,7 +17,7 @@
outline-color: transparent; outline-color: transparent;
&.liked { &.liked {
filter: drop-shadow(0px 0px 2px var(--primaryColor)); filter : drop-shadow(0px 0px 2px var(--primaryColor));
outline-color: var(--primaryColor); outline-color: var(--primaryColor);
} }
@ -77,16 +77,16 @@
flex-direction: column; flex-direction: column;
font-size : 16px; font-size : 16px;
color: var(--background-color-contrast); color : var(--background-color-contrast);
height: fit-content; height: fit-content;
.item { .item {
display: inline-flex; display : inline-flex;
align-items: center; align-items : center;
justify-content: flex-end; justify-content: flex-end;
height: fit-content; height : fit-content;
margin-left: 20px; margin-left : 20px;
margin-bottom: 5px; margin-bottom: 5px;
.icon { .icon {
@ -98,7 +98,7 @@
.value { .value {
font-family: "DM Mono", monospace; font-family: "DM Mono", monospace;
font-size: 14px; font-size : 14px;
} }
} }
} }
@ -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);
transition : all 0.2s ease-in-out; font-size: 18px;
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;
}
}