YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update layout styles

Browse Source
This commit is contained in:
boojack
2022-05-02 09:32:45 +08:00
parent 406109b091
commit 08682a822e
19 changed files with 65 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,7 +89,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
<>
<div className="dialog-header-container">
<p className="title-text">
<span className="icon-text">🔖</span>
<span className="icon-text">🎯</span>
{shortcutId ? "Edit Shortcut" : "Create Shortcut"}
</p>
<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} />
</div>
<div className="form-item-container filter-form-container">
<span className="normal-text">Filter</span>
<span className="normal-text">Filters</span>
<div className="filters-wrapper">
{filters.map((f, index) => {
return (

9
web/src/components/Editor/Editor.tsx
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(
ref,
() => ({
@ -60,11 +67,13 @@ const Editor = forwardRef((props: EditorProps, ref: React.ForwardedRef<EditorRef
editorRef.current.value =
prevValue.slice(0, editorRef.current.selectionStart) + rawText + prevValue.slice(editorRef.current.selectionStart);
handleContentChangeCallback(editorRef.current.value);
refresh();
},
setContent: (text: string) => {
if (editorRef.current) {
editorRef.current.value = text;
handleContentChangeCallback(editorRef.current.value);
refresh();
}
},
getContent: (): string => {

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

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

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

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

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

@ -6,6 +6,7 @@ import showSettingDialog from "./SettingDialog";
import showMemoTrashDialog from "./MemoTrashDialog";
import UserBanner from "./UserBanner";
import ShortcutList from "./ShortcutList";
import UsageHeatMap from "./UsageHeatMap";
import "../less/siderbar.less";
interface Props {}
@ -28,15 +29,6 @@ const Sidebar: React.FC<Props> = () => {
return (
<aside className="sidebar-wrapper">
<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 memos-text">
<span className="amount-text">{memos.length}</span>
@ -51,6 +43,16 @@ const Sidebar: React.FC<Props> = () => {
<span className="type-text">DAY</span>
</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>
);
};

20
web/src/components/UsageHeatMap.tsx
View File

@ -30,7 +30,7 @@ interface Props {}
const UsageHeatMap: React.FC<Props> = () => {
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 usedDaysAmount = (tableConfig.width - 1) * tableConfig.height + todayDay;
const beginDayTimestemp = todayTimeStamp - usedDaysAmount * DAILY_TIMESTAMP;
@ -62,9 +62,8 @@ const UsageHeatMap: React.FC<Props> = () => {
}
const targetEl = event.target as HTMLElement;
popupRef.current.style.left = targetEl.offsetLeft - (containerElRef.current?.offsetLeft ?? 0) + "px";
const topValue = targetEl.offsetTop;
popupRef.current.style.top = topValue + "px";
popupRef.current.style.left = targetEl.offsetLeft + "px";
popupRef.current.style.top = targetEl.offsetTop - 4 + "px";
}, []);
const handleUsageStatItemMouseLeave = useCallback(() => {
@ -87,16 +86,15 @@ const UsageHeatMap: React.FC<Props> = () => {
return (
<div className="usage-heat-map-wrapper" ref={containerElRef}>
<div className="day-tip-text-container">
<span className="tip-text">Mon</span>
<span className="tip-text"></span>
<span className="tip-text">Wed</span>
<span className="tip-text"></span>
<span className="tip-text">Fri</span>
<span className="tip-text"></span>
<span className="tip-text">Sun</span>
<span className="tip-text"></span>
<span className="tip-text">Tue</span>
<span className="tip-text"></span>
<span className="tip-text">Thu</span>
<span className="tip-text"></span>
<span className="tip-text">Sat</span>
</div>
{/* popup */}
<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>
</div>

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

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

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

@ -2,10 +2,12 @@
.common-editor-wrapper {
.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 {
@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);
font-size: 15px;
line-height: 24px;

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

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

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

@ -1,7 +1,7 @@
@import "./mixin.less";
.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 {
border-color: @text-blue;

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

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

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

@ -3,7 +3,7 @@
.memo-wrapper {
.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 {
@apply border-gray-200;

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

@ -2,16 +2,5 @@
@import "./memos-header.less";
.memos-wrapper {
@apply w-full h-full overflow-x-hidden grid;
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;
}
@apply w-full h-full overflow-x-hidden flex flex-col justify-start items-start px-4 pr-10;
}

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

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

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

@ -101,7 +101,7 @@
> .action-btns-wrapper {
.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 {
.flex(column, flex-start, flex-start);

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

@ -2,7 +2,7 @@
.sidebar-wrapper {
.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();
> .action-btns-container {
@ -19,7 +19,7 @@
> .status-text-container {
.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 {
.flex(column, flex-start, flex-start);

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

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

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

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

3
web/tailwind.config.js
View File

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