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 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>
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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「設定」)
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in New Issue