YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-15 02:40:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

choe: update shortcut actived style

Browse Source
This commit is contained in:
boojack 2022-07-04 21:45:54 +08:00
parent 49666ddaf3
commit 17a61bb65f
3 changed files with 6 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,6 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { locationService, shortcutService } from "../services"; import { locationService, shortcutService } from "../services";
import { useAppSelector } from "../store"; import { useAppSelector } from "../store";
import { UNKNOWN_ID } from "../helpers/consts";
import * as utils from "../helpers/utils"; import * as utils from "../helpers/utils";
import useToggle from "../hooks/useToggle"; import useToggle from "../hooks/useToggle";
import useLoading from "../hooks/useLoading"; import useLoading from "../hooks/useLoading";
@ -113,12 +112,11 @@ 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="shortcut-text">{shortcut.title}</span> <span className="shortcut-text">{shortcut.title}</span>
</div> </div>
<div className="btns-container"> <div className="btns-container">
<span className="action-btn toggle-btn"> <span className="action-btn toggle-btn">
<img className="icon-img" src={`/icons/more${isActive ? "-white" : ""}.svg`} /> <img className="icon-img" src="/icons/more.svg" />
</span> </span>
<div className="action-btns-wrapper"> <div className="action-btns-wrapper">
<div className="action-btns-container"> <div className="action-btns-container">

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

@ -36,7 +36,7 @@
@apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2; @apply flex flex-col justify-start items-start relative w-full h-auto flex-nowrap mb-2;
> .shortcut-container { > .shortcut-container {
@apply 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-gray-200; @apply 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;
&:hover { &:hover {
> .btns-container { > .btns-container {
@ -45,18 +45,13 @@
} }
&.active { &.active {
@apply bg-green-600;
> .shortcut-text-container { > .shortcut-text-container {
> * { @apply text-green-600;
@apply text-white;
}
} }
} }
> .shortcut-text-container { > .shortcut-text-container {
@apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1; @apply flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-black;
color: @text-black;
> .icon-text { > .icon-text {
@apply block w-4 shrink-0; @apply block w-4 shrink-0;

6
web/src/less/tag-list.less
View File

@ -23,13 +23,11 @@
} }
.tag-item-container { .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-gray-200; @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;
&.active { &.active {
> .tag-text-container { > .tag-text-container {
> * { @apply text-green-600;
@apply text-green-600;
}
} }
} }