aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: update layout styles

Browse Source
pull/49/head
boojack 4 years ago
parent 406109b091
commit 08682a822e
19 changed files with 63 additions and 90 deletions
Show Stats Download Patch File Download Diff File

4
web/src/components/CreateShortcutDialog.tsx
Unescape Escape View File

@ -89,7 +89,7 @@ const CreateShortcutDialog: 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>
{shortcutId ? "Edit Shortcut" : "Create Shortcut"} {shortcutId ? "Edit Shortcut" : "Create Shortcut"}
</p> </p>
<button className="btn close-btn" onClick={destroy}> <button className="btn close-btn" onClick={destroy}>
@ -102,7 +102,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
<input className="title-input" type="text" value={title} onChange={handleTitleInputChange} /> <input className="title-input" type="text" value={title} onChange={handleTitleInputChange} />
</div> </div>
<div className="form-item-container filter-form-container"> <div className="form-item-container filter-form-container">
<span className="normal-text">Filter</span> <span className="normal-text">Filters</span>
<div className="filters-wrapper"> <div className="filters-wrapper">
{filters.map((f, index) => { {filters.map((f, index) => {
return ( return (

9
web/src/components/Editor/Editor.tsx
Unescape Escape View File

@ -44,6 +44,13 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
} }
}, []); }, []);
useEffect(() => {
if (editorRef.current) {
editorRef.current.style.height = "auto";
editorRef.current.style.height = (editorRef.current.scrollHeight ?? 0) + "px";
}
}, [editorRef.current?.value]);
useImperativeHandle( useImperativeHandle(
ref, ref,
() => ({ () => ({
@ -60,11 +67,13 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
editorRef.current.value = editorRef.current.value =
prevValue.slice(0, editorRef.current.selectionStart) + rawText + prevValue.slice(editorRef.current.selectionStart); prevValue.slice(0, editorRef.current.selectionStart) + rawText + prevValue.slice(editorRef.current.selectionStart);
handleContentChangeCallback(editorRef.current.value); handleContentChangeCallback(editorRef.current.value);
refresh();
}, },
setContent: (text: string) => { setContent: (text: string) => {
if (editorRef.current) { if (editorRef.current) {
editorRef.current.value = text; editorRef.current.value = text;
handleContentChangeCallback(editorRef.current.value); handleContentChangeCallback(editorRef.current.value);
refresh();
} }
}, },
getContent: (): string => { getContent: (): string => {

2
web/src/components/MemoFilter.tsx
Unescape Escape View File

@ -25,7 +25,7 @@ const MemoFilter: React.FC<FilterProps> = () => {
locationService.setMemoShortcut(""); locationService.setMemoShortcut("");
}} }}
> >
<span className="icon-text">🔖</span> {queryFilter?.title} <span className="icon-text">🎯</span> {queryFilter?.title}
</div> </div>
<div <div
className={"filter-item-container " + (tagQuery ? "" : "hidden")} className={"filter-item-container " + (tagQuery ? "" : "hidden")}

4
web/src/components/ShortcutList.tsx
Unescape Escape View File

@ -111,7 +111,7 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
await shortcutService.pinShortcut(shortcut.id); await shortcutService.pinShortcut(shortcut.id);
shortcutService.editShortcut({ shortcutService.editShortcut({
...shortcut, ...shortcut,
rowStatus: "NORMAL", rowStatus: "ARCHIVED",
}); });
} }
} catch (error) { } catch (error) {
@ -127,7 +127,7 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
<> <>
<div className={`shortcut-container ${isActive ? "active" : ""}`} onClick={handleShortcutClick}> <div className={`shortcut-container ${isActive ? "active" : ""}`} onClick={handleShortcutClick}>
<div className="shortcut-text-container"> <div className="shortcut-text-container">
<span className="icon-text">#</span> {/* <span className="icon-text">#</span> */}
<span className="shortcut-text">{shortcut.title}</span> <span className="shortcut-text">{shortcut.title}</span>
</div> </div>
<div className="btns-container"> <div className="btns-container">

20
web/src/components/Sidebar.tsx
Unescape Escape View File

@ -6,6 +6,7 @@ import showSettingDialog from "./SettingDialog";
import showMemoTrashDialog from "./MemoTrashDialog"; import showMemoTrashDialog from "./MemoTrashDialog";
import UserBanner from "./UserBanner"; import UserBanner from "./UserBanner";
import ShortcutList from "./ShortcutList"; import ShortcutList from "./ShortcutList";
import UsageHeatMap from "./UsageHeatMap";
import "../less/siderbar.less"; import "../less/siderbar.less";
interface Props {} interface Props {}
@ -28,15 +29,6 @@ const Sidebar: React.FC<Props> = () => {
return ( return (
<aside className="sidebar-wrapper"> <aside className="sidebar-wrapper">
<UserBanner /> <UserBanner />
<div className="action-btns-container">
<button className="btn action-btn" onClick={handleMyAccountBtnClick}>
<span className="icon">👤</span> Setting
</button>
<button className="btn action-btn" onClick={handleMemosTrashBtnClick}>
<span className="icon">🗑️</span> Recycle Bin
</button>
</div>
<ShortcutList />
<div className="status-text-container"> <div className="status-text-container">
<div className="status-text memos-text"> <div className="status-text memos-text">
<span className="amount-text">{memos.length}</span> <span className="amount-text">{memos.length}</span>
@ -51,6 +43,16 @@ const Sidebar: React.FC<Props> = () => {
<span className="type-text">DAY</span> <span className="type-text">DAY</span>
</div> </div>
</div> </div>
<UsageHeatMap />
<div className="action-btns-container">
<button className="btn action-btn" onClick={handleMyAccountBtnClick}>
<span className="icon">👤</span> Setting
</button>
<button className="btn action-btn" onClick={handleMemosTrashBtnClick}>
<span className="icon">🗑️</span> Recycle Bin
</button>
</div>
<ShortcutList />
</aside> </aside>
); );
}; };

16
web/src/components/UsageHeatMap.tsx
Unescape Escape View File

@ -30,7 +30,7 @@ interface Props {}
const UsageHeatMap: React.FC<Props> = () => { const UsageHeatMap: React.FC<Props> = () => {
const todayTimeStamp = utils.getDateStampByDate(Date.now()); const todayTimeStamp = utils.getDateStampByDate(Date.now());
const todayDay = new Date(todayTimeStamp).getDay() || 7; const todayDay = new Date(todayTimeStamp).getDay() + 1;
const nullCell = new Array(7 - todayDay).fill(0); const nullCell = new Array(7 - todayDay).fill(0);
const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay; const usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay;
const beginDayTimestemp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP; const beginDayTimestemp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP;
@ -62,9 +62,8 @@ const UsageHeatMap: React.FC<Props> = () => {
} }
const targetEl = event.target as HTMLElement; const targetEl = event.target as HTMLElement;
popupRef.current.style.left = targetEl.offsetLeft - (containerElRef.current?.offsetLeft ?? 0) + "px"; popupRef.current.style.left = targetEl.offsetLeft + "px";
const topValue = targetEl.offsetTop; popupRef.current.style.top = targetEl.offsetTop - 4 + "px";
popupRef.current.style.top = topValue + "px";
}, []); }, []);
const handleUsageStatItemMouseLeave = useCallback(() => { const handleUsageStatItemMouseLeave = useCallback(() => {
@ -87,16 +86,15 @@ const UsageHeatMap: React.FC<Props> = () => {
return ( return (
<div className="usage-heat-map-wrapper" ref={containerElRef}> <div className="usage-heat-map-wrapper" ref={containerElRef}>
<div className="day-tip-text-container"> <div className="day-tip-text-container">
<span className="tip-text">Mon</span> <span className="tip-text">Sun</span>
<span className="tip-text"></span> <span className="tip-text"></span>
<span className="tip-text">Wed</span> <span className="tip-text">Tue</span>
<span className="tip-text"></span> <span className="tip-text"></span>
<span className="tip-text">Fri</span> <span className="tip-text">Thu</span>
<span className="tip-text"></span> <span className="tip-text"></span>
<span className="tip-text">Sun</span> <span className="tip-text">Sat</span>
</div> </div>
{/* popup */}
<div ref={popupRef} className={"usage-detail-container pop-up " + (popupStat ? "" : "hidden")}> <div ref={popupRef} className={"usage-detail-container pop-up " + (popupStat ? "" : "hidden")}>
{popupStat?.count} memos on <span className="date-text">{new Date(popupStat?.timestamp as number).toDateString()}</span> {popupStat?.count} memos on <span className="date-text">{new Date(popupStat?.timestamp as number).toDateString()}</span>
</div> </div>

25
web/src/less/common/selector.less
Unescape Escape View File

@ -7,15 +7,7 @@
> .current-value-container { > .current-value-container {
.flex(row, space-between, center); .flex(row, space-between, center);
width: 100%; @apply w-full h-full rounded px-2 pr-1 bg-white border cursor-pointer select-none;
height: 100%;
border: 1px solid @bg-gray;
border-radius: 4px;
padding: 0 8px;
padding-right: 4px;
background-color: white;
cursor: pointer;
user-select: none;
&:hover, &:hover,
&.active { &.active {
@ -55,7 +47,7 @@
min-width: calc(100% + 16px); min-width: calc(100% + 16px);
max-height: 256px; max-height: 256px;
padding: 4px; padding: 4px;
overflow: auto; overflow-y: auto;
margin-top: 2px; margin-top: 2px;
margin-left: -8px; margin-left: -8px;
z-index: 1; z-index: 1;
@ -66,18 +58,7 @@
> .item-container { > .item-container {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);
width: 100%; @apply w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100;
padding-left: 12px;
line-height: 30px;
white-space: nowrap;
font-size: 13px;
cursor: pointer;
border-radius: 4px;
user-select: none;
&:hover {
background-color: @bg-whitegray;
}
&.selected { &.selected {
color: @text-green; color: @text-green;

6
web/src/less/editor.less
Unescape Escape View File

@ -2,10 +2,12 @@
.common-editor-wrapper { .common-editor-wrapper {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);
@apply relative w-full h-full bg-white grow; @apply relative w-full h-auto bg-white;
> .common-editor-inputer { > .common-editor-inputer {
@apply w-full h-full mt-1 mb-4 grow; @apply w-full h-full mt-1 mb-1;
min-height: 40px;
max-height: 300px;
.pretty-scroll-bar(2px, 0); .pretty-scroll-bar(2px, 0);
font-size: 15px; font-size: 15px;
line-height: 24px; line-height: 24px;

4
web/src/less/home.less
Unescape Escape View File

@ -5,6 +5,6 @@
} }
#page-wrapper { #page-wrapper {
@apply w-full h-full m-auto grid; @apply w-full h-full m-auto grid max-w-4xl mx-auto;
grid-template-columns: 256px 1fr; grid-template-columns: min-content 1fr;
} }

2
web/src/less/memo-editor.less
Unescape Escape View File

@ -1,7 +1,7 @@
@import "./mixin.less"; @import "./mixin.less";
.memo-editor-container { .memo-editor-container {
@apply relative w-full h-96 max-h-full flex flex-col justify-start items-start grow bg-white p-4 rounded-lg border-2 border-gray-200; @apply relative w-full max-h-full flex flex-col justify-start items-start bg-white p-4 rounded-lg border-2 border-gray-200;
&.edit-ing { &.edit-ing {
border-color: @text-blue; border-color: @text-blue;

2
web/src/less/memo-list.less
Unescape Escape View File

@ -28,6 +28,6 @@
} }
&.completed { &.completed {
padding-bottom: 80px; @apply pb-28;
} }
} }

2
web/src/less/memo.less
Unescape Escape View File

@ -3,7 +3,7 @@
.memo-wrapper { .memo-wrapper {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);
@apply w-full max-w-full p-4 px-6 mt-4 first:mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200; @apply w-full max-w-full p-4 px-6 mt-2 first:mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200;
&.deleted-memo { &.deleted-memo {
@apply border-gray-200; @apply border-gray-200;

13
web/src/less/memos.less
Unescape Escape View File

@ -2,16 +2,5 @@
@import "./memos-header.less"; @import "./memos-header.less";
.memos-wrapper { .memos-wrapper {
@apply w-full h-full overflow-x-hidden grid; @apply w-full h-full overflow-x-hidden flex flex-col justify-start items-start px-4 pr-10;
grid-template-columns: 384px 1fr;
> .memo-editor-wrapper {
@apply w-full h-full py-16 px-8 bg-white;
}
> .memo-list-wrapper {
@apply w-full h-full overflow-y-auto px-16 grid;
grid-auto-rows: min-content;
grid-auto-flow: dense;
}
} }

2
web/src/less/menu-btns-popup.less
Unescape Escape View File

@ -13,7 +13,7 @@
@apply w-full py-2 px-3 text-sm rounded text-left; @apply w-full py-2 px-3 text-sm rounded text-left;
> .icon { > .icon {
@apply block w-6 text-center mr-2 text-sm; @apply block w-6 text-center mr-2 text-base;
} }
&:hover { &:hover {

2
web/src/less/shortcut-list.less
Unescape Escape View File

@ -101,7 +101,7 @@
> .action-btns-wrapper { > .action-btns-wrapper {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);
@apply absolute right-0 w-auto h-auto p-2 translate-y-14 hidden z-10; @apply absolute right-0 w-auto h-auto px-4 pt-3 translate-y-16 hidden z-10;
> .action-btns-container { > .action-btns-container {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);

4
web/src/less/siderbar.less
Unescape Escape View File

@ -2,7 +2,7 @@
.sidebar-wrapper { .sidebar-wrapper {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);
@apply w-64 h-full py-4 px-2 overflow-x-hidden overflow-y-auto shrink-0; @apply w-64 h-full py-4 pl-2 overflow-x-hidden overflow-y-auto;
.hide-scroll-bar(); .hide-scroll-bar();
> .action-btns-container { > .action-btns-container {
@ -19,7 +19,7 @@
> .status-text-container { > .status-text-container {
.flex(row, space-between, flex-start); .flex(row, space-between, flex-start);
@apply w-full px-10 select-none shrink-0; @apply w-full px-6 select-none shrink-0 pb-4;
> .status-text { > .status-text {
.flex(column, flex-start, flex-start); .flex(column, flex-start, flex-start);

21
web/src/less/usage-heat-map.less
Unescape Escape View File

@ -9,32 +9,25 @@
.flex(row, flex-start, center); .flex(row, flex-start, center);
@apply w-full h-32 flex-wrap pr-6 pb-3; @apply w-full h-32 flex-wrap pr-6 pb-3;
&:hover {
> .day-tip-text-container {
@apply visible;
}
}
> .day-tip-text-container { > .day-tip-text-container {
.flex(column, space-between, center); @apply w-6 h-full grid grid-rows-7;
@apply w-6 h-full flex-wrap invisible;
> .tip-text { > .tip-text {
@apply pr-1 w-full text-right font-mono text-gray-400; @apply pr-1 w-full h-full text-right font-mono text-gray-400;
font-size: 10px; font-size: 10px;
} }
} }
> .usage-heat-map { > .usage-heat-map {
@apply w-48 h-full grid; @apply h-full grid grid-rows-7;
grid-template-rows: repeat(7, 1fr); width: 200px;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-auto-flow: column; grid-auto-flow: column;
> .stat-container { > .stat-container {
@apply block rounded-sm; @apply block rounded-sm;
width: 13px; width: 14px;
height: 13px; height: 14px;
background-color: @bg-lightgray; background-color: @bg-lightgray;
margin-bottom: 2px; margin-bottom: 2px;
@ -77,7 +70,7 @@
content: ""; content: "";
position: absolute; position: absolute;
bottom: -4px; bottom: -4px;
left: calc(50% - 6px); left: calc(50% - 5px);
border-left: 4px solid transparent; border-left: 4px solid transparent;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-top: 4px solid rgba(0, 0, 0, 0.8); border-top: 4px solid rgba(0, 0, 0, 0.8);

12
web/src/pages/Memos.tsx
Unescape Escape View File

@ -7,14 +7,10 @@ import "../less/memos.less";
function Memos() { function Memos() {
return ( return (
<main className="memos-wrapper"> <main className="memos-wrapper">
<div className="memo-editor-wrapper"> <MemosHeader />
<MemoEditor /> <MemoEditor />
</div> <MemoFilter />
<div className="memo-list-wrapper"> <MemoList />
<MemosHeader />
<MemoFilter />
<MemoList />
</div>
</main> </main>
); );
} }

3
web/tailwind.config.js
Unescape Escape View File

@ -24,6 +24,9 @@ module.exports = {
100: "100", 100: "100",
1000: "1000", 1000: "1000",
}, },
gridTemplateRows: {
7: "repeat(7, minmax(0, 1fr))",
},
}, },
}, },
plugins: [], plugins: [],

Write Preview
Loading…
Cancel
Save