From 38a66b47448a84a8890b2c79c07928b07216a77f Mon Sep 17 00:00:00 2001
From: Jared Hancock <jared@osticket.com>
Date: Wed, 22 Apr 2015 11:05:14 -0500
Subject: [PATCH] ui: Add better emphasis for tabs
---
include/staff/department.inc.php | 2 +-
include/staff/dynamic-list.inc.php | 2 +-
include/staff/group.inc.php | 2 +-
include/staff/helptopic.inc.php | 2 +-
include/staff/org-view.inc.php | 2 +-
include/staff/page.inc.php | 2 +-
include/staff/role.inc.php | 2 +-
include/staff/team.inc.php | 2 +-
include/staff/user-view.inc.php | 2 +-
scp/css/scp.css | 13 ++++++++++++-
10 files changed, 21 insertions(+), 10 deletions(-)
diff --git a/include/staff/department.inc.php b/include/staff/department.inc.php
index db23768ef..5d7aa8426 100644
--- a/include/staff/department.inc.php
+++ b/include/staff/department.inc.php
@@ -32,7 +32,7 @@ $info = Format::htmlchars(($errors && $_POST) ? $_POST : $info);
<input type="hidden" name="id" value="<?php echo $info['id']; ?>">
<h2><?php echo __('Department');?></h2>
<br>
-<ul class="tabs">
+<ul class="clean tabs">
<li class="active"><a href="#settings">
<i class="icon-file"></i> <?php echo __('Settings'); ?></a></li>
<li><a href="#access">
diff --git a/include/staff/dynamic-list.inc.php b/include/staff/dynamic-list.inc.php
index ed7030ff6..8b9dd9557 100644
--- a/include/staff/dynamic-list.inc.php
+++ b/include/staff/dynamic-list.inc.php
@@ -27,7 +27,7 @@ $info=Format::htmlchars(($errors && $_POST) ? array_merge($info,$_POST) : $info)
<h2><?php echo __('Custom List'); ?>
<?php echo $list ? $list->getName() : __('Add new list'); ?></h2>
-<ul class="tabs" id="list-tabs">
+<ul class="clean tabs" id="list-tabs">
<li class="active"><a href="#definition">
<i class="icon-plus"></i> <?php echo __('Definition'); ?></a></li>
<li><a href="#items">
diff --git a/include/staff/group.inc.php b/include/staff/group.inc.php
index e8006cade..e64857da0 100644
--- a/include/staff/group.inc.php
+++ b/include/staff/group.inc.php
@@ -30,7 +30,7 @@ $roles = Role::getActiveRoles();
<input type="hidden" name="id" value="<?php echo $info['id']; ?>">
<h2> <?php echo $group ?: __('New Group'); ?></h2>
<br>
-<ul class="tabs">
+<ul class="clean tabs">
<li class="active"><a href="#group">
<i class="icon-file"></i> <?php echo __('Group'); ?></a></li>
<li><a href="#departments">
diff --git a/include/staff/helptopic.inc.php b/include/staff/helptopic.inc.php
index 7df72585c..cd0b54bdd 100644
--- a/include/staff/helptopic.inc.php
+++ b/include/staff/helptopic.inc.php
@@ -32,7 +32,7 @@ $info=Format::htmlchars(($errors && $_POST)?$_POST:$info);
<br/>
-<ul class="tabs" id="topic-tabs">
+<ul class="clean tabs" id="topic-tabs">
<li class="active"><a href="#info"><i class="icon-info-sign"></i> Help Topic Information</a></li>
<li><a href="#routing"><i class="icon-ticket"></i> New ticket options</a></li>
<li><a href="#forms"><i class="icon-paste"></i> Forms</a></li>
diff --git a/include/staff/org-view.inc.php b/include/staff/org-view.inc.php
index 492a5b86c..94e658d24 100644
--- a/include/staff/org-view.inc.php
+++ b/include/staff/org-view.inc.php
@@ -75,7 +75,7 @@ if(!defined('OSTSCPINC') || !$thisstaff || !is_object($org)) die('Invalid path')
</table>
<br>
<div class="clear"></div>
-<ul class="tabs" id="orgtabs">
+<ul class="clean tabs" id="orgtabs">
<li class="active"><a href="#users"><i
class="icon-user"></i> <?php echo __('Users'); ?></a></li>
<li><a href="#tickets"><i
diff --git a/include/staff/page.inc.php b/include/staff/page.inc.php
index ea373533c..0a7359ae0 100644
--- a/include/staff/page.inc.php
+++ b/include/staff/page.inc.php
@@ -111,7 +111,7 @@ $info=Format::htmlchars(($errors && $_POST)?$_POST:$info);
</tr>
<tr>
<td colspan="2">
- <ul class="tabs">
+ <ul class="tabs clean">
<li class="active"><a href="#content"><?php echo __('Page Content'); ?></a></li>
<li><a href="#notes"><?php echo __('Internal Notes'); ?></a></li>
</ul>
diff --git a/include/staff/role.inc.php b/include/staff/role.inc.php
index 309d26d7b..e597c1f27 100644
--- a/include/staff/role.inc.php
+++ b/include/staff/role.inc.php
@@ -25,7 +25,7 @@ $info = Format::htmlchars(($errors && $_POST) ? array_merge($info, $_POST) : $in
<input type="hidden" name="id" value="<?php echo $info['id']; ?>">
<h2> <?php echo $role ?: __('New Role'); ?></h2>
<br>
-<ul class="tabs">
+<ul class="clean tabs">
<li class="active"><a href="#definition">
<i class="icon-file"></i> <?php echo __('Definition'); ?></a></li>
<li><a href="#permissions">
diff --git a/include/staff/team.inc.php b/include/staff/team.inc.php
index f851fdc3a..db47fa00e 100644
--- a/include/staff/team.inc.php
+++ b/include/staff/team.inc.php
@@ -31,7 +31,7 @@ $info = Format::htmlchars(($errors && $_POST) ? $_POST : $info);
<i class="help-tip icon-question-sign" href="#teams"></i>
</h2>
<br>
-<ul class="tabs">
+<ul class="clean tabs">
<li class="active"><a href="#team">
<i class="icon-file"></i> <?php echo __('Team'); ?></a></li>
<?php
diff --git a/include/staff/user-view.inc.php b/include/staff/user-view.inc.php
index 29c573a60..256654d42 100644
--- a/include/staff/user-view.inc.php
+++ b/include/staff/user-view.inc.php
@@ -143,7 +143,7 @@ if ($thisstaff->getRole()->hasPerm(User::PERM_EDIT)) { ?>
</table>
<br>
<div class="clear"></div>
-<ul class="tabs" id="user-view-tabs">
+<ul class="clean tabs" id="user-view-tabs">
<li class="active"><a href="#tickets"><i
class="icon-list-alt"></i> <?php echo __('User Tickets'); ?></a></li>
<li><a href="#notes"><i
diff --git a/scp/css/scp.css b/scp/css/scp.css
index 061e241a1..dea3f1913 100644
--- a/scp/css/scp.css
+++ b/scp/css/scp.css
@@ -927,6 +927,7 @@ ul.tabs {
border-bottom:1px solid #aaa;
background:#eef3f8;
position: relative;
+ box-shadow: inset 0 -5px 10px -9px rgba(0,0,0,0.3);
}
#response_options ul.tabs {
@@ -967,7 +968,13 @@ ul.tabs li.active {
text-align: center;
border-top:2px solid #81a9d7;
bottom: 0;
- box-shadow: 4px -1px 6px -3px rgba(0,0,0,0.3);
+ box-shadow: 4px -1px 6px -3px rgba(0,0,0,0.2);
+}
+ul.tabs li:not(.active) {
+ box-shadow: inset 0 -5px 10px -9px rgba(0,0,0,0.2);
+}
+ul.tabs.clean li.active {
+ background-color: white;
}
ul.tabs li a {
@@ -997,6 +1004,7 @@ ul.tabs.vertical {
padding-bottom: 40px;
padding-top: 10px;
background: transparent;
+ box-shadow: inset -5px 0 10px -9px rgba(0,0,0,0.3);
}
ul.tabs.vertical.left {
float: left;
@@ -1014,6 +1022,9 @@ ul.tabs.vertical li {
right: 0;
height: auto;
}
+ul.tabs.vertical li:not(.active) {
+ box-shadow: inset -5px 0 10px -9px rgba(0,0,0,0.3);
+}
ul.tabs.vertical li + li {
margin-top: 5px;
--
GitLab