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

chore: update icon button styles

Browse Source
This commit is contained in:
boojack 2022-07-19 21:46:38 +08:00
parent a73ee7aefc
commit 5da4c98f05
7 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/Memo.tsx
View File

@ -42,6 +42,7 @@ const Memo: React.FC<Props> = (props: Props) => {
const [createdAtStr, setCreatedAtStr] = useState<string>(getFormatedMemoCreatedAtStr(memo.createdTs));
const memoContainerRef = useRef<HTMLDivElement>(null);
const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
const isVisitorMode = userService.isVisitorMode();
useEffect(() => {
if (!memoContainerRef) {
@ -174,7 +175,7 @@ const Memo: React.FC<Props> = (props: Props) => {
<Only when={memo.pinned}>
<span className="status-text">PINNED</span>
</Only>
<Only when={memo.visibility === "PUBLIC"}>
<Only when={memo.visibility === "PUBLIC" && !isVisitorMode}>
<span className="status-text">PUBLIC</span>
</Only>
</div>

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

@ -27,7 +27,7 @@ const UserBanner: React.FC<Props> = () => {
setUsername(user.name);
setCreatedDays(Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdTs)) / 1000 / 3600 / 24));
}
}, []);
}, [isVisitorMode, user, owner]);
const handleUsernameClick = useCallback(() => {
locationService.clearQuery();

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

@ -1,12 +1,10 @@
@import "../mixin.less";
.selector-wrapper {
.flex(column, flex-start, flex-start);
@apply relative h-7;
@apply flex flex-col justify-start items-start relative h-7;
> .current-value-container {
.flex(row, space-between, center);
@apply w-full h-full rounded px-2 pr-1 bg-white border cursor-pointer select-none;
@apply flex flex-row justify-between items-center w-full h-full rounded px-2 pr-1 bg-white border cursor-pointer select-none;
&:hover,
&.active {
@ -19,8 +17,7 @@
}
> .arrow-text {
.flex(row, center, center);
@apply w-4 shrink-0;
@apply flex flex-row justify-center items-center w-4 shrink-0;
> .icon-img {
@apply w-4 h-auto opacity-40;
@ -29,16 +26,14 @@
}
> .items-wrapper {
.flex(column, flex-start, flex-start);
@apply absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white rounded-md overflow-y-auto;
@apply flex flex-col justify-start items-start absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white rounded-md overflow-y-auto z-1;
min-width: calc(100% + 16px);
max-height: 256px;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
.hide-scroll-bar();
> .item-container {
.flex(column, flex-start, flex-start);
@apply w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100;
@apply flex flex-col justify-start items-start w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100;
&.selected {
color: @text-green;

2
web/src/less/daily-review-dialog.less
View File

@ -17,7 +17,7 @@
@apply flex flex-row justify-start items-center;
> .btn-text {
@apply w-6 h-6 mr-2 rounded cursor-pointer select-none last:mr-0 hover:bg-gray-200;
@apply w-6 h-6 mr-2 rounded cursor-pointer select-none text-gray-600 last:mr-0 hover:bg-gray-200;
> .icon-img {
@apply w-full h-auto;

2
web/src/less/memo-card-dialog.less
View File

@ -27,7 +27,7 @@
> .btn {
.flex(row, center, center);
@apply w-6 h-6 ml-2 rounded hover:bg-white;
@apply w-6 h-6 ml-2 rounded text-gray-600 hover:bg-white;
}
}
}

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

@ -46,7 +46,7 @@
@apply w-full flex flex-row justify-between items-center border-b border-gray-100 p-1 mb-1;
> .btn {
@apply relative w-7 h-7 p-1;
@apply relative w-7 h-7 p-1 text-gray-600;
&:hover > .tip-text {
@apply block;

4
web/src/pages/Home.tsx
View File

@ -1,5 +1,6 @@
import { useEffect } from "react";
import { locationService, userService } from "../services";
import { useAppSelector } from "../store";
import useLoading from "../hooks/useLoading";
import Only from "../components/common/OnlyWhen";
import Sidebar from "../components/Sidebar";
@ -11,6 +12,7 @@ import toastHelper from "../components/Toast";
import "../less/home.less";
function Home() {
const location = useAppSelector((state) => state.location);
const loadingState = useLoading();
useEffect(() => {
@ -35,7 +37,7 @@ function Home() {
}
loadingState.setFinish();
});
}, []);
}, [location]);
return (
<section className="page-wrapper home">