apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Room info redesign

Browse Source
pull/5155/head
Karl Prieb 9 years ago
parent dcd21a3f4d
commit 4a7cbbabac
8 changed files with 204 additions and 57 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 44
      packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less
  2. 13
      packages/rocketchat-channel-settings/client/views/channelSettings.coffee
  3. 76
      packages/rocketchat-channel-settings/client/views/channelSettings.html
  4. 1
      packages/rocketchat-theme/assets/stylesheets/base.less
  5. 34
      packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
  6. 91
      packages/rocketchat-theme/assets/stylesheets/utils/_forms.import.less
  7. 1
      packages/rocketchat-theme/package.js
  8. 1
      packages/rocketchat-theme/server/server.coffee

44
packages/rocketchat-channel-settings/client/stylesheets/channel-settings.less
Unescape View File

@ -6,6 +6,9 @@
> div {
position: relative;
font-size: 0;
label {
font-weight: 300;
}
}
}
}
@ -17,24 +20,21 @@
}
.current-setting {
font-size: 14px;
display: inline-block;
width: calc(~"100% - 38px");
}
.icon-pencil {
display: inline-block;
font-size: 12px;
width: 20px;
vertical-align: top;
vertical-align: middle;
min-height: 20px;
}
.editing {
padding-right: 80px;
font-size: 14px;
margin: -2px 0 -1px -9px;
}
.buttons {
position: absolute;
top: 1px;
bottom: 1px;
right: 1px;
top: -1px;
bottom: 0;
right: 10px;
border-radius: 0 4px 4px 0;
background: black;
.button {
@ -43,6 +43,10 @@
}
.button.edit {
padding: 8px;
font-size: 12px;
vertical-align: middle;
display: inline-block;
visibility: hidden;
}
.submit {
margin-top: 30px;
@ -50,6 +54,28 @@
}
[data-edit] {
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;
}
}
}
}
}

13
packages/rocketchat-channel-settings/client/views/channelSettings.coffee
Unescape View File

@ -11,6 +11,9 @@ 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'
@ -82,6 +85,13 @@ Template.channelSettings.events
t.editing.set($(e.currentTarget).data('edit'))
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) ->
e.preventDefault()
t.editing.set()
@ -203,11 +213,12 @@ 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 'true'
value = @$(".channel-settings form [name=#{field}]:checked").val() is 'on'
else
value = @$(".channel-settings form [name=#{field}]").val()

76
packages/rocketchat-channel-settings/client/views/channelSettings.html
Unescape View File

@ -11,14 +11,14 @@
{{#if $value.canView room}}
{{#let value=(valueOf room $key)}}
<li>
<li class="{{$value.type}}">
<label>{{_ $value.label}}</label>
<div>
<div class="setting-block">
{{#if $eq $value.type 'text'}}
{{#if editing $key}}
<input type="text" name="{{$key}}" value="{{value}}" class="editing" />
{{else}}
<span class='current-setting'>{{value}}</span>
<span class='current-setting' data-edit="{{$key}}">{{value}}</span>
{{/if}}
{{/if}}
@ -26,58 +26,44 @@
{{#if editing $key}}
<input type="text" name="{{$key}}" value="{{unscape value}}" class="editing" />
{{else}}
<span class='current-setting'>{{{RocketChatMarkdown value}}}</span>
<span class='current-setting' data-edit="{{$key}}">{{{RocketChatMarkdown value}}}</span>
{{/if}}
{{/if}}
{{#if $eq $value.type 'select'}}
{{#if editing $key}}
{{#each toArray $value.options}}
<label>
<input type="radio" name="{{../$key}}" value="{{$key}}" checked="{{$eq value $key}}" class="editing" />
{{_ $value}}
</label>
{{/each}}
{{else}}
<span class='current-setting'>{{_ (valueOf $value.options value)}}</span>
{{/if}}
{{#each toArray $value.options}}
<div class="input radio">
<input type="radio" id="{{$key}}" name="{{../$key}}" value="{{$key}}" checked="{{$eq value $key}}" />
<label for="{{$key}}">{{_ $value}}</label>
</div>
{{/each}}
{{/if}}
{{#if $eq $value.type 'boolean'}}
{{#if editing $key}}
<label>
<input type="radio" name="{{$key}}" value="true" checked="{{$eq value true}}" class="editing" />
{{_ 'True'}}
</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}}
<div class="input checkbox toggle">
<input type="checkbox" id="{{$key}}" name="{{$key}}" value="{{value}}" checked="{{$eq value true}}" />
<label for="{{$key}}"></label>
</div>
{{/if}}
{{#if editing $key}}
<div class="buttons">
{{#unless $eq $value.type 'boolean'}}
<button type="button" class="button cancel">
<i class="icon-cancel"></i>
{{#if $value.canEdit room}}
{{#if editing $key}}
<div class="buttons">
{{#if isTextInput $value.type}}
<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>
{{/unless}}
<button type="button" class="button primary save">
<i class="icon-ok"></i>
</button>
</div>
{{else}}
{{#if $value.canEdit room}}
<button type="button" class="button edit">
<i class="icon-pencil" data-edit="{{$key}}"></i>
</button>
</div>
{{else}}
{{#if isTextInput $value.type}}
<button type="button" class="button edit">
<i class="icon-pencil" data-edit="{{$key}}"></i>
</button>
{{/if}}
{{/if}}
{{/if}}
</div>

1
packages/rocketchat-theme/assets/stylesheets/base.less
Unescape View File

@ -1068,7 +1068,6 @@ label.required:after {
margin-bottom: 0;
}
label {
text-transform: uppercase;
font-weight: 400;
margin-bottom: 0;
}

34
packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less vendored
Unescape View File

@ -107,7 +107,7 @@ blockquote:before {
textarea {
background-color: @content-background-color;
&:focus {
border-color: fade(@secondary-background-contrast, 50%);
border-color: lighten(@secondary-background-contrast, 30%);
}
}
}
@ -141,6 +141,38 @@ input:-webkit-autofill {
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

91
packages/rocketchat-theme/assets/stylesheets/utils/_forms.import.less vendored
Unescape View File

@ -0,0 +1,91 @@
.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);
}
}
}
}

1
packages/rocketchat-theme/package.js
Unescape View File

@ -28,6 +28,7 @@ Package.onUse(function(api) {
api.addAssets('assets/stylesheets/global/_variables.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/_forms.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/_preloader.import.less', 'server');

1
packages/rocketchat-theme/server/server.coffee
Unescape View File

@ -60,6 +60,7 @@ RocketChat.theme = new class
'assets/stylesheets/swipebox.min.css'
'assets/stylesheets/utils/_mixins.import.less'
'assets/stylesheets/utils/_colors.import.less'
'assets/stylesheets/utils/_forms.import.less'
]
constructor: ->

Write Preview
Loading…
Cancel
Save