New common tab template. Update css

This commit is contained in:
Fabio Comuni 2011-10-10 15:28:34 +02:00
parent 077726a193
commit f64e2d63b9
25 changed files with 173 additions and 215 deletions

View File

@ -1161,3 +1161,47 @@ function load_contact_links($uid) {
return; return;
}} }}
if(! function_exists('profile_tabs')){
function profile_tabs($a, $is_owner=False){
//echo "<pre>"; var_dump($a->user); killme();
if(x($_GET,'tab'))
$tab = notags(trim($_GET['tab']));
$url = $a->get_baseurl() . '/profile/' . $a->user['nickname'];
$tabs = array(
array(
'label'=>t('Status'),
'url' => $url,
'sel' => ((!isset($tab)&&$a->argv[0]=='profile')?'active':''),
),
array(
'label' => t('Profile'),
'url' => $url.'/?tab=profile',
'sel' => (($tab=='profile')?'active':''),
),
array(
'label' => t('Photos'),
'url' => $a->get_baseurl() . '/photos/' . $a->user['nickname'],
'sel' => ((!isset($tab)&&$a->argv[0]=='photos')?'active':''),
),
);
if ($is_owner){
$tabs[] = array(
'label' => t('Events'),
'url' => $a->get_baseurl() . '/events',
'sel' =>((!isset($tab)&&$a->argv[0]=='events')?'active':''),
);
$tabs[] = array(
'label' => t('Personal Notes'),
'url' => $a->get_baseurl() . '/notes',
'sel' =>((!isset($tab)&&$a->argv[0]=='notes')?'active':''),
);
}
$tpl = get_markup_template('common_tabs.tpl');
return replace_macros($tpl,array('$tabs'=>$tabs));
}}

View File

@ -112,17 +112,7 @@ function events_content(&$a) {
$o =""; $o ="";
// tabs // tabs
$tpl = get_markup_template('profile_tabs.tpl'); $o .= profile_tabs($a, True);
$o .= replace_macros($tpl,array(
'$url' => $a->get_baseurl() . '/profile/' . $a->user['nickname'],
'$phototab' => $a->get_baseurl() . '/photos/' . $a->user['nickname'],
'$status' => t('Status'),
'$profile' => t('Profile'),
'$photos' => t('Photos'),
'$events' => t('Events') ,
'$notes' => t('Personal Notes'),
'$activetab' => "events",
));
$o .= '<h2>' . t('Events') . '</h2>'; $o .= '<h2>' . t('Events') . '</h2>';

View File

@ -42,66 +42,7 @@ function network_init(&$a) {
); );
} }
// item filter tabs
// TODO: fix this logic, reduce duplication
$a->page['content'] .= '<div class="tabs-wrapper">';
$starred_active = '';
$new_active = '';
$bookmarked_active = '';
$all_active = '';
$search_active = '';
if(($a->argc > 1 && $a->argv[1] === 'new')
|| ($a->argc > 2 && $a->argv[2] === 'new')) {
$new_active = 'active';
}
if(x($_GET,'search')) {
$search_active = 'active';
}
if(x($_GET,'star')) {
$starred_active = 'active';
}
if($_GET['bmark']) {
$bookmarked_active = 'active';
}
if (($new_active == '')
&& ($starred_active == '')
&& ($bookmarked_active == '')
&& ($search_active == '')) {
$all_active = 'active';
}
// network links moved to content to match other pages
// all
// added 'button' class for easier styling - not the best place for it, should be moved into the tpl like profile_tabs.tpl
// once there is a network_tabs.tpl or something
$a->page['content'] .= '<a class="button tabs ' . $all_active . '" href="' . $a->get_baseurl() . '/'
. str_replace('/new', '', $a->cmd) . ((x($_GET,'cid')) ? '?cid=' . $_GET['cid'] : '') . '">'
. t('All') . '</a>';
// new
$a->page['content'] .= '<a class="button tabs ' . $new_active . '" href="' . $a->get_baseurl() . '/'
. str_replace('/new', '', $a->cmd) . '/new'
. ((x($_GET,'cid')) ? '/?cid=' . $_GET['cid'] : '') . '">'
. t('New') . '</a>';
// starred
$a->page['content'] .= '<a class="button tabs ' . $starred_active . '" href="' . $a->get_baseurl() . '/'
. str_replace('/new', '', $a->cmd) . ((x($_GET,'cid')) ? '/?cid=' . $_GET['cid'] : '') . '&star=1" >'
. t('Starred') . '</a>';
// bookmarks
$a->page['content'] .= '<a class="button tabs ' . $bookmarked_active . '" href="' . $a->get_baseurl() . '/'
. str_replace('/new', '', $a->cmd) . ((x($_GET,'cid')) ? '/?cid=' . $_GET['cid'] : '') . '&bmark=1" >'
. t('Bookmarks') . '</a>';
$a->page['content'] .= '</div>';
// --- end item filter tabs
// search terms header // search terms header
if(x($_GET,'search')) { if(x($_GET,'search')) {
@ -157,6 +98,71 @@ function network_content(&$a, $update = 0) {
$o = ''; $o = '';
// item filter tabs
// TODO: fix this logic, reduce duplication
$a->page['content'] .= '<div class="tabs-wrapper">';
$starred_active = '';
$new_active = '';
$bookmarked_active = '';
$all_active = '';
$search_active = '';
if(($a->argc > 1 && $a->argv[1] === 'new')
|| ($a->argc > 2 && $a->argv[2] === 'new')) {
$new_active = 'active';
}
if(x($_GET,'search')) {
$search_active = 'active';
}
if(x($_GET,'star')) {
$starred_active = 'active';
}
if($_GET['bmark']) {
$bookmarked_active = 'active';
}
if (($new_active == '')
&& ($starred_active == '')
&& ($bookmarked_active == '')
&& ($search_active == '')) {
$all_active = 'active';
}
// tabs
$tabs = array(
array(
'label' => t('All'),
'url'=>$a->get_baseurl() . '/' . str_replace('/new', '', $a->cmd) . ((x($_GET,'cid')) ? '?cid=' . $_GET['cid'] : ''),
'sel'=>$all_active,
),
array(
'label' => t('New'),
'url' => $a->get_baseurl() . '/' . str_replace('/new', '', $a->cmd) . '/new' . ((x($_GET,'cid')) ? '/?cid=' . $_GET['cid'] : ''),
'sel' => $new_active,
),
array(
'label' => t('Starred'),
'url'=>$a->get_baseurl() . '/' . str_replace('/new', '', $a->cmd) . ((x($_GET,'cid')) ? '/?cid=' . $_GET['cid'] : '') . '&star=1',
'sel'=>$starred_active,
),
array(
'label' => t('Bookmarks'),
'url'=>$a->get_baseurl() . '/' . str_replace('/new', '', $a->cmd) . ((x($_GET,'cid')) ? '/?cid=' . $_GET['cid'] : '') . '&bmark=1',
'sel'=>$bookmarked_active,
),
);
$tpl = get_markup_template('common_tabs.tpl');
$o .= replace_macros($tpl, array('$tabs'=>$tabs));
// --- end item filter tabs
$contact_id = $a->cid; $contact_id = $a->cid;
$group = 0; $group = 0;

View File

@ -38,19 +38,7 @@ function notes_content(&$a,$update = false) {
$is_owner = true; $is_owner = true;
$o =""; $o ="";
// tabs $o .= profile_tabs($a,True);
$tpl = get_markup_template('profile_tabs.tpl');
$o .= replace_macros($tpl,array(
'$url' => $a->get_baseurl() . '/profile/' . $a->user['nickname'],
'$phototab' => $a->get_baseurl() . '/photos/' . $a->user['nickname'],
'$status' => t('Status'),
'$profile' => t('Profile'),
'$photos' => t('Photos'),
'$events' => t('Events') ,
'$notes' => t('Personal Notes'),
'$activetab' => "notes",
));
if(! $update) { if(! $update) {
$o .= '<h3>' . t('Personal Notes') . '</h3>'; $o .= '<h3>' . t('Personal Notes') . '</h3>';

View File

@ -831,18 +831,8 @@ function photos_content(&$a) {
$o = ""; $o = "";
// tabs // tabs
$tpl = get_markup_template('profile_tabs.tpl');
$_is_owner = (local_user() && (local_user() == $owner_uid)); $_is_owner = (local_user() && (local_user() == $owner_uid));
$o .= replace_macros($tpl,array( $o .= profile_tabs($a,$_is_owner);
'$url' => $a->get_baseurl() . '/profile/' .$a->data['user']['nickname'],
'$phototab' => $a->get_baseurl() . '/photos/' . $a->data['user']['nickname'],
'$status' => t('Status'),
'$profile' => t('Profile'),
'$photos' => t('Photos'),
'$events' => (($_is_owner) ? t('Events') : ''),
'$notes' => (($_is_owner) ? t('Personal Notes') : ''),
'$activetab' => "photos",
));
// //
// dispatch request // dispatch request

View File

@ -110,18 +110,7 @@ function profile_content(&$a, $update = 0) {
if(x($_GET,'tab')) if(x($_GET,'tab'))
$tab = notags(trim($_GET['tab'])); $tab = notags(trim($_GET['tab']));
$tpl = get_markup_template('profile_tabs.tpl'); $o.=profile_tabs($a, $is_owner);
$o .= replace_macros($tpl,array(
'$url' => $a->get_baseurl() . '/' . $a->cmd,
'$phototab' => $a->get_baseurl() . '/photos/' . $a->profile['nickname'],
'$status' => t('Status'),
'$profile' => t('Profile'),
'$photos' => t('Photos'),
'$events' => (($is_owner) ? t('Events') : ''),
'$notes' => (($is_owner) ? t('Personal Notes') : ''),
'$activetab' => $tab,
));
if($tab === 'profile') { if($tab === 'profile') {
@ -131,6 +120,8 @@ function profile_content(&$a, $update = 0) {
return $o; return $o;
} }
if(x($_SESSION,'new_member') && $_SESSION['new_member'] && $is_owner) if(x($_SESSION,'new_member') && $_SESSION['new_member'] && $is_owner)
$o .= '<a href="newmember">' . t('Tips for New Members') . '</a>' . EOL; $o .= '<a href="newmember">' . t('Tips for New Members') . '</a>' . EOL;

View File

@ -306,10 +306,22 @@ function settings_content(&$a) {
return; return;
} }
$tabtpl = get_markup_template("settings_tabs.tpl"); $tabs = array(
array(
'label' => t('Account settings'),
'url' => $a->get_baseurl().'/settings',
'sel' => (($a->argc == 1)?'active':''),
),
array(
'label' => t('Plugin settings'),
'url' => $a->get_baseurl().'/settings/addon',
'sel' => (($a->argc > 1) && ($a->argv[1] === 'addon')?'active':''),
)
);
$tabtpl = get_markup_template("common_tabs.tpl");
$tabs = replace_macros($tabtpl, array( $tabs = replace_macros($tabtpl, array(
'$account' => array( t('Account settings'), $a->get_baseurl().'/settings'), '$tabs' => $tabs,
'$plugins' => array( t('Plugin settings'), $a->get_baseurl().'/settings/addon')
)); ));

5
view/common_tabs.tpl Normal file
View File

@ -0,0 +1,5 @@
<ul class="tabs">
{{ for $tabs as $tab }}
<li><a href="$tab.url" class="tab button $tab.sel">$tab.label</a></li>
{{ endfor }}
</ul>

View File

@ -1,9 +0,0 @@
<div id="profile-tabs-wrapper" >
<a href="$url" id="profile-tab-status-link" class="profile-tabs button" >$status</a>
<a href="$url?tab=profile" id="profile-tab-profile-link" class="profile-tabs button" >$profile</a>
<a href="$phototab" id="profile-tab-photos-link" class="profile-tabs button" >$photos</a>
{{ if $events }}<a href="events" id="profile-tab-events-link" class="profile-tabs button" >$events</a>{{ endif }}
{{ if $notes }}<a href="notes" id="profile-tab-notes-link" class="profile-tabs button" >$notes</a>{{ endif }}
<div id="profile-tabs-end"></div>
</div>

View File

@ -1,6 +0,0 @@
<div id="profile-tabs-wrapper" >
<a href="$account.1" id="profile-tab-status-link" class="profile-tabs button" >$account.0</a>
<a href="$plugins.1" id="profile-tab-profile-link" class="profile-tabs button" >$plugins.0</a>
<div id="profile-tabs-end"></div>
</div>

View File

@ -59,7 +59,7 @@ body {
border: 2px solid #CCCCCC; border: 2px solid #CCCCCC;
} }
.profile-tabs { .tab {
color: #444444; color: #444444;
background: #EEE; background: #EEE;

View File

@ -26,7 +26,7 @@ input, select {
background-color: #000000; background-color: #000000;
color: #FF0000; color: #FF0000;
} }
.nav-link:hover, .nav-commlink:hover, .profile-tabs:hover { .nav-link:hover, .nav-commlink:hover, .tab:hover {
background: #DDDDDD; background: #DDDDDD;
color: #FF0000; color: #FF0000;
} }
@ -49,7 +49,7 @@ input, select {
background: #444444; background: #444444;
} }
.profile-tabs { .tab {
color: #FF0000; color: #FF0000;
background: #444444; background: #444444;
@ -65,7 +65,3 @@ a:hover, .fakelink:hover {
text-decoration: underline; text-decoration: underline;
} }
.profile-tabs {
color: #FF0000;
background: #444444;
}

View File

@ -17,7 +17,7 @@ aside{ background-image: url(border.jpg); padding-bottom: 0px; }
section { background-color: #333333; background-image: url(border.jpg); } section { background-color: #333333; background-image: url(border.jpg); }
#profile-tabs-wrapper { background-image: url(head.jpg); } .tabs { background-image: url(head.jpg); }
div.wall-item-content-wrapper.shiny { background-image: url('shiny.png'); } div.wall-item-content-wrapper.shiny { background-image: url('shiny.png'); }
nav #banner #logo-text a { color: #ffffff; } nav #banner #logo-text a { color: #ffffff; }

View File

@ -1,9 +0,0 @@
<div class="tabs-wrapper" >
<a href="$url" id="profile-tab-status-link" class="tabs {{if $activetab==posts}}active{{endif}}" >$status</a>
<a href="$url?tab=profile" id="profile-tab-profile-link" class="tabs {{if $activetab==profile}}active{{endif}}" >$profile</a>
<a href="$phototab" id="profile-tab-photos-link" class="tabs {{if $activetab==photos}}active{{endif}}" >$photos</a>
{{ if $events }}<a href="events" id="profile-tab-events-link" class="tabs {{if $activetab==events}}active{{endif}}" >$events</a>{{ endif }}
{{ if $notes }}<a href="notes" id="profile-tab-notes-link" class="tabs {{if $activetab==notes}}active{{endif}}" >$notes</a>{{ endif }}
<div class="tabs-end"></div>
</div>

View File

@ -349,11 +349,11 @@ aside #viewcontacts { text-align: right;}
section { margin: 10px 11% 0px 11%; font-size: 0.8em; padding-right: 230px;} section { margin: 10px 11% 0px 11%; font-size: 0.8em; padding-right: 230px;}
/** tabs **/ /** tabs **/
.tabs-wrapper {list-style: none; padding: 0px; margin: 0px; border-bottom: 1px solid #729fcf; } .tabs {list-style: none; padding: 0px; margin: 0px; border-bottom: 1px solid #729fcf; }
.tabs-wrapper li { display: inline;} .tabs li { display: inline;}
.tabs { padding: 0px 5px; margin-right: 10px; } .tab { padding: 0px 5px; margin-right: 10px; }
.tabs:hover { background-color: #729fcf; color: #eeeeec; border: 0px; } .tab:hover { background-color: #729fcf; color: #eeeeec; border: 0px; }
.tabs.active { background-color: #729fcf; color: #eeeeec; border: 0px; } .tab.active { background-color: #729fcf; color: #eeeeec; border: 0px; }
/** /**

View File

@ -204,34 +204,24 @@ section {
min-height: 112px; min-height: 112px;
} }
#profile-tabs-wrapper {
height: 27px;
background-image: url(head.jpg);
background-repeat: repeat-x;
background-position: 0px -20px;
border-bottom: 1px solid #babdb6;
}
.profile-tabs {
display:block;
float:left;
padding: 0.4em;
margin-right: 1em;
}
#tabs-wrapper {
height: 27px;
background-image: url(head.jpg);
background-repeat: repeat-x;
background-position: 0px -20px;
border-bottom: 1px solid #babdb6;
}
.tabs { .tabs {
height: 27px;
background-image: url(head.jpg);
background-repeat: repeat-x;
background-position: 0px -20px;
border-bottom: 1px solid #babdb6;
padding:0px;
}
.tabs li { margin: 0px; list-style: none; }
.tab {
display:block; display:block;
float:left; float:left;
padding: 0.4em; padding: 0.4em;
margin-right: 1em; margin-right: 1em;
} }
.tab.active {
font-weight: bold;
}
/* footer */ /* footer */

View File

@ -29,7 +29,7 @@ a:hover {text-decoration: underline; }
aside( background-image: url('border.jpg'); } aside( background-image: url('border.jpg'); }
#profile-tabs-wrapper { background-image: url('head.jpg'); } .tabs { background-image: url('head.jpg'); }
div.wall-item-content-wrapper.shiny { background-image: url('shiny.png'); } div.wall-item-content-wrapper.shiny { background-image: url('shiny.png'); }

View File

@ -67,7 +67,7 @@ body {
background: #FFDDAA !important; background: #FFDDAA !important;
} }
.profile-tabs { .tab {
color: #444444; color: #444444;
background: #FFCC55; background: #FFCC55;

View File

@ -22,7 +22,7 @@ a:hover {text-decoration: underline; }
body { background-image: url(head.jpg); } body { background-image: url(head.jpg); }
aside( background-image: url(border.jpg); } aside( background-image: url(border.jpg); }
section { background-image: url(border.jpg); } section { background-image: url(border.jpg); }
#profile-tabs-wrapper { background-image: url(head.jpg); } .tabs { background-image: url(head.jpg); }
div.wall-item-content-wrapper.shiny { background-image: url('shiny.png'); } div.wall-item-content-wrapper.shiny { background-image: url('shiny.png'); }
.fakelink, .fakelink:visited { .fakelink, .fakelink:visited {

View File

@ -1570,7 +1570,7 @@ padding: 5px 10px 0px;
width: 600px; width: 600px;
} }
.profile-tabs { .tab {
float: left; float: left;
padding: 4px; padding: 4px;
margin-top: 10px; margin-top: 10px;
@ -1583,36 +1583,15 @@ padding: 5px 10px 0px;
background-color: #ECECEC; background-color: #ECECEC;
border: 1px solid #858585; border: 1px solid #858585;
} }
.profile-tabs:hover { .tab.active,
.tab:hover {
background-color: #0CBEFE; background-color: #0CBEFE;
color: #F5F6FB; color: #F5F6FB;
border: 1px solid #F5F6FB; border: 1px solid #F5F6FB;
/*cursor: pointer;*/ /*cursor: pointer;*/
} }
.tabs { padding:0px; margin: 0px; overflow: auto; height: auto;}
#profile-tabs-end { .tabs li { margin: 0px; list-style: none; }
clear: both;
}
.tabs {
padding: 4px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 5px;
/*border: 1px solid #CCC;*/
/*background: #F8F8F8;*/
font-size: 0.8em;
font-weight: bold;
background-color: #ECECEC;
border: 1px solid #858585;
}
.tabs:hover {
background-color: #0CBEFE;
color: #F5F6FB;
border: 1px solid #F5F6FB;
/*cursor: pointer;*/
}
.comment-edit-text-empty { .comment-edit-text-empty {
color: gray; color: gray;

View File

@ -7,7 +7,7 @@ a:hover {text-decoration: underline; }
body { background-image: url(head.jpg); } body { background-image: url(head.jpg); }
aside( background-image: url(border.jpg); } aside( background-image: url(border.jpg); }
section { background-image: url(border.jpg); } section { background-image: url(border.jpg); }
#profile-tabs-wrapper { background-image: url(head.jpg); } .tabs { background-image: url(head.jpg); }
div.wall-item-content-wrapper.shiny { background-image: url('shiny.png'); } div.wall-item-content-wrapper.shiny { background-image: url('shiny.png'); }

View File

@ -18,7 +18,7 @@ body {
background: #F4F4F4; background: #F4F4F4;
} }
.profile-tabs { .tab {
color: #444444; color: #444444;
background: #F4F4F4; background: #F4F4F4;

View File

@ -1,9 +0,0 @@
<div class="tabs-wrapper" >
<a href="$url" id="profile-tab-status-link" class="button tabs {{if $activetab==posts}}active{{endif}}" >$status</a>
<a href="$url?tab=profile" id="profile-tab-profile-link" class="button tabs {{if $activetab==profile}}active{{endif}}" >$profile</a>
<a href="$phototab" id="profile-tab-photos-link" class="button tabs {{if $activetab==photos}}active{{endif}}" >$photos</a>
{{ if $events }}<a href="events" id="profile-tab-events-link" class="button tabs {{if $activetab==events}}active{{endif}}" >$events</a>{{ endif }}
{{ if $notes }}<a href="notes" id="profile-tab-notes-link" class="button tabs {{if $activetab==notes}}active{{endif}}" >$notes</a>{{ endif }}
<div class="tabs-end"></div>
</div>

View File

@ -822,22 +822,22 @@ profile-jot-banner-wrapper {
/* = Tabs = */ /* = Tabs = */
/* ======== */ /* ======== */
.tabs-wrapper { .tabs {
width: 450px; width: 450px;
list-style: none; list-style: none;
padding: 10px; padding: 10px;
margin: 0px 0px 10px 0px; margin: 0px 0px 10px 0px;
border-bottom: 1px solid #efefef; border-bottom: 1px solid #efefef;
} }
.tabs-wrapper li { display: inline;} .tabs li { display: inline;}
.tabs { .tab {
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
margin-right: 5px; margin-right: 5px;
font-style: bold; font-style: bold;
} }
.tabs:hover { .tab:hover {
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
} }
@ -3085,4 +3085,4 @@ ul.menu-popup {
#jGrowl { #jGrowl {
z-index: 20000; z-index: 20000;
} }

View File

@ -26,7 +26,7 @@
} }
.profile-tabs { .tab {
-moz-box-shadow: 5px 5px 5px #888888; -moz-box-shadow: 5px 5px 5px #888888;
-webkit-box-shadow: 5px 5px 5px #888888; -webkit-box-shadow: 5px 5px 5px #888888;
box-shadow: 5px 5px 5px #888888; box-shadow: 5px 5px 5px #888888;