aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
authorFabio Comuni <fabrix.xm@gmail.com>2011-09-16 12:51:14 +0200
committerFabio Comuni <fabrix.xm@gmail.com>2011-09-16 12:51:14 +0200
commit6b6f45f9f1c0fa5c0142c0bf1d9a93b77694ea4b (patch)
treec8dfd7aa6f5c93f6106f12959da426c506fe492a /view
parent80af4f3fe647e52add7e38cabc356597fae57a22 (diff)
downloadvolse-hubzilla-6b6f45f9f1c0fa5c0142c0bf1d9a93b77694ea4b.tar.gz
volse-hubzilla-6b6f45f9f1c0fa5c0142c0bf1d9a93b77694ea4b.tar.bz2
volse-hubzilla-6b6f45f9f1c0fa5c0142c0bf1d9a93b77694ea4b.zip
quattro: initial style of conversations
Diffstat (limited to 'view')
-rw-r--r--view/conversation.tpl5
-rw-r--r--view/theme/duepuntozero/wall_item.tpl49
-rw-r--r--view/theme/quattro/colors.less2
-rw-r--r--view/theme/quattro/quattro.less55
-rw-r--r--view/theme/quattro/style.css166
-rw-r--r--view/wall_item.tpl75
6 files changed, 308 insertions, 44 deletions
diff --git a/view/conversation.tpl b/view/conversation.tpl
new file mode 100644
index 000000000..339302638
--- /dev/null
+++ b/view/conversation.tpl
@@ -0,0 +1,5 @@
+{{ for $treads as $tread }}
+<div class="tread-wrapper">
+ $tread
+</div>
+{{ endfor }}
diff --git a/view/theme/duepuntozero/wall_item.tpl b/view/theme/duepuntozero/wall_item.tpl
new file mode 100644
index 000000000..5c467a119
--- /dev/null
+++ b/view/theme/duepuntozero/wall_item.tpl
@@ -0,0 +1,49 @@
+<div class="wall-item-outside-wrapper$indent" id="wall-item-outside-wrapper-$id" >
+ <div class="wall-item-content-wrapper$indent" id="wall-item-content-wrapper-$id" >
+ <div class="wall-item-info" id="wall-item-info-$id">
+ <div class="wall-item-photo-wrapper" id="wall-item-photo-wrapper-$id"
+ 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" style="height: 80px; width: 80px;" alt="$name" />
+ </a>
+ <span onclick="openClose('wall-item-photo-menu-$id');" class="fakelink wall-item-photo-menu-button" id="wall-item-photo-menu-button-$id">menu</span>
+ <div class="wall-item-photo-menu" id="wall-item-photo-menu-$id">
+ <ul>
+ $item_photo_menu
+ </ul>
+ </div>
+ </div>
+ <div class="wall-item-photo-end"></div>
+ <div class="wall-item-wrapper" id="wall-item-wrapper-$id" >
+ $lock
+ <div class="wall-item-location" id="wall-item-location-$id">$location</div>
+ </div>
+ </div>
+ <div class="wall-item-author">
+ <a href="$profile_url" target="redir" title="$linktitle" class="wall-item-name-link"><span class="wall-item-name$sparkle" id="wall-item-name-$id" >$name</span></a>
+ <div class="wall-item-ago" id="wall-item-ago-$id">$ago</div>
+
+ </div>
+ <div class="wall-item-content" id="wall-item-content-$id" >
+ <div class="wall-item-title" id="wall-item-title-$id">$title</div>
+ <div class="wall-item-title-end"></div>
+ <div class="wall-item-body" id="wall-item-body-$id" >$body</div>
+ </div>
+ <div class="wall-item-tools" id="wall-item-tools-$id">
+ $vote
+ $plink
+ $edpost
+ $star
+ $drop
+ </div>
+ </div>
+ <div class="wall-item-wrapper-end"></div>
+ <div class="wall-item-like" id="wall-item-like-$id">$like</div>
+ <div class="wall-item-dislike" id="wall-item-dislike-$id">$dislike</div>
+ <div class="wall-item-comment-wrapper" >
+ $comment
+ </div>
+
+<div class="wall-item-outside-wrapper-end$indent" ></div>
+</div>
diff --git a/view/theme/quattro/colors.less b/view/theme/quattro/colors.less
index b5a203b94..12b0d08a6 100644
--- a/view/theme/quattro/colors.less
+++ b/view/theme/quattro/colors.less
@@ -65,3 +65,5 @@
@NoticeColor: @Grey1;
@NoticeBackgroundColor: #511919;
+
+@ThreadBackgroundColor: #f6f7f8;
diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index 14d1dfa1c..e96095c24 100644
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -31,6 +31,8 @@ a:hover {color: @LinkHover; text-decoration: underline; }
.left { float: left; }
.right { float: right; }
+.hidden { display: none; }
+
.tool {
height: auto; overflow: auto;
@@ -253,4 +255,55 @@ section {
padding:0px 20px 0px 10px;
}
-
+/* wall item */
+.tread-wrapper {
+ background-color: @ThreadBackgroundColor;
+ position: relative;
+ padding: 10px;
+ margin-bottom: 20px;
+}
+.wall-item-decor { position: absolute; left: 790px; top: -10px; width: 16px;}
+.wall-item-container {
+ display: table;
+ width: 780px;
+ margin-bottom: 10px;
+
+ .wall-item-item,
+ .wall-item-bottom { display: table-row; }
+ .wall-item-info {
+ display: table-cell;
+ vertical-align: top;
+ text-align: left;
+ width: 60px;
+
+ .wall-item-photo-wrapper { position: relative; }
+ .wall-item-photo { width: 48px; height: 48px; }
+
+ .wall-item-photo-menu-button {
+ display: none;
+ position: absolute;
+ left: -4px;
+ top: 28px;
+ }
+ .wall-item-photo-menu { display: none; }
+
+ }
+ .wall-item-content {
+ display: table-cell;
+ font-size: 12px;
+ max-width: 720px;
+ word-wrap: break-word;
+ }
+ .wall-item-content img { max-width: 710px; }
+ .wall-item-links,
+ .wall-item-actions { display: table-cell; }
+
+ .wall-item-ago { padding-right: 40px; }
+}
+.wall-item-container.comment {
+ .wall-item-photo { width: 32px; height: 32px; margin-left: 16px;}
+ .wall-item-photo-menu-button {
+ top: 13px !important;
+ left: 10px !important;
+ }
+}
diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css
index 6ff9c70c7..a6ea35869 100644
--- a/view/theme/quattro/style.css
+++ b/view/theme/quattro/style.css
@@ -14,6 +14,40 @@
.icon.text {
text-indent: 0px;
}
+.icon.s10 {
+ width: 10px;
+ height: 10px;
+}
+.icon.s10.notify {
+ background-image: url("../../../images/icons/10/notify_off.png");
+}
+.icon.s10.gear {
+ background-image: url("../../../images/icons/10/gear.png");
+}
+.icon.s10.add {
+ background-image: url("../../../images/icons/10/add.png");
+}
+.icon.s10.delete {
+ background-image: url("../../../images/icons/10/delete.png");
+}
+.icon.s10.edit {
+ background-image: url("../../../images/icons/10/edit.png");
+}
+.icon.s10.star {
+ background-image: url("../../../images/icons/10/star.png");
+}
+.icon.s10.menu {
+ background-image: url("../../../images/icons/10/menu.png");
+}
+.icon.s10.link {
+ background-image: url("../../../images/icons/10/link.png");
+}
+.icon.s10.lock {
+ background-image: url("../../../images/icons/10/lock.png");
+}
+.icon.s10.unlock {
+ background-image: url("../../../images/icons/10/unlock.png");
+}
.icon.s16 {
width: 22px;
height: 22px;
@@ -33,9 +67,21 @@
.icon.s16.edit {
background-image: url("../../../images/icons/16/edit.png");
}
-.icon.s16.start {
+.icon.s16.star {
background-image: url("../../../images/icons/16/star.png");
}
+.icon.s16.menu {
+ background-image: url("../../../images/icons/16/menu.png");
+}
+.icon.s16.link {
+ background-image: url("../../../images/icons/16/link.png");
+}
+.icon.s16.lock {
+ background-image: url("../../../images/icons/16/lock.png");
+}
+.icon.s16.unlock {
+ background-image: url("../../../images/icons/16/unlock.png");
+}
.icon.s22 {
width: 22px;
height: 22px;
@@ -55,9 +101,55 @@
.icon.s22.edit {
background-image: url("../../../images/icons/22/edit.png");
}
-.icon.s22.start {
+.icon.s22.star {
background-image: url("../../../images/icons/22/star.png");
}
+.icon.s22.menu {
+ background-image: url("../../../images/icons/22/menu.png");
+}
+.icon.s22.link {
+ background-image: url("../../../images/icons/22/link.png");
+}
+.icon.s22.lock {
+ background-image: url("../../../images/icons/22/lock.png");
+}
+.icon.s22.unlock {
+ background-image: url("../../../images/icons/22/unlock.png");
+}
+.icon.s48 {
+ width: 48px;
+ height: 48px;
+}
+.icon.s48.notify {
+ background-image: url("../../../images/icons/22/notify_off.png");
+}
+.icon.s48.gear {
+ background-image: url("../../../images/icons/22/gear.png");
+}
+.icon.s48.add {
+ background-image: url("../../../images/icons/22/add.png");
+}
+.icon.s48.delete {
+ background-image: url("../../../images/icons/22/delete.png");
+}
+.icon.s48.edit {
+ background-image: url("../../../images/icons/22/edit.png");
+}
+.icon.s48.star {
+ background-image: url("../../../images/icons/22/star.png");
+}
+.icon.s48.menu {
+ background-image: url("../../../images/icons/22/menu.png");
+}
+.icon.s48.link {
+ background-image: url("../../../images/icons/22/link.png");
+}
+.icon.s48.lock {
+ background-image: url("../../../images/icons/22/lock.png");
+}
+.icon.s48.unlock {
+ background-image: url("../../../images/icons/22/unlock.png");
+}
/* global */
body {
font-family: Liberation Sans, helvetica, arial, clean, sans-serif;
@@ -85,6 +177,9 @@ a:hover {
.right {
float: right;
}
+.hidden {
+ display: none;
+}
.tool {
height: auto;
overflow: auto;
@@ -393,3 +488,70 @@ section {
width: 800px;
padding: 0px 20px 0px 10px;
}
+/* wall item */
+.tread-wrapper {
+ background-color: #f6f7f8;
+ position: relative;
+ padding: 10px;
+ margin-bottom: 20px;
+}
+.wall-item-decor {
+ position: absolute;
+ left: 790px;
+ top: -10px;
+ width: 16px;
+}
+.wall-item-container {
+ display: table;
+ width: 780px;
+ margin-bottom: 10px;
+}
+.wall-item-container .wall-item-item, .wall-item-container .wall-item-bottom {
+ display: table-row;
+}
+.wall-item-container .wall-item-info {
+ display: table-cell;
+ vertical-align: top;
+ 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;
+}
+.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-content {
+ display: table-cell;
+ font-size: 12px;
+ max-width: 720px;
+ word-wrap: break-word;
+}
+.wall-item-container .wall-item-content img {
+ max-width: 710px;
+}
+.wall-item-container .wall-item-links, .wall-item-container .wall-item-actions {
+ display: table-cell;
+}
+.wall-item-container .wall-item-ago {
+ padding-right: 40px;
+}
+.wall-item-container.comment .wall-item-photo {
+ width: 32px;
+ height: 32px;
+ margin-left: 16px;
+}
+.wall-item-container.comment .wall-item-photo-menu-button {
+ top: 13px !important;
+ left: 10px !important;
+}
diff --git a/view/wall_item.tpl b/view/wall_item.tpl
index 3db3b1507..39cb33f0f 100644
--- a/view/wall_item.tpl
+++ b/view/wall_item.tpl
@@ -1,50 +1,43 @@
-<div class="wall-item-outside-wrapper$indent" id="wall-item-outside-wrapper-$id" >
- <div class="wall-item-content-wrapper$indent" id="wall-item-content-wrapper-$id" >
- <div class="wall-item-info" id="wall-item-info-$id">
- <div class="wall-item-photo-wrapper" id="wall-item-photo-wrapper-$id"
- 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)">
+{{ if $indent }}{{ else }}
+<div class="wall-item-decor">
+ <span class="icon s22 star $isstarred" id="starred-$id" title="$star.starred">$star.starred</span>
+ {{ if $lock }}<span class="icon s22 lock fakelink" onclick="lockview(event,$id);" title="$lock">$lock</span>{{ endif }}
+</div>
+{{ endif }}
+<div class="wall-item-container $indent">
+ <div class="wall-item-item">
+ <div class="wall-item-info">
+ <div class="wall-item-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" style="height: 80px; width: 80px;" alt="$name" />
+ <img src="$thumb" class="wall-item-photo$sparkle" id="wall-item-photo-$id" alt="$name" />
</a>
- <span onclick="openClose('wall-item-photo-menu-$id');" class="fakelink wall-item-photo-menu-button" id="wall-item-photo-menu-button-$id">menu</span>
- <div class="wall-item-photo-menu" id="wall-item-photo-menu-$id">
- <ul>
- $item_photo_menu
- </ul>
- </div>
- </div>
- <div class="wall-item-photo-end"></div>
- <div class="wall-item-wrapper" id="wall-item-wrapper-$id" >
- $lock
- <div class="wall-item-location" id="wall-item-location-$id">$location</div>
- </div>
- </div>
- <div class="wall-item-author">
- <a href="$profile_url" target="redir" title="$linktitle" class="wall-item-name-link"><span class="wall-item-name$sparkle" id="wall-item-name-$id" >$name</span></a>
- <div class="wall-item-ago" id="wall-item-ago-$id">$ago</div>
+ <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">
+ $item_photo_menu
+ </ul>
- </div>
- <div class="wall-item-content" id="wall-item-content-$id" >
- <div class="wall-item-title" id="wall-item-title-$id">$title</div>
- <div class="wall-item-title-end"></div>
- <div class="wall-item-body" id="wall-item-body-$id" >$body</div>
+ </div>
+ <div class="wall-item-location">$location</div>
</div>
- <div class="wall-item-tools" id="wall-item-tools-$id">
- $vote
- $plink
- $edpost
- $star
- $drop
+ <div class="wall-item-content">
+ {{ if $title }}<h2><a href="$plink.href">$title</a></h2>{{ endif }}
+ $body
</div>
</div>
- <div class="wall-item-wrapper-end"></div>
- <div class="wall-item-like" id="wall-item-like-$id">$like</div>
- <div class="wall-item-dislike" id="wall-item-dislike-$id">$dislike</div>
- <div class="wall-item-comment-wrapper" >
- $comment
+ <div class="wall-item-bottom">
+ <div class="wall-item-links">
+ {{ if $plink }}<a class="icon s16 link" title="$plink.title" href="$plink.href">$plink.title</a>{{ endif }}
+ </div>
+ <div class="wall-item-actions">
+ <a href="$profile_url" target="redir" title="$linktitle" class="wall-item-name-link"><span class="wall-item-name$sparkle">$name</span></a> <span class="wall-item-ago">$ago</span>
+
+ {{ if $star }}
+ <a href="#" id="star-$id" onclick="dostar($id); return false;" class="$star.classdo" title="$star.do">$star.do</a>
+ <a href="#" id="unstar-$id" onclick="dostar($id); return false;" class="$star.classundo" title="$star.undo">$star.undo</a>
+ {{ endif }}
+ </div>
</div>
-
-<div class="wall-item-outside-wrapper-end$indent" ></div>
</div>