puniko/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

client: add default margin to FormSwitch and MkButton

Browse source
This commit is contained in:
Johann150 2022-12-18 00:11:32 +01:00
parent 263fb94f3f
commit 4574db523a
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
4 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CONTRIBUTING.md
View file

@ -316,8 +316,8 @@ This does not apply when using the Composition API since reactivation is manual.
If you import json in TypeScript, the json file will be spit out together with the TypeScript file into the dist directory when compiling with tsc. This behavior may cause unintentional rewriting of files, so when importing json files, be sure to check whether the files are allowed to be rewritten or not. If you do not want the file to be rewritten, you should make sure that the file can be rewritten by importing the json file. If you do not want the file to be rewritten, use functions such as `fs.readFileSync` to read the file instead of importing it. If you import json in TypeScript, the json file will be spit out together with the TypeScript file into the dist directory when compiling with tsc. This behavior may cause unintentional rewriting of files, so when importing json files, be sure to check whether the files are allowed to be rewritten or not. If you do not want the file to be rewritten, you should make sure that the file can be rewritten by importing the json file. If you do not want the file to be rewritten, use functions such as `fs.readFileSync` to read the file instead of importing it.
### Component style definitions do not have a `margin` ### Component style definitions do not have a `margin`
Setting the `margin` of a component may be confusing. ~~Setting the `margin` of a component may be confusing. Instead, it should always be the user of a component that sets a `margin`.~~
Instead, it should always be the user of a component that sets a `margin`. This was a philosophy used previously. Hoever it now seems a better idea to add a default margin to the top level element of a component which can be easily overwritten on the usage of that component with a `style` attribute.
### Do not use the word "follow" in HTML class names ### Do not use the word "follow" in HTML class names
This has caused things to be blocked by an ad blocker in the past. This has caused things to be blocked by an ad blocker in the past.

3
packages/client/src/components/form/switch.vue
View file

@ -13,7 +13,7 @@
<div class="knob"></div> <div class="knob"></div>
</span> </span>
<span class="label"> <span class="label">
<!-- TODO: 無名slotの方は廃止 --> <!-- TODO: do not use unnamed slot -->
<span @click="toggle"><slot name="label"></slot><slot></slot></span> <span @click="toggle"><slot name="label"></slot><slot></slot></span>
<p class="caption"><slot name="caption"></slot></p> <p class="caption"><slot name="caption"></slot></p>
</span> </span>
@ -50,6 +50,7 @@ const toggle = () => {
position: relative; position: relative;
display: flex; display: flex;
transition: all 0.2s ease; transition: all 0.2s ease;
margin: var(--margin) 0;
> * { > * {
user-select: none; user-select: none;

1
packages/client/src/components/ui/button.vue
View file

@ -134,6 +134,7 @@ function onMousedown(evt: MouseEvent): void {
overflow: clip; overflow: clip;
box-sizing: border-box; box-sizing: border-box;
transition: background 0.1s ease; transition: background 0.1s ease;
margin: var(--margin) 0;
&:not(:disabled):hover { &:not(:disabled):hover {
background: var(--buttonHoverBg); background: var(--buttonHoverBg);

2
packages/client/src/pages/admin/emojis.vue
View file

@ -9,7 +9,7 @@
<template #prefix><i class="fas fa-search"></i></template> <template #prefix><i class="fas fa-search"></i></template>
<template #label>{{ i18n.ts.search }}</template> <template #label>{{ i18n.ts.search }}</template>
</FormInput> </FormInput>
<FormSwitch v-model="selectMode" style="margin: 8px 0;"> <FormSwitch v-model="selectMode">
<template #label>{{ i18n.ts.selectMode }}</template> <template #label>{{ i18n.ts.selectMode }}</template>
</FormSwitch> </FormSwitch>
<div v-if="selectMode" style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div v-if="selectMode" style="display: flex; gap: var(--margin); flex-wrap: wrap;">