Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Use "iconClass" instead of "icon" in MkDialog; remove "null" in input field

Browse Source 
Co-authored-by: minneyar <speed@sakabatou.net>
This commit is contained in:
Minneyar 2023-11-07 14:01:24 +00:00 committed by naskya
parent c80b5d3512
commit c03c11c7aa
1 changed files with 56 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
packages/client/src/components/MkDialog.vue
View File

@ -115,7 +115,7 @@
v-if="input && input.type === 'paragraph'" v-if="input && input.type === 'paragraph'"
v-model="inputValue" v-model="inputValue"
autofocus autofocus
:type="paragraph" type="paragraph"
:placeholder="input.placeholder || undefined" :placeholder="input.placeholder || undefined"
> >
</MkTextarea> </MkTextarea>
@ -191,7 +191,7 @@
@click=" @click="
() => { () => {
action.callback(); action.callback();
modal?.close(); modal?.close(null);
} }
" "
>{{ action.text }}</MkButton >{{ action.text }}</MkButton
@ -318,7 +318,7 @@ const inputEl = ref<typeof MkInput>();
function done(canceled: boolean, result?) { function done(canceled: boolean, result?) {
emit("done", { canceled, result }); emit("done", { canceled, result });
modal.value?.close(); modal.value?.close(null);
} }
async function ok() { async function ok() {
@ -359,106 +359,134 @@ function formatDateToYYYYMMDD(date) {
return `${year}-${month}-${day}`; return `${year}-${month}-${day}`;
} }
/**
* Appends a new search parameter to the value in the input field.
* Trims any extra whitespace before and after, then adds a space at the end so a user can immediately
* begin typing a new criteria.
* @param value The value to append.
*/
function appendFilter(value: string) {
return (
[
typeof inputValue.value === "string"
? inputValue.value.trim()
: inputValue.value,
value,
]
.join(" ")
.trim() + " "
);
}
async function openSearchFilters(ev) { async function openSearchFilters(ev) {
await os.popupMenu( await os.popupMenu(
[ [
{ {
icon: `${icon("ph-user")}`, icon: `${iconClass("ph-user")}`,
text: i18n.ts._filters.fromUser, text: i18n.ts._filters.fromUser,
action: () => { action: () => {
os.selectUser().then((user) => { os.selectUser().then((user) => {
inputValue.value += " from:@" + Acct.toString(user); inputValue.value = appendFilter(
"from:@" + Acct.toString(user),
);
}); });
}, },
}, },
{ {
type: "parent", type: "parent",
text: i18n.ts._filters.withFile, text: i18n.ts._filters.withFile,
icon: `${icon("ph-paperclip")}`, icon: `${iconClass("ph-paperclip")}`,
children: [ children: [
{ {
text: i18n.ts.image, text: i18n.ts.image,
icon: `${icon("ph-image-square")}`, icon: `${iconClass("ph-image-square")}`,
action: () => { action: () => {
inputValue.value += " has:image"; inputValue.value = appendFilter("has:image");
}, },
}, },
{ {
text: i18n.ts.video, text: i18n.ts.video,
icon: `${icon("ph-video-camera")}`, icon: `${iconClass("ph-video-camera")}`,
action: () => { action: () => {
inputValue.value += " has:video"; inputValue.value = appendFilter("has:video");
}, },
}, },
{ {
text: i18n.ts.audio, text: i18n.ts.audio,
icon: `${icon("ph-music-note")}`, icon: `${iconClass("ph-music-note")}`,
action: () => { action: () => {
inputValue.value += " has:audio"; inputValue.value = appendFilter("has:audio");
}, },
}, },
{ {
text: i18n.ts.file, text: i18n.ts.file,
icon: `${icon("ph-file")}`, icon: `${iconClass("ph-file")}`,
action: () => { action: () => {
inputValue.value += " has:file"; inputValue.value = appendFilter("has:file");
}, },
}, },
], ],
}, },
{ {
icon: `${icon("ph-link")}`, icon: `${iconClass("ph-link")}`,
text: i18n.ts._filters.fromDomain, text: i18n.ts._filters.fromDomain,
action: () => { action: () => {
inputValue.value += " domain:"; inputValue.value = appendFilter("domain:");
}, },
}, },
{ {
icon: `${icon("ph-calendar-blank")}`, icon: `${iconClass("ph-calendar-blank")}`,
text: i18n.ts._filters.notesBefore, text: i18n.ts._filters.notesBefore,
action: () => { action: () => {
os.inputDate({ os.inputDate({
title: i18n.ts._filters.notesBefore, title: i18n.ts._filters.notesBefore,
}).then((res) => { }).then((res) => {
if (res.canceled) return; if (res.canceled) return;
inputValue.value += inputValue.value = appendFilter(
" before:" + formatDateToYYYYMMDD(res.result); "before:" + formatDateToYYYYMMDD(res.result),
);
}); });
}, },
}, },
{ {
icon: `${icon("ph-calendar-blank")}`, icon: `${iconClass("ph-calendar-blank")}`,
text: i18n.ts._filters.notesAfter, text: i18n.ts._filters.notesAfter,
action: () => { action: () => {
os.inputDate({ os.inputDate({
title: i18n.ts._filters.notesAfter, title: i18n.ts._filters.notesAfter,
}).then((res) => { }).then((res) => {
if (res.canceled) return; if (res.canceled) return;
inputValue.value += inputValue.value = appendFilter(
" after:" + formatDateToYYYYMMDD(res.result); "after:" + formatDateToYYYYMMDD(res.result),
);
}); });
}, },
}, },
{ {
icon: `${icon("ph-eye")}`, icon: `${iconClass("ph-eye")}`,
text: i18n.ts._filters.followingOnly, text: i18n.ts._filters.followingOnly,
action: () => { action: () => {
inputValue.value += " filter:following "; inputValue.value = appendFilter("filter:following");
}, },
}, },
{ {
icon: `${icon("ph-users-three")}`, icon: `${iconClass("ph-users-three")}`,
text: i18n.ts._filters.followersOnly, text: i18n.ts._filters.followersOnly,
action: () => { action: () => {
inputValue.value += " filter:followers "; inputValue.value = appendFilter("filter:followers");
}, },
}, },
], ],
ev.target, ev.target,
{ noReturnFocus: true }, { noReturnFocus: true },
); );
inputEl.value.focus(); inputEl.value?.focus();
inputEl.value.selectRange(inputValue.value.length, inputValue.value.length); // cursor at end if (typeof inputValue.value === "string") {
inputEl.value?.selectRange(
inputValue.value.length,
inputValue.value.length,
); // cursor at end
}
} }
onMounted(() => { onMounted(() => {