Skip to content

Commit e1654ff

Browse files
mayank-d-gupta-dbmayank-d-gupta-db
authored
Merge pull request #7459 from deutschebank/db-contrib/waltz-7453-reposition-descriptions-on-the-screen-for-better-visibility
Db contrib/waltz 7453 reposition descriptions on the screen for better visibility
2 parents 0b05e43 + 2a6daed commit e1654ff

File tree

4 files changed

+50
-47
lines changed

4 files changed

+50
-47
lines changed

‎waltz-ng/client/physical-flows/svelte/BasisOffsetSelect.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@
33
44
export let value;
55
export let customValue;
6+
export let description = "";
67
78
</script>
89

910
<label for="basis-offset">
1011
Basis Offset
12+
<span class="text-muted small" style="font-style: italic; color: #999999; margin-left: 1em;">
13+
{description}
14+
</span>
1115
</label>
1216

1317
<select id="basis-offset"

‎waltz-ng/client/physical-flows/svelte/EnumSelect.svelte‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
export let name;
88
export let mandatory = false;
99
export let value;
10+
export let description = "";
1011
1112
function showHelp() {
1213
@@ -23,7 +24,12 @@
2324

2425
<label for={`${name}Kind`}>
2526
{name}
26-
<small class="text-muted">(required)</small>
27+
{#if mandatory}
28+
<small class="text-muted">(required)</small>
29+
{/if}
30+
<span class="text-muted small" style="font-style: italic; color: #999999; margin-left: 1em;">
31+
{description}
32+
</span>
2733
<button class="btn btn-skinny"
2834
on:click|preventDefault={() => showHelp()}>
2935
<Icon name="question-circle"/>

‎waltz-ng/client/physical-flows/svelte/PhysicalFlowCharacteristicsStep.svelte‎

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -144,73 +144,65 @@
144144
<div class="form-group">
145145
<label for="name">
146146
Name
147+
<span class="text-muted small"
148+
style="font-style: italic; color: #999999; margin-left: 1em;">
149+
Name to describe this physical flow
150+
</span>
147151
</label>
148152
<input class="form-control"
149153
id="name"
150154
bind:value={workingCopy.name}/>
151155
</div>
152-
<div class="help-block">
153-
Name to describe this physical flow.
154-
</div>
155156

156157
<EnumSelect options={transportKinds}
157158
bind:value={workingCopy.transport}
158159
mandatory="true"
159-
name="Transport">
160-
<div slot="help">
161-
Describes how that data is transferred between the source and target.
162-
</div>
163-
</EnumSelect>
160+
name="Transport"
161+
description="Describes how that data is transferred between the source and target."/>
164162

165163
<EnumSelect options={frequencyKinds}
166164
bind:value={workingCopy.frequency}
167165
mandatory="true"
168-
name="Frequency">
169-
<div slot="help">
170-
Describes how often (on average) the data is transferred between the source and target.
171-
</div>
172-
</EnumSelect>
166+
name="Frequency"
167+
description="Describes how often (on average) the data is transferred between the source and target."/>
173168

174169
<EnumSelect options={physicalFlowCriticalityKinds}
175170
bind:value={workingCopy.criticality}
176171
mandatory="true"
177-
name="Criticality">
178-
<div slot="help">
179-
An indicator of the importance of this flow
180-
</div>
181-
</EnumSelect>
172+
name="Criticality"
173+
description="An indicator of the importance of this flow"/>
182174

183175

184176
<!--Basis offset select-->
185177
<BasisOffsetSelect bind:value={workingCopy.basisOffset}
186-
bind:customValue={workingCopy.customBasisOffset}>
187-
<div slot="help">
188-
Describes the time from a trigger event for the data transfer to take place. Defaults to T.
189-
</div>
190-
</BasisOffsetSelect>
178+
bind:customValue={workingCopy.customBasisOffset}
179+
description="Describes the time from a trigger event for the data transfer to take place. Defaults to T."/>
191180

192181
<div class="form-group">
193182
<label for="description">
194183
Description
184+
<span class="text-muted small"
185+
style="font-style: italic; color: #999999; margin-left: 1em;">
186+
Description of the flow
187+
</span>
195188
</label>
196189
<textarea class="form-control"
197190
id="description"
198191
rows="2"
199192
bind:value={workingCopy.description}/>
200193
</div>
201-
<div class="help-block">Description of the flow</div>
202-
203194
<div class="form-group">
204195
<label for="external-id">
205196
External Id
197+
<span class="text-muted small"
198+
style="font-style: italic; color: #999999; margin-left: 1em;">
199+
External identifier for this flow
200+
</span>
206201
</label>
207202
<input class="form-control"
208203
id="external-id"
209204
bind:value={workingCopy.externalId}/>
210205
</div>
211-
<div class="help-block">
212-
External identifier for this flow
213-
</div>
214206

215207
<button class="btn btn-skinny"
216208
disabled={!done}

‎waltz-ng/client/physical-flows/svelte/PhysicalSpecificationStep.svelte‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -153,49 +153,50 @@
153153
<label for="name">
154154
Name
155155
<small class="text-muted">(required)</small>
156+
<span class="text-muted small"
157+
style="font-style: italic; color: #999999; margin-left: 1em;">
158+
Name of this specification
159+
</span>
156160
</label>
157-
158161
<input class="form-control"
159162
autocomplete="waltz-no-autocomplete"
160163
type="text"
161164
id="name"
162165
bind:value={workingCopy.name}/>
163166
</div>
164-
<div class="help-block">
165-
Name of this specification
167+
<div class="form-group">
168+
<EnumSelect options={dataFormatKinds}
169+
bind:value={workingCopy.format}
170+
mandatory="true"
171+
name="Format"
172+
description="Describes the structure of the data being transferred">
173+
</EnumSelect>
166174
</div>
167-
168-
<EnumSelect options={dataFormatKinds}
169-
bind:value={workingCopy.format}
170-
mandatory="true"
171-
name="Format">
172-
<div slot="help">
173-
Describes the structure of the data being transferred
174-
</div>
175-
</EnumSelect>
176-
177175
<div class="form-group">
178176
<label for="description">
179177
Description
178+
<span class="text-muted small"
179+
style="font-style: italic; color: #999999; margin-left: 1em;">
180+
Description of the specification
181+
</span>
180182
</label>
181183
<textarea class="form-control"
182184
id="description"
183185
rows="2"
184186
bind:value={workingCopy.description}/>
185187
</div>
186-
<div class="help-block">Description of the specification</div>
187-
188188
<div class="form-group">
189189
<label for="external-id">
190190
External Id
191+
<span class="text-muted small"
192+
style="font-style: italic; color: #999999; margin-left: 1em;">
193+
External identifier for this specification
194+
</span>
191195
</label>
192196
<input class="form-control"
193197
id="external-id"
194198
bind:value={workingCopy.externalId}/>
195199
</div>
196-
<div class="help-block">
197-
External identifier for this specification
198-
</div>
199200

200201
<button class="btn btn-skinny"
201202
disabled={!done}

0 commit comments

Comments
 (0)