From 2ef2d0b79f4024174292faa45840cee065b464a3 Mon Sep 17 00:00:00 2001
From: Fabio Comuni <fabrix.xm@gmail.com>
Date: Thu, 22 Dec 2011 16:33:14 +0100
Subject: [PATCH] quattro: contacts and first photo page
---
mod/photos.php | 42 +++++++------
view/contact_template.tpl | 22 ++++---
view/directory_item.tpl | 19 +++---
view/photo_top.tpl | 8 ++-
view/photos_recent.tpl | 10 ++++
view/theme/quattro/quattro.less | 79 ++++++++++++++++++-------
view/theme/quattro/style.css | 102 ++++++++++++++++++++++++--------
view/viewcontact_template.tpl | 14 ++---
view/wall_item.tpl | 10 ++--
view/wallwall_item.tpl | 16 ++---
10 files changed, 208 insertions(+), 114 deletions(-)
create mode 100644 view/photos_recent.tpl
diff --git a/mod/photos.php b/mod/photos.php
index bf3299de07..12225b5c5a 100644
--- a/mod/photos.php
+++ b/mod/photos.php
@@ -1367,30 +1367,36 @@ function photos_content(&$a) {
intval($a->pager['itemspage'])
);
- $o .= '<h3>' . t('Recent Photos') . '</h3>';
- if($can_post) {
- $o .= '<div id="photo-top-links"><a id="photo-top-upload-link" href="'. $a->get_baseurl() . '/photos/'
- . $a->data['user']['nickname'] . '/upload' . '">' . t('Upload New Photos') . '</a></div>';
- }
- $tpl = get_markup_template('photo_top.tpl');
+ $photos = array();
if(count($r)) {
foreach($r as $rr) {
- $o .= replace_macros($tpl,array(
- '$id' => $rr['id'],
- '$photolink' => $a->get_baseurl() . '/photos/' . $a->data['user']['nickname'] . '/image/' . $rr['resource-id'],
- '$phototitle' => t('View Photo'),
- '$imgsrc' => $a->get_baseurl() . '/photo/' . $rr['resource-id'] . '-' . ((($rr['scale']) == 6) ? 4 : $rr['scale']) . '.jpg',
- '$albumlink' => $a->get_baseurl() . '/photos/' . $a->data['user']['nickname'] . '/album/' . bin2hex($rr['album']),
- '$albumname' => template_escape($rr['album']),
- '$albumalt' => t('View Album'),
- '$imgalt' => template_escape($rr['filename'])
- ));
-
+ $photos[] = array(
+ 'id' => $rr['id'],
+ 'link' => $a->get_baseurl() . '/photos/' . $a->data['user']['nickname'] . '/image/' . $rr['resource-id'],
+ 'title' => t('View Photo'),
+ 'src' => $a->get_baseurl() . '/photo/' . $rr['resource-id'] . '-' . ((($rr['scale']) == 6) ? 4 : $rr['scale']) . '.jpg',
+ 'alt' => template_escape($rr['filename']),
+ 'album' => array(
+ 'link' => $a->get_baseurl() . '/photos/' . $a->data['user']['nickname'] . '/album/' . bin2hex($rr['album']),
+ 'name' => template_escape($rr['album']),
+ 'alt' => t('View Album'),
+ ),
+
+ );
}
- $o .= '<div id="photo-top-end"></div>';
}
+
+ $tpl = get_markup_template('photos_recent.tpl');
+ $o .= replace_macros($tpl,array(
+ '$title' => t('Recent Photos'),
+ '$can_post' => $can_post,
+ '$upload' => array(t('Upload New Photos'), $a->get_baseurl().'/photos/'.$a->data['user']['nickname'].'/upload'),
+ '$photos' => $photos,
+ ));
+
+
$o .= paginate($a);
return $o;
}
diff --git a/view/contact_template.tpl b/view/contact_template.tpl
index e1a080b675..f2749656a2 100644
--- a/view/contact_template.tpl
+++ b/view/contact_template.tpl
@@ -1,23 +1,21 @@
-<div class="contact-entry-wrapper" id="contact-entry-wrapper-$id" >
- <div class="contact-entry-photo-wrapper" >
- <div class="contact-entry-photo mframe" id="contact-entry-photo-$id"
+<div class="contact-wrapper" id="contact-entry-wrapper-$id" >
+ <div class="contact-photo-wrapper" >
+ <div class="contact-photo mframe" id="contact-entry-photo-$id"
onmouseover="if (typeof t$id != 'undefined') clearTimeout(t$id); openMenu('contact-photo-menu-button-$id')" onmouseout="t$id=setTimeout('closeMenu(\'contact-photo-menu-button-$id\'); closeMenu(\'contact-photo-menu-$id\');',200)" >
<a href="$url" title="$img_hover" /><img src="$thumb" $sparkle alt="$name" /></a>
- <span onclick="openClose('contact-photo-menu-$id');" class="fakelink contact-photo-menu-button" id="contact-photo-menu-button-$id">menu</span>
- <div class="contact-photo-menu" id="contact-photo-menu-$id">
- <ul>
- $contact_photo_menu
- </ul>
- </div>
+ <a href="#" rel="#contact-photo-menu-$id" class="contact-photo-menu-button icon s16 menu" id="contact-photo-menu-button-$id">menu</a>
+ <ul class="contact-photo-menu menu-popup" id="contact-photo-menu-$id">
+ $contact_photo_menu
+ </ul>
</div>
</div>
- <div class="contact-entry-photo-end" ></div>
- <div class="contact-entry-name" id="contact-entry-name-$id" >$name</div>
+ <div class="contact-name" id="contact-entry-name-$id" >$name</div>
+
- <div class="contact-entry-end" ></div>
</div>
+
diff --git a/view/directory_item.tpl b/view/directory_item.tpl
index 031f4ff229..b45da4465e 100644
--- a/view/directory_item.tpl
+++ b/view/directory_item.tpl
@@ -1,14 +1,11 @@
<div class="directory-item lframe" id="directory-item-$id" >
-<div class="directory-photo-wrapper" id="directory-photo-wrapper-$id" >
-<div class="directory-photo" id="directory-photo-$id" ><a href="$profile-link" class="directory-profile-link" id="directory-profile-link-$id" ><img class="directory-photo-img" src="$photo" alt="$alt-text" title="$alt-text" /></a>
-</div>
-</div>
-<div class="directory-photo-end"></div>
-<div class="directory-name-wrapper">
-<div class="directory-name" id="directory-name-$id">$name</div>
+ <div class="contact-photo-wrapper" id="directory-photo-wrapper-$id" >
+ <div class="contact-photo" id="directory-photo-$id" >
+ <a href="$profile-link" class="directory-profile-link" id="directory-profile-link-$id" ><img class="directory-photo-img" src="$photo" alt="$alt-text" title="$alt-text" /></a>
+ </div>
+ </div>
+
+ <div class="contact-name" id="directory-name-$id">$name</div>
+ <div class="contact-details">$details</div>
</div>
-<div class="directory-name-end"></div>
-<div class="directory-details">$details</div>
-<div class="directory-item-end"></div>
-</div>
\ No newline at end of file
diff --git a/view/photo_top.tpl b/view/photo_top.tpl
index ab88c5ff52..04a054b520 100644
--- a/view/photo_top.tpl
+++ b/view/photo_top.tpl
@@ -1,6 +1,8 @@
<div class="photo-top-image-wrapper lframe" id="photo-top-image-wrapper-$id">
- <a href="$photolink" class="photo-top-photo-link" id="photo-top-photo-link-$id" title="$phototitle"><img src="$imgsrc" alt="$imgalt" title="$phototitle" class="photo-top-photo" id="photo-top-photo-$id" /></a>
- <div class="photo-top-album-name"><a href="$albumlink" class="photo-top-album-link" title="$albumalt" >$albumname</a></div>
+ <a href="$photo.link" class="photo-top-photo-link" id="photo-top-photo-link-$photo.id" title="$photo.title">
+ <img src="$photo.src" alt="$photo.alt" title="$photo.title" class="photo-top-photo" id="photo-top-photo-$photo.id" />
+ </a>
+ <div class="photo-top-album-name"><a href="$photo.album.link" class="photo-top-album-link" title="$photo.album.alt" >$photo.album.name</a></div>
</div>
-<div class="photo-top-image-wrapper-end"></div>
+
diff --git a/view/photos_recent.tpl b/view/photos_recent.tpl
new file mode 100644
index 0000000000..b8cb924b79
--- /dev/null
+++ b/view/photos_recent.tpl
@@ -0,0 +1,10 @@
+<h3>$title</h3>
+{{ if $can_post }}
+<a id="photo-top-upload-link" href="$upload.1">$upload.0</a>
+{{ endif }}
+
+<div class="photos">
+{{ for $photos as $photo }}
+ {{ inc photo_top.tpl }}{{ endinc }}
+{{ endfor }}
+</div>
diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index 3c16777ea4..6715773037 100644
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -293,6 +293,7 @@ aside {
.contact-block-link {
float: left;
margin: 0px 2px 2px 0px;
+ img { widht: 48px; height: 58px; }
}
}
@@ -361,23 +362,6 @@ section {
text-align: left;
width: 60px;
- .wall-item-photo-wrapper { position: relative; }
- .wall-item-photo {
- width: 48px; height: 48px;
- overflow: hidden;
- text-indent: -9999px;
- display: block;
- background: url(../../../images/icons/48/user.png) no-repeat center center;
- }
-
- .wall-item-photo-menu-button {
- display: none;
- position: absolute;
- left: -4px;
- top: 28px;
- }
- .wall-item-photo-menu { display: none; }
-
}
.wall-item-location {
word-wrap: break-word;
@@ -420,12 +404,12 @@ section {
.wall-item-container.comment {
/*margin-top: 50px;*/
- .wall-item-photo { width: 32px; height: 32px; margin-left: 16px;
- background: url(../../../images/icons/22/user.png) no-repeat center center;
+ .contact-photo { width: 32px; height: 32px; margin-left: 16px;
+ /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
}
- .wall-item-photo-menu-button {
- top: 13px !important;
- left: 10px !important;
+ .contact-photo-menu-button {
+ top: 15px !important;
+ left: 15px !important;
}
.wall-item-links { padding-left: 12px; }
}
@@ -461,6 +445,46 @@ section {
}
}
+/* contacts menu */
+.contact-photo-wrapper { position: relative; }
+.contact-photo {
+ width: 48px; height: 48px;
+ img { width: 48px; height: 48px; }
+ overflow: hidden;
+ display: block;
+ }
+.contact-photo-menu-button {
+ display: none;
+ position: absolute;
+ left: -2px;
+ top: 31px;
+}
+
+.contact-wrapper {
+ float: left;
+ width: 90px;
+ height: 90px;
+ .contact-photo {
+ width: 80px; height: 80px;
+ img { width: 80px; height: 80px; }
+ }
+ .contact-photo-menu-button {
+ left: 0px;
+ top: 63px;
+ }
+}
+.directory-item {
+ float: left;
+ width: 200px;
+ height: 200px;
+ .contact-photo {
+ width: 175px; height: 175px;
+ img { width: 175px; height: 175px; }
+ }
+}
+.contact-name { text-align: center; font-weight: bold; }
+.contact-details { color: @Grey3;}
+
/* editor */
.jothidden { display: none; }
#jot {
@@ -793,6 +817,17 @@ ul.tabs {
float: left;
}
+/* contacts */
+.contact-entry-wrapper {
+ width: 50px; float: left;
+}
+
+/* photo */
+.lframe {
+ float: left;
+ margin: 0px 10px 10px 0px;
+}
+
/* page footer */
footer { height: 100px; display: table-row; }
diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css
index 948a7cb041..003ebfae6f 100644
--- a/view/theme/quattro/style.css
+++ b/view/theme/quattro/style.css
@@ -535,6 +535,10 @@ aside #profiles-menu {
float: left;
margin: 0px 2px 2px 0px;
}
+#contact-block .contact-block-link img {
+ widht: 48px;
+ height: 58px;
+}
/* widget */
.widget {
margin-bottom: 2em;
@@ -655,26 +659,6 @@ section {
text-align: left;
width: 60px;
}
-.wall-item-container .wall-item-info .wall-item-photo-wrapper {
- position: relative;
-}
-.wall-item-container .wall-item-info .wall-item-photo {
- width: 48px;
- height: 48px;
- overflow: hidden;
- text-indent: -9999px;
- display: block;
- background: url(../../../images/icons/48/user.png) no-repeat center center;
-}
-.wall-item-container .wall-item-info .wall-item-photo-menu-button {
- display: none;
- position: absolute;
- left: -4px;
- top: 28px;
-}
-.wall-item-container .wall-item-info .wall-item-photo-menu {
- display: none;
-}
.wall-item-container .wall-item-location {
word-wrap: break-word;
width: 50px;
@@ -740,15 +724,16 @@ section {
/*margin-top: 50px;*/
}
-.wall-item-container.comment .wall-item-photo {
+.wall-item-container.comment .contact-photo {
width: 32px;
height: 32px;
margin-left: 16px;
- background: url(../../../images/icons/22/user.png) no-repeat center center;
+ /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
+
}
-.wall-item-container.comment .wall-item-photo-menu-button {
- top: 13px !important;
- left: 10px !important;
+.wall-item-container.comment .contact-photo-menu-button {
+ top: 15px !important;
+ left: 15px !important;
}
.wall-item-container.comment .wall-item-links {
padding-left: 12px;
@@ -786,6 +771,63 @@ section {
background: url("../../../images/tag.png") no-repeat center right;
color: #ffffff;
}
+/* contacts menu */
+.contact-photo-wrapper {
+ position: relative;
+}
+.contact-photo {
+ width: 48px;
+ height: 48px;
+ overflow: hidden;
+ display: block;
+}
+.contact-photo img {
+ width: 48px;
+ height: 48px;
+}
+.contact-photo-menu-button {
+ display: none;
+ position: absolute;
+ left: -2px;
+ top: 31px;
+}
+.contact-wrapper {
+ float: left;
+ width: 90px;
+ height: 90px;
+}
+.contact-wrapper .contact-photo {
+ width: 80px;
+ height: 80px;
+}
+.contact-wrapper .contact-photo img {
+ width: 80px;
+ height: 80px;
+}
+.contact-wrapper .contact-photo-menu-button {
+ left: 0px;
+ top: 63px;
+}
+.directory-item {
+ float: left;
+ width: 200px;
+ height: 200px;
+}
+.directory-item .contact-photo {
+ width: 175px;
+ height: 175px;
+}
+.directory-item .contact-photo img {
+ width: 175px;
+ height: 175px;
+}
+.contact-name {
+ text-align: center;
+ font-weight: bold;
+}
+.contact-details {
+ color: #999999;
+}
/* editor */
.jothidden {
display: none;
@@ -1115,6 +1157,16 @@ ul.tabs li .active {
.oauthapp a {
float: left;
}
+/* contacts */
+.contact-entry-wrapper {
+ width: 50px;
+ float: left;
+}
+/* photo */
+.lframe {
+ float: left;
+ margin: 0px 10px 10px 0px;
+}
/* page footer */
footer {
height: 100px;
diff --git a/view/viewcontact_template.tpl b/view/viewcontact_template.tpl
index 83693bfb1f..c61544f9f8 100644
--- a/view/viewcontact_template.tpl
+++ b/view/viewcontact_template.tpl
@@ -1,15 +1,9 @@
-<div class="view-contact-wrapper" id="view-contact-wrapper-$id" >
- <div class="view-contact-photo-wrapper" >
- <div class="mframe view-contact-photo" id="view-contact-photo-$id" >
+<div class="contact-wrapper" id="view-contact-wrapper-$id" >
+ <div class="contact-photo-wrapper" >
+ <div class="mframe contact-photo" id="view-contact-photo-$id" >
<a href="$url" title="$alt_text" /><img src="$thumb" alt="$name" /></a>
</div>
- <div class="view-contact-photo-end" ></div>
</div>
- <div class="view-contact-name-wrapper" >
- <div class="view-contact-name" id="view-contact-name-$id" >$name</div>
- </div>
- <div class="view-contact-name-end" ></div>
+ <div class="contact-name" id="view-contact-name-$id" >$name</div>
</div>
-<div class="view-contact-wrapper-end"></div>
-
diff --git a/view/wall_item.tpl b/view/wall_item.tpl
index e3213b8911..96f3cee747 100644
--- a/view/wall_item.tpl
+++ b/view/wall_item.tpl
@@ -8,14 +8,14 @@
<div class="wall-item-container $indent">
<div class="wall-item-item">
<div class="wall-item-info">
- <div class="wall-item-photo-wrapper"
+ <div class="contact-photo-wrapper"
onmouseover="if (typeof t$id != 'undefined') clearTimeout(t$id); openMenu('wall-item-photo-menu-button-$id')"
onmouseout="t$id=setTimeout('closeMenu(\'wall-item-photo-menu-button-$id\'); closeMenu(\'wall-item-photo-menu-$id\');',200)">
- <a href="$profile_url" target="redir" title="$linktitle" class="wall-item-photo-link" id="wall-item-photo-link-$id">
- <img src="$thumb" class="wall-item-photo$sparkle" id="wall-item-photo-$id" alt="$name" />
+ <a href="$profile_url" target="redir" title="$linktitle" class="contact-photo-link" id="wall-item-photo-link-$id">
+ <img src="$thumb" class="contact-photo$sparkle" id="wall-item-photo-$id" alt="$name" />
</a>
- <a href="#" rel="#wall-item-photo-menu-$id" class="fakelink wall-item-photo-menu-button icon s16 menu" id="wall-item-photo-menu-button-$id">menu</a>
- <ul class="wall-item-menu menu-popup" id="wall-item-photo-menu-$id">
+ <a href="#" rel="#wall-item-photo-menu-$id" class="contact-photo-menu-button icon s16 menu" id="wall-item-photo-menu-button-$id">menu</a>
+ <ul class="contact-menu menu-popup" id="wall-item-photo-menu-$id">
$item_photo_menu
</ul>
diff --git a/view/wallwall_item.tpl b/view/wallwall_item.tpl
index e47014985d..96d5147027 100644
--- a/view/wallwall_item.tpl
+++ b/view/wallwall_item.tpl
@@ -8,19 +8,19 @@
<div class="wall-item-container $indent">
<div class="wall-item-item">
<div class="wall-item-info">
- <div class="wall-item-photo-wrapper mframe wwto" id="wall-item-ownerphoto-wrapper-$id" >
- <a href="$owner_url" target="redir" title="$olinktitle" class="wall-item-photo-link" id="wall-item-ownerphoto-link-$id">
- <img src="$owner_photo" class="wall-item-photo$osparkle" id="wall-item-ownerphoto-$id" alt="$owner_name" />
+ <div class="contact-photo-wrapper mframe wwto" id="wall-item-ownerphoto-wrapper-$id" >
+ <a href="$owner_url" target="redir" title="$olinktitle" class="contact-photo-link" id="wall-item-ownerphoto-link-$id">
+ <img src="$owner_photo" class="contact-photo $osparkle" id="wall-item-ownerphoto-$id" alt="$owner_name" />
</a>
</div>
- <div class="wall-item-photo-wrapper mframe wwfrom"
+ <div class="contact-photo-wrapper mframe wwfrom"
onmouseover="if (typeof t$id != 'undefined') clearTimeout(t$id); openMenu('wall-item-photo-menu-button-$id')"
onmouseout="t$id=setTimeout('closeMenu(\'wall-item-photo-menu-button-$id\'); closeMenu(\'wall-item-photo-menu-$id\');',200)">
- <a href="$profile_url" target="redir" title="$linktitle" class="wall-item-photo-link" id="wall-item-photo-link-$id">
- <img src="$thumb" class="wall-item-photo$sparkle" id="wall-item-photo-$id" alt="$name" />
+ <a href="$profile_url" target="redir" title="$linktitle" class="contact-photo-link" id="wall-item-photo-link-$id">
+ <img src="$thumb" class="contact-photo $sparkle" id="wall-item-photo-$id" alt="$name" />
</a>
- <a href="#" rel="#wall-item-photo-menu-$id" class="fakelink wall-item-photo-menu-button icon s16 menu" id="wall-item-photo-menu-button-$id">menu</a>
- <ul class="wall-item-menu menu-popup" id="wall-item-photo-menu-$id">
+ <a href="#" rel="#wall-item-photo-menu-$id" class="contact-photo-menu-button icon s16 menu" id="wall-item-photo-menu-button-$id">menu</a>
+ <ul class="contact-menu menu-popup" id="wall-item-photo-menu-$id">
$item_photo_menu
</ul>
--
2.39.5