usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-19 09:02:49 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: update copy button style

Browse Source
This commit is contained in:
steven 2022-10-05 20:55:04 +08:00
parent 2ea612e2fe
commit a323689ee6
2 changed files with 26 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/less/memo-detail.less
View File

@ -8,7 +8,7 @@
@apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8; @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;
> .page-header { > .page-header {
@apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 sm:pr-6 pt-6 mb-2; @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 pt-6 mb-2;
background-color: #f6f5f4; background-color: #f6f5f4;
> .title-container { > .title-container {
@ -35,16 +35,16 @@
} }
> .memos-wrapper { > .memos-wrapper {
@apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6; @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4;
> .memo-container { > .memo-container {
@apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white rounded-lg border border-white hover:border-gray-200; @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;
> .memo-header { > .memo-header {
@apply mb-2 w-full flex flex-row justify-between items-center text-sm font-mono text-gray-400; @apply mb-2 w-full flex flex-row justify-between items-center;
> .status-container { > .status-container {
@apply flex flex-row justify-start items-center; @apply flex flex-row justify-start items-center text-sm font-mono text-gray-400;
> .split-text { > .split-text {
@apply mx-2; @apply mx-2;
@ -55,6 +55,8 @@
} }
> .visibility-selector { > .visibility-selector {
@apply ml-2;
> .status-text { > .status-text {
@apply flex flex-row justify-start items-center leading-5 text-xs cursor-pointer ml-2 rounded border px-1; @apply flex flex-row justify-start items-center leading-5 text-xs cursor-pointer ml-2 rounded border px-1;
@ -72,18 +74,6 @@
} }
} }
} }
.btns-container {
.flex(row, flex-start, center);
> .btn {
@apply rounded;
}
> .copy-btn {
@apply hover:bg-gray-100;
}
}
} }
> .memo-content { > .memo-content {

17
web/src/pages/MemoDetail.tsx
View File

@ -132,11 +132,20 @@ const MemoDetail = () => {
</> </>
)} )}
</div> </div>
<div className="btns-container"> <Dropdown
<button className="btn copy-btn" onClick={handleCopyContent}> trigger={<Icon.MoreHorizontal className="ml-2 w-4 h-auto cursor-pointer text-gray-500" />}
<Icon.Clipboard className="icon-img" /> actionsClassName="!w-32"
actions={
<>
<button
className="w-full flex flex-row justify-start items-center px-3 whitespace-nowrap text-sm text-left leading-8 cursor-pointer rounded hover:bg-gray-100"
onClick={handleCopyContent}
>
<Icon.Clipboard className="w-4 h-auto mr-2" /> {t("memo.copy")}
</button> </button>
</div> </>
}
/>
</div> </div>
<MemoContent className="memo-content" content={state.memo.content} onMemoContentClick={() => undefined} /> <MemoContent className="memo-content" content={state.memo.content} onMemoContentClick={() => undefined} />
<MemoResources memo={state.memo} /> <MemoResources memo={state.memo} />