bitPickups/friendica_2020-09-1_sharedHosting
1
0
Fork 0
Code Pull requests Activity
friendica_2020-09-1_sharedH.../view/theme/frio/templates/contact_template.tpl

177 lines
11 KiB
Smarty
Raw Normal View History

initial work for contact page
2016-04-20 02:59:32 +02:00
contact_template.tpl : fix missing ID
2016-04-29 15:00:15 +02:00
<div class="contact-wrapper media" id="contact-entry-wrapper-{{$contact.id}}" >
some docu for the contact templates
2016-04-20 03:15:35 +02:00
{{* This is a wrapper for the contact picture and the dropdown menu with contact relating actions *}}
initial work for contact page
2016-04-20 02:59:32 +02:00
<div class="contact-photo-wrapper dropdown pull-left" >
contacts page: change the contact-photo size according to display size
2016-04-21 01:52:39 +02:00
<div class="contact-entry-photo mframe" id="contact-entry-photo-{{$contact.id}}" >
initial work for contact page
2016-04-20 02:59:32 +02:00
Turn all the action <a> tags into buttons - Add CSS changes to support both <a> and <button class="btn btn-link"> - Removed unnecessary "return false" in onclick attributes - Simplified tabs in profile page to native Bootstrap behavior
2017-03-15 04:47:02 +01:00
<button type="button" class="btn btn-link dropdown-toggle" id="contact-photo-menu-{{$contact.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
contacts page: change the contact-photo size according to display size
2016-04-21 01:52:39 +02:00
<div class="contact-photo-image-wrapper hidden-xs">
<img class="contact-photo media-object xl" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
initial work for contact page
2016-04-20 02:59:32 +02:00
{{* Overlay background on hover the avatar picture *}}
<div class="contact-photo-overlay">
contacts page: change the contact-photo size according to display size
2016-04-21 01:52:39 +02:00
<span class="contact-photo-overlay-content xl"><i class="fa fa-angle-down"></i></span>
</div>
</div>
contacts page: add docu
2016-04-21 01:55:47 +02:00
{{* use a smaller picture on very small displays (e.g. mobiles) *}}
introduce a filter function at the contact page. This is done with the help of textcomplete and jsmart.js. There is annoying bug inside. If the screensize is to small, the browser freezes. It is traced back to the "media-body" class (and its css attributes) which we use in the template.
2016-04-28 21:35:33 +02:00
<div class="contact-photo-image-wrapper hidden-lg hidden-md hidden-sm">
contacts page: change the contact-photo size according to display size
2016-04-21 01:52:39 +02:00
<img class="contact-photo-xs 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 overlay-xs"><i class="fa fa-angle-down"></i></span>
initial work for contact page
2016-04-20 02:59:32 +02:00
</div>
</div>
Turn all the action <a> tags into buttons - Add CSS changes to support both <a> and <button class="btn btn-link"> - Removed unnecessary "return false" in onclick attributes - Simplified tabs in profile page to native Bootstrap behavior
2017-03-15 04:47:02 +01:00
</button>
initial work for contact page
2016-04-20 02:59:32 +02:00
{{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>
replace pm & poke links in contact_photo_menu and use js for modal instead
2016-04-20 19:32:19 +02:00
{{elseif $c.3}}
Turn all the action <a> tags into buttons - Add CSS changes to support both <a> and <button class="btn btn-link"> - Removed unnecessary "return false" in onclick attributes - Simplified tabs in profile page to native Bootstrap behavior
2017-03-15 04:47:02 +01:00
<li role="menuitem"><button type="button" class="btn-link" onclick="addToModal('{{$c.1}}')">{{$c.0}}</button></li>
initial work for contact page
2016-04-20 02:59:32 +02:00
{{else}}
<li role="menuitem"><a href="{{$c.1}}">{{$c.0}}</a></li>
{{/if}}
{{/foreach}}
</ul>
{{/if}}
</div>
</div>
<div class="media-body">
frio: adding contact actions on hover for contacts in contact view
2016-06-01 17:21:57 +02:00
{{* The contact actions like private mail, delete contact, edit contact and so on *}}
<div class="contact-actions pull-right nav-pills preferences hidden-xs">
Turn all the action <a> tags into buttons - Add CSS changes to support both <a> and <button class="btn btn-link"> - Removed unnecessary "return false" in onclick attributes - Simplified tabs in profile page to native Bootstrap behavior
2017-03-15 04:47:02 +01:00
{{if $contact.photo_menu.pm }}<button type="button" class="contact-action-link btn-link" onclick="addToModal('{{$contact.photo_menu.pm.1}}')" data-toggle="tooltip" title="{{$contact.photo_menu.pm.0}}"><i class="fa fa-envelope" aria-hidden="true"></i></button>{{/if}}
{{if $contact.photo_menu.poke }}<button type="button" class="contact-action-link btn-link" onclick="addToModal('{{$contact.photo_menu.poke.1}}')" data-toggle="tooltip" title="{{$contact.photo_menu.poke.0}}"><i class="fa fa-heartbeat" aria-hidden="true"></i></button>{{/if}}
{{if $contact.photo_menu.network}}<a class="contact-action-link btn-link" href="{{$contact.photo_menu.network.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.network.0}}"><i class="fa fa-cloud" aria-hidden="true"></i></a>{{/if}}
{{if $contact.photo_menu.edit }}<a class="contact-action-link btn-link" href="{{$contact.photo_menu.edit.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.edit.0}}"><i class="fa fa-pencil" aria-hidden="true"></i></a>{{/if}}
{{if $contact.photo_menu.drop }}<button type="button" class="contact-action-link btn-link" onclick="addToModal('{{$contact.photo_menu.drop.1}}')" data-toggle="tooltip" title="{{$contact.photo_menu.drop.0}}"><i class="fa fa-user-times" aria-hidden="true"></i></button>{{/if}}
{{if $contact.photo_menu.follow }}<a class="contact-action-link btn-link" href="{{$contact.photo_menu.follow.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.follow.0}}"><i class="fa fa-user-plus" aria-hidden="true"></i></a>{{/if}}
{{if $contact.photo_menu.hide }}<a class="contact-action-link btn-link" href="{{$contact.photo_menu.hide.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.hide.0}}"><i class="fa fa-times" aria-hidden="true"></i></a>{{/if}}
frio: adding contact actions on hover for contacts in contact view
2016-06-01 17:21:57 +02:00
</div>
some docu for the contact templates
2016-04-20 03:15:35 +02:00
{{* The contact description (e.g. Name, Network, kind of connection and so on *}}
initial work for contact page
2016-04-20 02:59:32 +02:00
<div class="contact-entry-desc">
<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >
frio: adding contact actions on hover for contacts in contact view
2016-06-01 17:21:57 +02:00
<h4 class="media-heading"><a href="{{$contact.url}}">{{$contact.name}}</a>
initial work for contact page
2016-04-20 02:59:32 +02:00
{{if $contact.account_type}} <small class="contact-entry-details" id="contact-entry-accounttype-{{$contact.id}}">({{$contact.account_type}})</small>{{/if}}
contact page: show a forum symbol if contact is a forum
2016-04-20 21:10:39 +02:00
{{if $contact.account_type == 'Forum'}}<i class="fa fa-comments-o" aria-hidden="true"></i>{{/if}}
{{* @todo this needs some changing in core because $contact.account_type contains a translated string which may notbe the same in every language *}}
initial work for contact page
2016-04-20 02:59:32 +02:00
</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>
some docu for the contact templates
2016-04-20 03:15:35 +02:00
{{* The checkbox to perform batch actions to these contacts (for batch actions have a look at contacts-template.tpl) *}}
initial work for contact page
2016-04-20 02:59:32 +02:00
{{* 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>
introduce a filter function at the contact page. This is done with the help of textcomplete and jsmart.js. There is annoying bug inside. If the screensize is to small, the browser freezes. It is traced back to the "media-body" class (and its css attributes) which we use in the template.
2016-04-28 21:35:33 +02:00
Turn all the action <a> tags into buttons - Add CSS changes to support both <a> and <button class="btn btn-link"> - Removed unnecessary "return false" in onclick attributes - Simplified tabs in profile page to native Bootstrap behavior
2017-03-15 04:47:02 +01:00
{{* the following part is a nearly a copy of the part above but it is modified for working with js.
introduce a filter function at the contact page. This is done with the help of textcomplete and jsmart.js. There is annoying bug inside. If the screensize is to small, the browser freezes. It is traced back to the "media-body" class (and its css attributes) which we use in the template.
2016-04-28 21:35:33 +02:00
We use this part to filter the contacts with jquery.textcomplete *}}
<div class="javascript-template" rel="contact-template" style="display: none">
<div class="contact-wrapper media" id="contact-entry-wrapper-{$id}" >
{{* This is a wrapper for the contact picture and the dropdown menu with contact relating actions *}}
<div class="contact-photo-wrapper dropdown pull-left" >
<div class="contact-entry-photo mframe" id="contact-entry-photo-{$id}" >
Turn all the action <a> tags into buttons - Add CSS changes to support both <a> and <button class="btn btn-link"> - Removed unnecessary "return false" in onclick attributes - Simplified tabs in profile page to native Bootstrap behavior
2017-03-15 04:47:02 +01:00
<button type="button" class="btn btn-link dropdown-toggle" id="contact-photo-menu-{$id}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
introduce a filter function at the contact page. This is done with the help of textcomplete and jsmart.js. There is annoying bug inside. If the screensize is to small, the browser freezes. It is traced back to the "media-body" class (and its css attributes) which we use in the template.
2016-04-28 21:35:33 +02:00
<div class="contact-photo-image-wrapper hidden-xs">
<img class="contact-photo media-object xl" src="{$thumb}" {11} alt="{$name}" />
{{* Overlay background on hover the avatar picture *}}
<div class="contact-photo-overlay">
<span class="contact-photo-overlay-content xl"><i class="fa fa-angle-down"></i></span>
</div>
</div>
{{* use a smaller picture on very small displays (e.g. mobiles) *}}
<div class="contact-photo-image-wrapper hidden-lg hidden-md hidden-sm">
<img class="contact-photo-xs media-object" src="{$thumb}" {11} alt="{$name}" />
{{* Overlay background on hover the avatar picture *}}
<div class="contact-photo-overlay">
<span class="contact-photo-overlay-content overlay-xs"><i class="fa fa-angle-down"></i></span>
</div>
</div>
Turn all the action <a> tags into buttons - Add CSS changes to support both <a> and <button class="btn btn-link"> - Removed unnecessary "return false" in onclick attributes - Simplified tabs in profile page to native Bootstrap behavior
2017-03-15 04:47:02 +01:00
</button>
introduce a filter function at the contact page. This is done with the help of textcomplete and jsmart.js. There is annoying bug inside. If the screensize is to small, the browser freezes. It is traced back to the "media-body" class (and its css attributes) which we use in the template.
2016-04-28 21:35:33 +02:00
{if $photo_menu}
<ul class="contact-photo-menu menu-popup dropdown-menu " id="contact-photo-menu-{$id}" role="menu" aria-labelledby="contact-photo-menu-{$id}">
{foreach $photo_menu as $c}
{if $c.2}
<li role="menuitem"><a target="redir" href="{$c.1}">{$c.0}</a></li>
{elseif $c.3}
Turn all the action <a> tags into buttons - Add CSS changes to support both <a> and <button class="btn btn-link"> - Removed unnecessary "return false" in onclick attributes - Simplified tabs in profile page to native Bootstrap behavior
2017-03-15 04:47:02 +01:00
<li role="menuitem"><button type="button" class="btn-link" onclick="addToModal('{$c.1}')">{$c.0}</button></li>
introduce a filter function at the contact page. This is done with the help of textcomplete and jsmart.js. There is annoying bug inside. If the screensize is to small, the browser freezes. It is traced back to the "media-body" class (and its css attributes) which we use in the template.
2016-04-28 21:35:33 +02:00
{else}
<li role="menuitem"><a href="{$c.1}">{$c.0}</a></li>
{/if}
{/foreach}
</ul>
{/if}
</div>
</div>
frio: adding contact actions on hover for contacts in contact view
2016-06-01 17:21:57 +02:00
<div class="media-body">
{{* The contact actions like private mail, delete contact, edit contact and so on *}}
<div class="contact-actions pull-right nav-pills preferences hidden-xs">
Turn all the action <a> tags into buttons - Add CSS changes to support both <a> and <button class="btn btn-link"> - Removed unnecessary "return false" in onclick attributes - Simplified tabs in profile page to native Bootstrap behavior
2017-03-15 04:47:02 +01:00
{if $photo_menu.pm }<button type="button" class="contact-action-link btn-link" onclick="addToModal('{$photo_menu.pm.1}')" data-toggle="tooltip" title="{$photo_menu.pm.0}"><i class="fa fa-envelope" aria-hidden="true"></i></a>{/if}
{if $photo_menu.poke }<button type="button" class="contact-action-link btn-link" onclick="addToModal('{$photo_menu.poke.1}')" data-toggle="tooltip" title="{$photo_menu.poke.0}"><i class="fa fa-heartbeat" aria-hidden="true"></i></a>{/if}
{if $photo_menu.network}<a class="contact-action-link btn-link" href="{$photo_menu.network.1}" data-toggle="tooltip" title="{$photo_menu.network.0}"><i class="fa fa-cloud" aria-hidden="true"></i></a>{/if}
{if $photo_menu.edit }<a class="contact-action-link btn-link" href="{$photo_menu.edit.1}" data-toggle="tooltip" title="{$photo_menu.edit.0}"><i class="fa fa-pencil" aria-hidden="true"></i></a>{/if}
{if $photo_menu.drop }<a class="contact-action-link btn-link" href="{$photo_menu.drop.1}" data-toggle="tooltip" title="{$photo_menu.drop.0}"><i class="fa fa-user-times" aria-hidden="true"></i></a>{/if}
{if $photo_menu.follow }<a class="contact-action-link btn-link" href="{$photo_menu.follow.1}" data-toggle="tooltip" title="{$photo_menu.follow.0}"><i class="fa fa-user-plus" aria-hidden="true"></i></a>{/if}
frio: adding contact actions on hover for contacts in contact view
2016-06-01 17:21:57 +02:00
</div>
introduce a filter function at the contact page. This is done with the help of textcomplete and jsmart.js. There is annoying bug inside. If the screensize is to small, the browser freezes. It is traced back to the "media-body" class (and its css attributes) which we use in the template.
2016-04-28 21:35:33 +02:00
{{* The contact description (e.g. Name, Network, kind of connection and so on *}}
<div class="contact-entry-desc">
<div class="contact-entry-name" id="contact-entry-name-{$id}" >
frio: fix url variable for textcomplete in contact_template
2016-07-03 09:50:34 +02:00
<h4 class="media-heading"><a href="{$url}">{$name}</a>
introduce a filter function at the contact page. This is done with the help of textcomplete and jsmart.js. There is annoying bug inside. If the screensize is to small, the browser freezes. It is traced back to the "media-body" class (and its css attributes) which we use in the template.
2016-04-28 21:35:33 +02:00
{if $account_type} <small class="contact-entry-details" id="contact-entry-accounttype-{$id}">({$account_type})</small>{/if}
{if $account_type == 'Forum'}<i class="fa fa-comments-o" aria-hidden="true"></i>{/if}
{{* @todo this needs some changing in core because $contact.account_type contains a translated string which may notbe the same in every language *}}
</h4>
</div>
{if $alt_text}<div class="contact-entry-details" id="contact-entry-rel-{$id}" >{$alt_text}</div>{/if}
{if $itemurl}<div class="contact-entry-details" id="contact-entry-url-{$id}" >{$itemurl}</div>{/if}
{if $tags}<div class="contact-entry-details" id="contact-entry-tags-{$id}" >{$tags}</div>{/if}
{if $details}<div class="contact-entry-details" id="contact-entry-details-{$id}" >{$details}</div>{/if}
{if $network}<div class="contact-entry-details" id="contact-entry-network-{$id}" >{$network}</div>{/if}
</div>
{{* The checkbox to perform batch actions to these contacts (for batch actions have a look at contacts-template.tpl) *}}
{{* if !$no_contacts_checkbox *}}
{{if $multiselect}}
<div class="checkbox contact-entry-checkbox pull-right">
<input id="checkbox-{$id}" type="checkbox" class="contact-select pull-right" name="contact_batch[]" value="{$id}">
<label for="checkbox-{$id}"></label>
</div>
{{/if}}
</div>
</div>
</div>
Copy permalink