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

Room info redesign

parent dcd21a3f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 204 additions and 57 deletions
packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less
+ 35
− 9
View file @ 4a7cbbab
...@@ -6,6 +6,9 @@ ...@@ -6,6 +6,9 @@
> div { > div {
position: relative; position: relative;
font-size: 0; font-size: 0;
label {
font-weight: 300;
}
} }
} }
} }
...@@ -17,24 +20,21 @@ ...@@ -17,24 +20,21 @@
} }
.current-setting { .current-setting {
font-size: 14px; font-size: 14px;
display: inline-block;
width: calc(~"100% - 38px"); width: calc(~"100% - 38px");
}
.icon-pencil {
display: inline-block; display: inline-block;
font-size: 12px; vertical-align: middle;
width: 20px; min-height: 20px;
vertical-align: top;
} }
.editing { .editing {
padding-right: 80px; padding-right: 80px;
font-size: 14px; font-size: 14px;
margin: -2px 0 -1px -9px;
} }
.buttons { .buttons {
position: absolute; position: absolute;
top: 1px; top: -1px;
bottom: 1px; bottom: 0;
right: 1px; right: 10px;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background: black; background: black;
.button { .button {
...@@ -43,6 +43,10 @@ ...@@ -43,6 +43,10 @@
} }
.button.edit { .button.edit {
padding: 8px; padding: 8px;
font-size: 12px;
vertical-align: middle;
display: inline-block;
visibility: hidden;
} }
.submit { .submit {
margin-top: 30px; margin-top: 30px;
...@@ -50,6 +54,28 @@ ...@@ -50,6 +54,28 @@
} }
[data-edit] { [data-edit] {
cursor: pointer; cursor: pointer;
margin-top: 3px;
}
.boolean {
font-size: 0;
> label {
width: calc(~"100% - 45px");
display: inline-block;
vertical-align: middle;
}
.setting-block {
width: 40px;
display: inline-block;
vertical-align: middle;
margin-left: -5px;
}
}
.setting-block {
&:hover {
.button.edit {
visibility: visible;
}
}
} }
} }
} }
packages/rocketchat-channel-settings/client/views/channelSettings.coffee
+ 12
− 1
View file @ 4a7cbbab
...@@ -11,6 +11,9 @@ Template.channelSettings.helpers ...@@ -11,6 +11,9 @@ Template.channelSettings.helpers
valueOf: (obj, key) -> valueOf: (obj, key) ->
return obj?[key] return obj?[key]
isTextInput: (value) ->
return value == 'text' or value == 'markdown'
showSetting: (setting, room) -> showSetting: (setting, room) ->
if setting.showInDirect is false if setting.showInDirect is false
return room.t isnt 'd' return room.t isnt 'd'
...@@ -82,6 +85,13 @@ Template.channelSettings.events ...@@ -82,6 +85,13 @@ Template.channelSettings.events
t.editing.set($(e.currentTarget).data('edit')) t.editing.set($(e.currentTarget).data('edit'))
setTimeout (-> t.$('input.editing').focus().select()), 100 setTimeout (-> t.$('input.editing').focus().select()), 100
'change [type="radio"]': (e, t) ->
t.editing.set($(e.currentTarget).attr('name'))
'change [type="checkbox"]': (e, t) ->
t.editing.set($(e.currentTarget).attr('name'))
t.saveSetting()
'click .cancel': (e, t) -> 'click .cancel': (e, t) ->
e.preventDefault() e.preventDefault()
t.editing.set() t.editing.set()
...@@ -203,11 +213,12 @@ Template.channelSettings.onCreated -> ...@@ -203,11 +213,12 @@ Template.channelSettings.onCreated ->
@saveSetting = => @saveSetting = =>
room = ChatRoom.findOne @data?.rid room = ChatRoom.findOne @data?.rid
field = @editing.get() field = @editing.get()
console.log('FIELD', field)
if @settings[field].type is 'select' if @settings[field].type is 'select'
value = @$(".channel-settings form [name=#{field}]:checked").val() value = @$(".channel-settings form [name=#{field}]:checked").val()
else if @settings[field].type is 'boolean' else if @settings[field].type is 'boolean'
value = @$(".channel-settings form [name=#{field}]:checked").val() is 'true' value = @$(".channel-settings form [name=#{field}]:checked").val() is 'on'
else else
value = @$(".channel-settings form [name=#{field}]").val() value = @$(".channel-settings form [name=#{field}]").val()
......
packages/rocketchat-channel-settings/client/views/channelSettings.html
+ 31
− 45
View file @ 4a7cbbab
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
{{#if $value.canView room}} {{#if $value.canView room}}
{{#let value=(valueOf room $key)}} {{#let value=(valueOf room $key)}}
<li> <li class="{{$value.type}}">
<label>{{_ $value.label}}</label> <label>{{_ $value.label}}</label>
<div> <div class="setting-block">
{{#if $eq $value.type 'text'}} {{#if $eq $value.type 'text'}}
{{#if editing $key}} {{#if editing $key}}
<input type="text" name="{{$key}}" value="{{value}}" class="editing" /> <input type="text" name="{{$key}}" value="{{value}}" class="editing" />
{{else}} {{else}}
<span class='current-setting'>{{value}}</span> <span class='current-setting' data-edit="{{$key}}">{{value}}</span>
{{/if}} {{/if}}
{{/if}} {{/if}}
...@@ -26,58 +26,44 @@ ...@@ -26,58 +26,44 @@
{{#if editing $key}} {{#if editing $key}}
<input type="text" name="{{$key}}" value="{{unscape value}}" class="editing" /> <input type="text" name="{{$key}}" value="{{unscape value}}" class="editing" />
{{else}} {{else}}
<span class='current-setting'>{{{RocketChatMarkdown value}}}</span> <span class='current-setting' data-edit="{{$key}}">{{{RocketChatMarkdown value}}}</span>
{{/if}} {{/if}}
{{/if}} {{/if}}
{{#if $eq $value.type 'select'}} {{#if $eq $value.type 'select'}}
{{#if editing $key}} {{#each toArray $value.options}}
{{#each toArray $value.options}} <div class="input radio">
<label> <input type="radio" id="{{$key}}" name="{{../$key}}" value="{{$key}}" checked="{{$eq value $key}}" />
<input type="radio" name="{{../$key}}" value="{{$key}}" checked="{{$eq value $key}}" class="editing" /> <label for="{{$key}}">{{_ $value}}</label>
{{_ $value}} </div>
</label> {{/each}}
{{/each}}
{{else}}
<span class='current-setting'>{{_ (valueOf $value.options value)}}</span>
{{/if}}
{{/if}} {{/if}}
{{#if $eq $value.type 'boolean'}} {{#if $eq $value.type 'boolean'}}
{{#if editing $key}} <div class="input checkbox toggle">
<label> <input type="checkbox" id="{{$key}}" name="{{$key}}" value="{{value}}" checked="{{$eq value true}}" />
<input type="radio" name="{{$key}}" value="true" checked="{{$eq value true}}" class="editing" /> <label for="{{$key}}"></label>
{{_ 'True'}} </div>
</label>
<label>
<input type="radio" name="{{$key}}" value="false" checked="{{$neq value true}}" class="editing" />
{{_ 'False'}}
</label>
{{else}}
{{#if value}}
<span class='current-setting'>{{_ 'True'}}</span>
{{else}}
<span class='current-setting'>{{_ 'False'}}</span>
{{/if}}
{{/if}}
{{/if}} {{/if}}
{{#if editing $key}} {{#if $value.canEdit room}}
<div class="buttons"> {{#if editing $key}}
{{#unless $eq $value.type 'boolean'}} <div class="buttons">
<button type="button" class="button cancel"> {{#if isTextInput $value.type}}
<i class="icon-cancel"></i> <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> </button>
{{/unless}} </div>
<button type="button" class="button primary save"> {{else}}
<i class="icon-ok"></i> {{#if isTextInput $value.type}}
</button> <button type="button" class="button edit">
</div> <i class="icon-pencil" data-edit="{{$key}}"></i>
{{else}} </button>
{{#if $value.canEdit room}} {{/if}}
<button type="button" class="button edit">
<i class="icon-pencil" data-edit="{{$key}}"></i>
</button>
{{/if}} {{/if}}
{{/if}} {{/if}}
</div> </div>
......
packages/rocketchat-theme/assets/stylesheets/base.less
+ 0
− 1
View file @ 4a7cbbab
...@@ -1068,7 +1068,6 @@ label.required:after { ...@@ -1068,7 +1068,6 @@ label.required:after {
margin-bottom: 0; margin-bottom: 0;
} }
label { label {
text-transform: uppercase;
font-weight: 400; font-weight: 400;
margin-bottom: 0; margin-bottom: 0;
} }
......
packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
+ 33
− 1
View file @ 4a7cbbab
...@@ -107,7 +107,7 @@ blockquote:before { ...@@ -107,7 +107,7 @@ blockquote:before {
textarea { textarea {
background-color: @content-background-color; background-color: @content-background-color;
&:focus { &:focus {
border-color: fade(@secondary-background-contrast, 50%); border-color: lighten(@secondary-background-contrast, 30%);
} }
} }
} }
...@@ -141,6 +141,38 @@ input:-webkit-autofill { ...@@ -141,6 +141,38 @@ input:-webkit-autofill {
background-color: transparent !important; background-color: transparent !important;
} }
.input {
&.radio {
label {
&:before {
background-color: @content-background-color;
border-color: lighten(@secondary-background-contrast, 30%);
}
&:after {
background-color: @secondary-background-contrast;
}
}
}
&.checkbox.toggle {
input:checked + label:before {
background-color: @secondary-background-contrast;
}
label {
&:before {
background-color: lighten(@secondary-background-contrast, 30%);
}
&:after {
background-color: @content-background-color;
}
&:hover {
&:before {
background-color: lighten(@secondary-background-contrast, 20%);
}
}
}
}
}
/** ---------------------------------------------------------------------------- /** ----------------------------------------------------------------------------
* Misc typography variants * Misc typography variants
......
packages/rocketchat-theme/assets/stylesheets/utils/_forms.import.less 0 → 100644
+ 91
− 0
View file @ 4a7cbbab
.input {
&.radio {
min-height: 13px;
position: relative;
input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
outline: 0;
z-index: -1;
width: 0;
height: 0;
&:checked + label:after {
opacity: 1;
}
}
label {
cursor: pointer;
user-select: none;
padding-left: 20px;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border-width: 1px;
border-radius: 50%;
}
&:after {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 7px;
height: 7px;
border-radius: 50%;
opacity: 0;
.transition(opacity .2s ease-out);
}
}
}
&.checkbox.toggle {
min-height: 20px;
position: relative;
input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
outline: 0;
z-index: -1;
width: 0;
height: 0;
&:checked + label:after {
left: 25px;
}
}
label {
cursor: pointer;
user-select: none;
padding-left: 20px;
&:before {
display: block;
position: absolute;
content: '';
z-index: 0;
top: 0;
left: 0;
box-shadow: none;
width: 40px;
height: 16px;
border-radius: 50px;
.transition(background-color .2s ease-out);
}
&:after {
content: '';
position: absolute;
left: 1px;
top: 1px;
border-radius: 50%;
width: 14px;
height: 14px;
z-index: 1;
.transition(left .2s ease-out);
}
}
}
}
packages/rocketchat-theme/package.js
+ 1
− 0
View file @ 4a7cbbab
...@@ -28,6 +28,7 @@ Package.onUse(function(api) { ...@@ -28,6 +28,7 @@ Package.onUse(function(api) {
api.addAssets('assets/stylesheets/global/_variables.less', 'server'); api.addAssets('assets/stylesheets/global/_variables.less', 'server');
api.addAssets('assets/stylesheets/utils/_mixins.import.less', 'server'); api.addAssets('assets/stylesheets/utils/_mixins.import.less', 'server');
api.addAssets('assets/stylesheets/utils/_colors.import.less', 'server'); api.addAssets('assets/stylesheets/utils/_colors.import.less', 'server');
api.addAssets('assets/stylesheets/utils/_forms.import.less', 'server');
api.addAssets('assets/stylesheets/utils/_keyframes.import.less', 'server'); api.addAssets('assets/stylesheets/utils/_keyframes.import.less', 'server');
api.addAssets('assets/stylesheets/utils/_lesshat.import.less', 'server'); api.addAssets('assets/stylesheets/utils/_lesshat.import.less', 'server');
api.addAssets('assets/stylesheets/utils/_preloader.import.less', 'server'); api.addAssets('assets/stylesheets/utils/_preloader.import.less', 'server');
......
packages/rocketchat-theme/server/server.coffee
+ 1
− 0
View file @ 4a7cbbab
...@@ -60,6 +60,7 @@ RocketChat.theme = new class ...@@ -60,6 +60,7 @@ RocketChat.theme = new class
'assets/stylesheets/swipebox.min.css' 'assets/stylesheets/swipebox.min.css'
'assets/stylesheets/utils/_mixins.import.less' 'assets/stylesheets/utils/_mixins.import.less'
'assets/stylesheets/utils/_colors.import.less' 'assets/stylesheets/utils/_colors.import.less'
'assets/stylesheets/utils/_forms.import.less'
] ]
constructor: -> constructor: ->
......
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