mirror of
https://github.com/usememos/memos.git
synced 2025-02-16 03:12:13 +01:00
chore: update styles
This commit is contained in:
boojack
parent
b1adaf9c4e
commit
72d36b964a
@ -9,6 +9,7 @@ import { showDialog } from "./Dialog";
|
||||
import Only from "./common/OnlyWhen";
|
||||
import Image from "./Image";
|
||||
import "../less/memo-card-dialog.less";
|
||||
import "../less/memo-content.less";
|
||||
|
||||
interface LinkedMemo extends FormattedMemo {
|
||||
dateStr: string;
|
||||
|
||||
@ -29,11 +29,6 @@ const MyAccountSection: React.FC<Props> = () => {
|
||||
};
|
||||
|
||||
const handleConfirmEditUsernameBtnClick = async () => {
|
||||
if (user.name === "guest") {
|
||||
toastHelper.info("Do not change my username");
|
||||
return;
|
||||
}
|
||||
|
||||
if (username === user.name) {
|
||||
return;
|
||||
}
|
||||
@ -61,11 +56,6 @@ const MyAccountSection: React.FC<Props> = () => {
|
||||
};
|
||||
|
||||
const handleChangePasswordBtnClick = () => {
|
||||
if (user.name === "guest") {
|
||||
toastHelper.info("Do not change my password");
|
||||
return;
|
||||
}
|
||||
|
||||
showChangePasswordDialog();
|
||||
};
|
||||
|
||||
|
||||
@ -4,7 +4,6 @@ import appContext from "../stores/appContext";
|
||||
import useToggle from "../hooks/useToggle";
|
||||
import useLoading from "../hooks/useLoading";
|
||||
import utils from "../helpers/utils";
|
||||
import Only from "./common/OnlyWhen";
|
||||
import toastHelper from "./Toast";
|
||||
import showCreateShortcutDialog from "./CreateShortcutDialog";
|
||||
import "../less/shortcut-list.less";
|
||||
@ -46,13 +45,6 @@ const ShortcutList: React.FC<Props> = () => {
|
||||
<img src="/icons/add.svg" alt="add shortcut" />
|
||||
</span>
|
||||
</p>
|
||||
<Only when={loadingState.isSucceed && sortedShortcuts.length === 0}>
|
||||
<div className="create-shortcut-btn-container">
|
||||
<span className="btn" onClick={() => showCreateShortcutDialog()}>
|
||||
New shortcut
|
||||
</span>
|
||||
</div>
|
||||
</Only>
|
||||
<div className="shortcuts-container">
|
||||
{sortedShortcuts.map((s) => {
|
||||
return <ShortcutContainer key={s.id} shortcut={s} isActive={s.id === shortcutId} />;
|
||||
|
||||
@ -2,23 +2,15 @@
|
||||
|
||||
.dialog-wrapper.memo-card-dialog {
|
||||
> .dialog-container {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
@apply p-0 bg-transparent;
|
||||
|
||||
> * {
|
||||
flex-shrink: 0;
|
||||
@apply shrink-0;
|
||||
}
|
||||
|
||||
> .memo-card-container {
|
||||
position: relative;
|
||||
.flex(column, flex-start, flex-start);
|
||||
width: 512px;
|
||||
min-height: 64px;
|
||||
max-width: 100%;
|
||||
padding: 12px 24px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 8px;
|
||||
background-color: @bg-paper-yellow;
|
||||
@apply relative w-128 max-w-full py-3 px-6 mb-3 rounded-lg bg-yellow-200;
|
||||
|
||||
> * {
|
||||
z-index: 1;
|
||||
@ -26,16 +18,10 @@
|
||||
|
||||
> .header-container {
|
||||
.flex(row, space-between, center);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
@apply w-full h-auto pb-0 my-0;
|
||||
|
||||
> .time-text {
|
||||
font-size: 14px;
|
||||
color: gray;
|
||||
@apply font-mono;
|
||||
@apply text-sm text-gray-500 font-mono;
|
||||
}
|
||||
|
||||
> .btns-container {
|
||||
@ -43,18 +29,10 @@
|
||||
|
||||
> .btn {
|
||||
.flex(row, center, center);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
}
|
||||
@apply w-6 h-6 ml-1 rounded hover:bg-white;
|
||||
|
||||
> .icon-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@apply w-5 h-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -62,65 +40,36 @@
|
||||
|
||||
> .memo-container {
|
||||
.flex(column, flex-start, flex-start);
|
||||
width: 100%;
|
||||
padding-top: 8px;
|
||||
@apply w-full pt-2;
|
||||
|
||||
> .memo-content-text {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
@apply w-full text-base leading-6;
|
||||
|
||||
.tag-span {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
color: @text-blue;
|
||||
background-color: unset;
|
||||
cursor: unset;
|
||||
@apply p-0 text-blue-600 text-base bg-transparent cursor-auto;
|
||||
}
|
||||
}
|
||||
|
||||
> .images-wrapper {
|
||||
.flex(row, flex-start, flex-start);
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
@apply w-full mt-2 overflow-x-auto overflow-y-hidden;
|
||||
padding-bottom: 2px;
|
||||
.pretty-scroll-bar(0, 2px);
|
||||
|
||||
> .memo-img {
|
||||
margin-right: 8px;
|
||||
width: auto;
|
||||
height: 128px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
overflow-y: hidden;
|
||||
@apply mr-2 w-auto h-32 shrink-0 grow-0 overflow-y-hidden hover:border-gray-400 last:mr-0;
|
||||
.hide-scroll-bar();
|
||||
|
||||
&:hover {
|
||||
border-color: lightgray;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
> img {
|
||||
width: auto;
|
||||
@apply w-auto rounded-lg;
|
||||
max-height: 128px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .normal-text {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
@apply mt-2 text-sm text-gray-500;
|
||||
}
|
||||
|
||||
> .layer-container,
|
||||
@ -150,38 +99,17 @@
|
||||
|
||||
> .linked-memos-wrapper {
|
||||
.flex(column, flex-start, flex-start);
|
||||
width: 512px;
|
||||
max-width: 100%;
|
||||
margin-top: 8px;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
@apply w-128 max-w-full mt-2 py-3 px-6 rounded-lg bg-white last:mb-8;
|
||||
|
||||
> .normal-text {
|
||||
font-size: 13px;
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
> .linked-memo-container {
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
margin-top: 8px;
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
@apply text-sm leading-6 mt-2 cursor-pointer max-w-full truncate hover:opacity-80;
|
||||
|
||||
> .time-text {
|
||||
color: gray;
|
||||
@apply font-mono;
|
||||
@apply font-mono text-gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,10 +25,10 @@
|
||||
@apply relative w-full text-base m-2;
|
||||
|
||||
> .normal-text {
|
||||
@apply absolute top-3 left-3 pl-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none;
|
||||
@apply absolute top-3 left-3 px-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none;
|
||||
|
||||
&.not-null {
|
||||
@apply text-sm top-0 leading-4 bg-white;
|
||||
@apply text-sm top-0 leading-4 bg-white rounded;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -132,13 +132,13 @@ const Signin: React.FC<Props> = () => {
|
||||
className={`btn guest-signin ${signinBtnsClickLoadingState.isLoading ? "requesting" : ""}`}
|
||||
onClick={handleAutoSigninAsGuestBtnClick}
|
||||
>
|
||||
👉 Login as Guest quickly
|
||||
👉 Quick login as a guest
|
||||
</div>
|
||||
<div
|
||||
className={`btn ${signinBtnsClickLoadingState.isLoading ? "requesting" : ""}`}
|
||||
onClick={handleSwitchAccountSigninBtnClick}
|
||||
>
|
||||
I have an account
|
||||
Sign in/up with account
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@ -165,7 +165,7 @@ const Signin: React.FC<Props> = () => {
|
||||
</button>
|
||||
<span className="split-text">/</span>
|
||||
<button
|
||||
className={`btn signin-btn ${signinBtnsClickLoadingState.isLoading ? "requesting" : ""}`}
|
||||
className={`btn signup-btn ${signinBtnsClickLoadingState.isLoading ? "requesting" : ""}`}
|
||||
onClick={() => handleSigninBtnsClick("signup")}
|
||||
>
|
||||
Sign up
|
||||
@ -176,7 +176,7 @@ const Signin: React.FC<Props> = () => {
|
||||
className={`btn signin-btn ${signinBtnsClickLoadingState.isLoading ? "requesting" : ""}`}
|
||||
onClick={() => handleSigninBtnsClick("signin")}
|
||||
>
|
||||
Login
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user