chore: show daily memos view in sidebar (#79)

pull/80/head
Steven 3 years ago committed by GitHub
parent 50fee8b0f4
commit f849a94dc5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -37,6 +37,7 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
</div> </div>
</Only> </Only>
</div> </div>
<div className="split-line"></div>
</div> </div>
); );
}; };

@ -15,8 +15,8 @@ interface Props extends DialogProps {
currentDateStamp: DateStamp; currentDateStamp: DateStamp;
} }
const monthChineseStrArray = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]; const monthChineseStrArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dev"];
const weekdayChineseStrArray = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]; const weekdayChineseStrArray = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => { const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => {
const loadingState = useLoading(); const loadingState = useLoading();
@ -72,22 +72,22 @@ const DailyMemoDiaryDialog: React.FC<Props> = (props: Props) => {
return ( return (
<> <>
<div className="dialog-header-container"> <div className="dialog-header-container">
<div className="header-wrapper"> <p className="title-text">
<p className="title-text">Daily Memos</p> <span className="icon-text">📅</span> Daily Memos
<div className="btns-container"> </p>
<span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}> <div className="btns-container">
<img className="icon-img" src="/icons/arrow-left.svg" /> <span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}>
</span> <img className="icon-img" src="/icons/arrow-left.svg" />
<span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}> </span>
<img className="icon-img" src="/icons/arrow-right.svg" /> <span className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp + DAILY_TIMESTAMP)}>
</span> <img className="icon-img" src="/icons/arrow-right.svg" />
<span className="btn-text share-btn" onClick={handleShareBtnClick}> </span>
<img className="icon-img" src="/icons/share.svg" /> <span className="btn-text share-btn" onClick={handleShareBtnClick}>
</span> <img className="icon-img" src="/icons/share.svg" />
<span className="btn-text" onClick={() => props.destroy()}> </span>
<img className="icon-img" src="/icons/close.svg" /> <span className="btn-text" onClick={() => props.destroy()}>
</span> <img className="icon-img" src="/icons/close.svg" />
</div> </span>
</div> </div>
</div> </div>
<div className="dialog-content-container" ref={memosElRef}> <div className="dialog-content-container" ref={memosElRef}>

@ -37,7 +37,7 @@ const MemoTrashDialog: React.FC<Props> = (props: Props) => {
<div className="dialog-header-container"> <div className="dialog-header-container">
<p className="title-text"> <p className="title-text">
<span className="icon-text">🗑</span> <span className="icon-text">🗑</span>
Trash Bin Recycle Bin
</p> </p>
<button className="btn close-btn" onClick={destroy}> <button className="btn close-btn" onClick={destroy}>
<img className="icon-img" src="/icons/close.svg" /> <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="amount-text">{tags.length}</span>
<span className="type-text">TAG</span> <span className="type-text">TAG</span>
</div> </div>
<div className="status-text duration-text" onClick={() => showDailyMemoDiaryDialog()}> <div className="status-text duration-text">
<span className="amount-text">{createdDays}</span> <span className="amount-text">{createdDays}</span>
<span className="type-text">DAY</span> <span className="type-text">DAY</span>
</div> </div>
</div> </div>
<UsageHeatMap /> <UsageHeatMap />
<div className="action-btns-container"> <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}> <button className="btn action-btn" onClick={handleMyAccountBtnClick}>
<span className="icon">👤</span> Setting <span className="icon"></span> Setting
</button> </button>
<button className="btn action-btn" onClick={handleMemosTrashBtnClick}> <button className="btn action-btn" onClick={handleMemosTrashBtnClick}>
<span className="icon">🗑</span> Recycle Bin <span className="icon">🗑</span> Recycle Bin

@ -18,9 +18,6 @@ const UserBanner: React.FC<Props> = () => {
}, []); }, []);
const handlePopupBtnClick = () => { 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); setShouldShowPopupBtns(true);
}; };

@ -1,8 +1,10 @@
@import "./mixin.less"; @import "./mixin.less";
.about-site-dialog { .about-site-dialog {
@apply px-4;
> .dialog-container { > .dialog-container {
@apply w-112; @apply w-112 max-w-full;
> .dialog-content-container { > .dialog-content-container {
@apply leading-relaxed; @apply leading-relaxed;
@ -11,8 +13,7 @@
@apply my-1; @apply my-1;
&.updated-time-text { &.updated-time-text {
.flex(row, flex-start, center); @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;
@apply 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"; @import "./mixin.less";
.daily-memo-diary-dialog { .daily-memo-diary-dialog {
@apply p-0 sm:py-16;
> .dialog-container { > .dialog-container {
width: 440px; @apply w-112 max-w-full p-0 rounded-none sm:rounded-lg;
max-width: 100%;
padding: 0;
> .dialog-header-container { > .dialog-header-container {
.flex(column, center, center); @apply flex flex-row justify-between items-center w-full p-6 pb-0 mb-0;
position: relative;
width: 100%; > .btns-container {
padding: 24px; @apply flex flex-row justify-start items-center;
margin-bottom: 0;
padding-bottom: 0; > .btn-text {
@apply w-6 h-6 mr-2 rounded cursor-pointer select-none last:mr-0 hover:bg-gray-200;
> .header-wrapper {
.flex(row, space-between, center); > .icon-img {
width: 100%; @apply w-full h-auto;
}
> .btns-container {
.flex(row, flex-start, center); &.share-btn {
@apply w-5 h-auto;
> .btn-text {
width: 24px;
height: 24px;
margin-right: 8px;
border-radius: 4px;
cursor: pointer;
user-select: none;
&:last-child {
margin-right: 0;
}
> .icon-img {
width: 100%;
height: auto;
}
&:hover {
background-color: lightgray;
}
&.share-btn {
padding: 2px;
}
} }
} }
} }
} }
> .dialog-content-container { > .dialog-content-container {
.flex(column, flex-start, flex-start); @apply w-full h-auto flex flex-col justify-start items-start p-6 pb-0;
width: 440px;
max-width: 100%;
height: auto;
padding: 24px 24px;
> .date-card-container { > .date-card-container {
.flex(column, center, center); @apply flex flex-col justify-center items-center m-auto pb-6 select-none;
margin: auto;
padding-bottom: 24px;
z-index: 1; z-index: 1;
user-select: none;
> .year-text { > .year-text {
margin: auto; @apply m-auto font-bold text-gray-600 text-center leading-6 mb-2;
font-weight: bold;
color: gray;
text-align: center;
line-height: 24px;
margin-bottom: 12px;
} }
> .date-container { > .date-container {
.flex(column, center, center); @apply flex flex-col justify-center items-center m-auto w-24 h-24;
margin: auto;
width: 96px;
height: 96px;
border-radius: 32px; border-radius: 32px;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%); 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, > .month-text,
> .day-text { > .day-text {
.flex(column, center, center); @apply flex flex-col justify-center items-center w-full h-6 text-sm;
width: 100%;
height: 24px;
font-size: 14px;
} }
> .month-text { > .month-text {
background-color: @bg-blue; @apply bg-blue-700 text-white;
color: white;
border-top-left-radius: 32px; border-top-left-radius: 32px;
border-top-right-radius: 32px; border-top-right-radius: 32px;
} }
> .date-text { > .date-text {
.flex(column, center, center); @apply flex flex-col justify-center items-center w-full pt-1 h-12;
width: 100%; font-size: 40px;
padding-top: 4px;
height: 48px;
font-size: 44px;
font-weight: bold; font-weight: bold;
} }
> .day-text { > .day-text {
font-size: 12px; @apply text-xs;
} }
} }
} }
> .date-picker { > .date-picker {
margin: 0 auto; @apply mx-auto border border-gray-200 rounded-lg mb-6;
border: 1px solid lightgray;
border-radius: 8px;
margin-bottom: 24px;
} }
> .tip-container { > .tip-container {
margin: auto; @apply m-auto py-4 px-0;
padding: 16px 0;
> .tip-text { > .tip-text {
font-style: italic; font-style: italic;
@ -131,9 +78,7 @@
} }
> .dailymemos-wrapper { > .dailymemos-wrapper {
.flex(column, flex-start, flex-start); @apply flex flex-col justify-start items-start w-full mt-2;
margin-top: 8px;
width: 100%;
} }
} }
} }

@ -2,70 +2,36 @@
.daily-memo-wrapper { .daily-memo-wrapper {
.flex(row, flex-start, flex-start); .flex(row, flex-start, flex-start);
position: relative; @apply flex flex-row justify-start items-start relative w-full flex-nowrap pb-6;
width: calc(100% - 24px);
margin-left: 24px;
padding: 0;
padding-bottom: 24px;
border: none;
border-left: 2px solid @bg-whitegray;
&:last-child { &:last-child {
border-left: none; > .split-line {
padding-bottom: 0; @apply hidden;
}
} }
> .time-wrapper { > .split-line {
.flex(column, center, center); @apply h-full px-px bg-gray-100 absolute top-1 left-6 z-0 -ml-px;
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 { > .time-wrapper {
margin: 0 auto; @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;
font-size: 11px;
line-height: 24px;
}
} }
> .memo-content-container { > .memo-content-container {
.flex(column, flex-start, flex-start); @apply flex flex-col justify-start items-start w-full p-0 text-base;
width: 100%;
margin-left: -12px;
padding: 0;
font-size: 16px;
> .memo-content-text { > .memo-content-text {
.tag-span { .tag-span {
cursor: unset; cursor: unset;
&:hover {
color: @text-blue;
background-color: @bg-light-blue;
}
} }
} }
> .images-container { > .images-container {
.flex(column, flex-start, flex-start); @apply flex flex-col justify-start items-start w-full;
width: 100%;
> img { > img {
width: 100%; @apply w-full h-auto rounded mb-2 last:mb-0;
height: auto;
border-radius: 4px;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
} }
} }
} }

@ -5,7 +5,7 @@
@apply w-full whitespace-pre-wrap break-words; @apply w-full whitespace-pre-wrap break-words;
> p { > 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 { .tag-span {

@ -1,12 +1,10 @@
@import "./mixin.less"; @import "./mixin.less";
.menu-btns-popup { .menu-btns-popup {
.flex(column, flex-start, flex-start); @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;
@apply absolute right-0 top-0 mt-1 p-1 w-36 rounded-lg z-10 shadow bg-white;
> .btn { > .btn {
.flex(row, flex-start, center); @apply flex flex-row justify-start items-center w-full py-2 px-3 text-base rounded text-left hover:bg-gray-100;
@apply w-full py-2 px-3 text-base rounded text-left hover:bg-gray-100;
> .icon { > .icon {
@apply block w-6 text-center mr-2 text-base; @apply block w-6 text-center mr-2 text-base;

@ -1,8 +1,7 @@
@import "./mixin.less"; @import "./mixin.less";
.user-banner-container { .user-banner-container {
.flex(row, space-between, center); @apply flex flex-row justify-between items-center relative w-full h-auto px-6 flex-nowrap mb-1;
@apply w-full h-auto px-6 flex-nowrap mb-1;
> .username-container { > .username-container {
@apply shrink flex flex-row justify-start items-center flex-nowrap truncate; @apply shrink flex flex-row justify-start items-center flex-nowrap truncate;
@ -20,8 +19,7 @@
@apply shrink-0 select-none border-none; @apply shrink-0 select-none border-none;
&.menu-popup-btn { &.menu-popup-btn {
.flex(column, center, center); @apply flex flex-col justify-center items-center w-9 h-10 -mr-2 cursor-pointer;
@apply w-9 h-10 -mr-2 cursor-pointer;
> .icon-img { > .icon-img {
@apply w-5 h-auto; @apply w-5 h-auto;

Loading…
Cancel
Save