[frio] Improve Group Editing (#5349)
* Improve group-editing and edit-navigation. Use icons next to groups and header for navigation to editing groups and adding new groups. Also use icon from group-sidebar for editing groups. * Unify look&feel of contact search bars. * Remove nogroup page and replace with /group/none. * Make sure proper items are selected in aside. * Use icon instead of link for 'View Contacs' on profile page. * Fix none-working /group/none. * Fix highlighting for everyone in group aside.
This commit is contained in:
Andreas Neustifter
Hypolite Petovan
parent
09b7e217c7
commit
32ef5623ab
16 changed files with 180 additions and 177 deletions
|
|
@ -1021,7 +1021,7 @@ aside .widget li,
|
|||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
aside .widget li:hover,
|
||||
aside .widget li.selected,
|
||||
|
|
@ -1220,13 +1220,29 @@ aside #follow-sidebar .form-group-search .form-button-search {
|
|||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
div#sidebar-group-header h3 {
|
||||
float: left;
|
||||
}
|
||||
|
||||
div#sidebar-group-list {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.group-new-form {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.group-edit-tool {
|
||||
color: #555;
|
||||
}
|
||||
aside #group-sidebar .group-edit-tool,
|
||||
aside #saved-search-list .savedsearchdrop {
|
||||
opacity: 0.1;
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
aside #group-sidebar .sidebar-group-li:hover .group-edit-tool,
|
||||
aside #group-sidebar .group-edit-tool:hover,
|
||||
aside #saved-search-list .saved-search-li:hover .savedsearchdrop {
|
||||
color: #555;
|
||||
opacity: 0.8;
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
|
@ -2308,7 +2324,7 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
|
|||
|
||||
/* group edit page */
|
||||
.group-actions {
|
||||
margin-top: 20px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
|
@ -2321,8 +2337,12 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
|
|||
.contact-group-actions .fa-plus-circle { color: #008000;}
|
||||
|
||||
#group-edit-wrapper {
|
||||
margin-top: 14px;
|
||||
display: none;
|
||||
}
|
||||
#group-edit-header {
|
||||
display: block;
|
||||
}
|
||||
#group-update-wrapper .contact-photo-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -2331,7 +2351,7 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
|
|||
margin-top: -10px;
|
||||
display: flex;
|
||||
}
|
||||
#group-update-wrapper .viewcontact_wrapper .contact-action-link {
|
||||
#group-update-wrapper .viewcontact_wrapper .contact-group-link {
|
||||
opacity: 0.8;
|
||||
font-size: 20px;
|
||||
line-height: 50px;
|
||||
|
|
|
|||
|
|
@ -372,11 +372,13 @@ function openClose(theID) {
|
|||
}
|
||||
|
||||
function showHide(theID) {
|
||||
if(document.getElementById(theID).style.display == "block") {
|
||||
document.getElementById(theID).style.display = "none"
|
||||
var elem = document.getElementById(theID);
|
||||
|
||||
if( $(elem).is(':visible') ) {
|
||||
elem.style.display = "none";
|
||||
}
|
||||
else {
|
||||
document.getElementById(theID).style.display = "block"
|
||||
elem.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
15
view/theme/frio/templates/contact_block.tpl
Normal file
15
view/theme/frio/templates/contact_block.tpl
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
|
||||
<div id="contact-block">
|
||||
<h3 class="contact-block-h4 pull-left">{{$contacts}}</h3>
|
||||
{{if $micropro}}
|
||||
<a class="pull-right" href="viewcontacts/{{$nickname}}">
|
||||
<i class="faded-icon fa fa-eye" aria-hidden="true"></i><span class="sr-only">{{$viewcontacts}}</span>
|
||||
</a>
|
||||
<div class='contact-block-content'>
|
||||
{{foreach $micropro as $m}}
|
||||
{{$m}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
{{* The button to add or remove contacts from a contact group - group edit page *}}
|
||||
{{if $contact.change_member}}
|
||||
<div class="contact-group-actions pull-right nav-pills preferences">
|
||||
<button type="button" class="contact-action-link btn-link" onclick="groupChangeMember({{$contact.change_member.gid}},{{$contact.change_member.cid}},'{{$contact.change_member.sec_token}}'); return true;" data-toggle="tooltip" title="{{$contact.change_member.title}}">
|
||||
<button type="button" class="contact-action-link contact-group-link btn-link" onclick="groupChangeMember({{$contact.change_member.gid}},{{$contact.change_member.cid}},'{{$contact.change_member.sec_token}}'); return true;" data-toggle="tooltip" title="{{$contact.change_member.title}}">
|
||||
{{if $contact.label == "members"}}
|
||||
<i class="fa fa-times-circle" aria-hidden="true"></i>
|
||||
{{elseif $contact.label == "contacts"}}
|
||||
|
|
|
|||
|
|
@ -16,14 +16,10 @@
|
|||
<div id="contacts-search-wrapper">
|
||||
<form id="contacts-search-form" class="navbar-form" role="search" action="{{$cmd}}" method="get" >
|
||||
<div class="row">
|
||||
<div class="col-md-2"></div>
|
||||
<div class="col-md-8 ">
|
||||
<div class="form-group form-group-search">
|
||||
<input type="text" name="search" id="contacts-search" class="search-input form-control form-search" onfocus="this.select();" value="{{$search|escape:'html'}}" placeholder="{{$desc}}"/>
|
||||
<button class="btn btn-default btn-sm form-button-search" type="submit" id="contacts-search-submit">{{$submit}}</button>
|
||||
</div>
|
||||
<div class="form-group form-group-search">
|
||||
<input type="text" name="search" id="contacts-search" class="search-input form-control form-search" onfocus="this.select();" value="{{$search|escape:'html'}}" placeholder="{{$desc}}"/>
|
||||
<button class="btn btn-default btn-sm form-button-search" type="submit" id="contacts-search-submit">{{$submit}}</button>
|
||||
</div>
|
||||
<div class="col-md-2"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
|
||||
<div id="id_{{$field.0}}_wrapper" class="form-group field input">
|
||||
{{if !isset($label) || $label != false }}
|
||||
<label for="id_{{$field.0}}" id="label_{{$field.0}}">{{$field.1}}{{if $field.4}}<span class="required"> {{$field.4}}</span>{{/if}}</label>
|
||||
{{/if}}
|
||||
<input class="form-control" name="{{$field.0}}" id="id_{{$field.0}}"{{if $field.6 eq "email"}} type="email"{{elseif $field.6 eq "url"}} type="url"{{else}} type="text"{{/if}} value="{{$field.2|escape:'html'}}"{{if $field.4 eq "required"}} required{{/if}}{{if $field.5 eq "autofocus"}} autofocus{{elseif $field.5}} {{$field.5}}{{/if}} aria-describedby="{{$field.0}}_tip">
|
||||
{{if $field.3}}
|
||||
<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3}}</span>
|
||||
|
|
|
|||
|
|
@ -7,54 +7,52 @@
|
|||
<script type="text/javascript" src="view/theme/frio/js/mod_group.js"></script>
|
||||
|
||||
<div class="generic-page-wrapper">
|
||||
|
||||
{{if $editable == 1}}
|
||||
{{* The buttons for editing the contact group (edit name / remove contact group) *}}
|
||||
<div class="group-actions pull-right">
|
||||
<button type="button" id="group-rename" class="btn btn-clear" onclick="openClose('group-edit-wrapper'); return false;" title="{{$edit_name}}" data-toggle="tooltip">
|
||||
<button type="button" id="group-rename" class="btn btn-clear" onclick="showHide('group-edit-wrapper'); showHide('group-edit-header'); return false;" title="{{$edit_name}}" data-toggle="tooltip">
|
||||
<i class="fa fa-pencil" aria-hidden="true"></i>
|
||||
</button>
|
||||
{{if $drop}}{{$drop}}{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{include file="section_title.tpl"}}
|
||||
<div class="section-title-wrapper">
|
||||
<div id="group-edit-header">
|
||||
<h2>{{$title}}</h2>
|
||||
</div>
|
||||
|
||||
{{* Edit the name of the group *}}
|
||||
<div id="group-edit-wrapper" class="panel panel-inline">
|
||||
<form action="group/{{$gid}}" id="group-edit-form" method="post">
|
||||
<input type='hidden' name='form_security_token' value='{{$form_security_token}}'>
|
||||
{{* Edit the name of the group *}}
|
||||
<div id="group-edit-wrapper">
|
||||
|
||||
{{include file="field_input.tpl" field=$gname}}
|
||||
<div id="group-edit-submit-wrapper" class="form-group pull-right">
|
||||
<button class="btn btn-primary btn-small" type="submit" name="submit" value="{{$submit|escape:'html'}}">
|
||||
{{$submit|escape:'html'}}
|
||||
</button>
|
||||
</div>
|
||||
<div id="group-edit-select-end" class="clear"></div>
|
||||
</form>
|
||||
<form action="group/{{$gid}}" id="group-edit-form" method="post">
|
||||
|
||||
<div class="pull-left">
|
||||
{{include file="field_input.tpl" field=$gname label=false}}
|
||||
</div>
|
||||
<div id="group-edit-submit-wrapper" class="form-group pull-right">
|
||||
<button class="btn btn-primary btn-small" type="submit" name="submit" value="{{$submit|escape:'html'}}">
|
||||
{{$submit|escape:'html'}}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
{{* The search input field to search for contacts *}}
|
||||
<div id="contacts-search-wrapper">
|
||||
<div id="contacts-search-form" class="navbar-form" role="search">
|
||||
<form id="contacts-search-form" class="navbar-form" role="search" method="get" >
|
||||
<div class="row">
|
||||
<div class="col-md-2"></div>
|
||||
<div class="col-md-8 ">
|
||||
<div class="form-group form-group-search">
|
||||
<input type="text"
|
||||
name="filter"
|
||||
id="contacts-search"
|
||||
class="search-input form-control form-search"
|
||||
onkeyup="filterList(); return false;"
|
||||
onfocus="this.select(); return false;"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group form-group-search">
|
||||
<input type="text" name="search" id="contacts-search" class="search-input form-control form-search" onfocus="this.select();" onkeyup="filterList(); return false;" />
|
||||
<button class="btn btn-default btn-sm form-button-search" onclick="filterList(); return false;">{{$submit_filter}}</button>
|
||||
</div>
|
||||
<div class="col-md-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div id="contacts-search-end"></div>
|
||||
|
||||
{{if $groupeditor}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,22 @@
|
|||
<div class="widget" id="group-sidebar">
|
||||
<div id="sidebar-group-header">
|
||||
<h3>{{$title}}</h3>
|
||||
|
||||
{{if ! $newgroup}}
|
||||
<a class="group-edit-tool pull-right" href="{{$grouppage}}">
|
||||
<i class="faded-icon fa fa-pencil" aria-hidden="true"></i><span class="sr-only">{{$editgroupstext}}</span>
|
||||
</a>
|
||||
{{else}}
|
||||
<a class="group-edit-tool pull-right" id="sidebar-new-group" onclick="javascript:$('#group-new-form').fadeIn('fast');">
|
||||
<i class="faded-icon fa fa-plus" aria-hidden="true"></i><span class="sr-only">{{$createtext}}</span>
|
||||
</a>
|
||||
<form id="group-new-form" action="group/new" method="post" style="display:none;">
|
||||
<div class="form-group">
|
||||
<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
|
||||
<input name="groupname" id="id_groupname" class="form-control input-sm" placeholder="{{$creategroup}}">
|
||||
</div>
|
||||
</form>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div id="sidebar-group-list">
|
||||
{{* The list of available groups *}}
|
||||
<ul role="menu" id="sidebar-group-ul">
|
||||
|
|
@ -29,23 +45,10 @@
|
|||
<a id="sidebar-group-element-{{$group.id}}" class="sidebar-group-element" href="{{$group.href}}">{{$group.text}}</a>
|
||||
</li>
|
||||
{{/foreach}}
|
||||
|
||||
{{if $ungrouped}}<li class="{{if $ungrouped_selected}}selected{{/if}} sidebar-group-li" id="sidebar-ungrouped"><a href="nogroup">{{$ungrouped}}</a></li>{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{{if $newgroup}}
|
||||
<div id="sidebar-new-group">
|
||||
{{* show the input field by clicking "new group" *}}
|
||||
<button type="button" class="btn-link" onclick="javascript:$('#group-new-form').fadeIn('fast');">{{$createtext}}</button>
|
||||
<form id="group-new-form" action="group/new" method="post" style="display:none;">
|
||||
<div class="form-group">
|
||||
<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
|
||||
<input name="groupname" id="id_groupname" class="form-control input-sm" placeholder="{{$creategroup}}">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{else}}
|
||||
<div id="sidebar-edit-groups"><a href="{{$grouppage}}">{{$editgroupstext}}</a></div>
|
||||
{{/if}}
|
||||
|
||||
{{if $ungrouped}}<div id="sidebar-ungrouped"><a href="nogroup">{{$ungrouped}}</a></div>{{/if}}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue