Skip to content

Commit 2d85a93

Browse files
minhho89minhho89
authored
8763 video translation frontend 2 (#9016)
* Add Paragraph field, text area * making UI, setting APIs
1 parent a8c2a5c commit 2d85a93

File tree

5 files changed

+198
-188
lines changed

5 files changed

+198
-188
lines changed

‎app/components/forms/events/view/videoroom-form.hbs

Lines changed: 88 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
@tagName="i"
7777
@class="info circle icon"
7878
@content={{t 'The room password field can be used to communicate a password which is necessary to access online video rooms for example for external video services such as Zoom, Teams and Webex. The need for a password entry depends on the configuration of your video channel. The integrated Big Blue Button video solution in {{appName}} does not need a password as only ticket holders are able to access it. The difference between the password and PIN is that the password option is used for online access while PINs are used to access video rooms through the telephone.' appName=this.settings.appName }} />
79-
</label>
79+
</label>
8080
<Input
8181
@value={{this.data.stream.password}} />
8282
</div>
@@ -85,9 +85,9 @@
8585
<label>
8686
{{t 'Additional Information'}}
8787
<UiPopup
88-
@tagName="i"
89-
@class="info circle icon"
90-
@content={{t 'Additional Information fields can be used to share information such as phone access, PINs and other video room specific information.'}} />
88+
@tagName="i"
89+
@class="info circle icon"
90+
@content={{t 'Additional Information fields can be used to share information such as phone access, PINs and other video room specific information.'}} />
9191
</label>
9292
<Textarea
9393
@value={{this.data.stream.additionalInformation}} />
@@ -130,7 +130,7 @@
130130
{{#if (eq this.data.stream.videoChannel.provider 'bbb')}}
131131
<div class="field">
132132
<label>
133-
{{t 'Enable Recording'}}
133+
{{t 'Enable Recording'}}
134134
</label>
135135
<UiCheckbox
136136
class="toggle"
@@ -181,20 +181,20 @@
181181
{{#if (and showUpdateOptions (and this.data.stream.id this.actualBBBExtra))}}
182182
<div class="ui divider"></div>
183183
<div class="grouped fields">
184-
<label for="bbb_update">{{t 'You have changed your video room\'s configurations. Do you want to update these configurations now?'}}</label>
185-
<div class="field">
186-
<div class="ui radio checkbox">
187-
<Widgets::Forms::RadioButton @name="bbb_update_now" @id="update_now" @value={{true}} @checked={{this.endCurrentMeeting}} />
188-
<label for="update_now">{{t 'Yes, update it now. End ongoing meetings.'}}</label>
184+
<label for="bbb_update">{{t 'You have changed your video room\'s configurations. Do you want to update these configurations now?'}}</label>
185+
<div class="field">
186+
<div class="ui radio checkbox">
187+
<Widgets::Forms::RadioButton @name="bbb_update_now" @id="update_now" @value={{true}} @checked={{this.endCurrentMeeting}} />
188+
<label for="update_now">{{t 'Yes, update it now. End ongoing meetings.'}}</label>
189+
</div>
189190
</div>
190-
</div>
191-
<div class="field">
192-
<div class="ui radio checkbox">
193-
<Widgets::Forms::RadioButton @name="bbb_update_later" @id="update_later" @value={{false}} @checked={{this.endCurrentMeeting}} />
194-
<label for="update_later">{{t 'Apply changes when a new meeting is started.'}}</label>
191+
<div class="field">
192+
<div class="ui radio checkbox">
193+
<Widgets::Forms::RadioButton @name="bbb_update_later" @id="update_later" @value={{false}} @checked={{this.endCurrentMeeting}} />
194+
<label for="update_later">{{t 'Apply changes when a new meeting is started.'}}</label>
195+
</div>
195196
</div>
196197
</div>
197-
</div>
198198
{{/if}}
199199

200200
<div class="ui divider"></div>
@@ -243,60 +243,95 @@
243243
{{/if}}
244244
{{/if}}
245245

246+
<div class="ui divider"></div>
247+
<div class="ui header">{{t 'Translation Channels'}}</div>
248+
249+
<label>
250+
{{t 'Source URL'}}
251+
<UiPopup
252+
@tagName="i"
253+
@class="info circle icon"
254+
@content={{t 'Translation Channels used to add languages translation stream to help ...'}} />
255+
</label>
256+
246257
{{#each this.translationChannels as |channel index|}}
247258
<div class="field">
248-
<label>Translation Channel {{add index 1}}</label>
249259
<div class="ui action input">
250-
251-
<label>{{t 'Channel Name'}}</label>
252-
253-
<Input type="text" placeholder="Enter channel name" @value={{channel.name}} />
254-
<button class="ui icon button" {{on "click" (fn this.removeChannel index channel.id )}}>
255-
<i class="delete icon"></i>
256-
</button>
257-
<button class="ui primary button" {{on "click" (fn this.updateChannel index channel.id )}} >
258-
Update
259-
</button>
260+
<Widgets::Forms::LinkField
261+
@value={{channel.url}}
262+
@onChange={{action (mut channel.url)}}
263+
/>
264+
<div class="field">
265+
<div class="ui labeled action input">
266+
<UiDropdown
267+
@class="channel-dropbox floating labeled icon mini button"
268+
@selected={{channel.name}}
269+
@forceSelection={{false}}
270+
@onChange={{fn this.switchLanguage channel}}>
271+
<span class="text">English</span>
272+
<div class="ui language menu">
273+
{{#each-in this.l10n.availableLocales as |key value|}}
274+
<div class="item" data-value="{{value}}">{{value}}</div>
275+
{{/each-in}}
276+
</div>
277+
<i style="margin-left: 0 !important;text-align: right;"
278+
class="dropdown icon"> </i>
279+
</UiDropdown>
280+
<button class="ml-2 ui icon red button" {{on "click" (fn this.removeChannel index channel.id )}}>
281+
<i class="remove icon"></i>
282+
</button>
283+
<button class="ui icon blue button" {{on "click" (fn this.updateChannel index channel.id )}} >
284+
<i class="add icon"></i>
285+
</button>
286+
</div>
287+
</div>
260288
</div>
261289
</div>
262-
263-
<div class="field">
264-
<label>{{t 'Channel URL'}}</label>
265-
<Input type="text" placeholder="Enter channel URL" @value={{channel.url}} />
266-
</div>
267290
{{/each}}
268291

269292
{{#each this.translationChannelsNew as |channel index|}}
270293
<div class="field">
271-
<label>New translation Channel {{add index 1}}</label>
272294
<div class="ui action input">
273-
274-
<label>{{t 'Channel Name'}}</label>
275-
276-
<Input type="text" placeholder="Enter channel name" @value={{channel.name}} />
277-
<button class="ui icon button" {{on "click" (fn this.removeChannel index channel.id )}}>
278-
<i class="delete icon"></i>
279-
</button>
280-
<button class="ui primary button" {{on "click" (fn this.updateChannel index channel.id )}} >
281-
Update
282-
</button>
295+
<Widgets::Forms::LinkField
296+
@value={{channel.url}}
297+
@onChange={{action (mut channel.url)}} />
298+
<div class="field">
299+
<div class="ui labeled action input">
300+
<UiDropdown @class="channel-dropbox floating labeled icon mini button"
301+
@selected={{channel.name}}
302+
@forceSelection={{false}}
303+
@onChange={{fn this.switchLanguage channel}}>
304+
<span class="text">English</span>
305+
<div class="ui language menu">
306+
{{#each-in this.l10n.availableLocales as |key value|}}
307+
<div class="item" data-value="{{value}}">{{value}}</div>
308+
{{/each-in}}
309+
</div>
310+
<i style="margin-left: 0 !important;text-align: right;"
311+
class="dropdown icon"> </i>
312+
</UiDropdown>
313+
<span class="ml-2"></span>
314+
<button class="ui icon red button" {{on "click" (fn this.removeChannel index channel.id )}}>
315+
<i class="remove icon"></i>
316+
</button>
317+
<button class="ui icon blue button" {{on "click" (fn this.addNewChannel channel )}}>
318+
<i class="add icon"></i>
319+
</button>
320+
</div>
321+
</div>
283322
</div>
284323
</div>
285324

286-
<div class="field">
287-
<label>{{t 'Channel URL'}}</label>
288-
<Input type="text" placeholder="Enter channel URL" @value={{channel.url}} />
289-
</div>
290325
{{/each}}
291-
292-
<button class="ui primary button" {{on "click" this.addChannel }} >
293-
Add
294-
</button>
295-
326+
<div class="field">
327+
<button class="ui primary button" {{on "click" this.addChannel }} >
328+
{{t 'Add Channel'}}
329+
</button>
330+
</div>
296331

297332

298333
<div class="ui hidden divider"></div>
299-
<button type="submit" {{on "submit" (fn this.submit )}} class="ui teal submit button" name="submit">{{t 'Save'}}</button>
334+
<button type="submit" class="ui teal submit button" name="submit">{{t 'Save'}}</button>
300335
<LinkTo @route="events.view.videoroom.index" class="ui red button">
301336
{{t 'Cancel'}}
302337
</LinkTo>

0 commit comments

Comments
 (0)