open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

new gallery look and feel

Browse Source
remotes/origin/stable4
Bartek Przybylski 13 years ago
parent 039bbfde2d
commit 5574b87e9b
9 changed files with 117 additions and 50 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      apps/gallery/appinfo/info.xml
  2. 16
      apps/gallery/css/styles.css
  3. BIN
      apps/gallery/img/delete.png
  4. BIN
      apps/gallery/img/rename.png
  5. BIN
      apps/gallery/img/share.png
  6. 105
      apps/gallery/js/album_cover.js
  7. 11
      apps/gallery/js/albums.js
  8. 20
      apps/gallery/templates/index.php
  9. 13
      apps/gallery/templates/view_album.php

2
apps/gallery/appinfo/info.xml
Unescape View File

@ -2,7 +2,7 @@
<info>
<id>gallery</id>
<name>Gallery</name>
<version>0.2</version>
<version>0.3</version>
<licence>AGPL</licence>
<author>Bartek Przybylski</author>
<require>2</require>

16
apps/gallery/css/styles.css
Unescape View File

@ -1,12 +1,14 @@
div#gallery_list { margin: 90pt 20pt; }
div#gallery_list { margin: 70pt 20pt 0 20pt; }
div#gallery_list.leftcontent { padding-top: 15pt; margin: 0; position: absolute; bottom:0px; text-align: center; overflow: auto; }
div.gallery_album_box { width: 200px; text-align: center; border: 0; display: inline-block; margin: 5pt; vertical-align: top; padding: 10px; position: relative; overflow: hidden; color: #999; }
div.gallery_album_box:hover { color: black; }
.leftcontent div.gallery_album_box { margin: 5px; }
div.gallery_album_box { width: 200px; position:relative; text-align: center; border: 0; display: inline-block; margin: 5pt; vertical-align: top; padding: 20px 5px 5px 5px; position: relative; -webkit-transition: color 0.5s ease-in-out; -o-transition: color 0.5s ease-in-out; -moz-transition: color 0.5s ease-in-out;color: #BBB;}
div.gallery_album_box h1 { font-size: 9pt; font-family: Verdana; }
div.gallery_album_cover { width: 199px; height: 199px; border: solid 1pt #999; padding: 0; }
div.gallery_control_overlay { border: 0; position:absolute; right: 10pt; background-color: #333; opacity: 0; padding: 0 5pt; }
div.gallery_album_decoration { width: 200px; position: absolute; border: 0; height: 20px; top: 20px; text-align:right; vertical-align:middle; background-color: #eee; opacity: 0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft:7px;}
div.gallery_album_box:hover { color: black; }
div.gallery_album_box:hover div.gallery_album_decoration { opacity: 0.7;}
div.gallery_album_decoration a {padding: 0 4pt; cursor: pointer;}
div.gallery_album_cover { width: 200px; height: 200px; border: 0; padding: 0; position:relative;}
div.gallery_album_box:hover div.gallery_control_overlay { opacity:0.5 }
div.gallery_control_overlay a { color:white; }
#gallery_images.rightcontent { padding:10px 5px; bottom: 0px; overflow: auto; right:0px}
#scan { position:absolute; right:13.5em; top:0em; }
#scan #scanprogressbar { position:relative; display:inline-block; width:10em; height:1.5em; top:.4em; }

BIN
apps/gallery/img/delete.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 275 B

BIN
apps/gallery/img/rename.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 310 B

BIN
apps/gallery/img/share.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 377 B

105
apps/gallery/js/album_cover.js
Unescape View File

@ -10,6 +10,10 @@ $(document).ready(function() {
if (targetDiv) {
$(targetDiv).html('');
Albums.display(targetDiv);
$('#gallery_list').sortable({revert:true});
$('.gallery_album_box').each(function(i, e) {
$(e).draggable({connectToSortable: '#gallery_list', handle: '.dummy'})
});
} else {
alert('Error occured: no such layer `gallery_list`');
}
@ -37,9 +41,6 @@ var totalAlbums = 0;
function scanForAlbums() {
var albumCounter = 0;
var totalAlbums = 0;
$('#notification').text(t('gallery',"Scanning directories"));
$("#notification").fadeIn();
$("#notification").slideDown();
$.getJSON('ajax/galleryOp.php?operation=filescan', function(r) {
if (r.status == 'success') {
@ -48,7 +49,7 @@ function scanForAlbums() {
$('#notification').text(t('gallery', "No photos found")).fadeIn().slideDown().delay(3000).fadeOut().slideUp();
return;
}
$('#notification').text(t('gallery',"Creating thumbnails")+' ... ' + Math.floor((albumCounter/totalAlbums)*100) + "%");
$('#scanprogressbar').progressbar({ value: (albumCounter/totalAlbums)*100 }).fadeIn();
for(var a in r.paths) {
$.getJSON('ajax/galleryOp.php?operation=partial_create&path='+r.paths[a], function(r) {
@ -57,10 +58,9 @@ function scanForAlbums() {
}
albumCounter++;
$('#notification').text(t('gallery',"Creating thumbnails")+' ... ' + Math.floor((albumCounter/totalAlbums)*100) + "%");
$('#scanprogressbar').progressbar({ value: (albumCounter/totalAlbums)*100 });
if (albumCounter == totalAlbums) {
$("#notification").fadeOut();
$("#notification").slideUp();
$('#scanprogressbar').fadeOut();
var targetDiv = document.getElementById('gallery_list');
if (targetDiv) {
targetDiv.innerHTML = '';
@ -78,36 +78,71 @@ function scanForAlbums() {
}
function galleryRemove(albumName) {
if (confirm(t('gallery',"Do you wan't to remove album")+' ' + albumName + "?")) {
$.getJSON("ajax/galleryOp.php", {operation: "remove", name: albumName}, function(r) {
if (r.status == "success") {
$(".gallery_album_box").filterAttr('data-album',albumName).remove();
Albums.remove(albumName);
} else {
alert("Error: " + r.cause);
}
});
}
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$('#albumName', $("#dialog-confirm")).text(albumName);
$( '#dialog-confirm' ).dialog({
resizable: false,
height:150,
buttons: [{
text: t('gallery', 'OK'),
click: function() {
$.getJSON("ajax/galleryOp.php", {operation: "remove", name: albumName}, function(r) {
if (r.status == "success") {
$(".gallery_album_box").filterAttr('data-album',albumName).remove();
Albums.remove(albumName);
} else {
alert("Error: " + r.cause);
}
$('#dialog-confirm').dialog('close');
});
}},
{
text: t('gallery', 'Cancel'),
click: function() {
$( this ).dialog( 'close' );
}}]
});
}
function galleryRename(name) {
var result = window.prompt(t('gallery',"Input new gallery name"), name);
if(result=='' || result==name){
return;
}
if (result) {
if (Albums.find(result)) {
alert("Album named '" + result + "' already exists");
return;
}
$.getJSON("ajax/galleryOp.php", {operation: "rename", oldname: name, newname: result}, function(r) {
if (r.status == "success") {
Albums.rename($(".gallery_album_box").filterAttr('data-album',name), result);
} else {
alert("Error: " + r.cause);
}
});
}
$('#name', $('#dialog-form')).val(name);
$( "#dialog-form" ).dialog({
height: 140,
width: 350,
modal: false,
buttons: [{
text: t('gallery', 'Change name'),
click: function() {
var newname = $('#name', $('#dialog-form')).val();
if (newname == name || newname == '') {
$(this).dialog("close");
return;
}
if (Albums.find(newname)) {
alert("Album ", newname, " exists");
$(this).dialog("close");
return;
}
$.getJSON("ajax/galleryOp.php", {operation: "rename", oldname: name, newname: newname}, function(r) {
if (r.status == "success") {
Albums.rename($(".gallery_album_box").filterAttr('data-album',name), newname);
} else {
alert("Error: " + r.cause);
}
$('#dialog-form').dialog("close");
});
}
},
{
text: t('gallery', 'Cancel'),
click: function() {
$( this ).dialog( "close" );
}
}
],
});
}

11
apps/gallery/js/albums.js
Unescape View File

@ -41,16 +41,16 @@ Albums={
// displays gallery in linear representation
// on given element, and apply default styles for gallery
display: function(element) {
var displayTemplate = '<div class="gallery_album_box"><div class="gallery_control_overlay"><a href="#" class="rename">rename</a> | <a href="#" class="remove">remove</a></div><a class="view"><div class="gallery_album_cover"></div></a><h1></h1></div></div>';
var displayTemplate = '<div class="gallery_album_box"><div class="dummy"></div><a class="view"><div class="gallery_album_cover"></div></a><h1></h1><div class="gallery_album_decoration"><a><img src="img/share.png" title="Share"></a><a class="rename"><img src="img/rename.png" title="Rename"></a><a class="remove"><img src="img/delete.png" title="Delete"></a></div></div>';
for (var i in Albums.albums) {
var a = Albums.albums[i];
var local=$(displayTemplate);
local.attr('data-album',a.name);
$(".gallery_control_overlay a.rename", local).click(function(name,event){
$(".gallery_album_decoration a.rename", local).click(function(name,event){
event.preventDefault();
galleryRename(name);
}.bind(null,a.name));
$(".gallery_control_overlay a.remove", local).click(function(name,event){
$(".gallery_album_decoration a.remove", local).click(function(name,event){
event.preventDefault();
galleryRemove(name);
}.bind(null,a.name));
@ -66,8 +66,9 @@ Albums={
if (albumMetadata == undefined) {
return;
}
var x = Math.min(Math.floor((e.layerX - this.offsetLeft)/(this.offsetWidth/albumMetadata.numOfCovers)), albumMetadata.numOfCovers-1);
x *= this.offsetWidth-1;
var x = Math.floor((e.layerX - this.offsetLeft)/(this.offsetWidth/albumMetadata.numOfCovers));
x *= this.offsetWidth;
if (x < 0) x=0;
$(this).css('background-position', -x+'px 0');
});
$(element).append(local);

20
apps/gallery/templates/index.php
Unescape View File

@ -7,8 +7,24 @@ $l = new OC_L10N('gallery');
<div id="notification"><div id="gallery_notification_text">Creating thumbnails</div></div>
<div id="controls">
<input type="button" value="<?php echo $l->t('Rescan');?>" onclick="javascript:scanForAlbums();" />
<br/>
<div id="scan">
<div id="scanprogressbar"></div>
<input type="button" value="<?php echo $l->t('Rescan');?>" onclick="javascript:scanForAlbums();" />
</div>
</div>
<div id="gallery_list">
</div>
<div id="dialog-confirm" title="<?php echo $l->t('Remove confirmation');?>" style="display: none">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><?php echo $l->t('Do you want to remove album');?> <span id="albumName"></span>?</p>
</div>
<div id="dialog-form" title="<?php echo $l->t('Change album name');?>" style="display:none">
<form>
<fieldset>
<label for="name"><?php echo $l->t('New album name');?></label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>

13
apps/gallery/templates/view_album.php
Unescape View File

@ -32,3 +32,16 @@ foreach ($_['photos'] as $a) {
}
?>
</div>
<div id="dialog-confirm" title="<?php echo $l->t('Remove confirmation');?>" style="display: none">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><?php echo $l->t('Do you want to remove album');?> <span id="albumName"></span>?</p>
</div>
<div id="dialog-form" title="<?php echo $l->t('Change album name');?>" style="display:none">
<form>
<fieldset>
<label for="name"><?php echo $l->t('New album name');?></label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>

Write Preview
Loading…
Cancel
Save