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 style="font-weight: bold;"><i class="ti ti-bulb"></i> {{ i18n.ts.tip }}:</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>
</template>
@ -15,6 +18,8 @@ SPDX-License-Identifier: AGPL-3.0-only
import { i18n } from '@/i18n.js';
import { store } from '@/store.js';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
import { hideAllTips } from '@/store.js';
const props = withDefaults(defineProps<{
k: keyof (typeof store['s']['tips']);
@ -29,6 +34,18 @@ function closeTip() {
[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>
<style lang="scss" module>

View File

@ -161,7 +161,8 @@ import { prefer } from '@/preferences.js';
import MkRolePreview from '@/components/MkRolePreview.vue';
import { signout } from '@/signout.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();
@ -210,11 +211,7 @@ function resetAllTips() {
}
function hideAllTips() {
const v = {};
for (const k of TIPS) {
v[k] = true;
}
store.set('tips', v);
_hideAllTips();
os.success();
}

View File

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