From 38cfcc2042cbe913504159b4c6b2e8e086e423a8 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Fri, 9 Dec 2016 19:48:09 -0200
Subject: [PATCH] Room info redesign
---
.../client/stylesheets/channel-settings.less | 6 ++
.../client/views/channelSettings.coffee | 70 ++++++++++++-------
.../client/views/channelSettings.html | 59 ++++++++++------
packages/rocketchat-i18n/i18n/en.i18n.json | 4 ++
.../stylesheets/utils/_colors.import.less | 8 +++
.../side-nav/createCombinedFlex.html | 12 +++-
6 files changed, 108 insertions(+), 51 deletions(-)
diff --git a/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less b/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less
index fdf1328624e..25e4087e088 100644
--- a/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less
+++ b/packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less
@@ -71,11 +71,17 @@
}
}
.setting-block {
+ .loading {
+ top: 30px;
+ }
&:hover {
.button.edit {
visibility: visible;
}
}
}
+ nav {
+ text-align: right;
+ }
}
}
diff --git a/packages/rocketchat-channel-settings/client/views/channelSettings.coffee b/packages/rocketchat-channel-settings/client/views/channelSettings.coffee
index 929aea7f630..51bb8412a7d 100644
--- a/packages/rocketchat-channel-settings/client/views/channelSettings.coffee
+++ b/packages/rocketchat-channel-settings/client/views/channelSettings.coffee
@@ -11,9 +11,6 @@ Template.channelSettings.helpers
valueOf: (obj, key) ->
return obj?[key]
- isTextInput: (value) ->
- return value == 'text' or value == 'markdown'
-
showSetting: (setting, room) ->
if setting.showInDirect is false
return room.t isnt 'd'
@@ -37,8 +34,10 @@ Template.channelSettings.helpers
canDeleteRoom: ->
roomType = ChatRoom.findOne(@rid, { fields: { t: 1 }})?.t
return roomType? and RocketChat.authz.hasAtLeastOnePermission("delete-#{roomType}", @rid)
+
readOnly: ->
return ChatRoom.findOne(@rid, { fields: { ro: 1 }})?.ro
+
readOnlyDescription: ->
readOnly = ChatRoom.findOne(@rid, { fields: { ro: 1 }})?.ro
if readOnly is true
@@ -148,11 +147,10 @@ Template.channelSettings.onCreated ->
toastr.success TAPi18n.__ 'Room_description_changed_successfully'
t:
- type: 'select'
- label: 'Type'
- options:
- c: 'Channel'
- p: 'Private_Group'
+ type: 'boolean'
+ label: 'Private'
+ isToggle: true
+ processing: new ReactiveVar(false)
canView: (room) ->
if not room.t in ['c', 'p']
return false
@@ -163,40 +161,61 @@ Template.channelSettings.onCreated ->
return true
canEdit: (room) => RocketChat.authz.hasAllPermission('edit-room', room._id)
save: (value, room) ->
- if value not in ['c', 'p']
- return toastr.error t('error-invalid-room-type', value)
-
+ @processing.set(true)
+ value = if value then 'p' else 'c'
RocketChat.callbacks.run 'roomTypeChanged', room
- Meteor.call 'saveRoomSettings', room._id, 'roomType', value, (err, result) ->
+ Meteor.call 'saveRoomSettings', room._id, 'roomType', value, (err, result) =>
return handleError err if err
+ @processing.set(false)
toastr.success TAPi18n.__ 'Room_type_changed_successfully'
ro:
type: 'boolean'
label: 'Read_only'
+ isToggle: true
+ processing: new ReactiveVar(false)
canView: (room) => room.t isnt 'd'
canEdit: (room) => RocketChat.authz.hasAllPermission('set-readonly', room._id)
save: (value, room) ->
- Meteor.call 'saveRoomSettings', room._id, 'readOnly', value, (err, result) ->
+ @processing.set(true)
+ Meteor.call 'saveRoomSettings', room._id, 'readOnly', value, (err, result) =>
return handleError err if err
+ @processing.set(false)
toastr.success TAPi18n.__ 'Read_only_changed_successfully'
archived:
type: 'boolean'
label: 'Room_archivation_state_true'
+ isToggle: true,
canView: (room) => room.t isnt 'd'
canEdit: (room) => RocketChat.authz.hasAtLeastOnePermission(['archive-room', 'unarchive-room'], room._id)
- save: (value, room) ->
- if value is true
- Meteor.call 'archiveRoom', room._id, (err, results) ->
- return handleError err if err
- toastr.success TAPi18n.__ 'Room_archived'
- RocketChat.callbacks.run 'archiveRoom', room
- else
- Meteor.call 'unarchiveRoom', room._id, (err, results) ->
- return handleError err if err
- toastr.success TAPi18n.__ 'Room_unarchived'
- RocketChat.callbacks.run 'unarchiveRoom', room
+ save: (value, room) =>
+ swal {
+ title: t('Are_you_sure')
+ type: 'warning'
+ showCancelButton: true
+ confirmButtonColor: '#DD6B55'
+ confirmButtonText: if value then t('Yes_archive_it') else t('Yes_unarchive_it')
+ cancelButtonText: t('Cancel')
+ closeOnConfirm: false
+ html: false
+ }, (confirmed) =>
+ swal.disableButtons()
+ if (confirmed)
+ action = if value then 'archiveRoom' else 'unarchiveRoom'
+ Meteor.call action, room._id, (err, results) =>
+ if err
+ swal.enableButtons()
+ handleError err
+ swal
+ title: if value then t('Room_archived') else t('Room_has_been_archived')
+ text: if value then t('Room_has_been_archived') else t('Room_has_been_unarchived')
+ type: 'success'
+ timer: 2000
+ showConfirmButton: false
+ RocketChat.callbacks.run action, room
+ else
+ $(".channel-settings form [name='archived']").prop('checked', room.archived)
joinCode:
type: 'text'
@@ -213,12 +232,11 @@ Template.channelSettings.onCreated ->
@saveSetting = =>
room = ChatRoom.findOne @data?.rid
field = @editing.get()
- console.log('FIELD', field)
if @settings[field].type is 'select'
value = @$(".channel-settings form [name=#{field}]:checked").val()
else if @settings[field].type is 'boolean'
- value = @$(".channel-settings form [name=#{field}]:checked").val() is 'on'
+ value = @$(".channel-settings form [name=#{field}]").is(":checked")
else
value = @$(".channel-settings form [name=#{field}]").val()
diff --git a/packages/rocketchat-channel-settings/client/views/channelSettings.html b/packages/rocketchat-channel-settings/client/views/channelSettings.html
index 566fcc8d637..90ad773e411 100644
--- a/packages/rocketchat-channel-settings/client/views/channelSettings.html
+++ b/packages/rocketchat-channel-settings/client/views/channelSettings.html
@@ -15,18 +15,26 @@
<label>{{_ $value.label}}</label>
<div class="setting-block">
{{#if $eq $value.type 'text'}}
- {{#if editing $key}}
- <input type="text" name="{{$key}}" value="{{value}}" class="editing" />
+ {{#if $value.canEdit room}}
+ {{#if editing $key}}
+ <input type="text" name="{{$key}}" value="{{value}}" class="editing" />
+ {{else}}
+ <span class='current-setting' data-edit="{{$key}}">{{value}}</span>
+ {{/if}}
{{else}}
- <span class='current-setting' data-edit="{{$key}}">{{value}}</span>
+ <span class='current-setting'>{{value}}</span>
{{/if}}
{{/if}}
{{#if $eq $value.type 'markdown'}}
- {{#if editing $key}}
- <input type="text" name="{{$key}}" value="{{unscape value}}" class="editing" />
+ {{#if $value.canEdit room}}
+ {{#if editing $key}}
+ <input type="text" name="{{$key}}" value="{{unscape value}}" class="editing" />
+ {{else}}
+ <span class='current-setting' data-edit="{{$key}}">{{{RocketChatMarkdown value}}}</span>
+ {{/if}}
{{else}}
- <span class='current-setting' data-edit="{{$key}}">{{{RocketChatMarkdown value}}}</span>
+ <span class='current-setting'>{{{RocketChatMarkdown value}}}</span>
{{/if}}
{{/if}}
@@ -41,31 +49,38 @@
{{#if $eq $value.type 'boolean'}}
<div class="input checkbox toggle">
- <input type="checkbox" id="{{$key}}" name="{{$key}}" value="{{value}}" checked="{{$eq value true}}" />
+ {{#if $value.canEdit 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>
</div>
+ {{#if $value.canEdit room}}
+ {{#if $value.processing.get}}
+ {{> loading dark=true}}
+ {{/if}}
+ {{/if}}
{{/if}}
- {{#if $value.canEdit room}}
- {{#if editing $key}}
- <div class="buttons">
- {{#if isTextInput $value.type}}
+ {{#unless $value.isToggle}}
+ {{#if $value.canEdit room}}
+ {{#if editing $key}}
+ <div class="buttons">
<button type="button" class="button cancel">
<i class="icon-cancel"></i>
</button>
- {{/if}}
- <button type="button" class="button primary save">
- <i class="icon-ok"></i>
- </button>
- </div>
- {{else}}
- {{#if isTextInput $value.type}}
+ <button type="button" class="button primary save">
+ <i class="icon-ok"></i>
+ </button>
+ </div>
+ {{else}}
<button type="button" class="button edit">
<i class="icon-pencil" data-edit="{{$key}}"></i>
</button>
{{/if}}
{{/if}}
- {{/if}}
+ {{/unless}}
</div>
</li>
{{/let}}
@@ -79,9 +94,9 @@
</ul>
</form>
{{#if canDeleteRoom}}
- <nav>
- <button class='button danger delete'><span><i class='icon-trash'></i> {{_ "Delete"}}</span></button>
- </nav>
+ <nav>
+ <button class="button danger delete" title="{{_ 'Delete'}}"><i class="icon-trash"></i></button>
+ </nav>
{{/if}}
</div>
</div>
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index f7b4e1dde1b..e4fbf30f05b 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -1096,6 +1096,8 @@
"room_changed_topic": "Room topic changed to: <em>__room_topic__</em> by <em>__user_by__</em>",
"Room_description_changed_successfully": "Room description changed successfully",
"Room_has_been_deleted": "Room has been deleted",
+ "Room_has_been_archived": "Room has been archived",
+ "Room_has_been_unarchived": "Room has been unarchived",
"Room_Info": "Room Info",
"room_is_read_only": "This room is read only",
"room_name": "room name",
@@ -1458,6 +1460,8 @@
"will_be_able_to": "will be able to",
"Would_you_like_to_return_the_inquiry": "Would you like to return the inquiry?",
"Yes": "Yes",
+ "Yes_archive_it": "Yes, archive it!",
+ "Yes_unarchive_it": "Yes, unarchive it!",
"Yes_clear_all": "Yes, clear all!",
"Yes_delete_it": "Yes, delete it!",
"Yes_hide_it": "Yes, hide it!",
diff --git a/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less b/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
index f6a4a09aff2..e4cf83b73f8 100755
--- a/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
+++ b/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
@@ -157,6 +157,9 @@ input:-webkit-autofill {
input:checked + label:before {
background-color: @secondary-background-contrast;
}
+ input:disabled + label:before {
+ background-color: lighten(@secondary-background-contrast, 50%) !important;
+ }
label {
&:before {
background-color: lighten(@secondary-background-contrast, 30%);
@@ -642,6 +645,11 @@ a:hover {
.icon-ok {
color: inherit;
}
+ .input.checkbox.toggle {
+ input:checked + label:before {
+ background-color: @primary-background-color;
+ }
+ }
}
}
diff --git a/packages/rocketchat-ui-sidenav/side-nav/createCombinedFlex.html b/packages/rocketchat-ui-sidenav/side-nav/createCombinedFlex.html
index acb8bdb1349..3a82adc6f82 100644
--- a/packages/rocketchat-ui-sidenav/side-nav/createCombinedFlex.html
+++ b/packages/rocketchat-ui-sidenav/side-nav/createCombinedFlex.html
@@ -12,12 +12,18 @@
<input type="text" id="channel-name" class="required" dir="auto" placeholder="{{_ 'Enter_name_here'}}">
</div>
<div class="input-line">
- <label for="channel-type">{{_ "Private_Group"}}</label>
- <input type="checkbox" id="channel-type" {{privateSwitchDisabled}} {{privateSwitchChecked}}>
+ <label for="channel-type">{{_ "Private"}}</label>
+ <div class="input checkbox toggle">
+ <input type="checkbox" id="channel-type" {{privateSwitchDisabled}} {{privateSwitchChecked}}>
+ <label for="channel-type"></label>
+ </div>
</div>
<div class="input-line">
<label for="channel-ro">{{_ "Read_only_channel"}}</label>
- <input type="checkbox" id="channel-ro">
+ <div class="input checkbox toggle">
+ <input type="checkbox" id="channel-ro">
+ <label for="channel-ro"></label>
+ </div>
</div>
<div class="input-line">
<label for="channel-members">{{_ "Select_users"}}</label>
--
GitLab