summaryrefslogtreecommitdiffstats
path: root/install/ui
diff options
context:
space:
mode:
Diffstat (limited to 'install/ui')
-rw-r--r--install/ui/ipa.css406
-rw-r--r--install/ui/less/brand.less15
-rw-r--r--install/ui/less/dialog.less1
-rw-r--r--install/ui/less/forms-override.less51
-rw-r--r--install/ui/less/ipa.less1
-rw-r--r--install/ui/less/login.less2
-rw-r--r--install/ui/less/mixins.less12
-rw-r--r--install/ui/less/plugins/otp.less1
-rw-r--r--install/ui/less/widgets.less4
-rwxr-xr-xinstall/ui/src/freeipa/certificate.js2
-rw-r--r--install/ui/src/freeipa/details.js7
-rw-r--r--install/ui/src/freeipa/dialog.js8
-rw-r--r--install/ui/src/freeipa/dns.js2
-rw-r--r--install/ui/src/freeipa/facet.js8
-rw-r--r--install/ui/src/freeipa/hbactest.js10
-rw-r--r--install/ui/src/freeipa/host.js7
-rw-r--r--install/ui/src/freeipa/search.js1
-rw-r--r--install/ui/src/freeipa/widget.js35
-rw-r--r--install/ui/test/details_tests.js10
19 files changed, 103 insertions, 480 deletions
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index fa56187cf..0bfa7806e 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -17,13 +17,6 @@ html {
body {
overflow: auto;
position: relative;
- background-repeat: repeat-x;
- background-position: left top;
- background-color: #FFFFFF;
- border-width: 0;
- font-size: 11px;
- margin: 0;
- padding: 0;
height: 100%;
}
@@ -32,23 +25,17 @@ textarea[readonly] {
}
.network-activity-indicator {
- visibility: hidden;
width: 16px;
height: 16px;
line-height: 16px;
- margin: 5px 3px;
+ margin-right: 5px;
display: inline-block;
}
/* ---- Container ---- */
.app-container {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: 0 auto 0;
+ height: 100%;
}
/* ---- Password expiration */
@@ -63,7 +50,7 @@ textarea[readonly] {
/* ---- Notification area ---- */
.notification-area {
- position: absolute;
+ position: fixed;
left: 50%;
top: 15px;
}
@@ -75,7 +62,6 @@ textarea[readonly] {
line-height: 1.5em;
z-index: 20;
padding: 4px;
- font-weight: bold;
text-align: center;
word-wrap: break-word;
max-width: 500px;
@@ -88,19 +74,10 @@ textarea[readonly] {
display: none;
}
-#simple-container .content {
- height: 100%;
-}
-
.active-facet {
display: block;
}
-.facet-header {
- position: relative;
- margin: 0 12px 0;
-}
-
.facet-title {
position: relative;
margin-top: 5px;
@@ -125,7 +102,6 @@ textarea[readonly] {
}
.breadcrumb {
- background-color: transparent;
padding: 0;
margin: 5px 0 0 0;
}
@@ -136,15 +112,9 @@ textarea[readonly] {
/* ---- Facet Tabs ---- */
-.facet-tabs {
- z-index: 1; /* need to be above facet header */
-}
-
.facet-group {
float: left;
margin-right: 1em;
- position: relative;
- height: 100%;
}
.facet-group-label {
@@ -152,7 +122,6 @@ textarea[readonly] {
}
.facet-tab {
- /*height: 31px;*/
list-style-type: none;
margin: 0;
padding: 0;
@@ -161,7 +130,6 @@ textarea[readonly] {
.facet-tab li {
display: inline-block;
- position: relative;
padding-right: 1px;
}
@@ -181,7 +149,6 @@ textarea[readonly] {
color: #6C6F73;
background-color: #f1f0ee;
font-weight: bold;
- height: 20px;
}
.facet-tab li.settings {
@@ -217,8 +184,7 @@ div[name=settings].facet-group li a {
/* ---- Facet Controls ---- */
.facet-controls {
- line-height: 30px;
- padding: 0 6px 0 6px;
+ padding: 5px 0px;
clear: both;
}
@@ -231,18 +197,6 @@ div[name=settings].facet-group li a {
margin: 0 16px 0 0;
}
-.facet-controls .network-activity-indicator img {
- margin-top: -15px;
-}
-
-/* ---- Facet Content ---- */
-
-.facet-content {
- position: relative;
- margin: 0 12px;
- padding: 0;
-}
-
/* --- Facet error --- */
.facet-error {
@@ -262,24 +216,23 @@ div[name=settings].facet-group li a {
.search-option {
margin-right: 8px;
- width: 206px;
+ width: 178px;
+ display: inline-block;
}
.search-filter {
- margin-top: 2px;
- width: 215px;
+ margin-top: -2px;
display: inline-block;
}
.search-filter input {
- padding-right: 20px;
width: 178px;
+ display: inline-block;
}
.search-filter a {
position: relative;
margin: 0 0 0 -20px;
- top: -5px;
}
.pagination-control {
@@ -296,166 +249,14 @@ div[name=settings].facet-group li a {
margin: 0;
}
-h1 {
- font-size: 1.5em;
- color: #555555;
- text-transform: uppercase;
- text-shadow: 1px 1px 0 #FFFFFF;
-}
-
-
-h2 {
- font-size: 1.5em;
- color: #333333;
- text-transform: uppercase;
- margin-left: 1em;
- margin-bottom: 0;
- text-align: left;
-}
-
-h3 {
- font-size: 1.8em;
- color: #3c3c3c;
- text-transform: uppercase;
- text-shadow: 1px 1px 0 #FFFFFF;
-}
-
/* ---- Details Facet ---- */
.details-content {
- border: none;
- border-top: 1px solid #DFDFDF;
-}
-
-.details-summary {
border-top: 1px solid #DFDFDF;
- padding-left: 0.5em;
- line-height: 25px;
-}
-
-.dialog-section {
- margin-bottom: 10px;
-}
-
-.section-table {
- width: 100%;
-}
-
-.section-cell-label {
- vertical-align: top;
- width: 120px;
- max-width: 120px;
-}
-
-.section-cell-field {
- max-width: 650px;
-}
-
-.details-section {
- position: relative;
- margin-top: 1em;
- margin-right: 3.3em;
- margin-bottom: 1em;
-}
-
-.details-section .section-table {
- width: 100%;
- border-spacing: 12px;
-}
-
-.details-section .section-cell-label {
- text-align: right;
- vertical-align: top;
- width: 120px;
- word-wrap: break-word;
-}
-
-.details-section .section-cell-field {
- font-weight: bold;
- word-wrap: break-word;
-}
-
-.undo {
- cursor:pointer;
- padding: 0.2em;
-}
-
-span.attrhint {
- font-size: 8pt;
- left: 5em;
- margin-left: 12.5em;
- position: absolute;
- overflow-x: hidden;
-}
-
-a, .ui-widget-content a {
- text-decoration: none;
- color: #1d85d5;
- font-weight: normal;
- text-transform: none;
}
/* ---- Dialog ---- */
-.ui-dialog {
- -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
- -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
- box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
-}
-
-
-.ui-dialog .ui-dialog-content {
- word-wrap: break-word;
-}
-
-
-.dialog-message {
- margin: 5px 5px 10px;
- padding: 10px;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border-radius: 5px;
- text-align: center;
-}
-
-.ui-widget input, .ui-widget select,
-.ui-widget textarea, .ui-widget button {
- margin-right: .1em;
-}
-
-span.sub-nav-off > a:link, span.sub-nav-off > a:visited{
- color:white;
-}
-
-span.main-nav-off > a:link, span.main-nav-off > a:visited{
- color:white;
-}
-
-span.main-separator{
- background: #333339;
- padding:0.1em;
-}
-
-.button {
- text-decoration: none;
- cursor: pointer;
- display: inline-block;
- height: 18px;
-}
-
-.button-label {
- padding: 0 0.2em;
- display: inline-block;
- height: 16px;
- line-height: 16px;
-}
-
-.action-button {
- background: none;
- background-image: none;
- font-size: 0.9em;
-}
-
.action-button-disabled,
.action-button-disabled:focus,
.action-button-disabled:hover {
@@ -464,13 +265,7 @@ span.main-separator{
outline: none;
}
-.button-disabled {
- color: gray;
- cursor: default;
-}
-
.aci-attribute-table tbody {
- border-bottom: 1px solid #8a8a8a;
height: 10em;
}
@@ -483,16 +278,6 @@ span.main-separator{
overflow: hidden;
}
-.entity-views{
- list-style-type:none;
-}
-
-.entity-views li {
- display:inline;
- cursor: pointer;
- padding: 0.4em;
-}
-
.strikethrough { text-decoration: line-through; }
textarea.certificate {
@@ -673,30 +458,14 @@ table.scrollable tbody {
/* ---- Widgets ---- */
-.text-widget input {
- width: 250px;
-}
-
.multivalued-widget [name=value] {
margin-bottom: 1em;
}
-.multivalued-widget input {
- width: 250px;
-}
-
.multivalued-widget a[name=add] {
margin-right: 5px;
}
-.textarea-widget textarea {
- width: 250px;
-}
-
-.facet-content .textarea-widget textarea {
- width: 400px;
-}
-
.option_widget {
list-style-type: none;
margin: 0;
@@ -710,6 +479,7 @@ table.scrollable tbody {
.option_widget.inline,
.option_widget.inline > li {
display: inline;
+ margin-right: 8px;
}
.option_widget.columns > li {
@@ -720,12 +490,11 @@ table.scrollable tbody {
}
.combobox-widget-input {
- display: inline-block;
position: relative;
}
.combobox-widget-input input {
- width: 250px;
+ padding-right: 20px;
}
.combobox-widget-input a i {
@@ -748,91 +517,33 @@ table.scrollable tbody {
right: 0;
}
-.combobox-widget-list input {
- width: 238px;
-}
-
.combobox-widget-list a {
- position: relative;
- padding: 0;
- margin: 0;
-}
-
-.combobox-widget-list a i {
position: absolute;
top: 0;
- bottom: 0;
right: 0;
- margin-top: 6px;
- margin-right: 3px;
- font-size: 16px;
-}
-
-.host-adder-dialog table.fqdn {
- width: 100%;
}
-.host-adder-dialog th.hostname {
- width: 250px;
-}
-
-.host-adder-dialog td.hostname {
- vertical-align: top;
-}
-
-.host-adder-dialog td.dnszone {
- vertical-align: top;
-}
-
-.host-adder-dialog input[name=hostname] {
- width: 100%;
+.combobox-widget-list a i {
+ margin-right: 5px;
}
-.dnszone-adder-dialog .section-cell-label {
- width: 180px;
+.combobox-widget-list select {
+ margin-top: 3px;
}
-.certificate-status {
- display: inline-block;
+.combobox-widget .undo {
+ margin-top: 3px;
}
-
/* ---- HBAC Test ---- */
-.hbac-test-header {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 30px;
- line-height: normal;
-}
-
.hbac-test-header .search-filter {
float: right;
}
-.hbac-test-content {
- position: absolute;
- top: 30px;
- left: 0;
- right: 0;
- bottom: 30px;
-}
-
-.hbac-test-footer {
- position: absolute;
- height: 29px;
- left: 0;
- right: 0;
- bottom: 0;
-}
-
.hbac-test-title {
font-size: 1.8em;
- color: #3c3c3c;
text-transform: uppercase;
- text-shadow: 1px 1px 0 #FFFFFF;
margin: 0;
}
@@ -841,61 +552,8 @@ table.scrollable tbody {
margin-right: 5px !important;
}
-div.facet[data-entity=hbactest] .content-table tbody {
- bottom: 68px;
-}
-
-div.facet[data-entity=hbactest] .content-table tfoot td[name=external] {
- background-color: #F6F6F6;
- border: 1px solid #DFDFDF;
- color: #333333;
- height: 30px;
- padding: 0 0.5em;
- text-align: left;
-}
-
-div.facet[data-name=run_test][data-entity=hbactest] .hbac-test-header {
- height: 100px;
-}
-
-div.facet[data-name=run_test][data-entity=hbactest] .hbac-test-content {
- top: 100px;
-}
-
.hbac-test-top-panel {
- position: relative;
- width: 100%;
- height: 50px;
- margin-bottom: 20px;
-}
-
-.hbac-test-button-panel {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- width: 130px;
- padding: 10px;
-
- border: 1px solid #C9C3BA;
- border-top-left-radius: 5px;
- border-bottom-left-radius: 5px;
- background-color: #F6F6F6;
-}
-
-.hbac-test-result-panel {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 151px;
-
- padding: 10px;
-
- border: 1px solid #C9C3BA;
- border-top-right-radius: 5px;
- border-bottom-right-radius: 5px;
- background-color: #F6F6F6;
+ position: relative;;
}
.hbac-test-navigation-buttons {
@@ -913,39 +571,16 @@ div.facet[data-name=run_test][data-entity=hbactest] .hbac-test-content {
font-weight: normal;
}
-/* --- SSH key store --- */
-span.sshkey-status, a.sshkey-set {
- padding-right: 5px;
-}
/* --- Automember --- */
-.automember-header {
- position: absolute;
- top: 0;
- left: 3px;
- right: 3px;
- height: 52px;
-}
-
-.automember-content {
- position: absolute;
- top: 52px;
- left: 0;
- right: 0;
- bottom: 0px;
-}
-
.automember-header .default_group {
- border-bottom: 1px solid #DFDFDF;
- border-top: 1px solid #DFDFDF;
padding-bottom: 5px;
- padding-top: 8px;
}
.automember-header .default_group h2 {
display: inline-block;
- margin: 0 15px 0 20px;
+ margin: 0 15px 0 0;
}
.automember-header .default_group label {
@@ -1089,7 +724,6 @@ form#login {
display: none;
font-size: 70%;
vertical-align: 20%;
- margin-right: 3px;
/* Font awesome style, TODO: use mixin */
display: inline-block;
font-family: FontAwesome;
@@ -1149,7 +783,3 @@ form#login {
font-weight: bold;
font-size: 1.1em;
}
-
-.choice-header {
- font-weight: bold;
-}
diff --git a/install/ui/less/brand.less b/install/ui/less/brand.less
index 37c845ba6..437dd4152 100644
--- a/install/ui/less/brand.less
+++ b/install/ui/less/brand.less
@@ -21,17 +21,14 @@
// This file contains overrides of reference RCUE implementation to comply
// with IPA design
-.header.rcue {
- // Use blue instead of red
- border-top: 3px solid #1d85d9;
- .brand {
- // Lower vertical padding by 5px
- // FreeIPA uses logo with height: 20px instead of 10px.
- padding: 2px 0;
+@media (min-width: 768px) {
+ .navbar-pf .navbar-brand {
+ padding: 2px 0 3px;
}
}
-body {
+#simple-container .content {
+ height: 100%;
background-color: #1D2226;
background-image: url("../images/login-screen-background.jpg");
background-position: top left;
@@ -40,7 +37,7 @@ body {
}
@media (min-width: 1280px) {
- body {
+ #simple-container .content {
background-size: 100% auto;
}
}
diff --git a/install/ui/less/dialog.less b/install/ui/less/dialog.less
index 10f07a681..fda2b0a2b 100644
--- a/install/ui/less/dialog.less
+++ b/install/ui/less/dialog.less
@@ -80,7 +80,6 @@
top: 0;
bottom: 60px;
clear: both;
- padding: 0 15px 10px;
}
footer {
diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less
index b987ed59f..4a0a4dbc0 100644
--- a/install/ui/less/forms-override.less
+++ b/install/ui/less/forms-override.less
@@ -31,7 +31,7 @@
/* Checkboxes and Radios */
-.radio, .checkbox {
+.radio-cnt, .checkbox-cnt {
position: relative;
padding: 0;
}
@@ -60,7 +60,7 @@ input[type="radio"] + label {
margin: 0;
&:before {
- .fa;
+ .fa();
font-size: 125%;
vertical-align: -7%;
@@ -137,7 +137,6 @@ input[type="radio"]:checked + label:before {
a, label {
padding-top: 3px;
- margin-bottom: 3px;
}
// disable previous in combobox
@@ -148,24 +147,11 @@ input[type="radio"]:checked + label:before {
}
}
-// this style directly negates the same in forms.less
-.help-inline {
- margin-top: 0;
-}
-
-.control-group .control-label {
- position: relative;
-
- label {
- margin-bottom: 0;
- }
-}
-
// implicit required indicator
-.control-group.required .control-label label:after {
+.form-group.required .control-label label:after {
display: inline-block;
position: absolute;
- right: -11px;
+ right: 6px;
top: 0px;
font-size: 125%;
font-weight: bold;
@@ -173,36 +159,31 @@ input[type="radio"]:checked + label:before {
color: #1d85d9;
}
-.row-fluid .control-group.required .control-label label:after {
+.fluid-row .form-group.required .control-label label:after {
position: relative;
right: -2px;
}
-@media (max-width: 480px) {
- .control-group.required .control-label label:after {
+@media (max-width: 768px) {
+ .form-group.required .control-label label:after {
position: relative;
right: -2px;
}
}
-// do not show error hint for valid value in multivalued widget if some
-// other value is invalid
-.control-group.error .valid .help-inline {
- display: none;
-}
+// don't show red highlight for valid controls in multivalued widget with error
+.has-error .valid .form-control {
-// only type text for now - it should be replaced when we adopt Bootstrap 3
-// based RCUE (patternfly)
-.control-group.error .valid input[type=text] {
+ border-color: #bababa !important;
- border-color: #62afdb !important;
+ &:hover {
+ border-color: #66afe9 !important;
+ }
&:focus {
- border-color: rgba(82, 168, 236, 0.8);
+ border-color: #66afe9;
outline: 0;
- outline: thin dotted \9;
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
- -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
- box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
+ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+ box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
}
diff --git a/install/ui/less/ipa.less b/install/ui/less/ipa.less
index b057f7fd9..e87c15885 100644
--- a/install/ui/less/ipa.less
+++ b/install/ui/less/ipa.less
@@ -5,6 +5,7 @@
@import "patternfly/variables";
@import "variables";
+@import "mixins";
@import "dialog";
@import "brand";
@import "forms-override";
diff --git a/install/ui/less/login.less b/install/ui/less/login.less
index de9d651b0..7bb6ca0f4 100644
--- a/install/ui/less/login.less
+++ b/install/ui/less/login.less
@@ -60,7 +60,7 @@
fieldset {
float: left;
- margin: 30px 30px 30px 0;
+ margin: 30px;
padding: 10px;
padding-right: 34px;
width: 426px;
diff --git a/install/ui/less/mixins.less b/install/ui/less/mixins.less
new file mode 100644
index 000000000..1080f6dc7
--- /dev/null
+++ b/install/ui/less/mixins.less
@@ -0,0 +1,12 @@
+//
+// Originally from Font Awesome
+
+.fa() {
+ display: inline-block;
+ font-family: FontAwesome;
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+} \ No newline at end of file
diff --git a/install/ui/less/plugins/otp.less b/install/ui/less/plugins/otp.less
index 8d44fc6bb..bd9d7ab91 100644
--- a/install/ui/less/plugins/otp.less
+++ b/install/ui/less/plugins/otp.less
@@ -5,4 +5,5 @@
.qrcode-widget img {
margin: 0 auto;
+ max-width: 100%;
} \ No newline at end of file
diff --git a/install/ui/less/widgets.less b/install/ui/less/widgets.less
index 65dee7efe..543bafeed 100644
--- a/install/ui/less/widgets.less
+++ b/install/ui/less/widgets.less
@@ -7,14 +7,12 @@
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
-
- max-height: 22px;
text-shadow: none;
color: white;
font-size: 20px;
font-weight: 300;
width: 200px;
- padding: 20px;
+ padding: 15px 20px;
margin: auto;
}
diff --git a/install/ui/src/freeipa/certificate.js b/install/ui/src/freeipa/certificate.js
index 001f70f6d..b557081d1 100755
--- a/install/ui/src/freeipa/certificate.js
+++ b/install/ui/src/freeipa/certificate.js
@@ -1191,7 +1191,7 @@ IPA.cert.search_facet = function(spec) {
that.search_option = $('<select/>', {
name: 'search_option',
- 'class': 'search-option'
+ 'class': 'search-option form-control'
});
that.filter_container.before(that.search_option);
diff --git a/install/ui/src/freeipa/details.js b/install/ui/src/freeipa/details.js
index b2f07e463..8359b7fcb 100644
--- a/install/ui/src/freeipa/details.js
+++ b/install/ui/src/freeipa/details.js
@@ -630,15 +630,10 @@ exp.details_facet = IPA.details_facet = function(spec, no_init) {
that.create_content = function(container) {
that.content = $('<div/>', {
- 'class': 'details-content'
+ 'class': 'details-content row'
}).appendTo(container);
that.widgets.create(that.content);
-
- $('<span/>', {
- name: 'summary',
- 'class': 'details-summary'
- }).appendTo(container);
};
/**
diff --git a/install/ui/src/freeipa/dialog.js b/install/ui/src/freeipa/dialog.js
index 6fdfbc62d..a7f5e09fd 100644
--- a/install/ui/src/freeipa/dialog.js
+++ b/install/ui/src/freeipa/dialog.js
@@ -264,7 +264,7 @@ IPA.dialog = function(spec) {
that.header_node.appendTo(that.dialog_node);
that.body_node = $('<div/>', {
- 'class': 'rcue-dialog-body'
+ 'class': 'rcue-dialog-body row'
});
// for backwards compatibility
that.container = that.body_node;
@@ -768,7 +768,7 @@ IPA.adder_dialog = function(spec) {
$('<div/>', {
html: text.get('@i18n:dialogs.available'),
- 'class': 'adder-dialog-header ui-widget-header'
+ 'class': 'adder-dialog-header'
}).appendTo(available_panel);
var available_content = $('<div/>', {
@@ -789,7 +789,7 @@ IPA.adder_dialog = function(spec) {
$('<div/>', {
html: text.get('@i18n:dialogs.prospective'),
- 'class': 'adder-dialog-header ui-widget-header'
+ 'class': 'adder-dialog-header'
}).appendTo(selected_panel);
var selected_content = $('<div/>', {
@@ -838,7 +838,7 @@ IPA.adder_dialog = function(spec) {
$('<div/>', {
html: text.get('@i18n:objects.sudorule.external'),
- 'class': 'adder-dialog-header ui-widget-header'
+ 'class': 'adder-dialog-header'
}).appendTo(external_panel);
var external_content = $('<div/>', {
diff --git a/install/ui/src/freeipa/dns.js b/install/ui/src/freeipa/dns.js
index 5b8c5c090..ae76b59a1 100644
--- a/install/ui/src/freeipa/dns.js
+++ b/install/ui/src/freeipa/dns.js
@@ -416,7 +416,7 @@ IPA.dnszone_name_section_layout = function(spec) {
var label_text = widget.label + that.get_measurement_unit_text(widget);
- var label_cont = $('<div/>', { 'class': 'control-label' });
+ var label_cont = $('<div/>', { 'class': 'control-label col-sm-3' });
widget.create_radio(label_cont);
diff --git a/install/ui/src/freeipa/facet.js b/install/ui/src/freeipa/facet.js
index ccaf6ad28..12d8a390a 100644
--- a/install/ui/src/freeipa/facet.js
+++ b/install/ui/src/freeipa/facet.js
@@ -542,7 +542,7 @@ exp.facet = IPA.facet = function(spec, no_init) {
that.dom_node.detach();
} else {
that.dom_node = $('<div/>', {
- 'class': 'facet active-facet',
+ 'class': 'facet active-facet fluid-container',
name: that.name,
'data-name': that.name,
'data-entity': entity_name
@@ -563,16 +563,16 @@ exp.facet = IPA.facet = function(spec, no_init) {
dom_node.addClass(that.display_class);
that.header_container = $('<div/>', {
- 'class': 'facet-header'
+ 'class': 'facet-header col-sm-12'
}).appendTo(dom_node);
that.create_header(that.header_container);
that.content = $('<div/>', {
- 'class': 'facet-content'
+ 'class': 'facet-content col-sm-12'
}).appendTo(dom_node);
that.error_container = $('<div/>', {
- 'class': 'facet-content facet-error'
+ 'class': 'facet-content facet-error col-sm-12'
}).appendTo(dom_node);
that.create_content(that.content);
diff --git a/install/ui/src/freeipa/hbactest.js b/install/ui/src/freeipa/hbactest.js
index 1bf90b766..a936029b6 100644
--- a/install/ui/src/freeipa/hbactest.js
+++ b/install/ui/src/freeipa/hbactest.js
@@ -298,6 +298,7 @@ IPA.hbac.test_select_facet = function(spec) {
that.filter = $('<input/>', {
type: 'text',
+ 'class': 'form-control',
name: 'filter'
}).appendTo(filter_container);
@@ -331,7 +332,8 @@ IPA.hbac.test_select_facet = function(spec) {
var tr = $('<tr/>').appendTo(that.table.tfoot);
var td = $('<td/>', {
- name: 'external'
+ name: 'external',
+ colspan: that.columns.length + 1
}).appendTo(tr);
that.external_radio = $('<input/>', {
@@ -524,11 +526,11 @@ IPA.hbac.test_run_facet = function(spec) {
}).appendTo(container);
var top_panel = $('<div/>', {
- 'class': 'hbac-test-top-panel'
+ 'class': 'hbac-test-top-panel row'
}).appendTo(header);
var button_panel = $('<div/>', {
- 'class': 'hbac-test-button-panel'
+ 'class': 'hbac-test-button-panel col-sm-2'
}).appendTo(top_panel);
that.run_button = IPA.button({
@@ -544,7 +546,7 @@ IPA.hbac.test_run_facet = function(spec) {
}).appendTo(button_panel);
var result_panel = $('<div/>', {
- 'class': 'hbac-test-result-panel'
+ 'class': 'hbac-test-result-panel col-sm-10'
}).appendTo(top_panel);
that.test_result = $('<p/>', {
diff --git a/install/ui/src/freeipa/host.js b/install/ui/src/freeipa/host.js
index aa08409c3..c550e528d 100644
--- a/install/ui/src/freeipa/host.js
+++ b/install/ui/src/freeipa/host.js
@@ -325,14 +325,15 @@ IPA.host_fqdn_widget = function(spec) {
that.create = function(container) {
that.container = container;
+ container.addClass('col-sm-12');
var hostname = that.widgets.get_widget('hostname');
var dnszone = that.widgets.get_widget('dnszone');
var layout = IPA.fluid_layout({
- cont_cls: 'row-fluid',
- group_cls: 'control-group span6',
- widget_cls: 'control',
+ cont_cls: 'row fluid-row',
+ group_cls: 'col-sm-6 form-group',
+ widget_cls: 'controls',
label_cls: 'control-label'
});
diff --git a/install/ui/src/freeipa/search.js b/install/ui/src/freeipa/search.js
index dc7bfcf42..0a26dac9b 100644
--- a/install/ui/src/freeipa/search.js
+++ b/install/ui/src/freeipa/search.js
@@ -117,6 +117,7 @@ IPA.search_facet = function(spec, no_init) {
that.filter = $('<input/>', {
type: 'text',
+ 'class': 'form-control',
name: 'filter'
}).appendTo(that.filter_container);
diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js
index 2b3d3e81d..6bec38275 100644
--- a/install/ui/src/freeipa/widget.js
+++ b/install/ui/src/freeipa/widget.js
@@ -321,7 +321,7 @@ IPA.input_widget = function(spec) {
$('<span/>', {
name: 'error_link',
- 'class': 'help-inline',
+ 'class': 'help-block',
style: 'display:none'
}).appendTo(container);
};
@@ -674,8 +674,9 @@ IPA.text_widget = function(spec) {
container.addClass('text-widget');
- that.display_control = $('<label/>', {
+ that.display_control = $('<p/>', {
name: that.name,
+ 'class': 'form-control-static',
style: 'display: none;'
}).appendTo(container);
@@ -685,6 +686,7 @@ IPA.text_widget = function(spec) {
type: that.input_type,
name: that.name,
id: id,
+ 'class': 'form-control',
size: that.size,
title: that.tooltip,
keyup: function() {
@@ -1324,7 +1326,7 @@ IPA.option_widget_base = function(spec, that) {
var enabled = that.enabled && option.enabled;
var opt_cont = $('<span/>', {
- "class": that.intput_type
+ "class": that.intput_type + '-cnt'
}).appendTo(container);
option.input_node = $('<input/>', {
@@ -1720,7 +1722,7 @@ IPA.standalone_option = function(spec, container, label) {
spec.type = spec.type || 'checkbox';
var opt_cont = $('<span/>', {
- 'class': spec.type
+ 'class': spec.type + '-cnt'
});
var input = $('<input/>', spec);
@@ -1767,6 +1769,7 @@ IPA.select_widget = function(spec) {
that.select = $('<select/>', {
name: that.name,
+ 'class':'form-control',
change: function() {
that.value_changed.notify([], that);
that.emit('value-change', { source: that });
@@ -1902,6 +1905,7 @@ IPA.textarea_widget = function (spec) {
name: that.name,
rows: that.rows,
cols: that.cols,
+ 'class': 'form-control',
readOnly: !!that.read_only,
title: that.tooltip,
keyup: function() {
@@ -2375,7 +2379,7 @@ IPA.table_widget = function (spec) {
container.addClass('table-widget table-responsive');
that.table = $('<table/>', {
- 'class': 'content-table table table-condensed table-striped table-bordered',
+ 'class': 'content-table table table-condensed table-striped table-hover table-bordered',
name: that.name
}).appendTo(container);
@@ -3222,6 +3226,7 @@ IPA.combobox_widget = function(spec) {
that.input = $('<input/>', {
type: 'text',
name: that.name,
+ 'class': 'form-control',
id: id,
title: that.tooltip,
keydown: that.on_input_keydown,
@@ -3276,6 +3281,7 @@ IPA.combobox_widget = function(spec) {
that.filter = $('<input/>', {
type: 'text',
name: 'filter',
+ 'class': 'form-control',
keyup: that.on_filter_keyup,
keydown: that.on_filter_keydown,
blur: that.list_child_on_blur
@@ -3297,8 +3303,6 @@ IPA.combobox_widget = function(spec) {
}).appendTo(div);
that.search_button.bind('mousedown', that.on_no_close);
-
- div.append('<br/>');
}
that.list = $('<select/>', {
@@ -3884,7 +3888,7 @@ IPA.button = function(spec) {
spec = spec || {};
var el = spec.element || '<button/>';
- var button_class = spec.button_class || 'btn';
+ var button_class = spec.button_class || 'btn btn-default';
var button = $(el, {
id: spec.id,
@@ -4074,6 +4078,7 @@ IPA.section = function(spec) {
that.create = function(container) {
that.widget_create(container);
+ container.addClass('details-section col-sm-12');
if (that.show_header) {
that.create_header(container);
@@ -4081,7 +4086,7 @@ IPA.section = function(spec) {
that.content_container = $('<div/>', {
name: that.name,
- 'class': 'details-section'
+ 'class': 'details-section-content'
}).appendTo(container);
that.create_content();
@@ -4212,9 +4217,9 @@ exp.fluid_layout = IPA.fluid_layout = function(spec) {
var that = IPA.layout(spec);
that.cont_cls = spec.cont_cls || 'form-horizontal';
- that.widget_cls = spec.widget_cls || 'controls';
- that.label_cls = spec.label_cls || 'control-label';
- that.group_cls = spec.group_cls || 'control-group';
+ that.widget_cls = spec.widget_cls || 'col-md-6 controls';
+ that.label_cls = spec.label_cls || 'col-md-2 control-label';
+ that.group_cls = spec.group_cls || 'form-group';
that.create = function(widgets) {
@@ -4317,14 +4322,14 @@ exp.fluid_layout = IPA.fluid_layout = function(spec) {
var row = that._get_row(event);
if (!row) return;
- row.toggleClass('error', true);
+ row.toggleClass('has-error', true);
};
that.on_error_hide= function(event) {
var row = that._get_row(event);
if (!row) return;
- row.toggleClass('error', false);
+ row.toggleClass('has-error', false);
};
that.on_visible_change = function(event) {
@@ -4476,7 +4481,7 @@ IPA.multiple_choice_section = function(spec) {
var i, choice, choices;
that.widget_create(container);
- that.container.addClass('multiple-choice-section');
+ that.container.addClass('multiple-choice-section col-sm-12');
that.header_element = $('<div/>', {
'class': 'multiple-choice-section-header',
diff --git a/install/ui/test/details_tests.js b/install/ui/test/details_tests.js
index 33d49aa47..9e7ea361b 100644
--- a/install/ui/test/details_tests.js
+++ b/install/ui/test/details_tests.js
@@ -90,13 +90,13 @@ test("Testing IPA.details_section.create().", function() {
var container = $("<div/>");
section.create(container);
- var section_el = $('.details-section', container);
+ var section_el = $('.details-section-content', container);
same(
section_el.length, 1,
'Verifying section element');
- var controls = $('.control-group', section_el);
+ var controls = $('.form-group', section_el);
same(
controls.length, fields.length,
'Verifying number of controls');
@@ -247,7 +247,7 @@ test("Testing details lifecycle: create, load.", function(){
identity.length,
'Verifying section for identity is created');
- var rows = $('.control-group', identity);
+ var rows = $('.form-group', identity);
same(
rows.length, 6,
@@ -313,13 +313,13 @@ test("Testing IPA.details_section_create again()",function() {
section.create(container);
facet.load(data);
- var section_el = $('.details-section', container);
+ var section_el = $('.details-section-content', container);
same(
section_el.length, 1,
'Verifying section element');
- var controls = $('.control-group', section_el);
+ var controls = $('.form-group', section_el);
same(
controls.length, fields.length,
'Verifying number of controls');