Skip to content

Commit fac4130

Browse files
julien-ncjulien-nc
committed
reorganize ManageDaemonConfigModal, no external label
Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
1 parent 2eec435 commit fac4130

1 file changed

Lines changed: 56 additions & 110 deletions

File tree

‎src/components/DaemonConfig/ManageDaemonConfigModal.vue‎

Lines changed: 56 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -10,99 +10,82 @@
1010
<div class="register-daemon-config-body">
1111
<h2>{{ isEdit ? t('app_api', 'Edit the deploy daemon') : t('app_api', 'Register a new deploy daemon') }}</h2>
1212
<div v-if="!isEdit" class="templates">
13-
<div class="external-label" :aria-label="t('app_api', 'Daemon configuration template')">
14-
<label for="daemon-template">{{ t('app_api', 'Daemon configuration template') }}</label>
15-
<NcSelect
16-
id="daemon-template"
17-
v-model="configurationTab"
18-
:label-outside="true"
19-
:options="configurationTemplateOptions"
20-
:placeholder="t('app_api', 'Select a daemon configuration template')" />
21-
</div>
13+
<NcSelect
14+
id="daemon-template"
15+
v-model="configurationTab"
16+
class="ncselect"
17+
:input-label="t('app_api', 'Daemon configuration template')"
18+
:options="configurationTemplateOptions"
19+
:placeholder="t('app_api', 'Select a daemon configuration template')" />
2220
</div>
2321
<form class="daemon-register-form" :aria-label="t('app_api', 'Daemon registration form')">
24-
<div class="external-label" :aria-label="t('app_api', 'Name')">
25-
<label for="daemon-name">
26-
{{ t('app_api', 'Name') }}
27-
<InfoTooltip :text="t('app_api', 'Unique deploy daemon name')" />
28-
</label>
22+
<div class="row" :aria-label="t('app_api', 'Name')">
2923
<NcInputField
3024
id="daemon-name"
3125
v-model="name"
32-
class="ex-input-field"
33-
:disabled="isEdit"
26+
:label="t('app_api', 'Name')"
27+
:readonly="isEdit"
3428
:placeholder="t('app_api', 'Unique deploy daemon name')"
3529
:aria-label="t('app_api', 'Unique deploy Daemon name')"
3630
:error="isDaemonNameInvalid === true"
3731
:helper-text="isDaemonNameValidHelperText" />
32+
<InfoTooltip :text="t('app_api', 'Unique deploy daemon name')" />
3833
</div>
39-
<div class="external-label" :aria-label="t('app_api', 'Display name')">
40-
<label for="daemon-display-name">{{ t('app_api', 'Display name') }}</label>
34+
<div class="row" :aria-label="t('app_api', 'Display name')">
4135
<NcInputField
4236
id="daemon-display-name"
4337
v-model="displayName"
44-
class="ex-input-field"
38+
:label="t('app_api', 'Display name')"
4539
:placeholder="t('app_api', 'Display name')"
4640
:aria-label="t('app_api', 'Display name')" />
4741
</div>
48-
<div class="external-label" :aria-label="t('app_api', 'Deployment method')">
49-
<label for="daemon-deploy-id">{{ t('app_api', 'Deployment method') }}</label>
42+
<div class="row" :aria-label="t('app_api', 'Deployment method')">
5043
<NcSelect
5144
id="daemon-deploy-id"
5245
v-model="acceptsDeployId"
53-
class="ex-input-field"
46+
class="ncselect"
47+
:input-label="t('app_api', 'Deployment method')"
5448
:disabled="isEdit"
5549
:options="deployMethods"
56-
:label-outside="true"
5750
:placeholder="t('app_api', 'Select the daemon deploy method')" />
5851
</div>
59-
<div class="external-label" :aria-label="isHarp ? t('app_api', 'HaRP host') : t('app_api', 'Daemon host')">
60-
<label for="daemon-host">
61-
{{ isHarp ? t('app_api', 'HaRP host') : t('app_api', 'Daemon host') }}
62-
<InfoTooltip :text="daemonHostHelperText" />
63-
</label>
52+
<div class="row" :aria-label="isHarp ? t('app_api', 'HaRP host') : t('app_api', 'Daemon host')">
6453
<NcInputField
6554
id="daemon-host"
6655
v-model="host"
67-
class="ex-input-field"
56+
:label="isHarp ? t('app_api', 'HaRP host') : t('app_api', 'Daemon host')"
6857
:placeholder="daemonHostHelperText"
69-
:aria-label="daemonHostHelperText"
70-
style="max-width: 70%;" />
58+
:aria-label="daemonHostHelperText" />
59+
<InfoTooltip :text="daemonHostHelperText" />
7160
</div>
7261
<div v-if="['http', 'https'].includes(daemonProtocol) && !isPureManual"
73-
class="external-label"
62+
class="row"
7463
:aria-label="isHarp ? t('app_api', 'HaRP shared key') : t('app_api', 'HaProxy password')">
75-
<label for="deploy-config-haproxy-password">
76-
{{ isHarp ? t('app_api', 'HaRP shared key') : t('app_api', 'HaProxy password') }}
77-
<InfoTooltip :text="haProxyPasswordHelperText" />
78-
</label>
7964
<NcPasswordField
8065
id="deploy-config-haproxy-password"
8166
v-model="deployConfig.haproxy_password"
82-
class="ex-input-field"
67+
:label="isHarp ? t('app_api', 'HaRP shared key') : t('app_api', 'HaProxy password')"
8368
:error="isHaProxyPasswordValid === false"
8469
:placeholder="haProxyPasswordHelperText"
8570
:aria-label="haProxyPasswordHelperText"
8671
:helper-text="!isHaProxyPasswordValid ? t('app_api', 'The password must be at least 12 characters long') : ''"
8772
autocomplete="off" />
73+
<InfoTooltip :text="haProxyPasswordHelperText" />
8874
</div>
89-
<div class="external-label" :aria-label="t('app_api', 'Nextcloud URL')">
90-
<label for="nextcloud-url">{{ t('app_api', 'Nextcloud URL') }}</label>
75+
<div class="row" :aria-label="t('app_api', 'Nextcloud URL')">
9176
<NcInputField
9277
id="nextcloud-url"
9378
v-model="nextcloud_url"
94-
class="ex-input-field"
79+
:label="t('app_api', 'Nextcloud URL')"
9580
:helper-text="getNextcloudUrlHelperText"
9681
:input-class="getNextcloudUrlHelperText !== '' ? 'text-warning' : ''"
97-
style="max-width: 70%;"
9882
:placeholder="t('app_api', 'Nextcloud URL')"
9983
:aria-label="t('app_api', 'Nextcloud URL')" />
10084
</div>
10185
<div class="row">
10286
<NcCheckboxRadioSwitch v-if="!isEdit && acceptsDeployId === 'docker-install'"
10387
id="default-deploy-config"
10488
v-model="defaultDaemon"
105-
class="ex-input-field"
10689
:aria-label="t('app_api', 'Set this daemon as the default one')">
10790
{{ t('app_api', 'Set as the default daemon') }}
10891
</NcCheckboxRadioSwitch>
@@ -130,57 +113,43 @@
130113
{{ t('app_api', 'Enable HaRP') }}
131114
</NcCheckboxRadioSwitch>
132115
<div v-if="isHarp" class="harp-options">
133-
<div class="external-label" :aria-label="t('app_api', 'FRP server address')">
134-
<label for="frp-address">
135-
{{ t('app_api', 'FRP server address') }}
136-
<InfoTooltip :text="t('app_api', 'The address (host:port) of the FRP server that should be reachable by the ExApp in the network defined in the \'Docker network\' section.')" />
137-
</label>
116+
<div class="row" :aria-label="t('app_api', 'FRP server address')">
138117
<NcInputField
139118
id="frp-address"
140119
v-model="deployConfig.harp.frp_address"
141-
class="ex-input-field"
120+
:label="t('app_api', 'FRP server address')"
142121
:placeholder="t('app_api', 'FRP server address')"
143122
:aria-label="t('app_api', 'FRP server address')" />
123+
<InfoTooltip :text="t('app_api', 'The address (host:port) of the FRP server that should be reachable by the ExApp in the network defined in the \'Docker network\' section.')" />
144124
</div>
145-
<div class="external-label" :aria-label="t('app_api', 'Docker socket proxy port')">
146-
<label for="harp-port">
147-
{{ t('app_api', 'Docker socket proxy port') }}
148-
<InfoTooltip :text="t('app_api', 'The port in HaRP which the Docker socket proxy connects to. This should be exposed but for the in-built one, it is not required to be exposed or changed.')" />
149-
</label>
125+
<div class="row" :aria-label="t('app_api', 'Docker socket proxy port')">
150126
<NcInputField
151127
id="harp-dsp-port"
152128
v-model="deployConfig.harp.docker_socket_port"
153-
class="ex-input-field"
129+
:label="t('app_api', 'Docker socket proxy port')"
154130
:placeholder="t('app_api', 'Docker socket proxy port')"
155131
:aria-label="t('app_api', 'Docker socket proxy port')" />
132+
<InfoTooltip :text="t('app_api', 'The port in HaRP which the Docker socket proxy connects to. This should be exposed but for the in-built one, it is not required to be exposed or changed.')" />
156133
</div>
157-
<div class="external-label" :aria-label="t('app_api', 'Disable FRP')">
158-
<label for="disable-frp">
159-
{{ t('app_api', 'Disable FRP') }}
160-
<InfoTooltip :text="t('app_api', 'Flag for advanced setups only. Disables the FRP tunnel between ExApps and HaRP.')" />
161-
</label>
134+
<div class="row" :aria-label="t('app_api', 'Disable FRP')">
162135
<NcCheckboxRadioSwitch
163136
id="disable-frp"
164137
v-model="deployConfig.harp.exapp_direct"
165138
:disabled="isEdit"
166139
:aria-label="t('app_api', 'Disable FRP')">
167-
{{ t('app_api', 'Disabled') }}
140+
{{ t('app_api', 'Disable FRP') }}
168141
</NcCheckboxRadioSwitch>
142+
<InfoTooltip :text="t('app_api', 'Flag for advanced setups only. Disables the FRP tunnel between ExApps and HaRP.')" />
169143
</div>
170144
</div>
171145
<template v-if="!isPureManual">
172-
<div class="external-label"
146+
<div class="row"
173147
:aria-label="t('app_api', 'Docker network')">
174-
<label for="deploy-config-net">
175-
{{ t('app_api', 'Docker network') }}
176-
<InfoTooltip :text="getNetworkHelperText"
177-
:type="isEditDifferentNetwork ? 'warning' : 'info'" />
178-
</label>
179148
<NcInputField
180149
id="deploy-config-net"
181150
ref="deploy-config-net"
182151
v-model="deployConfig.net"
183-
class="ex-input-field"
152+
:label="t('app_api', 'Docker network')"
184153
:placeholder="t('app_api', 'Docker network')"
185154
:aria-label="t('app_api', 'Docker network')"
186155
:show-trailing-button="isEditDifferentNetwork"
@@ -191,59 +160,52 @@
191160
<Replay :size="20" />
192161
</template>
193162
</NcInputField>
163+
<InfoTooltip :text="getNetworkHelperText"
164+
:type="isEditDifferentNetwork ? 'warning' : 'info'" />
194165
</div>
195-
<div class="external-label" :aria-label="t('app_api', 'Computation device')">
196-
<label for="compute-device">
197-
{{ t('app_api', 'Compute device') }}
198-
<InfoTooltip v-if="getComputeDeviceHelperText !== ''"
199-
:text="getComputeDeviceHelperText"
200-
:type="getComputeDeviceHelperText !== '' ? 'warning' : 'info'" />
201-
</label>
166+
<div class="row" :aria-label="t('app_api', 'Computation device')">
202167
<NcSelect
203168
id="compute-device"
204169
v-model="deployConfig.computeDevice"
205-
class="ex-input-field"
170+
class="ncselect"
171+
:input-label="t('app_api', 'Compute device')"
206172
:aria-label-combobox="t('app_api', 'Computation device')"
207-
:label-outside="true"
208173
:options="computeDevices" />
174+
<InfoTooltip v-if="getComputeDeviceHelperText !== ''"
175+
:text="getComputeDeviceHelperText"
176+
:type="getComputeDeviceHelperText !== '' ? 'warning' : 'info'" />
209177
</div>
210-
<div class="external-label" :aria-label="t('app_api', 'Memory limit')">
211-
<label for="memory-limit">
212-
{{ t('app_api', 'Memory limit (in MiB)') }}
213-
<InfoTooltip :text="t('app_api', 'Maximum amount of memory that the ExApp container can use in mebibytes')" />
214-
</label>
178+
<div class="row" :aria-label="t('app_api', 'Memory limit')">
215179
<NcInputField
216180
id="memory-limit"
217181
ref="memory-limit"
218182
v-model="memoryLimit"
219-
class="ex-input-field"
183+
:label="t('app_api', 'Memory limit (in MiB)')"
220184
:placeholder="t('app_api', 'Memory limit (in MiB)')"
221185
:aria-label="t('app_api', 'Memory limit (in MiB)')"
222186
:error="isMemoryLimitValid === false"
223187
:helper-text="isMemoryLimitValid === false ? t('app_api', 'Must be a positive integer') : ''" />
188+
<InfoTooltip :text="t('app_api', 'Maximum amount of memory that the ExApp container can use in mebibytes')" />
224189
</div>
225-
<div class="external-label" :aria-label="t('app_api', 'CPU limit')">
226-
<label for="cpu-limit">
227-
{{ t('app_api', 'CPU limit') }}
228-
<InfoTooltip :text="t('app_api', 'Maximum number of CPU cores that the ExApp container can use (e.g. 0.5 for half a core, 2 for two cores)')" />
229-
</label>
190+
<div class="row" :aria-label="t('app_api', 'CPU limit')">
230191
<NcInputField
231192
id="cpu-limit"
232193
ref="cpu-limit"
233194
v-model="cpuLimit"
234-
class="ex-input-field"
195+
:label="t('app_api', 'CPU limit')"
235196
:placeholder="t('app_api', 'CPU limit as decimal value')"
236197
:aria-label="t('app_api', 'CPU limit')"
237198
:error="isCpuLimitValid === false"
238199
:helper-text="isCpuLimitValid === false ? t('app_api', 'Must be a positive number') : ''" />
200+
<InfoTooltip :text="t('app_api', 'Maximum number of CPU cores that the ExApp container can use (e.g. 0.5 for half a core, 2 for two cores)')" />
239201
</div>
240202
<template v-if="additionalOptions.length > 0">
241203
<div class="row" style="flex-direction: column;">
242204
<div
243205
v-for="(option, index) in additionalOptions"
244206
:id="option.key"
245207
:key="index"
246-
class="external-label"
208+
class="row"
247209
:aria-label="t('app_api', 'Additional options')">
248210
<label :for="option.key">{{ option.key }}</label>
249211
<div class="additional-option">
@@ -782,22 +744,6 @@ export default {
782744
flex: fit-content;
783745
}
784746
785-
.external-label {
786-
display: flex;
787-
align-items: center;
788-
justify-content: space-between;
789-
width: 100%;
790-
padding: .25rem 0;
791-
792-
label {
793-
flex: fit-content;
794-
display: flex;
795-
flex-direction: row;
796-
align-items: center;
797-
gap: .5rem;
798-
}
799-
}
800-
801747
.note a {
802748
color: #fff;
803749
text-decoration: underline;
@@ -806,11 +752,15 @@ export default {
806752
.row {
807753
display: flex;
808754
justify-content: space-between;
809-
align-items: center;
755+
align-items: end;
810756
margin-top: 10px;
811757
gap: 4px;
812758
}
813759
760+
.ncselect {
761+
width: 100%;
762+
}
763+
814764
.hint {
815765
color: var(--color-warning-text);
816766
padding: 10px;
@@ -835,10 +785,6 @@ export default {
835785
max-width: 320px;
836786
}
837787
838-
.ex-input-field {
839-
width: 320px;
840-
}
841-
842788
:deep(.v-select.select) {
843789
margin: 0 !important;
844790
}

0 commit comments

Comments
 (0)