Skip to content

fix: optimize bind-i18n styles #925

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chilingling merged 5 commits into from
Dec 13, 2024
Merged

fix: optimize bind-i18n styles #925

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
57b588e
fix: optimize bind-i18n styles
gene9831 Dec 5, 2024
d6a7e4a
fix: fix with of drop options
gene9831 Dec 5, 2024
9435b50
fix: fix padding of drop panel
gene9831 Dec 5, 2024
c3c6a39
fix: fix some issues
gene9831 Dec 9, 2024
134dd0c
remove margin of tiny-button
gene9831 Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 29 additions & 38 deletions packages/common/component/BindI18n.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,29 @@
<tiny-select
ref="selectRef"
v-model="selectValue"
placeholder="请根据显示值搜索"
placeholder="请选择多语言文案"
filterable
is-drop-inherit-width
:filter-method="filterMethod"
@change="selectI18n"
>
<tiny-option v-for="item in langData" :key="item.key" :label="item[currentLang]" :value="item.key">
<div style="display: flex">
<span style="flex: 1">{{ item.key }}</span>
<span style="flex: 1">{{ item[currentLang] }}</span>
</div>
<tiny-option v-for="item in langData" :key="item.key" :label="item.key + item[currentLang]" :value="item.key">
</tiny-option>
</tiny-select>
<div v-if="paramsForm.length" class="params-form">
<label>国际化参数配置</label>
<div class="label">国际化参数配置</div>
<div v-for="param in paramsForm" :key="param.name" class="params-item">
<label>{{ param.name }}</label>
<tiny-input v-model="param.value" @update:modelValue="paramsChange"></tiny-input>
</div>
</div>
<slot name="suffix">
<tiny-button type="info" @click="openCreateForm">
<icon-plus class="icon-plus"></icon-plus>
<span>创建新的多语言文案</span>
</tiny-button>
<tiny-button v-if="isBind" type="info" @click="unbindI18n"> 解除关联 </tiny-button>
<div class="bottom-buttons">
<tiny-button v-if="isBind" @click="unbindI18n">解除关联</tiny-button>
<tiny-button type="primary" @click="openCreateForm">
<span>创建新的多语言文案</span>
</tiny-button>
</div>
</slot>
</div>
<div v-show="showEditItem" class="addNewLanguage">
Expand All @@ -43,9 +41,9 @@
<input v-model="editForm[locale.lang]" class="tiny-input__inner" />
</div>
</div>
<div class="add-btns">
<tiny-button type="info" @click="activeI18n">国际化管理 </tiny-button>
<tiny-button type="info" @click="addBindI18n">添加并关联 </tiny-button>
<div class="bottom-buttons">
<tiny-button @click="activeI18n">国际化管理</tiny-button>
<tiny-button type="primary" @click="addBindI18n">添加并关联</tiny-button>
</div>
</div>
</div>
Expand All @@ -57,15 +55,13 @@ import { useLayout, useTranslate } from '@opentiny/tiny-engine-meta-register'
import { PROP_DATA_TYPE } from '../js/constants'
import { utils } from '@opentiny/tiny-engine-utils'
import { Select, Option, Button, Input } from '@opentiny/vue'
import { iconPlus } from '@opentiny/vue-icon'

export default {
components: {
TinySelect: Select,
TinyOption: Option,
TinyButton: Button,
TinyInput: Input,
IconPlus: iconPlus()
TinyInput: Input
},
inheritAttrs: false,
props: {
Expand Down Expand Up @@ -169,10 +165,7 @@ export default {

<style lang="less" scoped>
.languageContent {
text-align: center;
z-index: 99;
margin-top: 5px;
margin-bottom: 16px;

.tiny-svg {
margin-right: 10px;
Expand All @@ -182,16 +175,8 @@ export default {
color: #ccc;
}
}
.tiny-button {
max-width: initial;
padding: 0 12px;
background-color: var(--ti-lowcode-tabs-border-color);
border-color: var(--ti-lowcode-tootip-input-border-color);
color: var(--ti-lowcode-toolbar-icon-color);
&:hover {
background-color: var(--ti-lowcode-canvas-wrap-bg);
border-color: var(--ti-lowcode-tabs-border-color);
}
.tiny-button.tiny-button.tiny-button--default {
margin: 0;
}
.addNewLanguage {
.tiny-input {
Expand All @@ -209,23 +194,29 @@ export default {
.tiny-input__inner {
flex: 1;
}
.add-btns {
text-align: right;
padding: 0 8px;
}
}
}
.params-form {
& > label {
line-height: 30px;
.label {
margin: 16px 0;
font-size: 12px;
line-height: 18px;
}
.params-item + .params-item {
margin-top: 12px;
}
.params-item {
display: flex;
align-items: center;
label {
width: 80px;
}
margin-bottom: 10px;
}
}
.bottom-buttons {
display: flex;
justify-content: flex-end;
margin-top: 16px;
gap: 8px;
}
</style>
24 changes: 20 additions & 4 deletions packages/common/component/I18nInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@
<template #suffix>
<tiny-popover
ref="popoverRef"
width="260"
width="340"
trigger="click"
:visible-arrow="false"
popper-class="lowcode"
popper-class="i18n-input-popover"
@hide="onHide"
>
<div class="popover-content">
<h3 class="title">绑定国际化</h3>
<icon-close class="icon-close" @click="closePopover"></icon-close>
<bind-i18n
ref="addI1i8nRef"
Expand Down Expand Up @@ -124,9 +125,24 @@ export default {
}
}
.popover-content {
text-align: right;
position: relative;

.title {
margin-top: 0;
margin-bottom: 16px;
font-size: 14px;
line-height: 20px;
}
.icon-close {
margin-right: 5px;
position: absolute;
top: 0;
right: 0;
}
}
</style>

<style>
.tiny-popover.tiny-popover.tiny-popper[x-placement].i18n-input-popover {
padding: 20px;
}
</style>
Loading