Skip to content

C
canifa_note
Unverified Commit 3a466ad2 authored by boojack's avatar boojack Committed by GitHub
Browse files
Options

chore: update style of home sidebar (#1311)

parent ccf6af4d
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 203 deletions
web/src/components/HomeSidebar.tsx
View file @ 3a466ad2
......@@ -12,7 +12,7 @@ const HomeSidebar = () => {
useEffect(() => {
const handleWindowResize = () => {
if (window.innerWidth < resolution.sm) {
if (window.innerWidth < resolution.md) {
layoutStore.setHomeSidebarStatus(false);
} else {
layoutStore.setHomeSidebarStatus(true);
......@@ -24,22 +24,22 @@ const HomeSidebar = () => {
return (
<div
className={`fixed sm:sticky top-0 left-0 w-full sm:w-56 h-full flex-shrink-0 pointer-events-none sm:pointer-events-auto z-10 ${
className={`fixed md:sticky top-0 left-0 w-full md:w-56 h-full flex-shrink-0 pointer-events-none md:pointer-events-auto z-10 ${
showHomeSidebar && "pointer-events-auto"
}`}
>
<div
className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 sm:!hidden ${
className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 md:!hidden ${
showHomeSidebar && "opacity-60 pointer-events-auto"
}`}
onClick={() => layoutStore.setHomeSidebarStatus(false)}
></div>
<aside
className={`absolute sm:relative top-0 right-0 w-56 pr-2 sm:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-white dark:bg-zinc-800 sm:bg-transparent sm:shadow-none transition-all duration-300 translate-x-full sm:translate-x-0 ${
className={`absolute md:relative top-0 right-0 w-56 pr-2 md:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-white dark:bg-zinc-800 md:bg-transparent md:shadow-none transition-all duration-300 translate-x-full md:translate-x-0 ${
showHomeSidebar && "!translate-x-0 shadow-2xl"
}`}
>
<div className="pl-6 pr-4 mb-4 w-full">
<div className="px-4 pr-8 mb-4 w-full">
<SearchBar />
</div>
<UsageHeatMap />
......
web/src/components/ShortcutList.tsx
View file @ 3a466ad2
......@@ -7,7 +7,6 @@ import useLoading from "../hooks/useLoading";
import Icon from "./Icon";
import toastHelper from "./Toast";
import showCreateShortcutDialog from "./CreateShortcutDialog";
import "../less/shortcut-list.less";
const ShortcutList = () => {
const { t } = useTranslation();
......@@ -37,14 +36,17 @@ const ShortcutList = () => {
}, []);
return (
<div className="shortcuts-wrapper">
<p className="title-text">
<span className="normal-text">{t("common.shortcuts")}</span>
<button className="btn" onClick={() => showCreateShortcutDialog()}>
<Icon.Plus className="icon-img" />
<div className="flex flex-col justify-start items-start w-full py-0 px-1 mt-2 h-auto shrink-0 flex-nowrap hide-scrollbar">
<div className="flex flex-row justify-start items-center w-full px-4">
<span className="text-sm leading-6 font-mono text-gray-400">{t("common.shortcuts")}</span>
<button
className="flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-700 rounded ml-2 hover:shadow"
onClick={() => showCreateShortcutDialog()}
>
<Icon.Plus className="w-4 h-4 text-gray-400" />
</button>
</p>
<div className="shortcuts-container">
</div>
<div className="flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2">
{sortedShortcuts.map((s) => {
return <ShortcutContainer key={s.id} shortcut={s} isActive={s.id === Number(query?.shortcutId)} />;
})}
......@@ -117,24 +119,39 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
return (
<>
<div className={`shortcut-container ${isActive ? "active" : ""}`} onClick={handleShortcutClick}>
<div className="shortcut-text-container">
<span className="shortcut-text">{shortcut.title}</span>
<div
className="relative group flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white dark:hover:bg-zinc-700"
onClick={handleShortcutClick}
>
<div
className={`flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black dark:text-gray-200 ${
isActive && "text-green-600"
}`}
>
<span className="truncate">{shortcut.title}</span>
</div>
<div className="btns-container">
<span className="action-btn toggle-btn">
<Icon.MoreHorizontal className="icon-img" />
<div className="flex-row justify-end items-center hidden group/btns group-hover:flex shrink-0">
<span className="flex flex-row justify-center items-center toggle-btn">
<Icon.MoreHorizontal className="w-4 h-auto" />
</span>
<div className="action-btns-wrapper">
<div className="action-btns-container">
<span className="btn" onClick={handlePinShortcutBtnClick}>
<div className="absolute top-4 right-0 flex-col justify-start items-start w-auto h-auto px-4 pt-3 hidden group-hover/btns:flex z-1">
<div className="flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white dark:bg-zinc-700 shadow">
<span
className="w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
onClick={handlePinShortcutBtnClick}
>
{shortcut.rowStatus === "ARCHIVED" ? t("common.unpin") : t("common.pin")}
</span>
<span className="btn" onClick={handleEditShortcutBtnClick}>
<span
className="w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
onClick={handleEditShortcutBtnClick}
>
{t("common.edit")}
</span>
<span
className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`}
className={`w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800 text-orange-600 ${
showConfirmDeleteBtn && "font-black"
}`}
onClick={handleDeleteMemoClick}
onMouseLeave={handleDeleteBtnMouseLeave}
>
......
web/src/components/TagList.tsx
View file @ 3a466ad2
......@@ -4,7 +4,6 @@ import { useLocationStore, useTagStore } from "../store/module";
import useToggle from "../hooks/useToggle";
import Icon from "./Icon";
import showCreateTagDialog from "./CreateTagDialog";
import "../less/tag-list.less";
interface Tag {
key: string;
......@@ -69,8 +68,8 @@ const TagList = () => {
}, [tagsText]);
return (
<div className="tags-wrapper">
<div className="w-full flex flex-row justify-start items-center px-4 mb-1">
<div className="flex flex-col justify-start items-start w-full py-0 px-1 mt-2 h-auto shrink-0 flex-nowrap hide-scrollbar">
<div className="flex flex-row justify-start items-center w-full px-4">
<span className="text-sm leading-6 font-mono text-gray-400">{t("common.tags")}</span>
<button
onClick={() => showCreateTagDialog()}
......@@ -79,7 +78,7 @@ const TagList = () => {
<Icon.Plus className="w-4 h-4 text-gray-400" />
</button>
</div>
<div className="tags-container">
<div className="flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mt-2 mb-2">
{tags.map((t, idx) => (
<TagItemContainer key={t.text + "-" + idx} tag={t} tagQuery={query?.tag} />
))}
......@@ -115,22 +114,35 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
return (
<>
<div className={`tag-item-container ${isActive ? "active" : ""}`} onClick={handleTagClick}>
<div className="tag-text-container">
<span className="icon-text">#</span>
<span className="tag-text">{tag.key}</span>
<div
className="relative group flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-1 rounded-lg text-base cursor-pointer select-none shrink-0 hover:opacity-60"
onClick={handleTagClick}
>
<div
className={`flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black dark:text-gray-200 ${
isActive && "text-green-600"
}`}
>
<span className="block w-4 shrink-0">#</span>
<span className="truncate">{tag.key}</span>
</div>
<div className="btns-container">
<div className="flex flex-row justify-end items-center">
{hasSubTags ? (
<span className={`action-btn toggle-btn ${showSubTags ? "shown" : ""}`} onClick={handleToggleBtnClick}>
<Icon.ChevronRight className="icon-img" />
<span
className={`flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0 ${showSubTags && "rotate-90"}`}
onClick={handleToggleBtnClick}
>
<Icon.ChevronRight className="w-5 h-5 opacity-80 dark:text-gray-400" />
</span>
) : null}
</div>
</div>
{hasSubTags ? (
<div className={`subtags-container ${showSubTags ? "" : "!hidden"}`}>
<div
className={`w-full flex flex-col justify-start items-start h-auto ml-5 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400 ${
!showSubTags && "!hidden"
}`}
>
{tag.subTags.map((st, idx) => (
<TagItemContainer key={st.text + "-" + idx} tag={st} tagQuery={tagQuery} />
))}
......
web/src/components/UsageHeatMap.tsx
View file @ 3a466ad2
......@@ -7,7 +7,7 @@ import * as utils from "../helpers/utils";
import "../less/usage-heat-map.less";
const tableConfig = {
width: 11,
width: 10,
height: 7,
};
......
web/src/less/shortcut-list.less deleted 100644 → 0
View file @ ccf6af4d
.shortcuts-wrapper {
@apply flex flex-col justify-start items-start w-full py-0 px-2 mt-2 h-auto shrink-0 flex-nowrap hide-scrollbar;
> .title-text {
@apply flex flex-row justify-start items-center w-full px-4;
> .normal-text {
@apply text-sm leading-6 font-mono text-gray-400;
}
> .btn {
@apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-700 rounded ml-2 hover:shadow;
> .icon-img {
@apply w-4 h-4 text-gray-400;
}
}
}
> .shortcuts-container {
@apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2;
> .shortcut-container {
@apply relative flex flex-row justify-between items-center w-full h-10 py-0 px-4 mt-px first:mt-2 rounded-lg text-base cursor-pointer select-none shrink-0 hover:bg-white dark:hover:bg-zinc-700;
&:hover {
> .btns-container {
@apply flex;
}
}
&.active {
> .shortcut-text-container {
@apply !text-green-600;
}
}
> .shortcut-text-container {
@apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black dark:text-gray-200;
> .icon-text {
@apply block w-4 shrink-0;
}
> .shortcut-text {
@apply truncate;
}
}
> .btns-container {
@apply flex-row justify-end items-center hidden shrink-0;
> .action-btn {
@apply flex flex-row justify-center items-center;
&.toggle-btn {
@apply text-gray-600 dark:text-gray-400;
> .icon-img {
@apply w-4 h-auto;
}
&:hover {
& + .action-btns-wrapper {
@apply flex;
}
}
}
}
> .action-btns-wrapper {
@apply absolute top-6 right-0 flex-col justify-start items-start w-auto h-auto px-4 pt-3 hidden z-1;
> .action-btns-container {
@apply flex flex-col justify-start items-start w-24 h-auto p-1 whitespace-nowrap rounded-md bg-white dark:bg-zinc-700;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
> .btn {
@apply w-full text-sm leading-6 py-1 px-3 rounded text-left dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800;
&.delete-btn {
@apply text-orange-600;
&.final-confirm {
@apply font-black;
}
}
}
}
&:hover {
@apply flex;
}
}
}
}
}
}
web/src/less/tag-list.less deleted 100644 → 0
View file @ ccf6af4d
.tags-wrapper {
@apply flex flex-col justify-start items-start px-2 w-full h-auto flex-nowrap pb-4 mt-2 grow hide-scrollbar;
> .tags-container {
@apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2 mt-1;
.subtags-container {
@apply flex flex-col justify-start items-start h-auto mt-1 ml-5 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400;
width: calc(100% - 18px);
min-width: 80px;
> .tag-item-container {
@apply first:mt-0;
}
}
.tag-item-container {
@apply flex flex-row justify-between items-center w-full h-10 py-0 px-4 rounded-lg text-base shrink-0 select-none cursor-pointer hover:bg-white dark:hover:bg-zinc-700;
&.active {
> .tag-text-container {
@apply !text-green-600;
}
}
> .tag-text-container {
@apply flex flex-row justify-start items-center overflow-hidden shrink-0 leading-5 text-black dark:text-gray-200;
max-width: calc(100% - 24px);
> .icon-text {
@apply block w-4 shrink-0;
}
> .tag-text {
@apply truncate;
}
}
> .btns-container {
@apply flex flex-row justify-end items-center;
> .action-btn {
@apply flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0;
> .icon-img {
@apply w-5 h-5 opacity-80 dark:text-gray-400;
}
&.shown {
@apply rotate-90;
}
}
}
}
> .tip-text {
@apply w-full bg-gray-50 dark:bg-zinc-700 mt-2 px-4 py-1 leading-6 rounded text-sm text-gray-400 font-mono;
}
}
}
web/src/less/usage-heat-map.less
View file @ 3a466ad2
.usage-heat-map-wrapper {
@apply flex flex-row justify-start items-center flex-nowrap w-full h-32 pl-6 pb-3 shrink-0;
@apply flex flex-row justify-start items-center flex-nowrap w-full h-32 pl-4 pb-3 shrink-0;
> .usage-heat-map {
@apply h-full grid grid-rows-7;
width: 196px;
grid-template-columns: repeat(11, 1fr);
grid-auto-flow: column;
@apply w-full h-full grid grid-rows-7 grid-cols-10 grid-flow-col;
> .stat-wrapper {
> .stat-container {
......@@ -41,10 +38,10 @@
}
> .day-tip-text-container {
@apply w-6 h-full grid grid-rows-7;
@apply w-8 h-full grid grid-rows-7;
> .tip-text {
@apply pl-1 w-full h-full text-right font-mono text-gray-400;
@apply pl-1 w-full h-full text-left font-mono text-gray-400;
font-size: 10px;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment