diff options
Diffstat (limited to 'view')
| -rw-r--r-- | view/conversation.tpl | 5 | ||||
| -rw-r--r-- | view/theme/duepuntozero/wall_item.tpl | 49 | ||||
| -rw-r--r-- | view/theme/quattro/colors.less | 2 | ||||
| -rw-r--r-- | view/theme/quattro/quattro.less | 55 | ||||
| -rw-r--r-- | view/theme/quattro/style.css | 166 | ||||
| -rw-r--r-- | view/wall_item.tpl | 75 |
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> |