enhance(frontend): improve MkTip usability
This commit is contained in:
parent
20b8148ddf
commit
4b9b3ced01
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
@ -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「設定」)
|
||||
*/
|
||||
|
|
Loading…
Reference in New Issue