enhance(frontend): improve MkTip usability

This commit is contained in:
syuilo 2025-06-06 20:59:01 +09:00
parent 20b8148ddf
commit 4b9b3ced01
3 changed files with 29 additions and 7 deletions

View File

@ -7,7 +7,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!store.r.tips.value[props.k]" :class="[$style.root, { [$style.warn]: warn }]" class="_selectable _gaps_s"> <div v-if="!store.r.tips.value[props.k]" :class="[$style.root, { [$style.warn]: warn }]" class="_selectable _gaps_s">
<div style="font-weight: bold;"><i class="ti ti-bulb"></i> {{ i18n.ts.tip }}:</div> <div style="font-weight: bold;"><i class="ti ti-bulb"></i> {{ i18n.ts.tip }}:</div>
<div><slot></slot></div> <div><slot></slot></div>
<MkButton primary rounded small @click="closeTip()"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton> <div>
<MkButton inline primary rounded small @click="closeTip()"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
<button class="_button" style="padding: 8px; margin-left: 4px;" @click="showMenu"><i class="ti ti-dots"></i></button>
</div>
</div> </div>
</template> </template>
@ -15,6 +18,8 @@ SPDX-License-Identifier: AGPL-3.0-only
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { store } from '@/store.js'; import { store } from '@/store.js';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
import { hideAllTips } from '@/store.js';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
k: keyof (typeof store['s']['tips']); k: keyof (typeof store['s']['tips']);
@ -29,6 +34,18 @@ function closeTip() {
[props.k]: true, [props.k]: true,
}); });
} }
function showMenu(ev: MouseEvent) {
os.popupMenu([{
icon: 'ti ti-bulb-off',
text: i18n.ts.hideAllTips,
danger: true,
action: () => {
hideAllTips();
os.success();
},
}], ev.currentTarget ?? ev.target);
}
</script> </script>
<style lang="scss" module> <style lang="scss" module>

View File

@ -161,7 +161,8 @@ import { prefer } from '@/preferences.js';
import MkRolePreview from '@/components/MkRolePreview.vue'; import MkRolePreview from '@/components/MkRolePreview.vue';
import { signout } from '@/signout.js'; import { signout } from '@/signout.js';
import { migrateOldSettings } from '@/pref-migrate.js'; import { migrateOldSettings } from '@/pref-migrate.js';
import { store, TIPS } from '@/store.js'; import { store } from '@/store.js';
import { hideAllTips as _hideAllTips } from '@/store.js';
const $i = ensureSignin(); const $i = ensureSignin();
@ -210,11 +211,7 @@ function resetAllTips() {
} }
function hideAllTips() { function hideAllTips() {
const v = {}; _hideAllTips();
for (const k of TIPS) {
v[k] = true;
}
store.set('tips', v);
os.success(); os.success();
} }

View File

@ -26,6 +26,14 @@ export const TIPS = [
'abuses', 'abuses',
] as const; ] as const;
export function hideAllTips() {
const v = {};
for (const k of TIPS) {
v[k] = true;
}
store.set('tips', v);
}
/** /**
* (not) * (not)
*/ */