From 12cfe16cb4b377674646d0d905de51ee395d1993 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Sun, 7 Jun 2015 12:40:40 +0200 Subject: [PATCH] Cleaning up settings and dialogs CSS --- src/css/dialogs-import-image.css | 30 ++++++++++++++----- src/css/dialogs.css | 13 -------- src/css/forms.css | 2 ++ src/css/reset.css | 7 ++++- src/css/settings-application.css | 7 ++--- src/css/settings-resize.css | 11 ------- src/css/style.css | 5 ++++ .../dialogs/ImportImageController.js | 1 + .../exportimage/PngExportController.js | 4 +-- src/templates/dialogs/import-image.html | 2 +- src/templates/settings/application.html | 2 +- src/templates/settings/export.html | 8 ++--- src/templates/settings/resize.html | 4 +-- 13 files changed, 50 insertions(+), 46 deletions(-) diff --git a/src/css/dialogs-import-image.css b/src/css/dialogs-import-image.css index 0de7313b..5fb4aa25 100644 --- a/src/css/dialogs-import-image.css +++ b/src/css/dialogs-import-image.css @@ -2,6 +2,19 @@ /* Import dialog */ /************************************************************************************************/ +#dialog-container.import-image { + width: 550px; + height: 360px; + top : 50%; + left : 50%; + position : absolute; + margin-left: -250px; +} + +.show #dialog-container.import-image { + margin-top: -150px; +} + .import-subsection { margin-left: 25px; } @@ -57,14 +70,17 @@ display: inline-block; overflow: hidden; - word-break : break-all; + width: 200px; vertical-align: middle; + + word-break : break-all; + white-space: nowrap; + text-overflow: ellipsis; + font-style: italic; font-weight: normal; text-shadow: none; - width: 200px; - white-space: nowrap; - text-overflow: ellipsis; + color: gold; } [name=smooth-resize-checkbox] { @@ -72,13 +88,13 @@ } .dialog-import-body { - padding:10px 20px; + padding: 10px 20px; font-size:1.3em } .import-button { font-size: 1em; - height: auto; - padding: 5px 10px; + height: 28px; + padding: 0px 10px; margin-top: 15px; } \ No newline at end of file diff --git a/src/css/dialogs.css b/src/css/dialogs.css index e146309a..1ce9dd4d 100644 --- a/src/css/dialogs.css +++ b/src/css/dialogs.css @@ -65,19 +65,6 @@ margin-top: -250px; } -#dialog-container.import-image { - width: 550px; - height: 350px; - top : 50%; - left : 50%; - position : absolute; - margin-left: -250px; -} - -.show #dialog-container.import-image { - margin-top: -150px; -} - .dialog-wrapper { height: 100%; position : relative; diff --git a/src/css/forms.css b/src/css/forms.css index 58b8db83..e7663793 100644 --- a/src/css/forms.css +++ b/src/css/forms.css @@ -10,6 +10,8 @@ border-radius : 2px; padding : 3px 10px; color : white; + + height: 23px; } .textfield[disabled=disabled] { diff --git a/src/css/reset.css b/src/css/reset.css index d6fdcba7..a48396ff 100644 --- a/src/css/reset.css +++ b/src/css/reset.css @@ -3,7 +3,7 @@ html, body { margin : 0; overflow: hidden; cursor : default; - font-family: arial; + font-family: Arial; font-size: 11px; -webkit-touch-callout: none; -webkit-user-select: none; @@ -19,6 +19,11 @@ ul, li { list-style-type: none; } +/** Firefox overrides this with -moz-use-system-font */ +input, +input[type="submit"] { + font-family: Arial; +} /* Force apparition of scrollbars on leopard */ ::-webkit-scrollbar { diff --git a/src/css/settings-application.css b/src/css/settings-application.css index 09d60b8a..ac998bd4 100644 --- a/src/css/settings-application.css +++ b/src/css/settings-application.css @@ -1,4 +1,3 @@ -.tiled-preview-checkbox { - vertical-align: -2px; - margin-left: 0; -} \ No newline at end of file +/*******************************/ +/* Application Setting panel */ +/*******************************/ diff --git a/src/css/settings-resize.css b/src/css/settings-resize.css index 1a34ca78..ad6b9566 100644 --- a/src/css/settings-resize.css +++ b/src/css/settings-resize.css @@ -5,17 +5,6 @@ width: 25%; } -.resize-content-checkbox { - margin-left: 0; -} - -.resize-ratio-checkbox, -.resize-smooth-checkbox { - vertical-align: -2px; - margin-left: 0; -} - - /*****************/ /* ANCHOR WIDGET */ /*****************/ diff --git a/src/css/style.css b/src/css/style.css index 924667e7..2a0a53d1 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -50,3 +50,8 @@ body { .uppercase { text-transform: uppercase; } + +.checkbox-fix { + vertical-align: -2px; + margin-left: 0; +} diff --git a/src/js/controller/dialogs/ImportImageController.js b/src/js/controller/dialogs/ImportImageController.js index fe0425d5..7a433c98 100644 --- a/src/js/controller/dialogs/ImportImageController.js +++ b/src/js/controller/dialogs/ImportImageController.js @@ -136,6 +136,7 @@ var fileName = this.extractFileNameFromPath_(this.file_.name); this.fileNameContainer.html(fileName); + this.fileNameContainer.attr('title', fileName); this.resizeWidth.val(w); this.resizeHeight.val(h); diff --git a/src/js/controller/settings/exportimage/PngExportController.js b/src/js/controller/settings/exportimage/PngExportController.js index 8c9158cd..2b2dd25d 100644 --- a/src/js/controller/settings/exportimage/PngExportController.js +++ b/src/js/controller/settings/exportimage/PngExportController.js @@ -10,10 +10,10 @@ pskl.utils.inherit(ns.PngExportController, pskl.controller.settings.AbstractSettingController); ns.PngExportController.prototype.init = function () { - this.pngFilePrefixInput = document.getElementById('zip-prefix-name'); + this.pngFilePrefixInput = document.querySelector('.zip-prefix-name'); this.pngFilePrefixInput.value = 'sprite_'; - this.splitByLayersCheckbox = document.getElementById('zip-split-by-layers'); + this.splitByLayersCheckbox = document.querySelector('.zip-split-layers-checkbox'); var downloadButton = document.querySelector('.png-download-button'); this.addEventListener(downloadButton, 'click', this.onPngDownloadButtonClick_); diff --git a/src/templates/dialogs/import-image.html b/src/templates/dialogs/import-image.html index cef02cbd..f37e95cb 100644 --- a/src/templates/dialogs/import-image.html +++ b/src/templates/dialogs/import-image.html @@ -25,7 +25,7 @@
Smooth resize - +