Skip to content

Commit 87a5024

Browse files
std-microblockstd-microblock
committed
feat: click mod name to make comments
close #27
1 parent 02175ba commit 87a5024

5 files changed

Lines changed: 89 additions & 25 deletions

File tree

‎resources/dist.rc‎

768 Bytes
Binary file not shown.

‎src/celemod-ui/src/context/modManage.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
useStorage,
77
initGamePath,
88
useCurrentEverestVersion,
9+
initModComments,
910
} from '../states';
1011
import { useEffect, useMemo } from 'preact/hooks';
1112
import { createPopup } from 'src/components/Popup';
@@ -14,6 +15,8 @@ import { ProgressIndicator } from 'src/components/Progress';
1415

1516
let lastGamePath = '';
1617
export const createModManageContext = () => {
18+
initModComments();
19+
1720
const { setInstalledMods } = useInstalledMods();
1821

1922
const [gamePath] = useGamePath();

‎src/celemod-ui/src/routes/Manage.scss‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
.modList {
88

99
.title {
10+
1011
html[lang="pt-BR"] &,
1112
html[lang="ru-RU"] & {
1213
font-size: 16px;
@@ -36,8 +37,9 @@
3637
}
3738

3839
button {
39-
html[lang="pt-BR"] & ,
40-
html[lang="ru-RU"] &{
40+
41+
html[lang="pt-BR"] &,
42+
html[lang="ru-RU"] & {
4143
font-size: 10px !important;
4244
}
4345
}
@@ -157,7 +159,7 @@
157159
border-radius: 100px;
158160
}
159161

160-
162+
161163
}
162164
}
163165

@@ -170,8 +172,26 @@
170172

171173
.modVersion {
172174
font-size: 10px;
173-
margin: 0 6px;
175+
margin-left: 6px;
174176
display: inline-block;
175177
color: rgba(255, 255, 255, 0.4);
176178
}
179+
180+
.modComment {
181+
font-size: 15px;
182+
margin-left: 6px;
183+
display: inline-block;
184+
color: rgba(255, 255, 255, 0.575);
185+
cursor: text;
186+
}
187+
188+
.modCommentInput {
189+
margin: 0 6px;
190+
padding: 0 6px;
191+
border-radius: 10px;
192+
border: none;
193+
background: #222;
194+
color: theme.$fg;
195+
box-shadow: 0 2px 5px #00000040;
196+
}
177197
}

‎src/celemod-ui/src/routes/Manage.tsx‎

Lines changed: 59 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
useCurrentBlacklistProfile,
99
useGamePath,
1010
useInstalledMods,
11+
useModComments,
1112
useStorage,
1213
} from '../states';
1314
import { useContext, useEffect, useMemo, useRef, useState } from 'preact/hooks';
@@ -69,6 +70,8 @@ const modListContext = createContext<{
6970
version: string;
7071
gb_file: string;
7172
}[];
73+
modComments: { [name: string]: string };
74+
setModComment: (name: string, comment: string) => void;
7275
} | null>({} as any);
7376

7477
const ModBadge = ({
@@ -128,20 +131,20 @@ const ModMissing = ({ name, version, optional }: MissingModDepInfo) => {
128131
onClick={
129132
gbFileID !== null
130133
? async () => {
131-
setState(_i18n.t('下载中'));
132-
download.downloadMod(name, gbFileID, {
133-
onProgress: (task, progress) => {
134-
setState(`${progress}% (${task.subtasks.length})`);
135-
},
136-
onFinished: () => {
137-
setState(_i18n.t('下载完成'));
138-
ctx?.reloadMods();
139-
},
140-
onFailed: () => {
141-
setState(_i18n.t('下载失败'));
142-
},
143-
});
144-
}
134+
setState(_i18n.t('下载中'));
135+
download.downloadMod(name, gbFileID, {
136+
onProgress: (task, progress) => {
137+
setState(`${progress}% (${task.subtasks.length})`);
138+
},
139+
onFinished: () => {
140+
setState(_i18n.t('下载完成'));
141+
ctx?.reloadMods();
142+
},
143+
onFailed: () => {
144+
setState(_i18n.t('下载失败'));
145+
},
146+
});
147+
}
145148
: undefined
146149
}
147150
>
@@ -214,12 +217,19 @@ const ModLocal = ({
214217

215218
const isAlwaysOn = ctx?.alwaysOnMods.includes(name);
216219

220+
const [editingComment, setEditingComment] = useState(false);
221+
const refCommentInput = useRef<HTMLInputElement>(null);
222+
useEffect(() => {
223+
if (editingComment) {
224+
refCommentInput.current?.focus();
225+
}
226+
}, [editingComment]);
227+
217228
return (
218229
<div className={`m-mod ${enabled && 'enabled'}`} key={id}>
219230
<span
220-
className={`expandBtn ${expanded && 'expanded'} ${
221-
hasDeps && 'clickable'
222-
}`}
231+
className={`expandBtn ${expanded && 'expanded'} ${hasDeps && 'clickable'
232+
}`}
223233
onClick={() => setExpanded(!expanded)}
224234
>
225235
{hasDeps && (!optional || ctx?.fullTree) ? (
@@ -245,8 +255,8 @@ const ModLocal = ({
245255
{isAlwaysOn
246256
? _i18n.t('始终开启')
247257
: enabled
248-
? _i18n.t('已启用')
249-
: _i18n.t('已禁用')}
258+
? _i18n.t('已启用')
259+
: _i18n.t('已禁用')}
250260
</ModBadge>
251261

252262
{enabled &&
@@ -324,7 +334,28 @@ const ModLocal = ({
324334
</ModBadge>
325335
)}
326336

327-
<span>{name}</span>
337+
<span
338+
className="modName"
339+
onClick={() => setEditingComment(true)}
340+
>{name}</span>
341+
{!editingComment && ctx?.modComments[name] && (
342+
<span className="modComment" onClick={() => {
343+
setEditingComment(true);
344+
}}>{ctx?.modComments[name]}</span>
345+
)}
346+
{
347+
editingComment && (
348+
<input type="text" value={ctx?.modComments[name] ?? ''} ref={refCommentInput} className="modCommentInput"
349+
onInput={(e) => ctx?.setModComment(name, (e.target as any).value)}
350+
onKeyUp={(e) => {
351+
if (e.keyCode === 257 || e.keyCode === 256) { // enter or esc
352+
setEditingComment(false);
353+
}
354+
}}
355+
onBlur={() => setEditingComment(false)} />
356+
)
357+
}
358+
328359
<span className="modVersion">{version}</span>
329360
{(!optional || ctx?.fullTree) && expanded && (
330361
<div className={`childTree ${expanded && 'expanded'}`}>
@@ -660,6 +691,7 @@ export const Manage = () => {
660691
modsTreeRef.current?.scrollTo(0, 0);
661692
}, [excludeDependents]);
662693
const globalCtx = useGlobalContext();
694+
const [modComments, setModComments] = useModComments()
663695
const manageCtx = useMemo(
664696
() => ({
665697
hasUpdateMods,
@@ -668,6 +700,12 @@ export const Manage = () => {
668700
else setAlwaysOnMods(alwaysOnMods.filter((v) => v !== name));
669701
},
670702
alwaysOnMods,
703+
modComments, setModComment(name: string, comment: string) {
704+
setModComments({
705+
...modComments,
706+
[name]: comment
707+
});
708+
},
671709
batchSwitchMod: (names: string[], enabled: boolean) => {
672710
if (!enabled) names = names.filter((v) => !alwaysOnMods.includes(v));
673711
if (!currentProfile) return;
@@ -804,6 +842,7 @@ export const Manage = () => {
804842
fullTree,
805843
showUpdate,
806844
alwaysOnMods,
845+
modComments
807846
]
808847
);
809848

‎src/celemod-ui/src/states.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,4 +162,6 @@ export const [initUseMultiThread, useUseMultiThread] = createPersistedStateByKey
162162

163163
export const [initAlwaysOnMods, useAlwaysOnMods] = createPersistedStateByKey('alwaysOnMods', [])
164164

165-
export const [initSearchSort, useSearchSort] = createPersistedStateByKey<'new' | 'updateAdded' | 'updated' | 'views' | 'likes'>('searchSort', 'likes')
165+
export const [initSearchSort, useSearchSort] = createPersistedStateByKey<'new' | 'updateAdded' | 'updated' | 'views' | 'likes'>('searchSort', 'likes')
166+
167+
export const [initModComments, useModComments] = createPersistedStateByKey('modComments', {})

0 commit comments

Comments
 (0)