Some of the changes necessary for the actions panel.
From 3291c53b2d882adaa3afb416f787e0990c86bb38 Mon Sep 17 00:00:00 2001
From: Adam Young <ayo...@redhat.com>
Date: Thu, 6 Jan 2011 11:22:57 -0500
Subject: [PATCH] action panel style

make clickable links blue
change spacing to keep headers from wrapping
convert most px values to em, to support scaling
indent action controls and place them under the active facet
---
 install/static/entity.js |   37 ++++++++--
 install/static/ipa.css   |  180 +++++++++++++++++++++------------------------
 2 files changed, 114 insertions(+), 103 deletions(-)

diff --git a/install/static/entity.js b/install/static/entity.js
index 8620ef09dad4c0e9e50cc3ab4450ac3f1828b6e3..a6f31e84b238276f1343bf3b1d909d7a97403749 100644
--- a/install/static/entity.js
+++ b/install/static/entity.js
@@ -486,11 +486,22 @@ function ipa_facet_create_action_panel(container) {
             /*assume for now that entities with only a single facet
               do not have search*/
             if (entity.facets.length > 0 ){
-                main_facet.text( 'List ' +  IPA.metadata[entity_name].label);
+                if ( entity.facets[0].name === ipa_current_facet( entity)){
+                    main_facet.text( IPA.metadata[entity_name].label);
+                    main_facet.appendTo(ul);
+                    ul.append($('<li><span class="action-controls"/></li>'));
+                }else{
+                    main_facet.html(
+                        $('<span />',{
+                            "class":"input_link"
+                        }).append(
+                            $('<span/>',{
+                                "class":"ui-icon ui-icon-triangle-1-w "
+                            })
+                        ).append('Back to List '));
+                    main_facet.appendTo(ul);
+                }
             }
-            main_facet.appendTo(ul);
-
-            ul.append($('<li><span class="action-controls"/></li>'));
             var facet_groups = {};
             for (var i=1; i<entity.facets.length; i++) {
                 other_facet = entity.facets[i];
@@ -508,12 +519,24 @@ function ipa_facet_create_action_panel(container) {
                         facet_groups[facet_group] = li;
                     }
                     var li = facet_groups[facet_group];
-                    li.after(
-                        build_link(other_facet, other_facet.label)
-                    );
+                    var link =  build_link(other_facet, other_facet.label)
+                    li.after(link );
+                    if ( other_facet.name === ipa_current_facet( entity)){
+                        var text = link.text();
+                        link.text('');
+                        link.append($('<ul>').
+                                    append('<li>'+ text+'</li>').
+                                    append($('<li/>',{
+                                        html:$('<span />',{
+                                            class:"action-controls"})})));
+                    }
                     facet_groups[facet_group] = li.next();
+
                 } else {
                     ul.append(build_link(other_facet, other_facet.label));
+                    if ( other_facet.name === ipa_current_facet( entity)){
+                        ul.append($('<li><span class="action-controls"/></li>'));
+                    }
                 }
             }
         }else{
diff --git a/install/static/ipa.css b/install/static/ipa.css
index df138aa2f5ed1a38953e10bc83ebc3291c14a583..5388a4166b480322904f5b7d6cfee66902e7fe81 100644
--- a/install/static/ipa.css
+++ b/install/static/ipa.css
@@ -8,16 +8,20 @@
 */
 
 
-body{
-    border-width: 0;
-    font-family:"Liberation Sans",Arial,Sans;
-    font-size:62.5%;
-    margin: 0;
-}
-
 @font-face {font-family: "FreeWay"; src:url("FreeWay.otf");}
 @font-face {font-family: "FreeWayBold"; src:url("FreeWay-Bold.otf");}
 
+body{
+    border-width: 0;
+    font-family:"Liberation Sans",Arial,Sans;
+    font-size:10px;
+    margin: 0;
+}
+
+.ui-widget {
+    font-size: 1em;
+}
+
 .input_link {
     padding: .4em 1em .4em 2em;
     text-decoration: none;
@@ -28,18 +32,17 @@ body{
 .input_link span.ui-icon {
     -moz-border-radius: 0.3em;
     border: 1px solid #B8B8B8;
-    margin: -9px 0.4em 0em -0.3em;
+    margin: -0.9em 0.4em 0em -0.3em;
     position: absolute;
     left: .2em;
     top: 50%;
-
 }
 
 /*  ----  Header  ----  */
 div.header {
     background-color:#0C3B00;
     width: 100%;
-    height: 40px;
+    height: 4em;
 }
 
 div.header a {
@@ -65,32 +68,22 @@ div.header span.header-logo a img {
 }
 
 div.header span.header-loggedinas {
-    width: 960px;
+    width: 96em;
     color: #fff;
     display: block;
     padding-left: none;
-    margin-top: -26px;
+    margin-top: -2.6em;
     margin-left: auto;
-    margin-right: 276px;
-    width: 200px;
+    margin-right: 27.6em;
+    width: 20em;
 }
 
-
-
 /* ---- Navigation ---- */
 div.tabs {
     overflow: auto;
     width: 100%;
     height: 100%;
-    min-height: 400px;
-}
-
-h1 {
-    font-size: 26pt;
-    font-weight: bold;
-    margin-bottom: 30px;
-    margin-left: 15px;
-    margin-top: 18px;
+    min-height: 40em;
 }
 
 div#content {
@@ -101,7 +94,7 @@ div#content {
 
 
 ul#viewtype {
-    padding-left: 20px;
+    padding-left: 2em;
 }
 
 ul#viewtype li {
@@ -109,7 +102,7 @@ ul#viewtype li {
     display: inline;
     font-weight: bold;
     list-style-type: none;
-    padding-right: 20px;
+    padding-right: 2em;
 }
 
 
@@ -123,7 +116,7 @@ ul#viewtype li a {
 
 div.content div.content-buttons {
     float: right;
-    margin-right: 15px;
+    margin-right: 1.5em;
 }
 
 div.content div.content-buttons img {
@@ -136,8 +129,8 @@ h2 {
     font-weight: normal;
     color: #333333;
     text-transform: uppercase;
-    margin-left: 15px;
-    margin-bottom: 0px;
+    margin-left: 1em;
+    margin-bottom: 0;
     text-align: left;
 }
 
@@ -155,19 +148,19 @@ hr {
     background-color: #EEEEEE;
     clear: both;
     color: #FFFFFF;
-    height: 1px;
-    margin-left: 15px;
-    margin-right: 15px;
-    margin-top: 10px;
+    height: 0.1em;
+    margin-left: 1.5em;
+    margin-right: 1.5em;
+    margin-top: 1em;
 }
 
 .details-section {
-    margin-left: 45px;
-    margin-right: 15px;
-    margin-top: 18px;
+    margin-left: 4.5em;
+    margin-right: 1.5em;
+    margin-top: 1.8em;
     white-space: nowrap;
-    padding-bottom: 18px;
-    padding-right: 18px;
+    padding-bottom: 1.8em;
+    padding-right: 1.8em;
 }
 
 .undo {
@@ -176,52 +169,47 @@ hr {
 
 dl.entryattrs {
     clear: both;
-    margin-left: 15px;
-    margin-top: 18px;
+    margin-left: 1.5em;
+    margin-top: 1.8em;
     white-space: nowrap;
 }
 
 dl.entryattrs dt {
     clear: left;
     float: left;
-    padding-bottom: 18px;
-    padding-right: 18px;
+    padding-bottom: 1.8em;
+    padding-right: 1.8em;
     text-align: right;
-    width: 160px;
+    width: 16em;
     margin: 0.5em -0.5em 0 -6em;
 }
 
 dl.entryattrs dd {
     float: left;
-    padding-bottom: 18px;
+    padding-bottom: 1.8em;
 }
 
 dl.entryattrs dd.first {
-    margin-left: 0px;
-    margin-top: 7px;
+    margin-left: 0;
+    margin-top: 0.7em;
 }
 
 dl.entryattrs dd.other {
     clear: both;
-    margin-left: 107px;
+    margin-left: 10.7em;
 }
 
 dl.entryattrs input {
-    margin-right: 5px;
-    margin-top: -12px;
-    min-width: 275px;
+    margin-right: 0.5em;
+    margin-top: -1.2em;
+    min-width: 27.5em;
 }
 
-div#backtotop {
-    margin-left: 20px;
-    margin-right: 20px;
-    text-align: right;
-}
 
 span.attrhint {
     font-size: 8pt;
-    left: 40em;
-    margin-left: 100px;
+    left: 5em;
+    margin-left: 12.5em;
     position: absolute;
     overflow-x: hidden;
 }
@@ -235,13 +223,14 @@ span.attrhint {
     border: none;
     background-image: url(Mainnav-background.png);
     -moz-border-radius: 0;
-
 }
 
 .ui-tabs {
     padding:0;
 }
 
+#the positions for these are in the large icon image,
+#and need to be specified in pixels.
 .ui-icon-plus {
     background-position: -16px -129px;
 }
@@ -343,7 +332,7 @@ span.attrhint {
 
 .tabs2 .ui-tabs-nav {
     padding:  0.3em 6em 0  7em;
-    margin: 0px;
+    margin: 0;
     height:  2.5em;
     background-image: url(Subnav-background.png);
 }
@@ -351,7 +340,7 @@ span.attrhint {
 .tabs2 .ui-tabs-nav li {
     width:auto;
     padding-left: 1em;
-    margin: 0px 0;
+    margin: 0;
     background: #326122 !important;
     color: white;
 }
@@ -383,7 +372,6 @@ span.attrhint {
 }
 
 .tabs2 .ui-tabs-nav li.ui-tabs-selected a{
-  # border:1px solid #1C3612;
     background: none repeat scroll 0 0 #1C3612;
     color: white;
 
@@ -408,7 +396,7 @@ span.main-separator{
 
 .entity-container{
     position: relative;
-    left: 250px;
+    left: 25em;
     width: 80%;
     margin: 0.06em;
     padding: 0.06em;
@@ -417,7 +405,7 @@ span.main-separator{
 
 .action-panel {
     position: fixed;
-    height: 330px;
+    height: 33em;
     left: 3em;
     border: none;
     float: left;
@@ -425,7 +413,7 @@ span.main-separator{
     margin-left: 2.5em;
     padding-left: 0.5em;
     padding-bottom: 1em;
-    width: 15.5em;
+    width: 18em;
     background-image:url('panel-background.png');
     background-repeat:no-repeat;
     background-position:right;
@@ -457,13 +445,13 @@ span.main-separator{
     font-size: 1.1em;
     color: #1d85d5;
     list-style-type: none;
-    height: 2.1em;
+    min-height: 2.1em;
     padding: none;
 }
 
 .action-panel li.search-facet {
     font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
-    color: #333333;
+    color: #1D85D5;
     cursor: pointer;
     text-transform: uppercase;
     font-size: 1.2em;
@@ -500,11 +488,15 @@ span.main-separator{
     font-size: 0.9em;
 }
 
+.action-controls {
+    padding-left: 2em;
+}
 
 .client {
+    font-size: 10px;
     margin-top: 0.4em;
     float: left;
-    min-width: 700px;
+    min-width: 70em;
 }
 
 
@@ -512,11 +504,11 @@ span.main-separator{
 
 .search-controls {
     -moz-border-radius: .7em .7em 0 0;
-    height: 25px;
+    height:2.5em;
     background: -moz-linear-gradient(top,  #eeeeee,  #dfdfdf);
     position: relative;
     padding: 1em 1.5em;
-    margin-top: 15px;
+    margin-top: 1.5em;
 }
 
 .search-table > a:link,a:visted{
@@ -640,59 +632,55 @@ table.scrollable tbody {
 }
 
 .adder-dialog-filter {
-    height: 25px;
-}
-
-.adder-dialog-filter {
-    height: 25px;
+    height: 2.5em;
 }
 
 .adder-dialog-results {
     position: relative;
-    height: 200px;
+    height: 20.0em;
 }
 
 .adder-dialog-available {
     border: 1px solid black;
     position: absolute;
-    top: 0px;
-    left: 0px;
-    bottom: 0px;
-    width: 250px;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 25.0em;
 }
 
 .adder-dialog-buttons {
     position: absolute;
-    top: 15px;
-    left: 250px;
-    right: 250px;
-    bottom: 0px;
+    top: 1.5em;
+    left: 25em;
+    right: 25;
+    bottom: 0;
     text-align: center;
 }
 
 .adder-dialog-selected {
     border: 1px solid black;
     position: absolute;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    width: 250px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 25em;
 }
 
 .adder-dialog-internal {
     border: 1px solid black;
     position: absolute;
-    top: 0px;
-    left: 0px;
-    bottom: 45px;
-    width: 250px;
+    top: 0;
+    left: 0;
+    bottom: 4.5em;
+    width: 25em;
 }
 
 .adder-dialog-external {
     border: 1px solid black;
     position: absolute;
-    left: 0px;
-    bottom: 0px;
-    width: 250px;
-    height: 40px;
+    left: 0;
+    bottom: 0;
+    width: 25em;
+    height: 4em;
 }
-- 
1.7.3.4

_______________________________________________
Freeipa-devel mailing list
Freeipa-devel@redhat.com
https://www.redhat.com/mailman/listinfo/freeipa-devel

Reply via email to