From c383b2fc35bbe1864acb79b784b4cd3a2f82a95e Mon Sep 17 00:00:00 2001 From: Chad Kieffer Date: Wed, 14 Jan 2009 06:36:47 +0000 Subject: [PATCH] Visually attach the quick edit menu to the thumbnail container. Added more edit options (move, select as album cover, delete, additional options). Need to decide which belong in the bar and which belong in a dropdown menu under "options." --- core/css/quick.css | 37 ++++++++++++++------- core/images/d8e7f3_edit_icons.png | Bin 479 -> 826 bytes core/js/quick.js | 46 +++++++++++++------------- core/views/quick_pane.html.php | 52 +++++++++++++++++++++++------- themes/default/css/screen.css | 4 +-- 5 files changed, 90 insertions(+), 49 deletions(-) diff --git a/core/css/quick.css b/core/css/quick.css index 7bf78464..fef92c22 100644 --- a/core/css/quick.css +++ b/core/css/quick.css @@ -6,7 +6,7 @@ #gQuickPane { background: #000; - border-bottom: 1px solid #fff; + border-bottom: 1px solid #ccc; opacity: 0.8; } @@ -16,10 +16,9 @@ background-repeat: no-repeat; cursor: pointer; display: block; - float: right; + float: left; height: 16px; margin: 8px; - top: 0px; width: 16px; } @@ -31,20 +30,34 @@ display: none; } +#gQuickPane .edit { + background-position: 0 0; +} + #gQuickPane .clockwise { background-position: -16px 0; - position: absolute; - right: 0px; } #gQuickPane .counter-clockwise { - background-position: 0 0; - left: 0px; - position: absolute; + background-position: -32px 0; } -#gQuickPane .edit { - background-position: 0 -16px; - left: 42%; - position: absolute; +#gQuickPane .delete { + background-position: -48px 0; } + +#gQuickPane .move { + background-position: -64px 0; +} + +#gQuickPane .tag { + background-position: -80px 0; +} + +#gQuickPane .cover { + background-position: -96px 0; +} + +#gQuickPane .options { + background-position: -112px 0; +} \ No newline at end of file diff --git a/core/images/d8e7f3_edit_icons.png b/core/images/d8e7f3_edit_icons.png index 1ca3641513fa08ca96d8071a3fdd8d6dea85ae26..374e1acd28fa277d452e30a2ac5654aa80459f1a 100644 GIT binary patch delta 785 zcmV+s1Md9a1G)wwiBL{Q4GJ0x0000DNk~Le0001h0000G2nGNE0Nz-4h>;;Te*(-& zL_t(|+U!`*OBGQRe)AA{h|m+Jc#E(?!A*;>mVuW4fPx~mbK}Exh=i+X5fRZco*?a7 zJ+bzI3bj5;Ja`cX6}!far)tW@NwqNopbM<`<-*{eG_!M-Aak` zi)y(9WdM};OYwRCa9VhlV+1Z+e*h*i3bPH~9BK6Lc)rAU_*_i609kzdVeW%1unE3K zUxx(?Sch2!kHBNHf_XF@=l_a7=gw;GRS)qinstTl?oh5c>Ae=Xuk z1M4NeE|_mNtE!Qv4+d<@(4Lfqbxr(F6zf{b%-^Hnf`{NDE5Qkwge&0fgti;BKOE+; zVR-*L)&S7T{*+{Xk>V!>e?eSOSfKX)sI@_f|J3k~v4KSKztLZ?#Pa_PT;{duotM!^ z%~0~&@{Gef+yl2_?vGh3KveuR2fs9>J7?d}Vr}BLBIl$N!*3lOEz6f!$^}nYz6H-M z@B9E7+{NW!q-j^$9M^3heTdj!wcA5--*^bjTYTHTp2xEZxN4vce{aDCc!@UDuEmB} zli38{0j{ZJ@e4Wl(bl*HJcjS4!yGO%cywO(Odb(?h~vhJA6Eg?DL=LNS@!Q7`xvxX z6B?GejTqW~VV(o51U<}lwH-8F#OF4mD%E>hITwV|CS!O8L6GJUn7QohS)Anzkg^Zi zC)aqb+ooZ>fd2%dXVp=a`zoHf;4p7J2$cVfW9AEP(Pu%O_WAGNCEMN={vqfe{fagp zBhE^J<4Y$01SdSi7r$|CGwtYCLHP&Z)7QBUfD$=<2`o_tK#BhtrveNBdfb8$Gl~)h P00000NkvXXu0mjf&J=wu delta 436 zcmV;l0Zab62HyiAiBL{Q4GJ0x0000DNk~Le0000W0000W2nGNE0CReJ^pPPqe*tkx zL_t(|+U!@sZo)7OB~y=ZTcvS9+}IhuWLG|5{fK=@`2cRHe8|QbzF?DjT<^u6QWTju zvD*$1!jhGSG=0y{j$2G!*Mn=?)8NW>y95qDRTwj*H2|7Nu#t$`M@my$G`5pbG?rs~zXzn^!3K#8CweMEsIpicTB&^4mY z1mNXyG5OUg_z!h7DVT$QfiJ*!q;Jq}ia#vDbMOp&4fj;OhZ_1#h#wgNfAG^j9|73= zZb3QA;NF!s1#=tm8+c(A;OsN9uC9S5as=P{"); - var img = quick.find("img"); - var pos = img.position(); + cont.append("
"); + var img = cont.find(".gThumbnail"); + var pos = cont.position(); $("#gQuickPane").css({ "position": "absolute", "top": pos.top, "left": pos.left, - "width": img.innerWidth(), + "width": cont.innerWidth(), "height": 32 }); - quick.hover(function() { }, hide_quick); + cont.hover(function() { }, hide_quick); $.get( quick.attr("href"), {}, @@ -23,36 +24,33 @@ var show_quick = function() { $("#gQuickPane").html(data); $("#gQuickPane a").click(function(e) { e.preventDefault(); - quick_do(quick, $(this), img); + quick_do(cont, $(this), img); }); } ); }; -var quick_do = function(quick, pane, img) { +var quick_do = function(cont, pane, img) { if (pane.hasClass("gDialogLink")) { openDialog(pane, function() { window.location.reload(); }); } else { - img.css("opacity", "0.2"); - quick.addClass("gLoadingLarge"); + img.css("opacity", "0.1"); + cont.addClass("gLoadingLarge"); $.ajax({ type: "GET", url: pane.attr("href"), dataType: "json", success: function(data) { - img.css("opacity", "1"); - img.attr("width", data.width); - img.attr("height", data.height); - img.attr("src", data.src); - var pos = img.position(); - quick.removeClass("gLoadingLarge"); - $("#gQuickPane").css({ - "position": "absolute", - "top": pos.top, - "left": pos.left, - "width": img.innerWidth() + 1, - "height": 32 - }); + img.css("opacity", "1"); + img.attr("width", data.width); + img.attr("height", data.height); + img.attr("src", data.src); + if (data.height > data.width) { + img.css("margin-top", -$("#gQuickPane").height()); + } else { + img.css("margin-top", 0); + } + cont.removeClass("gLoadingLarge"); } }); } diff --git a/core/views/quick_pane.html.php b/core/views/quick_pane.html.php index 75149e18..2a8c66ef 100644 --- a/core/views/quick_pane.html.php +++ b/core/views/quick_pane.html.php @@ -1,24 +1,54 @@ type == "photo"): ?> - -id/ccw?csrf=" . access::csrf_token()) ?>"> - - - - - -id") ?>"> +id") ?>" + title=""> - + -id/cw?csrf=" . access::csrf_token()) ?>"> +id/cw?csrf=" . access::csrf_token()) ?>" + title=""> - + + + +id/ccw?csrf=" . access::csrf_token()) ?>" + title=""> + + + +id") ?>" + title=""> + + + + + +"> + + + + + +"> + + + + + +"> + + + + + diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index d1670921..8963120b 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -705,12 +705,12 @@ li.gError select { /* Ajax loading indicator ~~~~~~~~~~~~~~~~ */ .gLoadingLarge { - background: #fff url('../images/loading-lg.gif') no-repeat center center; + background: #e8e8e8 url('../images/loading-lg.gif') no-repeat center center; font-size: 0; } .gLoadingSmall { - background: #fff url('../images/loading-sm.gif') no-repeat center center; + background: #e8e8e8 url('../images/loading-sm.gif') no-repeat center center; font-size: 0; }