From be6aa3cbf9064cbea54e1bb36cfcf7fae39df593 Mon Sep 17 00:00:00 2001
From: rabuzarus <>
Date: Mon, 28 Aug 2017 14:29:11 +0200
Subject: [PATCH] Frio: provide single photo view template
---
view/theme/frio/css/style.css | 57 ++++++++++++++++++
view/theme/frio/js/mod_photos.js | 32 ++++++++++
view/theme/frio/templates/like_noshare.tpl | 8 +++
view/theme/frio/templates/photo_item.tpl | 61 +++++++++++++++++++
view/theme/frio/templates/photo_view.tpl | 68 ++++++++++++++++++++++
view/theme/frio/templates/photos_head.tpl | 5 ++
6 files changed, 231 insertions(+)
create mode 100644 view/theme/frio/js/mod_photos.js
create mode 100644 view/theme/frio/templates/like_noshare.tpl
create mode 100644 view/theme/frio/templates/photo_item.tpl
create mode 100644 view/theme/frio/templates/photo_view.tpl
create mode 100644 view/theme/frio/templates/photos_head.tpl
diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 8cc899793..c782e6233 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -2415,6 +2415,63 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
.event-buttons .plink-event-link {
margin-left: 20px;
}
+
+/* Photos Pages */
+#photo-photo {
+ position: relative;
+}
+.photo-next-link, .photo-prev-link {
+ height: 64px;
+ margin-top: -32px;
+ opacity: 0;
+ position: absolute;
+ top: 50%;
+ transform: translateZ(0);
+ transition: opacity .2s;
+ /*width: 27px;*/
+ width: 100px;
+ z-index: 11;
+ font-size: 64px;
+ color: #fff;
+ text-shadow:
+ -1px -1px 0 #000,
+ 1px -1px 0 #000,
+ -1px 1px 0 #000,
+ 1px 1px 0 #000;
+}
+.photo-next-link > i, .photo-prev-link > i {
+ vertical-align: super;
+}
+.photo-next-link > i {
+ float: right;
+}
+.photo-prev-link {
+ left: 20px;
+}
+.photo-next-link {
+ right: 20px;
+}
+#photo-photo:hover .photo-next-link,
+#photo-photo:hover .photo-prev-link {
+ opacity: 0.4;
+}
+#photo-photo .photo-next-link:hover,
+#photo-photo .photo-prev-link:hover {
+ opacity: 1;
+ color: #fff;
+}
+.photo-comment-wrapper .comment {
+ position: relative;
+}
+.photo-comment-wrapper .wall-item-content {
+ color: #555;
+ font-size: 13px;
+}
+.photo-comment-wrapper .comment-wwedit-wrapper,
+.photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
+ margin-top: 15px;
+}
+
/* Profiles Page */
.profile-listing-table {
display: table;
diff --git a/view/theme/frio/js/mod_photos.js b/view/theme/frio/js/mod_photos.js
new file mode 100644
index 000000000..b8d03b5db
--- /dev/null
+++ b/view/theme/frio/js/mod_photos.js
@@ -0,0 +1,32 @@
+
+$(document).ready(function() {
+
+ $('#contact_allow, #contact_deny, #group_allow, #group_deny').change(function() {
+ var selstr;
+ $('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() {
+ selstr = $(this).text();
+ $('#jot-perms-icon').removeClass('unlock').addClass('lock');
+ $('#jot-public').hide();
+ });
+ if(selstr == null) {
+ $('#jot-perms-icon').removeClass('lock').addClass('unlock');
+ $('#jot-public').show();
+ }
+
+ }).trigger('change');
+
+
+});
+
+$(window).load(function() {
+ // Get picture dimensions
+ var pheight = $("#photo-photo img").height();
+ var pwidth = $("#photo-photo img").width();
+
+ // Append the diminsons of the picture to the css of the photo-photo div
+ // we do this to make it possible to have overlay navigation buttons for the photo
+ $("#photo-photo").css({
+ "width": pwidth,
+ "height": pheight
+ });
+});
diff --git a/view/theme/frio/templates/like_noshare.tpl b/view/theme/frio/templates/like_noshare.tpl
new file mode 100644
index 000000000..d22804dcd
--- /dev/null
+++ b/view/theme/frio/templates/like_noshare.tpl
@@ -0,0 +1,8 @@
+
+<div class="wall-item-actions" id="wall-item-like-buttons-{{$id}}">
+ <button type="button" class="btn-link button-likes" id="like-{{$id}}" title="{{$likethis}}" onclick="dolike({{$id}},'like'); return false;" data-toggle="button"><i class="fa fa-thumbs-up" aria-hidden="true"></i> </button>
+ {{if $nolike}}
+ <button type="button" class="btn-link button-likes" id="dislike-{{$id}}" title="{{$nolike}}" onclick="dolike({{$id}},'dislike'); return false;" data-toggle="button"><i class="fa fa-thumbs-down" aria-hidden="true"></i> </button>
+ {{/if}}
+ <img id="like-rotator-{{$id}}" class="like-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait}}" style="display: none;" />
+</div>
diff --git a/view/theme/frio/templates/photo_item.tpl b/view/theme/frio/templates/photo_item.tpl
new file mode 100644
index 000000000..b86f40450
--- /dev/null
+++ b/view/theme/frio/templates/photo_item.tpl
@@ -0,0 +1,61 @@
+
+<div class="wall-item-outside-wrapper{{$indent}} media" id="wall-item-outside-wrapper-{{$id}}">
+
+ <ul class="nav nav-pills preferences">
+ {{* The time of the comment *}}
+ <li><span><small><time class="dt-published">{{$ago}}</time></small></span></li>
+
+ {{* Dropdown menu with actions (e.g. delete comment) *}}
+ {{if $drop.dropping }}
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" id="dropdownMenuTools-{{$id}}" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-angle-down"></i></a>
+
+ <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenuTools-{{$id}}">
+ <li role="menuitem">
+ <a onclick="dropItem('item/drop/{{$id}}', '#wall-item-outside-wrapper-{{$id}}'); return false;" class="delete" title="{{$drop.delete}}"><i class="fa fa-trash"></i> {{$drop.delete}}</a>
+ </li>
+ </ul>
+ </li>
+ {{/if}}
+ </ul>
+
+ {{* avatar picture *}}
+ <div class="contact-photo-wrapper mframe p-author h-card pull-left">
+ <a class="userinfo" id="wall-item-photo-menu-{{$id}} u-url" href="{{$profile_url}}">
+ <div class="contact-photo-image-wrapper">
+ <img src="{{$thumb}}" class="contact-photo-xs media-object p-name u-photo" id="wall-item-photo-{{$item.id}}" alt="{{$name}}" />
+ </div>
+ </a>
+ </div>
+
+ <div class="media-body">
+
+ {{* the header with the comment author name *}}
+ <div role="heading " class="contact-info-comment">
+ <h5 class="media-heading">
+ <a href="{{$profile_url}}" title="View {{$name}}'s profile" class="wall-item-name-link userinfo"><span class="btn-link">{{$name}}</span></a>
+ </h5>
+ </div>
+
+ {{* comment content *}}
+ <div itemprop="description" class="wall-item-content" id="wall-item-content-{{$id}}">
+ {{if $title}}
+ <div class="wall-item-title" id="wall-item-title-{{$id}}">{{$title}}</div>
+ {{/if}}
+
+ <div class="wall-item-body {{if !$title}}p-name{{/if}}" id="wall-item-body-{{$id}}" >{{$body}}</div>
+ </div>
+
+ <div class="wall-item-wrapper-end clear"></div>
+ <div class="wall-item-comment-separator"></div>
+
+ {{* comment text field *}}
+ {{if $comment}}
+ <div class="wall-item-comment-wrapper" id="item-comments-{{$item.id}}">
+ {{$comment}}
+ </div>
+ {{/if}}
+ </div>
+
+ <div class="wall-item-outside-wrapper-end{{$indent}} clear"></div>
+</div>
diff --git a/view/theme/frio/templates/photo_view.tpl b/view/theme/frio/templates/photo_view.tpl
new file mode 100644
index 000000000..17edb858b
--- /dev/null
+++ b/view/theme/frio/templates/photo_view.tpl
@@ -0,0 +1,68 @@
+{{* Template for singele photo view *}}
+
+{{* "live-photos" is needed for js autoupdate *}}
+<div id="live-photos"></div>
+
+<div id="photo-view-{{$id}}" class="general-content-wrapper">
+ <h3><a href="{{$album.0}}">{{$album.1}}</a></h3>
+
+ <div id="photo-edit-link-wrap">
+ {{if $tools}}
+ <a id="photo-edit-link" href="{{$tools.edit.0}}">{{$tools.edit.1}}</a>
+ |
+ <a id="photo-toprofile-link" href="{{$tools.profile.0}}">{{$tools.profile.1}}</a>
+ {{/if}}
+ {{if $lock}} | <img src="images/lock_icon.gif" class="lockview" alt="{{$lock}}" onclick="lockview(event,'photo/{{$id}}');" /> {{/if}}
+ </div>
+
+ <div id="photo-view-wrapper">
+ <div id="photo-photo">
+ {{* The photo *}}
+ <div class="photo-container">
+ <a href="{{$photo.href}}" title="{{$photo.title}}"><img src="{{$photo.src}}" /></a>
+ </div>
+
+ {{* Overlay buttons for previous and next photo *}}
+ {{if $prevlink}}
+ <a class="photo-prev-link" href="{{$prevlink.0}}"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
+ {{/if}}
+ {{if $nextlink}}
+ <a class="photo-next-link" href="{{$nextlink.0}}"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
+ {{/if}}
+ </div>
+
+ <div id="photo-photo-end"></div>
+ {{* The photo description *}}
+ <div id="photo-caption">{{$desc}}</div>
+
+ {{* Tags and mentions *}}
+ {{if $tags}}
+ <div id="photo-tags">{{$tags.1}}</div>
+ {{/if}}
+
+ {{if $tags.2}}
+ <div id="tag-remove">
+ <a href="{{$tags.2}}">{{$tags.3}}</a>
+ </div>
+ {{/if}}
+
+ {{* The part for editing the photo - only available for the edit subpage *}}
+ {{if $edit}}{{$edit}}{{/if}}
+
+ {{if $likebuttons}}
+ <div id="photo-like-div">
+ {{$likebuttons}}
+ {{$like}}
+ {{$dislike}}
+ </div>
+ {{/if}}
+ <hr>
+ </div>
+
+ {{* Insert the comments *}}
+ <div id="photo-comment-wrapper-{{$id}}" class="photo-comment-wrapper">
+ {{$comments}}
+ </div>
+
+ {{$paginate}}
+</div>
diff --git a/view/theme/frio/templates/photos_head.tpl b/view/theme/frio/templates/photos_head.tpl
new file mode 100644
index 000000000..37a8e0496
--- /dev/null
+++ b/view/theme/frio/templates/photos_head.tpl
@@ -0,0 +1,5 @@
+
+<script type="text/javascript" src="view/theme/frio/js/mod_photos.js"></script>
+<script type="text/javascript">
+ var ispublic = "{{$ispublic}}";
+</script>