diff options
author | Fabio Comuni <fabrix.xm@gmail.com> | 2011-11-21 12:34:22 +0100 |
---|---|---|
committer | Fabio Comuni <fabrix.xm@gmail.com> | 2011-11-21 12:34:22 +0100 |
commit | a86fd26bd86945fe75b7220e149b8986f88feb01 (patch) | |
tree | 75d3f73e9bcb4fc990bc35b0781d479f40ac9cfb /view | |
parent | 590f1d2b25c00fc7bea85cb5de1a4f667ea86af1 (diff) | |
download | volse-hubzilla-a86fd26bd86945fe75b7220e149b8986f88feb01.tar.gz volse-hubzilla-a86fd26bd86945fe75b7220e149b8986f88feb01.tar.bz2 volse-hubzilla-a86fd26bd86945fe75b7220e149b8986f88feb01.zip |
more work on quattro. remove html from php for groups and saved searches widgets.
Diffstat (limited to 'view')
-rw-r--r-- | view/conversation.tpl | 8 | ||||
-rw-r--r-- | view/group_side.tpl | 29 | ||||
-rw-r--r-- | view/saved_searches_aside.tpl | 15 | ||||
-rw-r--r-- | view/settings.tpl | 1 | ||||
-rw-r--r-- | view/theme/dispy/group_side.tpl | 28 | ||||
-rw-r--r-- | view/theme/dispy/saved_searches_aside.tpl | 14 | ||||
-rw-r--r-- | view/theme/duepuntozero/group_side.tpl | 28 | ||||
-rw-r--r-- | view/theme/duepuntozero/saved_searches_aside.tpl | 14 | ||||
-rw-r--r-- | view/theme/loozah/group_side.tpl | 28 | ||||
-rw-r--r-- | view/theme/loozah/saved_searches_aside.tpl | 14 | ||||
-rw-r--r-- | view/theme/quattro/icons.less | 11 | ||||
-rw-r--r-- | view/theme/quattro/quattro.less | 113 | ||||
-rw-r--r-- | view/theme/quattro/style.css | 175 | ||||
-rw-r--r-- | view/theme/testbubble/group_side.tpl | 28 | ||||
-rw-r--r-- | view/theme/testbubble/saved_searches_aside.tpl | 14 |
15 files changed, 492 insertions, 28 deletions
diff --git a/view/conversation.tpl b/view/conversation.tpl index 446814959..86445aab8 100644 --- a/view/conversation.tpl +++ b/view/conversation.tpl @@ -5,9 +5,7 @@ {{ endfor }} {{ if $dropping }} -<div id="item-delete-selected" class="fakelink" onclick="deleteCheckedItems();"> - <div id="item-delete-selected-icon" class="icon drophide" title="$dropping" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></div> - <div id="item-delete-selected-desc" >$dropping</div> -</div> -<div id="item-delete-selected-end"></div> +<a href="#" onclick="deleteCheckedItems();return false;"> + <span class="icon s22 delete text">$dropping</span> +</a> {{ endif }} diff --git a/view/group_side.tpl b/view/group_side.tpl new file mode 100644 index 000000000..596a8d13f --- /dev/null +++ b/view/group_side.tpl @@ -0,0 +1,29 @@ +<div id="group-sidebar" class="widget"> + <div class="title tool"> + <h3 class="label">$title</h3> + <a href="group/new" title="$createtext" class="action"><span class="icon text s16 add"> $add</span></a> + </div> + + <div id="sidebar-group-list"> + <ul> + {{ for $groups as $group }} + <li class="tool {{ if $group.selected }}selected{{ endif }}"> + <a href="$group.href" class="label"> + $group.text + </a> + {{ if $group.edit }} + <a href="$group.edit.href" class="action"><span class="icon text s10 edit">$group.edit.title</span></a> + {{ endif }} + {{ if $group.cid }} + <input type="checkbox" + class="{{ if $group.selected }}ticked{{ else }}unticked {{ endif }} action" + onclick="contactgroupChangeMember('$group.id','$group.cid');return true;" + {{ if $group.ismember }}checked="checked"{{ endif }} + /> + {{ endif }} + </li> + {{ endfor }} + </ul> + </div> +</div> + diff --git a/view/saved_searches_aside.tpl b/view/saved_searches_aside.tpl new file mode 100644 index 000000000..9c10a26de --- /dev/null +++ b/view/saved_searches_aside.tpl @@ -0,0 +1,15 @@ +<div id="saved-search-list" class="widget"> + <h3 class="title">$title</h3> + + <ul id="saved-search-ul"> + {{ for $saved as $search }} + <li class="tool {{if $search.selected}}selected{{endif}}"> + <a href="network/?f=&search=$search.encodedterm" class="label" >$search.term</a> + <a href="network/?f=&remove=1&search=$search.encodedterm" class="action icon s10 delete" title="$search.delete" onclick="return confirmDelete();"></a> + </li> + {{ endfor }} + </ul> + + $searchbox + +</div> diff --git a/view/settings.tpl b/view/settings.tpl index e269d97f1..cd9d53963 100644 --- a/view/settings.tpl +++ b/view/settings.tpl @@ -63,7 +63,6 @@ $blocktags <h3>$expire.advanced</h3> {{ inc field_yesno.tpl with $field=$expire.items }}{{endinc}} {{ inc field_yesno.tpl with $field=$expire.notes }}{{endinc}} - {{ inc field_yesno.tpl with $field=$expire.photos }}{{endinc}} </div> </div> diff --git a/view/theme/dispy/group_side.tpl b/view/theme/dispy/group_side.tpl new file mode 100644 index 000000000..a1fc70a22 --- /dev/null +++ b/view/theme/dispy/group_side.tpl @@ -0,0 +1,28 @@ +<div class="widget" id="group-sidebar"> +<h3>$title</h3> + +<div id="sidebar-group-list"> + <ul id="sidebar-group-ul"> + {{ for $groups as $group }} + <li class="sidebar-group-li"> + {{ if $group.cid }} + <input type="checkbox" + class="{{ if $group.selected }}ticked{{ else }}unticked {{ endif }} action" + onclick="contactgroupChangeMember('$group.id','$group.cid');return true;" + {{ if $group.ismember }}checked="checked"{{ endif }} + /> + {{ endif }} + {{ if $group.edit }} + <a class="groupsideedit" href="$group.edit.href"><span class="icon small-pencil"></span></a> + {{ endif }} + <a class="sidebar-group-element {{ if $group.selected }}group-selected{{ endif }}" href="$group.href">$group.text</a> + </li> + {{ endfor }} + </ul> + </div> + <div id="sidebar-new-group"> + <a href="group/new">$createtext</a> + </div> +</div> + + diff --git a/view/theme/dispy/saved_searches_aside.tpl b/view/theme/dispy/saved_searches_aside.tpl new file mode 100644 index 000000000..e2aae1e77 --- /dev/null +++ b/view/theme/dispy/saved_searches_aside.tpl @@ -0,0 +1,14 @@ +<div class="widget" id="saved-search-list"> + <h3 id="search">$title</h3> + $searchbox + + <ul id="saved-search-ul"> + {{ for $saved as $search }} + <li class="saved-search-li clear"> + <a onmouseout="imgdull(this);" onmouseover="imgbright(this);" onclick="return confirmDelete();" class="icon savedsearchdrop drophide" href="network/?f=&remove=1&search=$search.encodedterm"></a> + <a class="savedsearchterm" href="network/?f=&search=$search.encodedterm">$search.term</a> + </li> + {{ endfor }} + </ul> + <div class="clear"></div> +</div> diff --git a/view/theme/duepuntozero/group_side.tpl b/view/theme/duepuntozero/group_side.tpl new file mode 100644 index 000000000..a1fc70a22 --- /dev/null +++ b/view/theme/duepuntozero/group_side.tpl @@ -0,0 +1,28 @@ +<div class="widget" id="group-sidebar"> +<h3>$title</h3> + +<div id="sidebar-group-list"> + <ul id="sidebar-group-ul"> + {{ for $groups as $group }} + <li class="sidebar-group-li"> + {{ if $group.cid }} + <input type="checkbox" + class="{{ if $group.selected }}ticked{{ else }}unticked {{ endif }} action" + onclick="contactgroupChangeMember('$group.id','$group.cid');return true;" + {{ if $group.ismember }}checked="checked"{{ endif }} + /> + {{ endif }} + {{ if $group.edit }} + <a class="groupsideedit" href="$group.edit.href"><span class="icon small-pencil"></span></a> + {{ endif }} + <a class="sidebar-group-element {{ if $group.selected }}group-selected{{ endif }}" href="$group.href">$group.text</a> + </li> + {{ endfor }} + </ul> + </div> + <div id="sidebar-new-group"> + <a href="group/new">$createtext</a> + </div> +</div> + + diff --git a/view/theme/duepuntozero/saved_searches_aside.tpl b/view/theme/duepuntozero/saved_searches_aside.tpl new file mode 100644 index 000000000..e2aae1e77 --- /dev/null +++ b/view/theme/duepuntozero/saved_searches_aside.tpl @@ -0,0 +1,14 @@ +<div class="widget" id="saved-search-list"> + <h3 id="search">$title</h3> + $searchbox + + <ul id="saved-search-ul"> + {{ for $saved as $search }} + <li class="saved-search-li clear"> + <a onmouseout="imgdull(this);" onmouseover="imgbright(this);" onclick="return confirmDelete();" class="icon savedsearchdrop drophide" href="network/?f=&remove=1&search=$search.encodedterm"></a> + <a class="savedsearchterm" href="network/?f=&search=$search.encodedterm">$search.term</a> + </li> + {{ endfor }} + </ul> + <div class="clear"></div> +</div> diff --git a/view/theme/loozah/group_side.tpl b/view/theme/loozah/group_side.tpl new file mode 100644 index 000000000..a1fc70a22 --- /dev/null +++ b/view/theme/loozah/group_side.tpl @@ -0,0 +1,28 @@ +<div class="widget" id="group-sidebar"> +<h3>$title</h3> + +<div id="sidebar-group-list"> + <ul id="sidebar-group-ul"> + {{ for $groups as $group }} + <li class="sidebar-group-li"> + {{ if $group.cid }} + <input type="checkbox" + class="{{ if $group.selected }}ticked{{ else }}unticked {{ endif }} action" + onclick="contactgroupChangeMember('$group.id','$group.cid');return true;" + {{ if $group.ismember }}checked="checked"{{ endif }} + /> + {{ endif }} + {{ if $group.edit }} + <a class="groupsideedit" href="$group.edit.href"><span class="icon small-pencil"></span></a> + {{ endif }} + <a class="sidebar-group-element {{ if $group.selected }}group-selected{{ endif }}" href="$group.href">$group.text</a> + </li> + {{ endfor }} + </ul> + </div> + <div id="sidebar-new-group"> + <a href="group/new">$createtext</a> + </div> +</div> + + diff --git a/view/theme/loozah/saved_searches_aside.tpl b/view/theme/loozah/saved_searches_aside.tpl new file mode 100644 index 000000000..e2aae1e77 --- /dev/null +++ b/view/theme/loozah/saved_searches_aside.tpl @@ -0,0 +1,14 @@ +<div class="widget" id="saved-search-list"> + <h3 id="search">$title</h3> + $searchbox + + <ul id="saved-search-ul"> + {{ for $saved as $search }} + <li class="saved-search-li clear"> + <a onmouseout="imgdull(this);" onmouseover="imgbright(this);" onclick="return confirmDelete();" class="icon savedsearchdrop drophide" href="network/?f=&remove=1&search=$search.encodedterm"></a> + <a class="savedsearchterm" href="network/?f=&search=$search.encodedterm">$search.term</a> + </li> + {{ endfor }} + </ul> + <div class="clear"></div> +</div> diff --git a/view/theme/quattro/icons.less b/view/theme/quattro/icons.less index 525ca48d8..f87327703 100644 --- a/view/theme/quattro/icons.less +++ b/view/theme/quattro/icons.less @@ -20,7 +20,7 @@ .icon { background-color: transparent ; background-repeat: no-repeat; - background-position: center center; + background-position: left center; display: block; overflow: hidden; text-indent: -9999px; @@ -31,16 +31,19 @@ } &.s10 { - width:10px; height: 10px; + min-width:10px; height: 10px; .icons(10); + &.text { padding: 2px 0px 0px 15px; } } &.s16 { - width:22px; height: 22px; + min-width:16px; height: 16px; .icons(16); + &.text { padding: 4px 0px 0px 20px; } } &.s22 { - width:22px; height: 22px; + min-width:22px; height: 22px; .icons(22); + &.text { padding: 10px 0px 0px 25px; } } &.s48 { width:48px; height: 48px; diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less index babcff3e8..235d38db5 100644 --- a/view/theme/quattro/quattro.less +++ b/view/theme/quattro/quattro.less @@ -42,12 +42,17 @@ a:hover {color: @LinkHover; text-decoration: underline; } .hidden { display: none; } +/* tool */ + .tool { height: auto; overflow: auto; .label { float: left;} .action { float: right; } } + + + /* popup notifications */ div.jGrowl div.notice { background: @NoticeBackgroundColor url("../../../images/icons/48/notice.png") no-repeat 5px center; @@ -74,7 +79,7 @@ header { } #banner { - + overflow: hidden; text-align: center; width: 100%; a, a:active, a:visited, a:link, a:hover { color: @Grey1; text-decoration: none; outline: none; vertical-align: bottom; } @@ -228,6 +233,7 @@ ul.menu-popup { /* aside */ aside { display: table-cell; + vertical-align: top; width: 200px; padding:0px 10px 0px 20px; border-right: 1px solid @AsideBorder; @@ -260,6 +266,7 @@ aside { #profiles-menu { width: 20em; } + } #contact-block { @@ -277,11 +284,40 @@ aside { } +/* widget */ +.widget { + margin-bottom: 2em; + + h3 { padding: 0px; margin: 2px;} + .action { .opaque(0.1); } + input.action { .opaque(0.5); } + &:hover .title .action { .opaque(1); } + .tool:hover .action { .opaque(1); } + .tool:hover .action.ticked { .opaque(1); } + + ul { padding: 0px;} + ul li {padding-left: 16px; min-height: 16px; list-style: none; } + + .tool.selected { + background: url('../../../images/selected.png') no-repeat left center; + } + + /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;} + .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ + +} + +/* widget: search */ +#add-search-popup { + width: 200px; + top: 18px; +} /* section */ section { display: table-cell; + vertical-align: top; width: 800px; padding:0px 20px 0px 10px; } @@ -472,14 +508,14 @@ section { margin-top: 15px; } /** buttons **/ -input[type="submit"] { +/*input[type="submit"] { border: 0px; background-color: @ButtonBackgroundColor; color: @ButtonColor; padding: 0px 10px; .rounded(5px); height: 18px; -} +}*/ /** acl **/ @@ -589,6 +625,77 @@ ul.tabs { li { float: left; margin-left: 20px; + + .active { + border-bottom: 1px solid @LinkVisited; + } } + } + +/** + * Form fields + */ +.field { + margin-bottom: 10px; + padding-bottom: 10px; + overflow: auto; + width: 100%; + + + label { + float: left; + width: 200px; + } + + input, + textarea { + width: 400px; + } + textarea { height: 100px; } + .field_help { + display: block; + margin-left: 200px; + color: #666666; + + } + + + .onoff { + float: left; + width: 80px; + } + .onoff a { + display: block; + border:1px solid #666666; + background-image:url("../../../images/onoff.jpg"); + background-repeat: no-repeat; + padding: 4px 2px 2px 2px; + height: 16px; + text-decoration: none; + } + .onoff .off { + border-color:#666666; + padding-left: 40px; + background-position: left center; + background-color: #cccccc; + color: #666666; + text-align: right; + } + .onoff .on { + border-color:#204A87; + padding-right: 40px; + background-position: right center; + background-color: #D7E3F1; + color: #204A87; + text-align: left; + } + .hidden { display: none!important; } + + &.radio .field_help { margin-left: 0px; } +} + + +/* page footer */ +footer { height: 100px; display: table-row; } diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css index 560f53c2c..c13d21398 100644 --- a/view/theme/quattro/style.css +++ b/view/theme/quattro/style.css @@ -5,7 +5,7 @@ .icon { background-color: transparent ; background-repeat: no-repeat; - background-position: center center; + background-position: left center; display: block; overflow: hidden; text-indent: -9999px; @@ -15,7 +15,7 @@ text-indent: 0px; } .icon.s10 { - width: 10px; + min-width: 10px; height: 10px; } .icon.s10.notify { @@ -48,9 +48,12 @@ .icon.s10.unlock { background-image: url("../../../images/icons/10/unlock.png"); } +.icon.s10.text { + padding: 2px 0px 0px 15px; +} .icon.s16 { - width: 22px; - height: 22px; + min-width: 16px; + height: 16px; } .icon.s16.notify { background-image: url("../../../images/icons/16/notify_off.png"); @@ -82,8 +85,11 @@ .icon.s16.unlock { background-image: url("../../../images/icons/16/unlock.png"); } +.icon.s16.text { + padding: 4px 0px 0px 20px; +} .icon.s22 { - width: 22px; + min-width: 22px; height: 22px; } .icon.s22.notify { @@ -116,6 +122,9 @@ .icon.s22.unlock { background-image: url("../../../images/icons/22/unlock.png"); } +.icon.s22.text { + padding: 10px 0px 0px 25px; +} .icon.s48 { width: 48px; height: 48px; @@ -180,6 +189,7 @@ a:hover { .hidden { display: none; } +/* tool */ .tool { height: auto; overflow: auto; @@ -218,6 +228,7 @@ header #site-location { display: none; } header #banner { + overflow: hidden; text-align: center; width: 100%; } @@ -430,6 +441,7 @@ ul.menu-popup .empty { /* aside */ aside { display: table-cell; + vertical-align: top; width: 200px; padding: 0px 10px 0px 20px; border-right: 1px solid #bdcdd4; @@ -506,9 +518,77 @@ aside #profiles-menu { float: left; margin: 0px 2px 2px 0px; } +/* widget */ +.widget { + margin-bottom: 2em; + /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;} + .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ + +} +.widget h3 { + padding: 0px; + margin: 2px; +} +.widget .action { + opacity: 0.1; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +.widget input.action { + opacity: 0.5; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +.widget:hover .title .action { + opacity: 1; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +.widget .tool:hover .action { + opacity: 1; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +.widget .tool:hover .action.ticked { + opacity: 1; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +.widget ul { + padding: 0px; +} +.widget ul li { + padding-left: 16px; + min-height: 16px; + list-style: none; +} +.widget .tool.selected { + background: url('../../../images/selected.png') no-repeat left center; +} +/* widget: search */ +#add-search-popup { + width: 200px; + top: 18px; +} /* section */ section { display: table-cell; + vertical-align: top; width: 800px; padding: 0px 20px 0px 10px; } @@ -743,16 +823,14 @@ section { margin-top: 15px; } /** buttons **/ -input[type="submit"] { - border: 0px; - background-color: #2d2d2d; - color: #ffffff; - padding: 0px 10px; - -moz-border-radius: 5px 5px 5px 5px; - -webkit-border-radius: 5px 5px 5px 5px; - border-radius: 5px 5px 5px 5px; - height: 18px; -} +/*input[type="submit"] { + border: 0px; + background-color: @ButtonBackgroundColor; + color: @ButtonColor; + padding: 0px 10px; + .rounded(5px); + height: 18px; +}*/ /** acl **/ #photo-edit-perms-select, #photos-upload-permissions-wrapper, #profile-jot-acl-wrapper { display: block!important; @@ -866,3 +944,70 @@ ul.tabs li { float: left; margin-left: 20px; } +ul.tabs li .active { + border-bottom: 1px solid #005c94; +} +/** + * Form fields + */ +.field { + margin-bottom: 10px; + padding-bottom: 10px; + overflow: auto; + width: 100%; +} +.field label { + float: left; + width: 200px; +} +.field input, .field textarea { + width: 400px; +} +.field textarea { + height: 100px; +} +.field .field_help { + display: block; + margin-left: 200px; + color: #666666; +} +.field .onoff { + float: left; + width: 80px; +} +.field .onoff a { + display: block; + border: 1px solid #666666; + background-image: url("../../../images/onoff.jpg"); + background-repeat: no-repeat; + padding: 4px 2px 2px 2px; + height: 16px; + text-decoration: none; +} +.field .onoff .off { + border-color: #666666; + padding-left: 40px; + background-position: left center; + background-color: #cccccc; + color: #666666; + text-align: right; +} +.field .onoff .on { + border-color: #204A87; + padding-right: 40px; + background-position: right center; + background-color: #D7E3F1; + color: #204A87; + text-align: left; +} +.field .hidden { + display: none!important; +} +.field.radio .field_help { + margin-left: 0px; +} +/* page footer */ +footer { + height: 100px; + display: table-row; +} diff --git a/view/theme/testbubble/group_side.tpl b/view/theme/testbubble/group_side.tpl new file mode 100644 index 000000000..a1fc70a22 --- /dev/null +++ b/view/theme/testbubble/group_side.tpl @@ -0,0 +1,28 @@ +<div class="widget" id="group-sidebar"> +<h3>$title</h3> + +<div id="sidebar-group-list"> + <ul id="sidebar-group-ul"> + {{ for $groups as $group }} + <li class="sidebar-group-li"> + {{ if $group.cid }} + <input type="checkbox" + class="{{ if $group.selected }}ticked{{ else }}unticked {{ endif }} action" + onclick="contactgroupChangeMember('$group.id','$group.cid');return true;" + {{ if $group.ismember }}checked="checked"{{ endif }} + /> + {{ endif }} + {{ if $group.edit }} + <a class="groupsideedit" href="$group.edit.href"><span class="icon small-pencil"></span></a> + {{ endif }} + <a class="sidebar-group-element {{ if $group.selected }}group-selected{{ endif }}" href="$group.href">$group.text</a> + </li> + {{ endfor }} + </ul> + </div> + <div id="sidebar-new-group"> + <a href="group/new">$createtext</a> + </div> +</div> + + diff --git a/view/theme/testbubble/saved_searches_aside.tpl b/view/theme/testbubble/saved_searches_aside.tpl new file mode 100644 index 000000000..e2aae1e77 --- /dev/null +++ b/view/theme/testbubble/saved_searches_aside.tpl @@ -0,0 +1,14 @@ +<div class="widget" id="saved-search-list"> + <h3 id="search">$title</h3> + $searchbox + + <ul id="saved-search-ul"> + {{ for $saved as $search }} + <li class="saved-search-li clear"> + <a onmouseout="imgdull(this);" onmouseover="imgbright(this);" onclick="return confirmDelete();" class="icon savedsearchdrop drophide" href="network/?f=&remove=1&search=$search.encodedterm"></a> + <a class="savedsearchterm" href="network/?f=&search=$search.encodedterm">$search.term</a> + </li> + {{ endfor }} + </ul> + <div class="clear"></div> +</div> |