This is the proper patch. Majority of the work was done by Kyle Baker.
From 35b2561c444858a666c6318d2b3240f9277f0ef7 Mon Sep 17 00:00:00 2001
From: Adam Young <ayo...@redhat.com>
Date: Thu, 9 Dec 2010 16:32:22 -0500
Subject: [PATCH] button and table styling
replaced expand contract +- with icons
removed background for action buttons and gave them their own class
Major css cleanup
---
install/static/associate.js | 8 +-
install/static/details.js | 24 ++++-
install/static/ipa.css | 221 ++++++++++++++++++++++++++++++++++---------
install/static/search.js | 4 +-
4 files changed, 202 insertions(+), 55 deletions(-)
diff --git a/install/static/associate.js b/install/static/associate.js
index 540b1a80f7ee36cbf647ecfdab83be2ad457a5b9..ffec9516d5fe895d78ffaaaedb2e2a0031917485 100644
--- a/install/static/associate.js
+++ b/install/static/associate.js
@@ -317,14 +317,14 @@ function ipa_association_table_widget(spec) {
that.table_setup(container);
var button = $('input[name=remove]', container);
- button.replaceWith(ipa_button({
+ button.replaceWith(IPA.action_button({
'label': button.val(),
'icon': 'ui-icon-trash',
'click': function() { that.show_remove_dialog(); }
}));
button = $('input[name=add]', container);
- button.replaceWith(ipa_button({
+ button.replaceWith(IPA.action_button({
'label': button.val(),
'icon': 'ui-icon-plus',
'click': function() { that.show_add_dialog() }
@@ -679,14 +679,14 @@ function ipa_association_facet(spec) {
var action_panel = that.get_action_panel();
var button = $('input[name=remove]', action_panel);
- button.replaceWith(ipa_button({
+ button.replaceWith(IPA.action_button({
'label': button.val(),
'icon': 'ui-icon-trash',
'click': function() { that.show_remove_dialog(); }
}));
button = $('input[name=add]', action_panel);
- button.replaceWith(ipa_button({
+ button.replaceWith(IPA.action_button({
'label': button.val(),
'icon': 'ui-icon-plus',
'click': function() { that.show_add_dialog() }
diff --git a/install/static/details.js b/install/static/details.js
index fcf04ffd1041ec5074e57e3f17c9076b5cd1a9c6..6803d90ab42c9f07055d21faa718a2e34434a241 100644
--- a/install/static/details.js
+++ b/install/static/details.js
@@ -24,6 +24,9 @@
/* REQUIRES: ipa.js */
+IPA.expand_icon = 'ui-icon-minus';
+IPA.collapse_icon = 'ui-icon-plus';
+
IPA.is_field_writable = function(rights){
if (!rights){
alert('no right');
@@ -93,7 +96,7 @@ function ipa_details_field(spec) {
}
} else {
- if (multivalue && IPA.is_field_writable(rights)) {
+ if (multivalue && IPA.is_field_writable(rights)) {
dd = ipa_create_first_dd(that.name);
dd.append(ipa_details_field_create_add_link.call(that, that.name, rights, 0));
dd.appendTo(that.container);
@@ -407,9 +410,13 @@ function ipa_details_facet(spec) {
that.get_section_header_prefix = function(visible) {
if (visible) {
- return '[−]';
+ return '<span class="ui-icon '+
+ IPA.collapse_icon +
+ ' section-expand" ></span>';
} else {
- return '[+]';
+ return '<span class="ui-icon '+
+ IPA.collapse_icon +
+ ' section-expand" />';
}
};
@@ -463,7 +470,7 @@ function ipa_details_facet(spec) {
that.facet_setup(container);
var button = $('input[name=reset]', that.container);
- that.reset_button = ipa_button({
+ that.reset_button = IPA.action_button({
'label': 'Reset',
'icon': 'ui-icon-refresh',
'class': 'details-reset',
@@ -475,7 +482,7 @@ function ipa_details_facet(spec) {
button.replaceWith(that.reset_button);
button = $('input[name=update]', that.container);
- that.update_button = ipa_button({
+ that.update_button = IPA.action_button({
'label': 'Update',
'icon': 'ui-icon-check',
'class': 'details-update',
@@ -536,6 +543,12 @@ function ipa_details_facet(spec) {
return that;
}
+IPA.action_button = function(spec) {
+ var button = ipa_button(spec);
+ button.removeClass("ui-state-default").addClass("action-button");
+ return button;
+}
+
function ipa_button(spec) {
spec = spec || {};
@@ -864,4 +877,3 @@ function _ipa_remove_on_click(obj)
}
return (false);
}
-
diff --git a/install/static/ipa.css b/install/static/ipa.css
index be695a0f2f984dcc4ddce4e377f81a3b86d1b3e2..84c48aac812e46291404ab92a32c775fdc75f068 100644
--- a/install/static/ipa.css
+++ b/install/static/ipa.css
@@ -14,13 +14,31 @@ body{
margin: 0;
}
-.input_link {padding: .4em 1em .4em 1.5em;text-decoration: none;position: relative; cursor: pointer; }
-.input_link span.ui-icon {margin: 0 0.4em 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
+...@font-face {font-family: "FreeWay"; src:url("fonts/FreeWay.otf");}
+...@font-face {font-family: "FreeWayBold"; src:url("fonts/FreeWay-Bold.otf");}
+
+.input_link {
+ padding: .4em 1em .4em 2em;
+ text-decoration: none;
+ position: relative;
+ cursor: pointer;
+}
+
+.input_link span.ui-icon {
+ -moz-border-radius: 0.3em;
+ border: 1px solid #B8B8B8;
+ margin: -9px 0.4em 0em -0.3em;
+ position: absolute;
+ left: .2em;
+ top: 50%;
+
+}
/* ---- Header ---- */
div.header {
background-color:#0C3B00;
width: 100%;
+ height: 40px;
}
div.header a {
@@ -48,9 +66,12 @@ div.header span.header-logo a img {
div.header span.header-loggedinas {
width: 960px;
color: #fff;
- align: right;
- padding-left: 600px;
- padding-bottom: 0;
+ display: block;
+ padding-left: none;
+ margin-top: -26px;
+ margin-left: auto;
+ margin-right: 276px;
+ width: 200px;
}
@@ -109,18 +130,30 @@ div.content div.content-buttons img {
}
h2 {
- font-size: 18pt;
- font-weight: bold;
+ font-family: "FreeWayBold","Liberation Sans", Arial, sans-serif;
+ font-size: 1.5em;
+ font-weight: normal;
+ color: #333333;
+ text-transform: uppercase;
margin-left: 15px;
- margin-top: 0;
margin-bottom: 0px;
text-align: left;
}
+.section-expand{
+ float:left;
+ -moz-border-radius: 0.3em;
+ background-color: -moz-linear-gradient(top, #959595, #5e5e5e);
+ border: 1px solid #b8b8b8;
+ color: #fff;
+ margin-right: 0.5em;
+ margin-top: 0.1em;
+}
+
hr {
- background-color: #b2b2b2;
+ background-color: #EEEEEE;
clear: both;
- color: #b2b2b2;
+ color: #FFFFFF;
height: 1px;
margin-left: 15px;
margin-right: 15px;
@@ -150,6 +183,7 @@ dl.entryattrs dt {
padding-right: 18px;
text-align: right;
width: 160px;
+ margin: 0.5em -0.5em 0 -6em;
}
dl.entryattrs dd {
@@ -159,15 +193,18 @@ dl.entryattrs dd {
dl.entryattrs dd.first {
margin-left: 0px;
+ margin-top: 7px;
}
dl.entryattrs dd.other {
clear: both;
- margin-left: 178px;
+ margin-left: 107px;
}
dl.entryattrs input {
margin-right: 5px;
+ margin-top: -12px;
+ min-width: 275px;
}
div#backtotop {
@@ -181,6 +218,7 @@ span.attrhint {
left: 40em;
margin-left: 100px;
position: absolute;
+ overflow-x: hidden;
}
@@ -191,6 +229,7 @@ span.attrhint {
margin: 0;
border: none;
background-image: url(Mainnav-background.png);
+ -moz-border-radius: 0;
}
@@ -198,12 +237,63 @@ span.attrhint {
padding:0;
}
+.ui-icon-plus {
+ background-position: -16px -129px;
+}
+
+.ui-icon-minus {
+ background-position: -48px -129px;
+}
+
+.ui-icon-trash {
+ background-position: -176px -97px;
+}
+
+.ui-widget-content .ui-icon {
+ background-image: url("ui-icons_222222_256x240.png");
+ background-color: #e2e2e2;
+}
+
+.ui-widget-content {
+ background: -moz-linear-gradient(top, #F9F9F9, #fff);
+}
+
+
+.ui-widget-content a {
+ text-decoration: none;
+ color: #1d85d5;
+ font-weight: normal;
+}
+
+.ui-widget-header {
+ background: url("modal-background.png")
+ repeat scroll 50% 50% #1f9123;
+ border: 1px solid #244c16;
+ color: #EEEEEE;
+ font-weight: bold;
+}
+
.tabs1 .ui-tabs-nav {
height: 3em;
}
+.ui-widget input, .ui-widget select,
+.ui-widget textarea, .ui-widget button {
+ font-family: "Liberation Sans", Arial, sans-serif;
+ font-size: 1.3em;
+ margin-right: .1em;
+}
+
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
+ -moz-border-radius: .3em;
+ background: -moz-linear-gradient(top, #959595, #5e5e5e);
+ border: 1px solid #777777;
+ color: #fff;
+ font-weight: normal;
+}
+
.tabs1 .ui-tabs-nav li {
- # padding: 0.5em 0;
+ -moz-border-radius: 0 !important;
background-image: url(Mainnav-offtab.png);
margin: 0;
border-width: 0;
@@ -219,12 +309,14 @@ span.attrhint {
}
.tabs1 .ui-tabs-nav li a{
- width:5em;
- padding: 0.2em 0;
+ -moz-border-radius: 0 !important;
+ font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
+ width:5.5em;
+ padding: none;
color: #7E7E7E;
margin: 0 auto;
text-align:center;
- font-size:2em;
+ font-size:1.5em;
}
@@ -244,7 +336,7 @@ span.attrhint {
}
.tabs2 .ui-tabs-nav {
- padding: 0.3em 6em 0 9em;
+ padding: 0.3em 6em 0 7em;
margin: 0px;
height: 2.5em;
background-image: url(Subnav-background.png);
@@ -252,26 +344,27 @@ span.attrhint {
.tabs2 .ui-tabs-nav li {
width:auto;
- padding: 0;
+ padding-left: 1em;
margin: 0px 0;
- background-image: url(Subnav-background.png);
+ background: #326122 !important;
color: white;
}
.tabs2 .ui-tabs-nav li.ui-tabs-selected {
- padding: 0;
+ padding-left: 1em;
height: 1em;
- background-image: url(Subnav-background.png);
+ background: #326122 !important;
}
.tabs2 .ui-tabs-nav li a{
width:auto;
- padding: 0.2em 0.4em ;
- -moz-border-radius: 2em;
- border-radius: 2em;
+ padding: 0.4em 0.6em ;
+ -moz-border-radius: 2em !important;
+ border-radius: 2em !important;
color: white;
font-size: 1em;
+ font-family: "Liberation Sans", Arial, Sans;
}
.tabs2 .ui-tabs-nav li > a:link, span.main-nav-off > a:visited{
@@ -280,16 +373,13 @@ span.attrhint {
.tabs2 .ui-tabs-nav li a:hover{
- background: none repeat scroll 0 0 #254718;
+ background: none repeat scroll 0 0 #1C3612;
}
.tabs2 .ui-tabs-nav li.ui-tabs-selected a{
- -moz-border-radius: 2em;
- border-radius: 2em;
- border:1px solid #1C3612;
- background: none repeat scroll 0 0 #254718;
+ # border:1px solid #1C3612;
+ background: none repeat scroll 0 0 #1C3612;
color: white;
- height: 1em;
}
@@ -321,20 +411,34 @@ span.main-separator{
.action-panel {
position: fixed;
+ height: 330px;
left: 3em;
border: none;
float: left;
- margin-top: 5em;
+ margin-top: 6.3em;
margin-left: 2.5em;
padding-left: 0.5em;
padding-bottom: 1em;
- width: 16.5em;
+ width: 15.5em;
+ background-image:url('panel-background.png');
+ background-repeat:no-repeat;
+ background-position:right;
}
+.action-panel h3{
+ font-family: "FreeWayBold", "Liberation Sans", Arial, sans-serif;
+ color: #333333;
+ margin: 0;
+ background: #EEEEEE;
+ padding: .5em;
+ border-right: 1px solid #dfdfdf;
+ text-transform: uppercase;
+ font-size: 1.2em;
+}
.action-panel ul {
list-style-type:none;
- padding: 0;
+ padding-left: .5em;
}
.action-panel h3{
@@ -343,44 +447,62 @@ span.main-separator{
}
.action-panel li {
- height: auto;
- padding: 0.2em;
+ font-family: "FreeWayBold", "Liberation Sans", Arial, sans-serif;
+ font-size: 1.1em;
+ color: #1d85d5;
+ list-style-type: none;
+ height: 2.1em;
+ padding: none;
}
.action-panel li.search-facet {
- color: black;
- text-decoration: underline;
+ font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
+ color: #333333;
cursor: pointer;
+ text-transform: uppercase;
+ font-size: 1.2em;
}
.action-panel li.entity-facet {
- color: black;
- text-decoration: underline;
+ font-family: "Liberation Sans",Arial,sans-serif;
+ color: #1d85d5;
cursor: pointer;
- margin-left:2em;
+ margin-left:1.8em;
+ text-transform: none;
}
.action-panel li.entity-facet-disabled {
+ font-family: "Liberation Sans",Arial,sans-serif;
color: gray;
cursor: default;
text-decoration: none;
+ text-transform: none;
}
+.action-button {
+ background: none;
+ background-image:none;
+ font-family: "Liberation Sans", Arial, sans-serif;
+ font-size: 0.9em;
+}
.client {
margin-top: 0.4em;
float: left;
+ min-width: 700px;
}
/* Search */
.search-controls {
+ -moz-border-radius: .7em .7em 0 0;
height: 25px;
- background: white; ##a5a5a5;
+ background: -moz-linear-gradient(top, #eeeeee, #dfdfdf);
position: relative;
- padding: 0.7em;
+ padding: 1em 1.5em;
+ margin-top: 15px;
}
.search-table > a:link,a:visted{
@@ -393,10 +515,23 @@ span.main-separator{
border: none;
}
+.search-table td{
+ padding-left: 0.5em;
+}
+
.search-table th{
- background-color:gray;
- color:white;
+ padding-left: 0.5em;
+ background-color:#f6f6f6;
+ color:#333333;
text-align: left;
+ border: 1px solid #dfdfdf;
+}
+
+.search-table tfoot tr td span{
+ border-top: 1px solid #dfdfdf;
+ padding: 0.9em 0 0 1em;
+ display: block;
+ margin-top: 2em;
}
.search-table tr:nth-child(even){
diff --git a/install/static/search.js b/install/static/search.js
index a53a9efbb1af41f906b804fa804b23f9f641e2ae..e81d882b82052b1dbd80e6feed81e66b3768bce2 100644
--- a/install/static/search.js
+++ b/install/static/search.js
@@ -96,7 +96,7 @@ function ipa_search_widget(spec) {
var search_buttons = $('.search-buttons', action_panel);
button = $('input[name=remove]', search_buttons);
- that.remove_button = ipa_button({
+ that.remove_button = IPA.action_button({
'label': IPA.messages.button.remove,
'icon': 'ui-icon-trash',
'click': function() { that.remove(that.container); }
@@ -104,7 +104,7 @@ function ipa_search_widget(spec) {
button.replaceWith(that.remove_button);
button = $('input[name=add]', search_buttons);
- that.add_button = ipa_button({
+ that.add_button = IPA.action_button({
'label': IPA.messages.button.add,
'icon': 'ui-icon-plus',
'click': function() { that.add(that.container); }
--
1.7.2.3
_______________________________________________
Freeipa-devel mailing list
Freeipa-devel@redhat.com
https://www.redhat.com/mailman/listinfo/freeipa-devel
