Skip to content
Snippets Groups Projects
Commit 78e648cc authored by Karl Prieb's avatar Karl Prieb
Browse files

Room info UI fix

parent 38cfcc20
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 47 additions and 26 deletions
packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less
+ 6
− 4
View file @ 78e648cc
...@@ -24,6 +24,12 @@ ...@@ -24,6 +24,12 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
min-height: 20px; min-height: 20px;
cursor: pointer;
margin-top: 3px;
&[data-edit="false"] {
cursor: inherit;
user-select: initial;
}
} }
.editing { .editing {
padding-right: 80px; padding-right: 80px;
...@@ -52,10 +58,6 @@ ...@@ -52,10 +58,6 @@
margin-top: 30px; margin-top: 30px;
text-align: center; text-align: center;
} }
[data-edit] {
cursor: pointer;
margin-top: 3px;
}
.boolean { .boolean {
font-size: 0; font-size: 0;
> label { > label {
......
packages/rocketchat-channel-settings/client/views/channelSettings.coffee
+ 7
− 2
View file @ 78e648cc
...@@ -25,6 +25,9 @@ Template.channelSettings.helpers ...@@ -25,6 +25,9 @@ Template.channelSettings.helpers
editing: (field) -> editing: (field) ->
return Template.instance().editing.get() is field return Template.instance().editing.get() is field
isDisabled: (field, room) ->
return Template.instance().settings[field].processing.get() or !RocketChat.authz.hasAllPermission('edit-room', room._id)
channelSettings: -> channelSettings: ->
return RocketChat.ChannelSettings.getOptions() return RocketChat.ChannelSettings.getOptions()
...@@ -81,8 +84,9 @@ Template.channelSettings.events ...@@ -81,8 +84,9 @@ Template.channelSettings.events
'click [data-edit]': (e, t) -> 'click [data-edit]': (e, t) ->
e.preventDefault() e.preventDefault()
t.editing.set($(e.currentTarget).data('edit')) if $(e.currentTarget).data('edit')
setTimeout (-> t.$('input.editing').focus().select()), 100 t.editing.set($(e.currentTarget).data('edit'))
setTimeout (-> t.$('input.editing').focus().select()), 100
'change [type="radio"]': (e, t) -> 'change [type="radio"]': (e, t) ->
t.editing.set($(e.currentTarget).attr('name')) t.editing.set($(e.currentTarget).attr('name'))
...@@ -187,6 +191,7 @@ Template.channelSettings.onCreated -> ...@@ -187,6 +191,7 @@ Template.channelSettings.onCreated ->
type: 'boolean' type: 'boolean'
label: 'Room_archivation_state_true' label: 'Room_archivation_state_true'
isToggle: true, isToggle: true,
processing: new ReactiveVar(false)
canView: (room) => room.t isnt 'd' canView: (room) => room.t isnt 'd'
canEdit: (room) => RocketChat.authz.hasAtLeastOnePermission(['archive-room', 'unarchive-room'], room._id) canEdit: (room) => RocketChat.authz.hasAtLeastOnePermission(['archive-room', 'unarchive-room'], room._id)
save: (value, room) => save: (value, room) =>
......
packages/rocketchat-channel-settings/client/views/channelSettings.html
+ 8
− 16
View file @ 78e648cc
...@@ -15,33 +15,29 @@ ...@@ -15,33 +15,29 @@
<label>{{_ $value.label}}</label> <label>{{_ $value.label}}</label>
<div class="setting-block"> <div class="setting-block">
{{#if $eq $value.type 'text'}} {{#if $eq $value.type 'text'}}
{{#if $value.canEdit room}} {{#if editing $key}}
{{#if editing $key}} {{#if $value.canEdit room}}
<input type="text" name="{{$key}}" value="{{value}}" class="editing" /> <input type="text" name="{{$key}}" value="{{value}}" class="editing" />
{{else}}
<span class='current-setting' data-edit="{{$key}}">{{value}}</span>
{{/if}} {{/if}}
{{else}} {{else}}
<span class='current-setting'>{{value}}</span> <span class='current-setting' data-edit="{{#if $value.canEdit room}}{{$key}}{{else}}false{{/if}}">{{value}}</span>
{{/if}} {{/if}}
{{/if}} {{/if}}
{{#if $eq $value.type 'markdown'}} {{#if $eq $value.type 'markdown'}}
{{#if $value.canEdit room}} {{#if editing $key}}
{{#if editing $key}} {{#if $value.canEdit room}}
<input type="text" name="{{$key}}" value="{{unscape value}}" class="editing" /> <input type="text" name="{{$key}}" value="{{unscape value}}" class="editing" />
{{else}}
<span class='current-setting' data-edit="{{$key}}">{{{RocketChatMarkdown value}}}</span>
{{/if}} {{/if}}
{{else}} {{else}}
<span class='current-setting'>{{{RocketChatMarkdown value}}}</span> <span class='current-setting' data-edit="{{#if $value.canEdit room}}{{$key}}{{else}}false{{/if}}">{{{RocketChatMarkdown value}}}</span>
{{/if}} {{/if}}
{{/if}} {{/if}}
{{#if $eq $value.type 'select'}} {{#if $eq $value.type 'select'}}
{{#each toArray $value.options}} {{#each toArray $value.options}}
<div class="input radio"> <div class="input radio">
<input type="radio" id="{{$key}}" name="{{../$key}}" value="{{$key}}" checked="{{$eq value $key}}" /> <input type="radio" id="{{$key}}" name="{{../$key}}" value="{{$key}}" checked="{{$eq value $key}}" disabled="{{isDisabled $key room}}" />
<label for="{{$key}}">{{_ $value}}</label> <label for="{{$key}}">{{_ $value}}</label>
</div> </div>
{{/each}} {{/each}}
...@@ -49,11 +45,7 @@ ...@@ -49,11 +45,7 @@
{{#if $eq $value.type 'boolean'}} {{#if $eq $value.type 'boolean'}}
<div class="input checkbox toggle"> <div class="input checkbox toggle">
{{#if $value.canEdit room}} <input type="checkbox" id="{{$key}}" name="{{$key}}" value="{{value}}" checked="{{$eq value true}}" disabled="{{isDisabled $key room}}" />
<input type="checkbox" id="{{$key}}" name="{{$key}}" value="{{value}}" checked="{{$eq value true}}" disabled="{{$value.processing.get}}" />
{{else}}
<input type="checkbox" id="{{$key}}" name="{{$key}}" value="{{value}}" checked="{{$eq value true}}" disabled />
{{/if}}
<label for="{{$key}}"></label> <label for="{{$key}}"></label>
</div> </div>
{{#if $value.canEdit room}} {{#if $value.canEdit room}}
......
packages/rocketchat-theme/assets/stylesheets/base.less
+ 20
− 0
View file @ 78e648cc
...@@ -1087,6 +1087,26 @@ label.required:after { ...@@ -1087,6 +1087,26 @@ label.required:after {
display: inline-block; display: inline-block;
} }
} }
&.toggle {
font-size: 0;
> label {
display: inline-block;
width: calc(~"100% - 40px");
font-size: 14px;
}
> div {
width: 40px;
display: inline-block;
}
}
&.label-top {
position: relative;
i {
position: absolute;
left: 7px;
top: 26px;
}
}
} }
.input-submit { .input-submit {
margin: 35px 0 0 -4px; margin: 35px 0 0 -4px;
......
packages/rocketchat-ui-sidenav/side-nav/createCombinedFlex.html
+ 6
− 4
View file @ 78e648cc
...@@ -7,27 +7,29 @@ ...@@ -7,27 +7,29 @@
<div class="content"> <div class="content">
<div class="wrapper"> <div class="wrapper">
<h4>{{_ "Create_new" }}</h4> <h4>{{_ "Create_new" }}</h4>
<div class="input-line"> <div class="input-line label-top">
<label for="channel-name">{{_ "Name"}}</label> <label for="channel-name">{{_ "Name"}}</label>
<input type="text" id="channel-name" class="required" dir="auto" placeholder="{{_ 'Enter_name_here'}}"> <input type="text" id="channel-name" class="required" dir="auto" placeholder="{{_ 'Enter_name_here'}}">
<i class="icon-hash"></i>
</div> </div>
<div class="input-line"> <div class="input-line toggle">
<label for="channel-type">{{_ "Private"}}</label> <label for="channel-type">{{_ "Private"}}</label>
<div class="input checkbox toggle"> <div class="input checkbox toggle">
<input type="checkbox" id="channel-type" {{privateSwitchDisabled}} {{privateSwitchChecked}}> <input type="checkbox" id="channel-type" {{privateSwitchDisabled}} {{privateSwitchChecked}}>
<label for="channel-type"></label> <label for="channel-type"></label>
</div> </div>
</div> </div>
<div class="input-line"> <div class="input-line toggle">
<label for="channel-ro">{{_ "Read_only_channel"}}</label> <label for="channel-ro">{{_ "Read_only_channel"}}</label>
<div class="input checkbox toggle"> <div class="input checkbox toggle">
<input type="checkbox" id="channel-ro"> <input type="checkbox" id="channel-ro">
<label for="channel-ro"></label> <label for="channel-ro"></label>
</div> </div>
</div> </div>
<div class="input-line"> <div class="input-line label-top">
<label for="channel-members">{{_ "Select_users"}}</label> <label for="channel-members">{{_ "Select_users"}}</label>
{{> inputAutocomplete settings=autocompleteSettings id="channel-members" class="search" placeholder=(_ "Search_by_username") autocomplete="off"}} {{> inputAutocomplete settings=autocompleteSettings id="channel-members" class="search" placeholder=(_ "Search_by_username") autocomplete="off"}}
<i class="icon-search"></i>
<ul class="selected-users"> <ul class="selected-users">
{{#each selectedUsers}} {{#each selectedUsers}}
<li>{{.}} <i class="icon-cancel remove-room-member"></i></li> <li>{{.}} <i class="icon-cancel remove-room-member"></i></li>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment