Updates to upload CSS to make it themeable and RTL compatible. Use ab…

…solute positioning to handle upload button positioning. Remove color definitions to allow jQuery UI theme to set button colors. Consolidate upload dialog CSS to modules/css/gallery.css. Closes #885.
gallery · Mar 1, 2010 · 5f985b3 · 5f985b3
1 parent 835027b
commit 5f985b3
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 83 deletions.
diff --git a/lib/gallery.common.css b/lib/gallery.common.css
@@ -273,7 +273,7 @@ form li.g-warning {
 }
 
 .g-short-form li.g-error {
-  padding: .3em 0 .3em 0;
+  padding: .3em 0;
 }
 
 form.g-error input[type="text"],
@@ -294,7 +294,8 @@ li.g-error select {
 
 .g-error,
 .g-denied,
-tr.g-error td.g-error {
+tr.g-error td.g-error,
+#g-add-photos-status .g-error {
   background: #f6cbca url('images/ico-error.png') no-repeat .4em 50%;
   color: #f00;
 }
@@ -304,7 +305,8 @@ tr.g-error td.g-error {
 }
 
 .g-success,
-.g-allowed {
+.g-allowed,
+#g-add-photos-status .g-success {
   background: #d9efc2 url('images/ico-success.png') no-repeat .4em 50%;
 }
 
@@ -603,60 +605,6 @@ div#g-action-status {
   margin-left: 0;
 }
 
-/* Simple uploader ~~~~~~~~~~~~~~~~~~~~~~~ */
-
-#g-add-photos-canvas {
-  border: 1px solid  #ccc;
-  height: 200px;
-  margin: .5em 0;
-  overflow: auto;
-  width: 469px;
-}
-
-#g-add-photos-status {
-  border: 1px solid  #ccc;
-  height: 125px;
-  margin: .5em 0;
-  overflow: auto;
-  width: 469px;
-}
-
-#g-add-photos button {
-  float: right;
-  margin-bottom: .5em;
-  margin-left: .5em;
-}
-
-#g-add-photos-status li {
-  text-align: left;
-  padding-left: 2em;
-}
-
-#g-add-photos-status li.g-success {
-  background: #d9efc2  url('images/ico-success.png') no-repeat .4em 50%;
-  width: 429px;
-}
-
-#g-add-photos-status li.g-error {
-  background: #f6cbca url('images/ico-error.png') no-repeat .4em 50%;
-  width: 429px;
-/*  color: #f00;*/
-}
-
-#g-add-photos-button {
-  background: #DFEFFC;
-  border: 1px solid #C5DBEC;
-  color: #2E6E9E
-}
-
-#g-add-photos p {
-  margin: 0
-}
-
-#g-add-photos .g-breadcrumbs li {
-  padding-top: .5em;
-}
-
 /** *******************************************************************
  * 7) Right to left language styles
  **********************************************************************/
@@ -685,7 +633,9 @@ div#g-action-status {
 .rtl .g-error,
 .rtl .g-info,
 .rtl .g-success,
-.rtl .g-warning {
+.rtl .g-warning,
+.rtl #g-add-photos-status .g-success,
+.rtl #g-add-photos-status .g-error {
   background-position: center right;
   padding-right: 30px !important;
 }

diff --git a/modules/gallery/css/gallery.css b/modules/gallery/css/gallery.css
@@ -11,6 +11,70 @@
  * 1) End-user
  **********************************************************************/
 
+/* Uploader ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+#g-add-photos-canvas,
+#g-add-photos-status {
+  width: 469px;
+}
+
+#g-add-photos-canvas {
+  border: 1px solid  #ccc;
+  height: 200px;
+  margin: .5em 0;
+  padding: 1.8em 0 0 0;
+  overflow: auto;
+  position: relative;
+}
+
+#g-add-photos-canvas object,
+#g-add-photos-button {
+  left: 137px;
+  margin: 0 0 .5em 0;
+  padding: .4em 1em;
+  position: absolute;
+  top: 0;
+  width: 175px;
+}
+
+#g-add-photos-canvas object {
+  margin: 0;
+  z-index: 100;
+}
+
+#g-add-photos-canvas .uploadifyQueueItem {
+  margin: 0;
+}
+
+#g-add-photos-button {
+  z-index: 1;
+}
+
+#g-add-photos-status {
+  border: 1px solid #ccc;
+  height: 125px;
+  margin: .4em 0;
+  overflow: auto;
+}
+
+#g-add-photos-status .g-message-block {
+  border: none;
+}
+
+#g-add-photos-status #g-action-status li {
+  margin: 0 0 1px 0;
+  padding-top: .7em;
+  width: 433px;
+}
+
+#g-add-photos-form .g-breadcrumbs {
+  margin: 0;
+}
+
+#g-add-photos-form p {
+  margin-bottom: 0
+}
+
 /* Permissions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #g-edit-permissions-form {
@@ -121,6 +185,10 @@
  * 3) Right to left language styles
  **********************************************************************/
 
+.rtl #g-add-photos-status #g-action-status li {
+  width: 407px;
+}
+
 .rtl #g-block-admin .g-left {
   margin-left: 1em;
   margin-right: 0;

diff --git a/modules/gallery/views/form_uploadify.html.php b/modules/gallery/views/form_uploadify.html.php
@@ -1,25 +1,4 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<style>
-#g-add-photos-canvas object {
-  height: 33px;
-  left: -80px;
-  position: relative;
-  z-index: 100;
-}
-#g-add-photos-canvas span {
-  height: 33px;
-  width: 150px;
-}
-#g-add-photos-button {
-  float: left;
-  left: 155px;
-  padding-bottom: .5em;
-  padding-top: .5em;
-  position: relative;
-  width: 150px;
-  z-index: 1;
-}
-</style>
 <script type="text/javascript" src="<?= url::file("lib/swfobject.js") ?>"></script>
 <script type="text/javascript" src="<?= url::file("lib/uploadify/jquery.uploadify.min.js") ?>"></script>
 <script type="text/javascript">
@@ -121,11 +100,11 @@
   </ul>
 </div>
 
-<div id="g-add-photos-canvas" style="text-align: center;clear: both">
-  <a id="g-add-photos-button" class="ui-corner-all" href="#"><?= t("Select photos...") ?></a>
+<div id="g-add-photos-canvas">
+  <button id="g-add-photos-button" class="g-button ui-state-default ui-corner-all" href="#"><?= t("Select photos...") ?></button>
   <span id="g-uploadify"></span>
 </div>
-<div id="g-add-photos-status" style="text-align: center;">
-  <ul>
+<div id="g-add-photos-status">
+  <ul id="g-action-status" class="g-message-block">
   </ul>
 </div>