paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 21:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

org settings: Improve design of User groups page.

Browse Source
This commit is contained in:
Cynthia Lin
2018-01-03 10:14:20 -08:00
committed by showell
parent a937750b1a
commit c82e73e0c9
2 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
static/styles/settings.css
View File

@@ -823,23 +823,47 @@ input[type=checkbox].inline-block {
margin-right: 5px;
}
#user-groups .user-group {
margin-bottom: 20px;
background-color: hsl(0, 0%, 100%);
padding: 10px;
border-radius: 5px;
}
#user-groups .user-group h4 {
font-weight: normal;
margin: 0px;
}
#user-groups .user-group p {
font-weight: bold;
line-height: 2;
margin: 0px;
}
#user-groups .user-group h4 > .name {
font-weight: bold;
}
#user-groups .user-group h4 > span[contenteditable="true"] {
padding: 2px 4px;
border: 1px solid hsl(0, 0%, 86%);
border-radius: 4px;
#user-groups .user-group span[contenteditable] {
display: inline-block;
}
#user-groups .user-group h4 > span[contenteditable="true"]:focus {
#user-groups .user-group span[contenteditable]:empty::before {
opacity: 0.5;
display: inline-block;
content: attr(data-placeholder);
}
#user-groups .user-group span[contenteditable]:focus,
#user-groups .user-group span[contenteditable]:hover {
border-bottom: 1px solid hsl(0, 0%, 80%);
outline: none;
box-shadow: 0 0 3px 2px hsl(0, 0%, 86%);
}
#user-groups .user-group .pill-container .input[contenteditable]:empty::after {
content: attr(data-placeholder);
opacity: 0.5;
}
#user-groups .user-group h4 > .button {

19
static/templates/admin_user_group_list.handlebars
View File

@@ -1,9 +1,9 @@
{{#with user_group}}
<div class="user-group" id="{{id}}">
<h4>
<span class="name" contenteditable="true">{{name}}</span>
<span class="name" data-placeholder="{{t 'Name' }}" contenteditable="true" spellcheck="false">{{name}}</span>
—
<span class="description" contenteditable="true">{{description}}</span>
<span class="description" data-placeholder="{{t 'Description' }}" contenteditable="true">{{description}}</span>
<button class="button rounded small save-group-changes sea-green">
<i class="fa fa-check" aria-hidden="true"></i>
</button>
@@ -11,11 +11,14 @@
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</h4>
<div class="pill-container" data-group-pills="{{name}}">
<div class="input" contenteditable="true"></div>
</div>
<button class="button rounded small save-member-changes sea-green">
<i class="fa fa-check" aria-hidden="true"></i>
</button>
<p>
{{t 'Subscribers' }}
<div class="pill-container" data-group-pills="{{name}}">
<div class="input" contenteditable="true" data-placeholder="{{t 'Add member...' }}"></div>
</div>
<button class="button rounded small save-member-changes sea-green">
<i class="fa fa-check" aria-hidden="true"></i>
</button>
</p>
</div>
{{/with}}