mirror of
https://github.com/usememos/memos.git
synced 2025-03-06 10:34:01 +08:00
chore: show daily memos view in sidebar (#79)
This commit is contained in:
Steven
GitHub
parent
50fee8b0f4
commit
f849a94dc5
11 changed files with 73 additions and 164 deletions
|
|
@ -37,6 +37,7 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
|
|||
</div>
|
||||
</Only>
|
||||
</div>
|
||||
<div className="split-line"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ interface Props extends DialogProps {
|
|||
currentDateStamp: DateStamp;
|
||||
}
|
||||
|
||||
const monthChineseStrArray = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
|
||||
const weekdayChineseStrArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
|
||||
const monthChineseStrArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dev"];
|
||||
const weekdayChineseStrArray = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||
|
||||
const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => {
|
||||
const loadingState = useLoading();
|
||||
|
|
@ -72,22 +72,22 @@ const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => {
|
|||
return (
|
||||
<>
|
||||
<div className="dialog-header-container">
|
||||
<div className="header-wrapper">
|
||||
<p className="title-text">Daily Memos</p>
|
||||
<div className="btns-container">
|
||||
<span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}>
|
||||
<img className="icon-img" src="/icons/arrow-left.svg" />
|
||||
</span>
|
||||
<span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}>
|
||||
<img className="icon-img" src="/icons/arrow-right.svg" />
|
||||
</span>
|
||||
<span className="btn-text share-btn" onClick={handleShareBtnClick}>
|
||||
<img className="icon-img" src="/icons/share.svg" />
|
||||
</span>
|
||||
<span className="btn-text" onClick={() => props.destroy()}>
|
||||
<img className="icon-img" src="/icons/close.svg" />
|
||||
</span>
|
||||
</div>
|
||||
<p className="title-text">
|
||||
<span className="icon-text">📅</span> Daily Memos
|
||||
</p>
|
||||
<div className="btns-container">
|
||||
<span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}>
|
||||
<img className="icon-img" src="/icons/arrow-left.svg" />
|
||||
</span>
|
||||
<span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}>
|
||||
<img className="icon-img" src="/icons/arrow-right.svg" />
|
||||
</span>
|
||||
<span className="btn-text share-btn" onClick={handleShareBtnClick}>
|
||||
<img className="icon-img" src="/icons/share.svg" />
|
||||
</span>
|
||||
<span className="btn-text" onClick={() => props.destroy()}>
|
||||
<img className="icon-img" src="/icons/close.svg" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dialog-content-container" ref={memosElRef}>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const MemoTrashDialog: React.FC<Props> = (props: Props) => {
|
|||
<div className="dialog-header-container">
|
||||
<p className="title-text">
|
||||
<span className="icon-text">🗑️</span>
|
||||
Trash Bin
|
||||
Recycle Bin
|
||||
</p>
|
||||
<button className="btn close-btn" onClick={destroy}>
|
||||
<img className="icon-img" src="/icons/close.svg" />
|
||||
|
|
|
|||
|
|
@ -42,15 +42,18 @@ const Sidebar: React.FC<Props> = () => {
|
|||
<span className="amount-text">{tags.length}</span>
|
||||
<span className="type-text">TAG</span>
|
||||
</div>
|
||||
<div className="status-text duration-text" onClick={() => showDailyMemoDiaryDialog()}>
|
||||
<div className="status-text duration-text">
|
||||
<span className="amount-text">{createdDays}</span>
|
||||
<span className="type-text">DAY</span>
|
||||
</div>
|
||||
</div>
|
||||
<UsageHeatMap />
|
||||
<div className="action-btns-container">
|
||||
<button className="btn action-btn" onClick={() => showDailyMemoDiaryDialog()}>
|
||||
<span className="icon">📅</span> Daily View
|
||||
</button>
|
||||
<button className="btn action-btn" onClick={handleMyAccountBtnClick}>
|
||||
<span className="icon">👤</span> Setting
|
||||
<span className="icon">⚙️</span> Setting
|
||||
</button>
|
||||
<button className="btn action-btn" onClick={handleMemosTrashBtnClick}>
|
||||
<span className="icon">🗑️</span> Recycle Bin
|
||||
|
|
|
|||
|
|
@ -18,9 +18,6 @@ const UserBanner: React.FC<Props> = () => {
|
|||
}, []);
|
||||
|
||||
const handlePopupBtnClick = () => {
|
||||
const sidebarEl = document.querySelector(".sidebar-wrapper") as HTMLElement;
|
||||
const popupEl = document.querySelector(".menu-btns-popup") as HTMLElement;
|
||||
popupEl.style.top = 54 - sidebarEl.scrollTop + "px";
|
||||
setShouldShowPopupBtns(true);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
@import "./mixin.less";
|
||||
|
||||
.about-site-dialog {
|
||||
@apply px-4;
|
||||
|
||||
> .dialog-container {
|
||||
@apply w-112;
|
||||
@apply w-112 max-w-full;
|
||||
|
||||
> .dialog-content-container {
|
||||
@apply leading-relaxed;
|
||||
|
|
@ -11,8 +13,7 @@
|
|||
@apply my-1;
|
||||
|
||||
&.updated-time-text {
|
||||
.flex(row, flex-start, center);
|
||||
@apply w-full text-sm mt-3 pt-2 border-t-2 border-t-gray-200 text-gray-600 whitespace-pre-wrap font-mono;
|
||||
@apply flex flex-row justify-start items-center w-full text-sm mt-3 pt-2 border-t-2 border-t-gray-200 text-gray-600 whitespace-pre-wrap font-mono;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,129 +1,76 @@
|
|||
@import "./mixin.less";
|
||||
|
||||
.daily-memo-diary-dialog {
|
||||
@apply p-0 sm:py-16;
|
||||
|
||||
> .dialog-container {
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
@apply w-112 max-w-full p-0 rounded-none sm:rounded-lg;
|
||||
|
||||
> .dialog-header-container {
|
||||
.flex(column, center, center);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
@apply flex flex-row justify-between items-center w-full p-6 pb-0 mb-0;
|
||||
|
||||
> .header-wrapper {
|
||||
.flex(row, space-between, center);
|
||||
width: 100%;
|
||||
> .btns-container {
|
||||
@apply flex flex-row justify-start items-center;
|
||||
|
||||
> .btns-container {
|
||||
.flex(row, flex-start, center);
|
||||
> .btn-text {
|
||||
@apply w-6 h-6 mr-2 rounded cursor-pointer select-none last:mr-0 hover:bg-gray-200;
|
||||
|
||||
> .btn-text {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
> .icon-img {
|
||||
@apply w-full h-auto;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
> .icon-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
&.share-btn {
|
||||
padding: 2px;
|
||||
}
|
||||
&.share-btn {
|
||||
@apply w-5 h-auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .dialog-content-container {
|
||||
.flex(column, flex-start, flex-start);
|
||||
width: 440px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
padding: 24px 24px;
|
||||
@apply w-full h-auto flex flex-col justify-start items-start p-6 pb-0;
|
||||
|
||||
> .date-card-container {
|
||||
.flex(column, center, center);
|
||||
margin: auto;
|
||||
padding-bottom: 24px;
|
||||
@apply flex flex-col justify-center items-center m-auto pb-6 select-none;
|
||||
z-index: 1;
|
||||
user-select: none;
|
||||
|
||||
> .year-text {
|
||||
margin: auto;
|
||||
font-weight: bold;
|
||||
color: gray;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
margin-bottom: 12px;
|
||||
@apply m-auto font-bold text-gray-600 text-center leading-6 mb-2;
|
||||
}
|
||||
|
||||
> .date-container {
|
||||
.flex(column, center, center);
|
||||
margin: auto;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
@apply flex flex-col justify-center items-center m-auto w-24 h-24;
|
||||
border-radius: 32px;
|
||||
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
|
||||
border: 1px solid rgb(0 0 0 / 10%);
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
|
||||
> .month-text,
|
||||
> .day-text {
|
||||
.flex(column, center, center);
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
@apply flex flex-col justify-center items-center w-full h-6 text-sm;
|
||||
}
|
||||
|
||||
> .month-text {
|
||||
background-color: @bg-blue;
|
||||
color: white;
|
||||
@apply bg-blue-700 text-white;
|
||||
border-top-left-radius: 32px;
|
||||
border-top-right-radius: 32px;
|
||||
}
|
||||
|
||||
> .date-text {
|
||||
.flex(column, center, center);
|
||||
width: 100%;
|
||||
padding-top: 4px;
|
||||
height: 48px;
|
||||
font-size: 44px;
|
||||
@apply flex flex-col justify-center items-center w-full pt-1 h-12;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> .day-text {
|
||||
font-size: 12px;
|
||||
@apply text-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .date-picker {
|
||||
margin: 0 auto;
|
||||
border: 1px solid lightgray;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 24px;
|
||||
@apply mx-auto border border-gray-200 rounded-lg mb-6;
|
||||
}
|
||||
|
||||
> .tip-container {
|
||||
margin: auto;
|
||||
padding: 16px 0;
|
||||
@apply m-auto py-4 px-0;
|
||||
|
||||
> .tip-text {
|
||||
font-style: italic;
|
||||
|
|
@ -131,9 +78,7 @@
|
|||
}
|
||||
|
||||
> .dailymemos-wrapper {
|
||||
.flex(column, flex-start, flex-start);
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
@apply flex flex-col justify-start items-start w-full mt-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,70 +2,36 @@
|
|||
|
||||
.daily-memo-wrapper {
|
||||
.flex(row, flex-start, flex-start);
|
||||
position: relative;
|
||||
width: calc(100% - 24px);
|
||||
margin-left: 24px;
|
||||
padding: 0;
|
||||
padding-bottom: 24px;
|
||||
border: none;
|
||||
border-left: 2px solid @bg-whitegray;
|
||||
@apply flex flex-row justify-start items-start relative w-full flex-nowrap pb-6;
|
||||
|
||||
&:last-child {
|
||||
border-left: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
> .time-wrapper {
|
||||
.flex(column, center, center);
|
||||
position: relative;
|
||||
left: -24px;
|
||||
margin-top: -2px;
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
background-color: @bg-lightgray;
|
||||
color: @text-gray;
|
||||
border: 2px solid white;
|
||||
|
||||
> .normal-text {
|
||||
margin: 0 auto;
|
||||
font-size: 11px;
|
||||
line-height: 24px;
|
||||
> .split-line {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
> .split-line {
|
||||
@apply h-full px-px bg-gray-100 absolute top-1 left-6 z-0 -ml-px;
|
||||
}
|
||||
|
||||
> .time-wrapper {
|
||||
@apply mt-px mr-4 w-12 h-7 shrink-0 text-xs leading-6 text-center font-mono rounded-lg bg-gray-100 border-2 border-white text-gray-600 z-10;
|
||||
}
|
||||
|
||||
> .memo-content-container {
|
||||
.flex(column, flex-start, flex-start);
|
||||
width: 100%;
|
||||
margin-left: -12px;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
@apply flex flex-col justify-start items-start w-full p-0 text-base;
|
||||
|
||||
> .memo-content-text {
|
||||
.tag-span {
|
||||
cursor: unset;
|
||||
|
||||
&:hover {
|
||||
color: @text-blue;
|
||||
background-color: @bg-light-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .images-container {
|
||||
.flex(column, flex-start, flex-start);
|
||||
width: 100%;
|
||||
@apply flex flex-col justify-start items-start w-full;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@apply w-full h-auto rounded mb-2 last:mb-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
@apply w-full whitespace-pre-wrap break-words;
|
||||
|
||||
> p {
|
||||
@apply inline-block w-full h-auto mb-1 text-base leading-6 whitespace-pre-wrap break-words;
|
||||
@apply inline-block w-full h-auto mb-1 text-base leading-7 whitespace-pre-wrap break-words;
|
||||
}
|
||||
|
||||
.tag-span {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
@import "./mixin.less";
|
||||
|
||||
.menu-btns-popup {
|
||||
.flex(column, flex-start, flex-start);
|
||||
@apply absolute right-0 top-0 mt-1 p-1 w-36 rounded-lg z-10 shadow bg-white;
|
||||
@apply absolute right-2 top-8 flex flex-col justify-start items-start mt-4 p-1 w-36 rounded-lg z-10 shadow bg-white;
|
||||
|
||||
> .btn {
|
||||
.flex(row, flex-start, center);
|
||||
@apply w-full py-2 px-3 text-base rounded text-left hover:bg-gray-100;
|
||||
@apply flex flex-row justify-start items-center w-full py-2 px-3 text-base rounded text-left hover:bg-gray-100;
|
||||
|
||||
> .icon {
|
||||
@apply block w-6 text-center mr-2 text-base;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
@import "./mixin.less";
|
||||
|
||||
.user-banner-container {
|
||||
.flex(row, space-between, center);
|
||||
@apply w-full h-auto px-6 flex-nowrap mb-1;
|
||||
@apply flex flex-row justify-between items-center relative w-full h-auto px-6 flex-nowrap mb-1;
|
||||
|
||||
> .username-container {
|
||||
@apply shrink flex flex-row justify-start items-center flex-nowrap truncate;
|
||||
|
|
@ -20,8 +19,7 @@
|
|||
@apply shrink-0 select-none border-none;
|
||||
|
||||
&.menu-popup-btn {
|
||||
.flex(column, center, center);
|
||||
@apply w-9 h-10 -mr-2 cursor-pointer;
|
||||
@apply flex flex-col justify-center items-center w-9 h-10 -mr-2 cursor-pointer;
|
||||
|
||||
> .icon-img {
|
||||
@apply w-5 h-auto;
|
||||
|
|
|
|||
Loading…
Reference in a new issue