Admin theme style cleanup. Merged separate selected, available, unavailable into a single set of reusable classes. Applied alternating row bg colors. Removed inline CSS from admin views. Moved user admin css into admin_default theme style sheet.

This commit is contained in:
Chad Kieffer
2009-01-24 20:06:13 +00:00
parent cbff78daa8
commit 55cd2afde5
17 changed files with 260 additions and 308 deletions

View File

@@ -28,6 +28,7 @@ class Admin_Graphics_Controller extends Admin_Controller {
if ($id == $active) {
$view->content->active = new View("admin_graphics_$id.html");
$view->content->active->tk = $tk;
$view->content->active->is_active = true;
} else {
$v = new View("admin_graphics_$id.html");
$v->tk = $tk;

View File

@@ -2,12 +2,12 @@
<script type="text/javascript">
$(document).ready(function() {
select_toolkit = function(el) {
if (!$(this).hasClass("unavailable")) {
if (!$(this).hasClass("gUnavailable")) {
window.location = '<?= url::site("admin/graphics/choose/__TK__?csrf=" . access::csrf_token()) ?>'
.replace("__TK__", $(this).attr("id"));
}
};
$("#gAvailableToolkits div.gBlock").click(select_toolkit);
$("#gAvailableToolkits .gBlock").click(select_toolkit);
});
</script>
@@ -17,12 +17,10 @@
<?= t("Gallery needs a graphics toolkit in order to manipulate your photos. Please choose one from the list below.") ?>
</p>
<div id="gSelectedToolkit">
<h2> <?= t("Active Toolkit") ?> </h2>
<?= $active ?>
</div>
<h2> <?= t("Active Toolkit") ?> </h2>
<?= $active ?>
<div id="gAvailableToolkits">
<div class="gAvailable">
<h2> <?= t("Available Toolkits") ?> </h2>
<?= $available ?>
</div>

View File

@@ -1,5 +1,5 @@
<?php defined("SYSPATH") or die("No direct script access.") ?>
<div id="gd" class="gBlock <?= $tk->gd["GD Version"] ? "" : "unavailable" ?>">
<div id="gd" class="gBlock<?= $is_active ? " gSelected" : "" ?><?= $tk->gd["GD Version"] ? "" : " gUnavailable" ?>">
<img class="logo" width="170" height="110" src="<?= url::file("core/images/gd.png"); ?>" alt="<? t("Visit the GD lib project site") ?>" />
<h3> <?= t("GD") ?> </h3>
<p>

View File

@@ -1,5 +1,5 @@
<?php defined("SYSPATH") or die("No direct script access.") ?>
<div id="graphicsmagick" class="gBlock <?= $tk->graphicsmagick ? "" : "unavailable" ?>">
<div id="graphicsmagick" class="gBlock<?= $is_active ? " gSelected" : "" ?><?= $tk->graphicsmagick ? "" : " gUnavailable" ?>">
<h3> <?= t("GraphicsMagick") ?> </h3>
<img class="logo" width="107" height="76" src="<?= url::file("core/images/graphicsmagick.png"); ?>" alt="<? t("Visit the GraphicsMagick project site") ?>" />
<p>

View File

@@ -1,5 +1,5 @@
<?php defined("SYSPATH") or die("No direct script access.") ?>
<div id="imagemagick" class="gBlock <?= $tk->imagemagick ? "" : "unavailable" ?>">
<div id="imagemagick" class="gBlock<?= $is_active ? " gSelected" : "" ?><?= $tk->imagemagick ? "" : " gUnavailable" ?>">
<h3> <?= t("ImageMagick") ?> </h3>
<img class="logo" width="114" height="118" src="<?= url::file("core/images/imagemagick.jpg"); ?>" alt="<? t("Visit the ImageMagick project site") ?>" />
<p>

View File

@@ -7,7 +7,7 @@
<div id="gAvailableTasks">
<h2> <?= t("Available Tasks") ?> </h2>
<table style="width: 680px" border="1">
<table>
<tr>
<th>
<?= t("Name") ?>
@@ -41,7 +41,7 @@
<div id="gRunningTasks">
<h2> <?= t("Running Tasks") ?> </h2>
<table style="width: 680px" border="1">
<table>
<tr>
<th>
<?= t("Last Updated") ?>
@@ -100,7 +100,7 @@
<div id="gFinishedTasks">
<h2> <?= t("Finished Tasks") ?> </h2>
<table style="width: 680px" border="1">
<table>
<tr>
<th>
<?= t("Last Updated") ?>

View File

@@ -14,8 +14,9 @@
<th> <?= t("Version") ?> </th>
<th> <?= t("Description") ?> </th>
</tr>
<? $i = 0 ?>
<? foreach ($available as $module_name => $module_info): ?>
<tr>
<tr class="<?= ($i % 2 == 0) ? "gEvenRow" : "gOddRow" ?>">
<? $data = array("name" => $module_name); ?>
<? if ($module_info->locked) $data["disabled"] = 1; ?>
<td> <?= form::checkbox($data, '1', module::is_installed($module_name)) ?> </td>
@@ -23,6 +24,7 @@
<td> <?= $module_info->version ?> </td>
<td> <?= t($module_info->description) ?> </td>
</tr>
<? $i++ ?>
<? endforeach ?>
</table>
<input type="submit" value="<?= t("Update") ?>"/>

View File

@@ -7,85 +7,83 @@
}
</script>
<div id="gAdminThemes">
<h1> <?= t("Theme Administration") ?> </h1>
<p>
<?= t("Gallery allows you to choose a theme for browsing your Gallery, as well as a special theme for the administration interface. Click a theme to preview and activate it.") ?>
</p>
<h1> <?= t("Theme Administration") ?> </h1>
<p>
<?= t("Gallery allows you to choose a theme for browsing your Gallery, as well as a special theme for the administration interface. Click a theme to preview and activate it.") ?>
</p>
<div id="gSiteTheme">
<h2> <?= t("Gallery theme") ?> </h2>
<div class="gBlock selected">
<img src="<?= url::file("themes/{$site}/thumbnail.png") ?>"
alt="<?= $themes[$active]->name ?>" />
<h3> <?= $themes[$site]->name ?> </h3>
<p>
<?= $themes[$site]->description ?>
</p>
</div>
<h2> <?= t("Available Gallery themes") ?> </h2>
<div id="gAvailableSiteThemes">
<? $count = 0 ?>
<? foreach ($themes as $id => $info): ?>
<? if (!$info->site) continue ?>
<? if ($id == $site) continue ?>
<div class="gBlock">
<a href="<?= url::site("admin/themes/preview/site/$id") ?>" class="gDialogLink" title="<?= t("Theme Preview: %theme_name", array("theme_name" => $info->name)) ?>">
<img src="<?= url::file("themes/{$id}/thumbnail.png") ?>"
alt="<?= $info->name ?>" />
<h3> <?= $info->name ?> </h3>
<p>
<?= $info->description ?>
</p>
</a>
</div>
<? $count++ ?>
<? endforeach ?>
<? if (!$count): ?>
<p>
<?= t("There are no other site themes available.") ?>
</p>
<? endif ?>
</div>
<div id="gSiteTheme">
<h2> <?= t("Gallery theme") ?> </h2>
<div class="gBlock gSelected">
<img src="<?= url::file("themes/{$site}/thumbnail.png") ?>"
alt="<?= $themes[$active]->name ?>" />
<h3> <?= $themes[$site]->name ?> </h3>
<p>
<?= $themes[$site]->description ?>
</p>
</div>
<div id="gAdminTheme">
<h2> <?= t("Admin theme") ?> </h2>
<div class="gBlock selected">
<img src="<?= url::file("themes/{$admin}/thumbnail.png") ?>"
alt="<?= $themes[$admin]->name ?>" />
<h3> <?= $themes[$admin]->name ?> </h3>
<p>
<?= $themes[$admin]->description ?>
</p>
<h2> <?= t("Available Gallery themes") ?> </h2>
<div class="gAvailable">
<? $count = 0 ?>
<? foreach ($themes as $id => $info): ?>
<? if (!$info->site) continue ?>
<? if ($id == $site) continue ?>
<div class="gBlock">
<a href="<?= url::site("admin/themes/preview/site/$id") ?>" class="gDialogLink" title="<?= t("Theme Preview: %theme_name", array("theme_name" => $info->name)) ?>">
<img src="<?= url::file("themes/{$id}/thumbnail.png") ?>"
alt="<?= $info->name ?>" />
<h3> <?= $info->name ?> </h3>
<p>
<?= $info->description ?>
</p>
</a>
</div>
<? $count++ ?>
<? endforeach ?>
<h2> <?= t("Available admin themes") ?> </h2>
<div id="gAvailableAdminThemes">
<? $count = 0 ?>
<? foreach ($themes as $id => $info): ?>
<? if (!$info->admin) continue ?>
<? if ($id == $admin) continue ?>
<div class="gBlock">
<a href="<?= url::site("admin/themes/preview/admin/$id") ?>" class="gDialogLink" title="<?= t("Theme Preview: %theme_name", array("theme_name" => $info->name)) ?>">
<img src="<?= url::file("themes/{$id}/thumbnail.png") ?>"
alt="<?= $info->name ?>" />
<h3> <?= $info->name ?> </h3>
<p>
<?= $info->description ?>
</p>
</a>
</div>
<? $count++ ?>
<? endforeach ?>
<? if (!$count): ?>
<p>
<?= t("There are no other admin themes available.") ?>
</p>
<? endif ?>
</div>
<? if (!$count): ?>
<p>
<?= t("There are no other site themes available.") ?>
</p>
<? endif ?>
</div>
</div>
<div id="gAdminTheme">
<h2> <?= t("Admin theme") ?> </h2>
<div class="gBlock gSelected">
<img src="<?= url::file("themes/{$admin}/thumbnail.png") ?>"
alt="<?= $themes[$admin]->name ?>" />
<h3> <?= $themes[$admin]->name ?> </h3>
<p>
<?= $themes[$admin]->description ?>
</p>
</div>
<h2> <?= t("Available admin themes") ?> </h2>
<div class="gAvailable">
<? $count = 0 ?>
<? foreach ($themes as $id => $info): ?>
<? if (!$info->admin) continue ?>
<? if ($id == $admin) continue ?>
<div class="gBlock">
<a href="<?= url::site("admin/themes/preview/admin/$id") ?>" class="gDialogLink" title="<?= t("Theme Preview: %theme_name", array("theme_name" => $info->name)) ?>">
<img src="<?= url::file("themes/{$id}/thumbnail.png") ?>"
alt="<?= $info->name ?>" />
<h3> <?= $info->name ?> </h3>
<p>
<?= $info->description ?>
</p>
</a>
</div>
<? $count++ ?>
<? endforeach ?>
<? if (!$count): ?>
<p>
<?= t("There are no other admin themes available.") ?>
</p>
<? endif ?>
</div>
</div>

View File

@@ -95,6 +95,9 @@ function showLoading(element) {
case "#gDialog":
size = "Large";
break;
case "#gPanel":
size = "Large";
break;
default:
size = "Small";
break;

View File

@@ -5,7 +5,7 @@
});
</script>
<div id="gAkismetStats">
<iframe id="gAkismetExternalStats" width="100%" height="100%" frameborder="0"
<iframe id="gAkismetExternalStats" width="100%" height="500" frameborder="0"
src="http://<?= $api_key ?>.web.akismet.com/1.0/user-stats.php?blog=<?= urlencode($blog_url) ?>">
</iframe>
</div>

View File

@@ -1,7 +1,7 @@
<?php defined("SYSPATH") or die("No direct script access.") ?>
<ul>
<? foreach ($comments as $comment): ?>
<li>
<? foreach ($comments as $i => $comment): ?>
<li class="<?= ($i % 2 == 0) ? "gEvenRow" : "gOddRow" ?>">
<img src="<?= $comment->author()->avatar_url(40, $theme->url("images/avatar.jpg", true)) ?>"
class="gAvatar"
alt="<?= $comment->author_name() ?>"

View File

@@ -93,8 +93,8 @@
<?= t("Actions") ?>
</th>
</tr>
<? foreach ($comments as $comment): ?>
<tr id="gComment-<?= $comment->id ?>">
<? foreach ($comments as $i => $comment): ?>
<tr id="gComment-<?= $comment->id ?>" class="<?= ($i % 2 == 0) ? "gEvenRow" : "gOddRow" ?>">
<td>
<a href="#">
<img src="<?= $comment->author()->avatar_url(40, $theme->url("images/avatar.jpg", true)) ?>"

View File

@@ -17,8 +17,8 @@
<th> <?= t("Photos") ?> </th>
<th> <?= t("Actions") ?> </th>
</tr>
<? foreach ($tags as $tag): ?>
<tr>
<? foreach ($tags as $i => $tag): ?>
<tr class="<?= ($i % 2 == 0) ? "gEvenRow" : "gOddRow" ?>">
<td> <?= $tag->name ?> </td>
<td> <?= $tag->count ?> </td>
<td>

View File

@@ -6,7 +6,7 @@
</div>
<ul>
<? foreach ($groups as $i => $group): ?>
<li>
<li class="<?= ($i % 2 == 0) ? "gEvenRow" : "gOddRow" ?>">
<?= $group->name ?>
<a href="groups/edit_form/<?= $group->id ?>" class="gDialogLink"
title="<?= t("Edit group") ?>"><?= t("edit") ?></a>

View File

@@ -1,69 +1,4 @@
<?php defined("SYSPATH") or die("No direct script access.") ?>
<style>
.gButtonLink {
border-width: 1px;
border-style: solid;
border-color: #ececec #c8c8c8 #c8c8c8 #ececec;
background-image: url('/gallery3/themes/admin_default/images/backg-buttonlink.png');
padding: .2em .3em;
font-weight: bold;
}
.gButtonLink:hover {
border-color: #c8c8c8 #ececec #ececec #c8c8c8;
}
.gBlock h2 a {
font-size: .7em;
float: right;
position: relative;
top: -1.69em;
}
.gUserAdminList li {
padding: .4em .4em .3em .4em;
position: relative;
}
.gUserAdminList li img {
width: 20px;
height: 20px;
cursor: move;
}
.gFirstRow {
border-bottom: 1px solid grey;
padding-bottom: .5em;
padding-left: 30px !important;
}
.gOddRow {
background-color: #f1f1f1;
}
.gActions {
position: absolute;
left: 400px;
}
.gActions a, .gActions span {
margin-right: 40px;
}
.gPanel {
display: none;
padding: 1em;
}
.gPanel legend {
display: none;
}
.gPanel fieldset {
border: none;
}
li.gGroup {
float: left;
display: block;
width: 200px;
height: 200px;
border: 1px solid gray;
padding: .5em;
margin-right: 1em;
}
</style>
<div class="gBlock">
<h2>
<?= t("User Admin") ?>

View File

@@ -9,18 +9,62 @@
**********************************************************************/
.gBlock {
background-color: #fff;
border: 1px solid #e7e7e7;
margin-bottom: 1em;
padding: 1em .4em;
padding: 1em;
}
.gBlockContent {
padding: 0 1em 1em 1em;
}
.gSelected img,
.gAvailable img {
float: left;
margin-right: 1em;
}
.gSelected {
background: #cfc;
}
.gAvailable .gBlock {
cursor: pointer;
}
.gAvailable .gBlock:hover {
background: #eee;
}
.gUnavailable {
border-color: #ccc;
cursor: default;
opacity: 0.4;
}
.gUnavailable:hover {
opacity: 1;
}
.gFirstRow {
border-bottom: 1px solid #ccc;
padding-bottom: .5em;
padding-left: 30px !important;
}
.gOddRow {
background-color: #eee;
}
.gEvenRow {
background-color: #fff;
}
/** *******************************************************************
* Page layout containers
**********************************************************************/
.gView {
min-width: 974px !important;
}
@@ -82,118 +126,80 @@
margin-bottom: 0;
}
.gButtonLink {
border-width: 1px;
border-style: solid;
border-color: #ececec #c8c8c8 #c8c8c8 #ececec;
background-image: url('/gallery3/themes/admin_default/images/backg-buttonlink.png');
padding: .2em .3em;
font-weight: bold;
}
.gButtonLink:hover {
border-color: #c8c8c8 #ececec #ececec #c8c8c8;
}
.gBlock h2 a {
font-size: .7em;
float: right;
position: relative;
top: -1.69em;
}
.gUserAdminList li {
padding: .4em .4em .3em .4em;
position: relative;
}
.gUserAdminList li img {
width: 20px;
height: 20px;
cursor: move;
}
.gActions {
position: absolute;
left: 400px;
}
.gActions a,
.gActions span {
margin-right: 40px;
}
#gPanel {
display: none;
padding: 1em;
}
#gPanel legend {
display: none;
}
#gPanel fieldset {
border: none;
}
li.gGroup {
float: left;
display: block;
width: 200px;
height: 200px;
border: 1px solid gray;
padding: .5em;
margin-right: 1em;
}
/** *******************************************************************
* Browser hacks
*********************************************************************/
#gHeader:after,
#gAdminCommentsMenu:after,
#gThemeTabs:after,
#gSelectedTheme .gBlock:after {
.gSelected:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
/** *******************************************************************
* Stuff that needs a home or needs to be organized
*********************************************************************/
#gAdminGraphics #gSelectedToolkit img {
float: right;
margin-right: 1em;
}
#gAdminGraphics #gSelectedToolkit div.gBlock {
width: 700px;
height: 140px;
background: #cfc;
}
#gAdminGraphics .gBlock {
background: #fff;
padding: 1em;
}
#gAdminGraphics #gAvailableToolkits .gBlock {
clear: none;
cursor: pointer;
float: left;
margin-right: 1em;
text-align: center;
width: 250px;
}
#gAdminGraphics #gAvailableToolkits .gBlock {
width: 328px;
height: 300px;
}
#gAdminGraphics #gAvailableToolkits .unavailable {
background-color: #fee !important;
cursor: default !important;
}
#gAdminGraphics #gAvailableToolkits .gBlock:hover {
background: #eee;
}
#gAdminGraphics a {
color: #333;
}
#gAdminGraphics #gAvailableToolkits .gBlock {
cursor: pointer;
}
#gAdminThemes #gAdminTheme,
#gAdminThemes #gSiteTheme {
width: 400px;
float: left;
}
#gAdminThemes #gAdminTheme {
padding-left: 40px;
}
#gAdminThemes #gSelectedTheme img {
float: left;
margin-right: 1em;
}
#gAdminThemes .selected {
background: #cfc !important;
cursor: default !important;
}
#gAdminThemes .gBlock {
width: 328px;
height: 140px;
background: #fff;
padding: 1em;
text-align: center;
}
#gAdminThemes .gBlock {
clear: none;
cursor: pointer;
float: left;
text-align: center;
width: 328px;
height: 200px;
}
#gAvailableSiteThemes .gBlock:hover,
#gAvailableAdminThemes .gBlock:hover {
background: #eee;
}
#gAdminThemes a {
color: #333;
text-decoration: none;
}

View File

@@ -26,48 +26,57 @@ $(document).ready(function(){
$(panelLinks[i]).bind("click", {element: panelLinks[i]}, handlePanelEvent);
}
function handlePanelEvent(event) {
togglePanel(event.data.element);
event.preventDefault();
});
function handlePanelEvent(event) {
togglePanel(event.data.element);
event.preventDefault();
}
function togglePanel(element, on_success) {
var parent = $(element).parent().parent();
var sHref = $(element).attr("href");
var ePanel = '<div id="gPanel"></div>';
if ($("#gPanel").length) {
$("#gPanel").slideUp("slow");
$("#gPanel *").remove();
$("#gPanel").remove();
}
function togglePanel(element, on_success) {
var parent = $(element).parent().parent();
var sHref = $(element).attr("href");
var ePanel = '<div class="gPanel"></div>';
if ($(parent).children(".gPanel").length) {
console.log("In here");
$(parent).children(".gPanel").slideToggle("slow");
} else {
$(parent).append(ePanel);
var panel = $(parent).children(".gPanel");
$(panel).html(sHref);
panel.show().slideDown("slow");
$.get(sHref, function(data) {
$(panel).html(data);
ajaxify_panel = function() {
$(".gPanel form").ajaxForm({
dataType: "json",
success: function(data) {
if (data.form) {
$(".gPanel form").replaceWith(data.form);
ajaxify_panel();
}
if (data.result == "success") {
if (on_success) {
on_success();
} else if (data.location) {
window.location = data.location;
} else {
window.location.reload();
}
}
}
});
};
ajaxify_panel();
$(parent).append(ePanel);
var panel = $(parent).children("#gPanel");
showLoading("#gPanel");
$(panel).html(sHref);
panel.show().slideDown("slow");
$.get(sHref, function(data) {
$(panel).html(data);
ajaxify_panel = function() {
$("#gPanel form").ajaxForm({
dataType: "json",
success: function(data) {
if (data.form) {
$("#gPanel form").replaceWith(data.form);
ajaxify_panel();
}
if (data.result == "success") {
if (on_success) {
on_success();
} else if (data.location) {
window.location = data.location;
} else {
window.location.reload();
}
}
}
});
}
return false;
}
});
showLoading("#gPanel");
};
ajaxify_panel();
});
return false;
}