From 72deeb1119e7888e26b0656ae811be3f4e534e11 Mon Sep 17 00:00:00 2001
From: Tim Almdal <tnalmdal@shaw.ca>
Date: Fri, 20 Nov 2009 10:26:11 -0800
Subject: Remove all style from the organize.css file and make use of the
 themeroller styles as much as possible.

---
 modules/organize/css/organize.css                  | 30 ++--------------------
 modules/organize/js/organize.js                    | 20 +++++++++++----
 modules/organize/views/organize_dialog.html.php    |  6 ++---
 .../organize/views/organize_thumb_grid.html.php    |  4 +--
 modules/organize/views/organize_tree.html.php      |  2 +-
 5 files changed, 23 insertions(+), 39 deletions(-)

(limited to 'modules')

diff --git a/modules/organize/css/organize.css b/modules/organize/css/organize.css
index 16645c37..d8923ea7 100644
--- a/modules/organize/css/organize.css
+++ b/modules/organize/css/organize.css
@@ -30,9 +30,8 @@
   width: 19%;
 }
 
-#g-organize-album-tree .g-selected {
-  background-color: #eee;
-  border-bottom: 1px solid #999;
+#g-organize-album-tree {
+  overflow: auto;
 }
 
 #g-organize-album-tree ul li {
@@ -50,10 +49,6 @@
   width: auto;
 }
 
-.g-organize-album-text:hover {
-  background: #eee;
-}
-
 /*******************************************************************
  * Album panel styles
  */
@@ -77,8 +72,6 @@
 }
 
 #g-organize-microthumb-panel {
-  background-color: #eee;
-  border: 1px solid #999;
   height: 100%;
   margin: 0 !important;
   position: relative;
@@ -100,8 +93,6 @@
 }
 
 .g-organize-microthumb {
-  background-color: #fff;
-  border: 1px solid #ccc;
   display: block;
   height: 100px;
   margin: 0;
@@ -111,16 +102,7 @@
   width: 110px;
 }
 
-.g-organize-microthumb-grid-cell.ui-selecting,
-.g-organize-microthumb-grid-cell.ui-selected {
-  border: 2px solid #13A;
-  margin: 4px;
-}
-
 .ui-selectable-helper {
-  background: #13A;
-  border: 1px dashed #00F;
-  opacity: 0.25;
   z-index: 2000 !important;
 }
 
@@ -131,21 +113,13 @@
   z-index: 4000;
 }
 
-.g-organize-microthumb-grid-cell:hover {
-  border: 2px solid #13A;
-  margin: 4px;
-}
-
 /****************************************************************
  * Controls styles
  */
 
 #g-organize-controls {
-  background-color: #666;
-  color: #eee;
   margin: 0 !important;
   padding: .2em .4em;
-  width: 100%;
 }
 
 #g-organize-controls select {
diff --git a/modules/organize/js/organize.js b/modules/organize/js/organize.js
index a7fe1ad2..26de18bb 100644
--- a/modules/organize/js/organize.js
+++ b/modules/organize/js/organize.js
@@ -163,7 +163,17 @@
 
     set_handlers: function() {
       $("#g-organize-microthumb-panel")
-        .selectable({filter: ".g-organize-microthumb-grid-cell"})
+        .selectable({
+          filter: ".g-organize-microthumb-grid-cell",
+          selected: function(event, ui) {
+            ui.selected.children(".g-organize-microthumb")
+              .removeClass("ui-state-active").addClass("ui-state-focus");
+          },
+          unselected: function(event, ui) {
+            $(ui.unselected).children(".g-organize-microthumb")
+              .addClass("ui-state-active").removeClass("ui-state-focus");
+          }
+        })
         .droppable($.organize.content_droppable);
       $(".g-organize-microthumb-grid-cell")
         .draggable($.organize.micro_thumb_draggable)
@@ -203,7 +213,7 @@
      */
     show_album: function(event) {
       event.preventDefault();
-      if ($(event.currentTarget).hasClass("g-selected")) {
+      if ($(event.currentTarget).hasClass("ui-state-focus")) {
         return;
       }
       var parent = $(event.currentTarget).parents(".g-organize-branch");
@@ -212,8 +222,8 @@
       }
       $("#g-organize-microthumb-panel").selectable("destroy");
       var id = $(event.currentTarget).attr("ref");
-      $("#g-organize-album-tree .g-selected").removeClass("g-selected");
-      $(".g-organize-album-text[ref=" + id + "]").addClass("g-selected");
+      $(".g-organize-album-text.ui-state-focus").removeClass("ui-state-focus");
+      $(".g-organize-album-text[ref=" + id + "]").addClass("ui-state-focus");
       var url = $("#g-organize-microthumb-panel").attr("ref").replace("__ITEM_ID__", id).replace("__OFFSET__", 0);
       $.get(url, {},
         function(data) {
@@ -230,7 +240,7 @@
      */
     resort: function(column, dir) {
       var url = sort_order_url
-        .replace("__ALBUM_ID__", $("#g-organize-album-tree .g-selected").attr("ref"))
+        .replace("__ALBUM_ID__", $("#g-organize-album-tree .ui-state-focus").attr("ref"))
         .replace("__COL__", column)
         .replace("__DIR__", dir);
       $.get(url, {},
diff --git a/modules/organize/views/organize_dialog.html.php b/modules/organize/views/organize_dialog.html.php
index 31f788ad..435f5ae3 100644
--- a/modules/organize/views/organize_dialog.html.php
+++ b/modules/organize/views/organize_dialog.html.php
@@ -15,16 +15,16 @@
       </ul>
     </div>
     <div id="g-organize-detail" class="g-left ui-helper-clearfix">
-      <div id="g-organize-microthumb-panel"
+      <div id="g-organize-microthumb-panel" class="ui-widget"
            ref="<?= url::site("organize/album/__ITEM_ID__/__OFFSET__") ?>">
         <ul id="g-action-status" class="g-message-block">
           <li class="g-info"><?= t("Drag and drop photos to re-order or move between albums") ?></li>
         </ul>
-        <ul id="g-organize-microthumb-grid">
+        <ul id="g-organize-microthumb-grid" class="ui-widget-content">
           <?= $micro_thumb_grid ?>
         </ul>
       </div>
-      <div id="g-organize-controls">
+      <div id="g-organize-controls" class="ui-widget-header">
         <a id="g-organize-close" href="#" ref="done"
            class="g-button g-right ui-corner-all ui-state-default"><?= t("Close") ?></a>
         <form>
diff --git a/modules/organize/views/organize_thumb_grid.html.php b/modules/organize/views/organize_thumb_grid.html.php
index 3ac32ce0..9a9cd819 100644
--- a/modules/organize/views/organize_thumb_grid.html.php
+++ b/modules/organize/views/organize_thumb_grid.html.php
@@ -1,8 +1,8 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
 <? foreach ($album->children(25, $offset) as $child): ?>
-<li class="g-organize-microthumb-grid-cell g-left" ref="<?= $child->id ?>">
+<li class="g-organize-microthumb-grid-cell g-left ui-state-default" ref="<?= $child->id ?>">
   <div id="g-organize-microthumb-<?= $child->id ?>"
-       class="g-organize-microthumb <?= $child->is_album() ? "g-album" : "g-photo" ?>">
+       class="g-organize-microthumb <?= $child->is_album() ? "g-album" : "g-photo" ?> ui-state-active">
     <?= $child->thumb_img(array("class" => "g-thumbnail", "ref" => $child->id), 90, true) ?>
     <span<?= $child->is_album() ? " class=\"ui-icon ui-icon-note\"" : "" ?>></span>
   </div>
diff --git a/modules/organize/views/organize_tree.html.php b/modules/organize/views/organize_tree.html.php
index 740c2521..50c8c351 100644
--- a/modules/organize/views/organize_tree.html.php
+++ b/modules/organize/views/organize_tree.html.php
@@ -3,7 +3,7 @@
     ref="<?= $album->id ?>">
   <span class="ui-icon ui-icon-minus">
   </span>
-  <span class="g-organize-album-text <?= $selected && $album->id == $selected->id ? "selected" : "" ?>"
+  <span class="g-organize-album-text <?= $selected && $album->id == $selected->id ? "ui-state-focus" : "" ?>"
         ref="<?= $album->id ?>">
     <?= html::clean($album->title) ?>
   </span>
-- 
cgit v1.2.3