diff options
Diffstat (limited to 'install/ui')
-rw-r--r-- | install/ui/ipa.css | 406 | ||||
-rw-r--r-- | install/ui/less/brand.less | 15 | ||||
-rw-r--r-- | install/ui/less/dialog.less | 1 | ||||
-rw-r--r-- | install/ui/less/forms-override.less | 51 | ||||
-rw-r--r-- | install/ui/less/ipa.less | 1 | ||||
-rw-r--r-- | install/ui/less/login.less | 2 | ||||
-rw-r--r-- | install/ui/less/mixins.less | 12 | ||||
-rw-r--r-- | install/ui/less/plugins/otp.less | 1 | ||||
-rw-r--r-- | install/ui/less/widgets.less | 4 | ||||
-rwxr-xr-x | install/ui/src/freeipa/certificate.js | 2 | ||||
-rw-r--r-- | install/ui/src/freeipa/details.js | 7 | ||||
-rw-r--r-- | install/ui/src/freeipa/dialog.js | 8 | ||||
-rw-r--r-- | install/ui/src/freeipa/dns.js | 2 | ||||
-rw-r--r-- | install/ui/src/freeipa/facet.js | 8 | ||||
-rw-r--r-- | install/ui/src/freeipa/hbactest.js | 10 | ||||
-rw-r--r-- | install/ui/src/freeipa/host.js | 7 | ||||
-rw-r--r-- | install/ui/src/freeipa/search.js | 1 | ||||
-rw-r--r-- | install/ui/src/freeipa/widget.js | 35 | ||||
-rw-r--r-- | install/ui/test/details_tests.js | 10 |
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'); |