diff options
author | Pavel Vomacka <pvomacka@redhat.com> | 2016-04-22 10:50:38 +0200 |
---|---|---|
committer | Petr Vobornik <pvoborni@redhat.com> | 2016-06-29 15:41:58 +0200 |
commit | 06a9a84876345135acac933aca9ada235651997e (patch) | |
tree | 2b2d8d06bb6153049c220ecf2287a343236fb7d9 /install/ui | |
parent | e7a55ef30b252a616f50c58f99a538e9b090037c (diff) | |
download | freeipa-06a9a84876345135acac933aca9ada235651997e.tar.gz freeipa-06a9a84876345135acac933aca9ada235651997e.tar.xz freeipa-06a9a84876345135acac933aca9ada235651997e.zip |
Refactored certificate view and remove hold dialog
Removed old layout created using html tables. Now table layout is made by div
and modern css styling.
https://fedorahosted.org/freeipa/ticket/5381
Reviewed-By: Petr Vobornik <pvoborni@redhat.com>
Diffstat (limited to 'install/ui')
-rw-r--r-- | install/ui/less/layout.less | 21 | ||||
-rwxr-xr-x | install/ui/src/freeipa/certificate.js | 181 | ||||
-rw-r--r-- | install/ui/src/freeipa/dialog.js | 100 | ||||
-rw-r--r-- | install/ui/test/data/ipa_init.json | 1 |
4 files changed, 191 insertions, 112 deletions
diff --git a/install/ui/less/layout.less b/install/ui/less/layout.less index bf425d4e7..1b7e0479c 100644 --- a/install/ui/less/layout.less +++ b/install/ui/less/layout.less @@ -4,4 +4,23 @@ #container { background-color: white; -}
\ No newline at end of file +} + +/* --- Table layout created by CSS --- */ +.table-layout { + display: table; +} +.table-row { + display: table-row; + .table-cell { + display: table-cell; + vertical-align: middle; + } + .table-head { + padding: 0 5px 0 0; + } +} + +.break-words { + word-break: break-all; +} diff --git a/install/ui/src/freeipa/certificate.js b/install/ui/src/freeipa/certificate.js index 7e7a3baba..65c3da723 100755 --- a/install/ui/src/freeipa/certificate.js +++ b/install/ui/src/freeipa/certificate.js @@ -229,6 +229,7 @@ IPA.cert.revoke_dialog = function(spec) { spec.ok_label = spec.ok_label || '@i18n:buttons.revoke'; var that = IPA.confirm_dialog(spec); + IPA.table_mixin().apply(that); that.get_reason = function() { return that.select.val(); @@ -236,22 +237,17 @@ IPA.cert.revoke_dialog = function(spec) { that.create_content = function() { - var table = $('<table/>').appendTo(that.container); + var table = that.create_layout().appendTo(that.container); - var tr = $('<tr/>').appendTo(table); + var tr = that.create_row().appendTo(table); + var td = that.create_cell('@i18n:objects.cert.note', ':').appendTo(tr); + td = that.create_cell('@i18n:objects.cert.revoke_confirmation') + .appendTo(tr); - var td = $('<td/>').appendTo(tr); - td.append(text.get('@i18n:objects.cert.note')+':'); - - td = $('<td/>').appendTo(tr); - td.append(text.get('@i18n:objects.cert.revoke_confirmation')); - - tr = $('<tr/>').appendTo(table); - - td = $('<td/>').appendTo(tr); - td.append(text.get('@i18n:objects.cert.reason')+':'); - - td = $('<td/>').appendTo(tr); + tr = that.create_row().appendTo(table); + td = that.create_header_cell('@i18n:objects.cert.reason', ':') + .appendTo(tr); + td = that.create_cell().appendTo(tr); that.select = $('<select/>').appendTo(td); for (var i=0; i<IPA.cert.CRL_REASON.length; i++) { @@ -272,6 +268,7 @@ IPA.cert.view_dialog = function(spec) { spec = spec || {}; var that = IPA.dialog(spec); + IPA.table_mixin().apply(that); that.width = spec.width || 600; that.height = spec.height || 500; @@ -284,6 +281,7 @@ IPA.cert.view_dialog = function(spec) { that.expires_on = spec.certificate.valid_not_after || ''; that.md5_fingerprint = spec.certificate.md5_fingerprint || ''; that.sha1_fingerprint = spec.certificate.sha1_fingerprint || ''; + that.sha256_fingerprint = spec.certificate.sha256_fingerprint || ''; that.create_button({ name: 'close', @@ -295,103 +293,64 @@ IPA.cert.view_dialog = function(spec) { that.create_content = function() { - var table = $('<table/>').appendTo(that.container); - - var tr = $('<tr/>').appendTo(table); - $('<td/>', { - 'colspan': 2, - 'html': '<h3>'+text.get('@i18n:objects.cert.issued_to')+'</h3>' - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td>'+text.get('@i18n:objects.cert.common_name')+':</td>').appendTo(tr); - $('<td/>', { - text: that.subject.cn - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td>'+text.get('@i18n:objects.cert.organization')+':</td>').appendTo(tr); - $('<td/>', { - text: that.subject.o - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td>'+text.get('@i18n:objects.cert.organizational_unit')+':</td>').appendTo(tr); - $('<td/>', { - text: that.subject.ou - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td>'+text.get('@i18n:objects.cert.serial_number')+':</td>').appendTo(tr); - $('<td/>', { - text: that.serial_number - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td>'+text.get('@i18n:objects.cert.serial_number_hex')+':</td>').appendTo(tr); - $('<td/>', { - text: that.serial_number_hex - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td/>', { - 'colspan': 2, - 'html': '<h3>'+text.get('@i18n:objects.cert.issued_by')+'</h3>' - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td>'+text.get('@i18n:objects.cert.common_name')+':</td>').appendTo(tr); - $('<td/>', { - text: that.issuer.cn - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td>'+text.get('@i18n:objects.cert.organization')+':</td>').appendTo(tr); - $('<td/>', { - text: that.issuer.o - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td>'+text.get('@i18n:objects.cert.organizational_unit')+':</td>').appendTo(tr); - $('<td/>', { - text: that.issuer.ou - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td/>', { - 'colspan': 2, - 'html': '<h3>'+text.get('@i18n:objects.cert.validity')+'</h3>' - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td>'+text.get('@i18n:objects.cert.issued_on')+':</td>').appendTo(tr); - $('<td/>', { - text: that.issued_on - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td>'+text.get('@i18n:objects.cert.expires_on')+':</td>').appendTo(tr); - $('<td/>', { - text: that.expires_on - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td/>', { - 'colspan': 2, - 'html': '<h3>'+text.get('@i18n:objects.cert.fingerprints')+'</h3>' - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td>'+text.get('@i18n:objects.cert.sha1_fingerprint')+':</td>').appendTo(tr); - $('<td/>', { - text: that.sha1_fingerprint - }).appendTo(tr); - - tr = $('<tr/>').appendTo(table); - $('<td>'+text.get('@i18n:objects.cert.md5_fingerprint')+':</td>').appendTo(tr); - $('<td/>', { - text: that.md5_fingerprint - }).appendTo(tr); + var new_row = function(title, value) { + var row = that.create_row(); + row.append(that + .create_header_cell(title, ':')); + row.append(that.create_cell(value, '', 'break-words')); + + return row; + }; + + that.create_title('@i18n:objects.cert.issued_to') + .appendTo(that.container); + + var table_layout = that.create_layout().appendTo(that.container); + + new_row('@i18n:objects.cert.common_name', that.subject.cn) + .appendTo(table_layout); + new_row('@i18n:objects.cert.organization', that.subject.o) + .appendTo(table_layout); + new_row('@i18n:objects.cert.organizational_unit', that.subject.ou) + .appendTo(table_layout); + new_row('@i18n:objects.cert.serial_number', + that.serial_number.toString()).appendTo(table_layout); + new_row('@i18n:objects.cert.serial_number_hex', that.serial_number_hex) + .appendTo(table_layout); + + that.create_title('@i18n:objects.cert.issued_by') + .appendTo(that.container); + + table_layout = that.create_layout().appendTo(that.container); + + new_row('@i18n:objects.cert.common_name', that.issuer.cn) + .appendTo(table_layout); + new_row('@i18n:objects.cert.organization', that.issuer.o) + .appendTo(table_layout); + new_row('@i18n:objects.cert.organizational_unit', that.issuer.ou) + .appendTo(table_layout); + + that.create_title('@i18n:objects.cert.validity') + .appendTo(that.container); + + table_layout = that.create_layout().appendTo(that.container); + + new_row('@i18n:objects.cert.issued_on', that.issued_on) + .appendTo(table_layout); + new_row('@i18n:objects.cert.expires_on', that.expires_on) + .appendTo(table_layout); + + that.create_title('@i18n:objects.cert.fingerprints') + .appendTo(that.container); + + table_layout = that.create_layout().appendTo(that.container); + + new_row('@i18n:objects.cert.md5_fingerprint', that.md5_fingerprint) + .appendTo(table_layout); + new_row('@i18n:objects.cert.sha1_fingerprint', that.sha1_fingerprint) + .appendTo(table_layout); + new_row('@i18n:objects.cert.sha256_fingerprint', that.sha256_fingerprint) + .appendTo(table_layout); }; return that; diff --git a/install/ui/src/freeipa/dialog.js b/install/ui/src/freeipa/dialog.js index 3d156ce10..1a0c9d22c 100644 --- a/install/ui/src/freeipa/dialog.js +++ b/install/ui/src/freeipa/dialog.js @@ -1440,6 +1440,106 @@ IPA.confirm_dialog = function(spec) { return that; }; + +/** + * + * + * + * + * + * + */ +IPA.table_mixin = function() { + + return { + mixin: { + /** + * Create title above a table. + * + * @param {string} cls css class which will be added to current title + */ + create_title: function(str, cls) { + cls = cls || ''; + + return $('<h3 />', { + 'class': cls, + text: text.get(str) + }); + }, + + /** + * Create table layout.. + * + * @param {string} cls css class which will be added to current table layout + */ + create_layout: function(cls) { + cls = cls || ''; + + return $('<div />', { + 'class': 'table-layout ' + cls + }); + }, + + /** + * Create one row to the table layout. + * + * @param {string} cls css class which will be added to current row + */ + create_row: function(cls) { + cls = cls || ''; + + return $('<div />', { + 'class': 'table-row ' + cls + }); + }, + + /** + * Create one cell to the table layout. + * + * @param {string} string, will be parsed using our provider + * @param {string} suffix, string which will be concatenated to the end of + * 'str' string. Not parsed using text.get() + * @param {string} cls css class which will be added to current cell + */ + create_cell: function(str, suffix, cls) { + str = str || ''; + suffix = suffix || ''; + cls = cls || ''; + + return $('<div />', { + 'class': 'table-cell ' + cls, + text: text.get(str) + suffix + }); + }, + + /** + * Create header cell to the table layout. + * + * @param {string} string, will be parsed using our provider + * @param {string} suffix, string which will be concatenated to the end of + * 'str' string. Not parsed using text.get() + * @param {string} cls css class which will be added to current cell + */ + create_header_cell: function(str, suffix, cls) { + str = str || ''; + suffix = suffix || ''; + cls = cls || ''; + + return $('<div />', { + 'class': 'table-cell table-head' + cls, + text: text.get(str) + suffix + }); + } + }, + + apply: function(obj) { + $.extend(obj, this.mixin); + } + }; +}; + + + /** * General form dialog with confirmation feature * @class dialog.form_dialog diff --git a/install/ui/test/data/ipa_init.json b/install/ui/test/data/ipa_init.json index 1d7f5d883..19fb1008e 100644 --- a/install/ui/test/data/ipa_init.json +++ b/install/ui/test/data/ipa_init.json @@ -289,6 +289,7 @@ "serial_number": "Serial Number", "serial_number_hex": "Serial Number (hex)", "sha1_fingerprint": "SHA1 Fingerprint", + "sha256_fingerprint": "SHA256 Fingerprint", "status": "Status", "superseded": "Superseded", "unspecified": "Unspecified", |