initial work for contact page

This commit is contained in:
rabuzarus 2016-04-20 02:59:32 +02:00
parent 09daf2de26
commit b59c0648bc
4 changed files with 217 additions and 1 deletions

View file

@ -1414,6 +1414,19 @@ ul.dropdown-menu li:hover {
font-size: 11px;
color: #bebebe;
}
.media-list > li {
padding: 10px;
border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
position: relative;
/* border-left: 3px solid rgba(255,255,255,$contentbg_transp);*/
border-left: 3px solid rgba(255,255,255,0);
font-size: 12px;
}
.media-list > li:hover,
.media-list > li.selected {
border-left: 3px solid $link_color;
background-color: rgba(247, 247, 247, $contentbg_transp);
}
/* Forms */
.form-control {
@ -1462,7 +1475,9 @@ ul.dropdown-menu li:hover {
/* PAGES */
/* Profile-page */
#profile-page, .photos-content-wrapper, .settings-content-wrapper {
#profile-page, .photos-content-wrapper, .settings-content-wrapper,
.contacts-content-wrapper, .suggest-content-wrapper, .common-content-wrapper,
.allfriends-content-wrapper, .match-content-wrapper {
padding: 15px;
padding-bottom: 20px;
margin-bottom: 20px;
@ -1489,6 +1504,36 @@ ul.dropdown-menu li:hover {
float: left;
}
/* contacts page */
ul.viewcontact_wrapper {
margin-left: -15px;
margin-right: -15px;
}
ul.viewcontact_wrapper > li {
padding-left: 15px;
}
.contact-wrapper {
/* padding: 10px;
border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);;
position: relative;*/
/*border-left: 3px solid white;*/
}
.contact-wrapper.media {
overflow: visible;
word-wrap: break-word;
}
.contact-entry-desc {
color: #555;
}
.contact-entry-checkbox {
margin-top: -20px;
}
.contact-wrapper .media-body .contact-entry-name h4.media-heading {
font-weight: bold;
color: #777;
font-size: 15px;
}
/*
* Overwriting for transparency and other colors
*/

View file

@ -0,0 +1,59 @@
<div class="contact-wrapper media" id="contact-entry-wrapper-{{$id}}" >
<div class="contact-photo-wrapper dropdown pull-left" >
<div class="contact-photo mframe" id="contact-entry-photo-{{$contact.id}}" >
<a class="dropdown-toggle" id="contact-photo-menu-{{$contact.id}}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
<div class="contact-photo-image-wrapper">
<img class="contact-photo media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
{{* Overlay background on hover the avatar picture *}}
<div class="contact-photo-overlay">
<span class="contact-photo-overlay-content"><i class="fa fa-angle-down"></i></span>
</div>
</div>
</a>
{{if $contact.photo_menu}}
<ul class="contact-photo-menu menu-popup dropdown-menu " id="contact-photo-menu-{{$contact.id}}" role="menu" aria-labelledby="contact-photo-menu-{{$contact.id}}">
{{foreach $contact.photo_menu as $c}}
{{if $c.2}}
<li role="menuitem"><a target="redir" href="{{$c.1}}">{{$c.0}}</a></li>
{{else}}
<li role="menuitem"><a href="{{$c.1}}">{{$c.0}}</a></li>
{{/if}}
{{/foreach}}
</ul>
{{/if}}
</div>
</div>
<div class="media-body">
<div class="contact-entry-desc">
<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >
<h4 class="media-heading">{{$contact.name}}
{{if $contact.account_type}} <small class="contact-entry-details" id="contact-entry-accounttype-{{$contact.id}}">({{$contact.account_type}})</small>{{/if}}
</h4>
</div>
{{if $contact.alt_text}}<div class="contact-entry-details" id="contact-entry-rel-{{$contact.id}}" >{{$contact.alt_text}}</div>{{/if}}
{{if $contact.itemurl}}<div class="contact-entry-details" id="contact-entry-url-{{$contact.id}}" >{{$contact.itemurl}}</div>{{/if}}
{{if $contact.tags}}<div class="contact-entry-details" id="contact-entry-tags-{{$contact.id}}" >{{$contact.tags}}</div>{{/if}}
{{if $contact.details}}<div class="contact-entry-details" id="contact-entry-details-{{$contact.id}}" >{{$contact.details}}</div>{{/if}}
{{if $contact.network}}<div class="contact-entry-details" id="contact-entry-network-{{$contact.id}}" >{{$contact.network}}</div>{{/if}}
</div>
{{* if !$no_contacts_checkbox *}}
{{if $multiselect}}
<div class="checkbox contact-entry-checkbox pull-right">
<input id="checkbox-{{$contact.id}}" type="checkbox" class="contact-select pull-right" name="contact_batch[]" value="{{$contact.id}}">
<label for="checkbox-{{$contact.id}}"></label>
</div>
{{/if}}
</div>
</div>

View file

@ -0,0 +1,98 @@
<div id="contacts" class="standard-page">
{{$tabs}}
<h2 class="headding">{{$header}} {{if $total}} ({{$total}}) {{/if}}</h2>
{{if $finding}}<h4>{{$finding}}</h4>{{/if}}
<div id="contacts-search-wrapper">
<form id="contacts-search-form" class="navbar-form" action="{{$cmd}}" method="get" >
<label for="contacts-search" class="contacts-search-desc">{{$desc}}</label><br/>
<div class="input-group">
<input type="text" name="search" id="contacts-search" class="search-input form-control" onfocus="this.select();" value="{{$search|escape:'html'}}" />
<div class="input-group-btn">
<button class="btn btn-default" type="submit" name="submit" id="contacts-search-submit" value="{{$submit|escape:'html'}}"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</div>
<hr>
<div id="contacts-search-end"></div>
<form action="{{$baseurl}}/contacts/batch/" method="POST">
<ul class="nav nav-pills preferences">
<li class="dropdown pull-right">
<a class="btn btn-link dropdown-toggle" type="button" id="BatchActionDropdownMenuTools" data-toggle="dropdown" aria-expanded="true">
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="BatchActionDropdownMenuTools">
{{foreach $batch_actions as $n=>$l}}
<li role="presentation">
<input class="batch-action no-input fakelist" name="{{$n}}" value="{{$l|escape:'html'}}" type="submit">
</li>
{{/foreach}}
</ul>
</li>
</ul>
<div class="clear">
<ul id="viewcontact_wrapper" class="viewcontact_wrapper media-list">
{{foreach $contacts as $contact}}
<li>{{include file="contact_template.tpl"}}</li>
{{/foreach}}
</ul>
<div id="contact-edit-end"></div>
</form>
{{$paginate}}
</div>
<div class="modal" id="PokeModal" tabindex="-1" role="dialog" aria-labelledby="PokeModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<div class="modal" id="MailModal" tabindex="-1" role="dialog" aria-labelledby="MailModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<script>
$(document).ready(function() {
// replace data target for poke & private Message to make Modal Dialog possible
$('li a[href^="{{$baseurl}}/poke/?f"]').attr('data-target','#PokeModal').attr('data-toggle', 'modal');
$('li a[href^="{{$baseurl}}/message/new"]').attr('data-target','#MailModal').attr('data-toggle', 'modal');
// javascript dialog to batch actions
$(".batch-action").click(function(e){
if (confirm($(this).attr('value')+" ?")) {
return true;
} else {
e.preventDefault();
return false;
}
});
// add javascript confirm dialog to "drop" links. Plain html url have "?confirm=1" to show confirmation form, we need to remove it
$(".drop").each(function() {
$(this).attr('href', $(this).attr('href').replace("confirm=1","") );
$(this).click(function(e){
if (confirm("{{$contact_drop_confirm}}")) {
return true;
} else {
e.preventDefault();
return false;
}
});
});
});
</script>

View file

@ -0,0 +1,14 @@
{{include file="section_title.tpl"}}
{{$tab_str}}
<ul id="viewcontact_wrapper{{if $id}}-{{$id}}{{/if}}" class="viewcontact_wrapper media-list">
{{foreach $contacts as $contact}}
<li>{{include file="contact_template.tpl"}}</li>
{{/foreach}}
</ul>
<div class="clear"></div>
<div id="view-contact-end"></div>
{{$paginate}}