usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-01 06:34:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: unpin button in the corner (#374)

Browse Source 
* feat: unpin button in corner

* chore: update
This commit is contained in:
boojack 2022-10-30 13:21:24 +08:00 committed by GitHub
parent 64f0662a61
commit 29966451b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/components/Memo.tsx
View File

@ -184,6 +184,13 @@ const Memo: React.FC<Props> = (props: Props) => {
return (
<div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned ? "pinned" : ""}`} ref={memoContainerRef}>
{memo.pinned && (
<div className="corner-container">
<span className="tip-text" onClick={handleTogglePinMemoBtnClick}>
{t("common.unpin")}
</span>
</div>
)}
<div className="memo-top-wrapper">
<div className="status-text-container">
<span className="time-text" onClick={handleShowMemoStoryDialog}>

20
web/src/less/memo.less
View File

@ -1,7 +1,7 @@
@import "./mixin.less";
.memo-wrapper {
@apply flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
@apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
&.archived-memo {
@apply border-gray-200;
@ -11,6 +11,24 @@
@apply border-gray-200 border-2;
}
> .corner-container {
@apply absolute top-0 right-0 z-1;
&:hover > .tip-text {
@apply block;
}
&::after {
@apply rounded-tr-md absolute top-0 right-0 border-transparent border-t-green-600 border-r-green-600;
content: "";
border-width: 6px;
}
> .tip-text {
@apply hidden absolute top-0 right-0 z-1 whitespace-nowrap p-1 px-2 rounded-md text-xs leading-6 bg-black text-white shadow cursor-pointer hover:opacity-80;
}
}
> .memo-top-wrapper {
@apply flex flex-row justify-between items-center w-full h-6 mb-1;