From b3f3b8c23f4f07a4d38e952f4d77827380c34b58 Mon Sep 17 00:00:00 2001 From: Marvin Thomas Rabe Date: Tue, 21 Feb 2012 22:31:35 +0100 Subject: [PATCH] UI problems solved. Bookmarks app updated. --- apps/bookmarks/css/bookmarks.css | 5 ++++- apps/bookmarks/js/bookmarks.js | 3 +++ apps/bookmarks/templates/list.php | 10 ++++++---- apps/bookmarks/templates/settings.php | 2 +- apps/contacts/css/contacts.css | 4 ++-- apps/contacts/js/contacts.js | 6 +++--- apps/gallery/css/styles.css | 6 +++--- apps/media/js/collection.js | 24 +++++++++++++----------- apps/media/js/loader.js | 4 ++-- apps/media/js/music.js | 12 +++++------- apps/media/js/playlist.js | 8 ++++---- apps/media/js/scanner.js | 8 ++++---- core/css/styles.css | 9 +++++---- core/js/js.js | 22 +++++++++++----------- core/templates/layout.user.php | 4 ++-- settings/css/settings.css | 4 ++-- 16 files changed, 70 insertions(+), 61 deletions(-) diff --git a/apps/bookmarks/css/bookmarks.css b/apps/bookmarks/css/bookmarks.css index 8dfdc8a07b..499a4e9c53 100644 --- a/apps/bookmarks/css/bookmarks.css +++ b/apps/bookmarks/css/bookmarks.css @@ -1,4 +1,7 @@ -#content { overflow: auto; } +#content { overflow: auto; height: 100%; } +#firstrun { width: 80%; margin: 5em auto auto auto; text-align: center; font-weight:bold; font-size:1.5em; color:#777;} +#firstrun small { display: block; font-weight: normal; font-size: 0.5em; } +#firstrun #selections { font-size:0.8em; width: 100%; margin: 2em auto auto auto; clear: both; } .bookmarks_headline { font-size: large; diff --git a/apps/bookmarks/js/bookmarks.js b/apps/bookmarks/js/bookmarks.js index fadbbd5513..328f88a45d 100644 --- a/apps/bookmarks/js/bookmarks.js +++ b/apps/bookmarks/js/bookmarks.js @@ -35,6 +35,7 @@ function getBookmarks() { for(var i in bookmarks.data) { updateBookmarksList(bookmarks.data[i]); + $("#firstrun").hide(); } $('.bookmark_link').click(recordClick); @@ -71,6 +72,8 @@ function addOrEditBookmark(event) { var tags = encodeEntities($('#bookmark_add_tags').val()); var taglist = tags.split(' '); var tagshtml = ''; + $("#firstrun").hide(); + for ( var i=0, len=taglist.length; i' + taglist[i] + ' '; } diff --git a/apps/bookmarks/templates/list.php b/apps/bookmarks/templates/list.php index d44a0ecbcd..bd33fe457f 100644 --- a/apps/bookmarks/templates/list.php +++ b/apps/bookmarks/templates/list.php @@ -21,9 +21,11 @@

+
+
t('You have no bookmarks'); ?> -
- diff --git a/apps/bookmarks/templates/settings.php b/apps/bookmarks/templates/settings.php index a985ee9d61..41433d8476 100644 --- a/apps/bookmarks/templates/settings.php +++ b/apps/bookmarks/templates/settings.php @@ -8,7 +8,7 @@ ?>
- t('Bookmarklet:');?> t('Add page to ownCloud'); ?> + t('Bookmarklet:');?> ?output=popup&url="+c(b.location)+"&title="+c(b.title),"bkmk_popup","left="+((a.screenX||a.screenLeft)+10)+",top="+((a.screenY||a.screenTop)+10)+",height=510px,width=550px,resizable=1,alwaysRaised=1");a.setTimeout(function(){d.focus()},300)})();'>t('Add page to ownCloud'); ?>
t('Drag this to your browser bookmarks and click it, when you want to bookmark a webpage.'); ?>
diff --git a/apps/contacts/css/contacts.css b/apps/contacts/css/contacts.css index 384541f375..b24ec438f2 100644 --- a/apps/contacts/css/contacts.css +++ b/apps/contacts/css/contacts.css @@ -17,8 +17,8 @@ #contacts_propertymenu li a:hover { color: #fff } #actionbar { height: 30px; width: 200px; position: fixed; right: 0px; top: 75px; margin: 0 0 0 0; padding: 0 0 0 0;} #card { /*max-width: 70em; border: thin solid lightgray; display: block;*/ } -#firstrun { /*border: thin solid lightgray;*/ width: 80%; margin: 5em auto auto auto; text-align: center; font-weight:bold; font-size:1.5em; color:#777;} -#firstrun #selections { /*border: thin solid lightgray;*/ font-size:0.8em; width: 100%; margin: 2em auto auto auto; clear: both; } +#firstrun { width: 100%; position: absolute; top: 5em; left: 0; text-align: center; font-weight:bold; font-size:1.5em; color:#777; } +#firstrun #selections { font-size:0.8em; margin: 2em auto auto auto; clear: both; } #card input[type="text"].contacts_property,input[type="email"].contacts_property { width: 16em; } #card input[type="text"],input[type="email"],input[type="tel"],input[type="date"], select { background-color: #f8f8f8; border: 0 !important; -webkit-appearance:none !important; -moz-appearance:none !important; -webkit-box-sizing:none !important; -moz-box-sizing:none !important; box-sizing:none !important; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; float: left; } diff --git a/apps/contacts/js/contacts.js b/apps/contacts/js/contacts.js index 11661320c5..d033e3f21c 100644 --- a/apps/contacts/js/contacts.js +++ b/apps/contacts/js/contacts.js @@ -8,7 +8,7 @@ String.prototype.strip_tags = function(){ tags = this; stripped = tags.replace(/[\<\>]/gi, ""); return stripped; -} +}; Contacts={ @@ -142,7 +142,7 @@ Contacts={ } }); }); - } + }; }, loadListHandlers:function() { //$('.add,.delete').hide(); @@ -323,7 +323,7 @@ Contacts={ } }); }, - delete:function() { + delete: function() { $('#contacts_deletecard').tipsy('hide'); $.getJSON('ajax/deletecard.php',{'id':this.id},function(jsondata){ if(jsondata.status == 'success'){ diff --git a/apps/gallery/css/styles.css b/apps/gallery/css/styles.css index c039cd5ec0..da94f9ac9e 100644 --- a/apps/gallery/css/styles.css +++ b/apps/gallery/css/styles.css @@ -1,8 +1,8 @@ -div#gallery_list { margin: 70pt 20pt 0 20pt; } +div#gallery_list { margin: 4.5em 2em 0 2em; } div#gallery_list.leftcontent { padding-top: 15pt; margin: 0; position: absolute; bottom:0px; text-align: center; overflow: auto; } -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 { width: 200px; position:relative; text-align: center; border: 0; display: inline-block; margin: 5pt; vertical-align: top; padding: 5px 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_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_decoration { width: 200px; position: absolute; border: 0; height: 20px; top: 5px; 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;} diff --git a/apps/media/js/collection.js b/apps/media/js/collection.js index 2249acf3cc..753785f77b 100644 --- a/apps/media/js/collection.js +++ b/apps/media/js/collection.js @@ -1,3 +1,5 @@ +var initScanned = false; + Collection={ artists:[], albums:[], @@ -68,10 +70,10 @@ Collection={ for(var i=0;i0){ var tr=template.clone().removeClass('template'); @@ -108,7 +108,7 @@ Collection={ $('tr[data-artist="'+artist.name+'"]').addClass('active'); }); if(artist.songs.length>1){ - var expander=$('>'); + expander=$('>'); expander.data('expanded',false); expander.click(function(event){ var tr=$(this).parent().parent(); @@ -136,10 +136,11 @@ Collection={ var first=true; $.each(artist.albums,function(j,album){ $.each(album.songs,function(i,song){ + var newRow; if(first){ newRow=tr; }else{ - var newRow=tr.clone(); + newRow=tr.clone(); newRow.find('td.artist').text(''); newRow.find('.expander').remove(); } @@ -221,13 +222,14 @@ Collection={ tr.find('td.album-expander a.expander').addClass('expanded'); tr.find('td.album-expander a.expander').text('v'); $.each(albumData.songs,function(i,song){ + var newRow; if(i>0){ - var newRow=tr.clone(); + newRow=tr.clone(); newRow.find('a.expander').remove(); newRow.find('td.album a').text(''); newRow.find('td.artist a').text(''); }else{ - var newRow=tr; + newRow=tr; } newRow.find('td.title a').text(song.name); newRow.find('td.title a').click(function(event){ @@ -339,11 +341,11 @@ Collection={ path:song.song_path, playCount:song.song_playcount, }; - album.songs.push(songData) + album.songs.push(songData); artist.songs.push(songData); Collection.songs.push(songData); } -} +}; $(document).ready(function(){ Collection.parent=$('#collection'); diff --git a/apps/media/js/loader.js b/apps/media/js/loader.js index 055f858ae1..a832180d1e 100644 --- a/apps/media/js/loader.js +++ b/apps/media/js/loader.js @@ -1,7 +1,7 @@ function musicTypeFromFile(file){ var extention=file.substr(file.indexOf('.')+1); if(extention=='ogg'){ - return 'oga' + return 'oga'; } //TODO check for more specific cases return extention; @@ -39,7 +39,7 @@ function loadPlayer(type,ready){ } $(document).ready(function() { - loadPlayer.done=false + loadPlayer.done=false; // FileActions.register('audio','Add to playlist','',addAudio); // FileActions.register('application/ogg','Add to playlist','',addAudio); diff --git a/apps/media/js/music.js b/apps/media/js/music.js index 3373cbac25..1ffe4e1008 100644 --- a/apps/media/js/music.js +++ b/apps/media/js/music.js @@ -16,7 +16,7 @@ $(document).ready(function(){ PlayList.render(); }); var button=$(''); - button.css('background-image','url('+OC.imagePath('core','actions/play-add')+')') + button.css('background-image','url('+OC.imagePath('core','actions/play-add')+')'); button.click(function(event){ event.stopPropagation(); PlayList.add(media); @@ -24,7 +24,7 @@ $(document).ready(function(){ }); row.find('div.name').append(button); button.tipsy({gravity:'n', fade:true, delayIn: 400, live:true}); - } + }; Collection.display(); Collection.load(function(){ @@ -34,11 +34,9 @@ $(document).ready(function(){ PlayList.add(song); PlayList.play(0); } - }) + }); }); - - function getUrlVars(){ var vars = {}, hash; var hashes = window.location.hash.substr(1).split('&'); @@ -52,8 +50,8 @@ function getUrlVars(){ function musicTypeFromFile(file){ var extention=file.split('.').pop(); if(extention=='ogg'){ - return 'oga' + return 'oga'; } //TODO check for more specific cases return extention; -} \ No newline at end of file +} diff --git a/apps/media/js/playlist.js b/apps/media/js/playlist.js index 089065989a..8e9e2a9153 100644 --- a/apps/media/js/playlist.js +++ b/apps/media/js/playlist.js @@ -26,19 +26,19 @@ PlayList.render=function(){ li.click(function(event){ PlayList.play($(this).data('index')); }); - li.append(img) + li.append(img); li.data('index',i); li.addClass('song'); PlayList.parent.append(li); } $(".jp-playlist-" + PlayList.current).addClass("collection_playing"); -} +}; PlayList.getSelected=function(){ return $('tbody td.name input:checkbox:checked').parent().parent(); -} +}; PlayList.hide=function(){ $('#playlist').hide(); -} +}; $(document).ready(function(){ PlayList.parent=$('#leftcontent'); diff --git a/apps/media/js/scanner.js b/apps/media/js/scanner.js index 0baa9db419..6c991b60d5 100644 --- a/apps/media/js/scanner.js +++ b/apps/media/js/scanner.js @@ -6,7 +6,7 @@ Scanner={ $.getJSON(OC.linkTo('media','ajax/api.php')+'?action=find_music',function(songs){ Scanner.songsFound=songs.length; if(ready){ - ready(songs) + ready(songs); } }); }, @@ -24,13 +24,13 @@ Scanner={ Scanner.songsScanned=data.count; $('#scan span.songCount').text(Scanner.songsScanned); var progress=(Scanner.songsScanned/Scanner.songsFound)*100; - $('#scanprogressbar').progressbar('value',progress) + $('#scanprogressbar').progressbar('value',progress); }); Scanner.eventSource.listen('done',function(count){ $('#scan input.start').show(); $('#scan input.stop').hide(); $('#scanprogressbar').hide(); - Collection.load(Collection.display) + Collection.load(Collection.display); if(ready){ ready(); } @@ -41,4 +41,4 @@ Scanner={ Scanner.close(); }, -} +}; diff --git a/core/css/styles.css b/core/css/styles.css index 53af8b383e..335b008ffd 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -3,6 +3,7 @@ See the COPYING-README file. */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; } +html, body { height: 100%; } article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; } body { line-height:1.5; } table { border-collapse:separate; border-spacing:0; white-space:nowrap; } @@ -55,11 +56,11 @@ input[type="submit"].highlight{ background:#ffc100; border:1px solid #db0; text- /* CONTENT ------------------------------------------------------------------ */ #controls { padding: 0 0.5em; width:100%; top:3.5em; height:2.8em; margin:0; background:#f7f7f7; border-bottom:1px solid #eee; position:fixed; z-index:50; -moz-box-shadow:0 -3px 7px #000; -webkit-box-shadow:0 -3px 7px #000; box-shadow:0 -3px 7px #000; } #controls .button { display:inline-block; } -#content { margin:3.5em 0 0 12.5em; } +#content { top: 3.5em; left: 12.5em; position: absolute; } #leftcontent, .leftcontent { position:fixed; overflow: auto; top:6.4em; width:20em; background:#f8f8f8; border-right:1px solid #ddd; } #leftcontent li, .leftcontent li { background:#f8f8f8; padding:.3em .8em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-transition:background-color 500ms; -moz-transition:background-color 500ms; -o-transition:background-color 500ms; transition:background-color 500ms; } #leftcontent li:hover, #leftcontent li:active, #leftcontent li.active, .leftcontent li:hover, .leftcontent li:active, .leftcontent li.active { background:#eee; } -#rightcontent, .rightcontent { position:absolute; top:6.4em; left:33em; } +#rightcontent, .rightcontent { position:fixed; top: 6.4em; left: 32.5em; } /* LOG IN & INSTALLATION ------------------------------------------------------------ */ @@ -113,8 +114,8 @@ table:not(.nostyle) tr { -webkit-transition:background-color 500ms; -moz-transit tbody tr:hover, tr:active { background-color:#f8f8f8; } #body-settings .personalblock, #body-settings .helpblock { padding:.5em 1em; margin:1em; background:#f8f8f8; color:#555; text-shadow:#fff 0 1px 0; -moz-border-radius:.5em; -webkit-border-radius:.5em; border-radius:.5em; } -#body-settings .personalblock#quota { position:relative; margin-top:4.5em; padding:0; } -#body-settings #controls+.helpblock { position:relative; margin-top:7.3em; } +#body-settings .personalblock#quota { position:relative; padding:0; } +#body-settings #controls+.helpblock { position:relative; margin-top: 3em; } .personalblock > legend { margin-top:2em; } #quota div, div.jp-play-bar, div.jp-seek-bar { padding:0; background:#e6e6e6; font-weight:normal; white-space:nowrap; -moz-border-radius-bottomleft:.4em; -webkit-border-bottom-left-radius:.4em; border-bottom-left-radius:.4em; -moz-border-radius-topleft:.4em; -webkit-border-top-left-radius:.4em; border-top-left-radius:.4em; } diff --git a/core/js/js.js b/core/js/js.js index c6cde3cea9..6da9c29e69 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -13,7 +13,7 @@ function t(app,text){ success:function(jsondata){ t.cache[app] = jsondata.data; }, - }) + }); // Bad answer ... if( !( app in t.cache )){ @@ -58,7 +58,7 @@ OC={ } link+=app; if(type){ - link+=type+'/' + link+=type+'/'; } link+=file; return link; @@ -73,7 +73,7 @@ OC={ */ imagePath:function(app,file){ if(file.indexOf('.')==-1){//if no extention is given, use png or svg depending on browser support - file+=(SVGSupport())?'.svg':'.png' + file+=(SVGSupport())?'.svg':'.png'; } return OC.filePath(app,'img',file); }, @@ -126,7 +126,7 @@ OC={ }); } } -} +}; OC.search.customResults={}; OC.search.currentResult=-1; OC.search.lastQuery=''; @@ -147,7 +147,7 @@ if(typeof localStorage !='undefined'){ getItem:function(name){ return JSON.parse(localStorage.getItem(OC.localStorage.namespace+name)); } - } + }; }else{ //dummy localstorage OC.localStorage={ @@ -160,7 +160,7 @@ if(typeof localStorage !='undefined'){ getItem:function(name){ return null; } - } + }; } /** @@ -182,7 +182,7 @@ if (!Array.prototype.filter) { } } return res; - } + }; } /** * implement Array.indexOf for browsers without native support @@ -235,11 +235,11 @@ SVGSupport.checkMimeType=function(){ }); if(headers["Content-Type"]!='image/svg+xml'){ replaceSVG(); - SVGSupport.checkMimeType.correct=false + SVGSupport.checkMimeType.correct=false; } } }); -} +}; SVGSupport.checkMimeType.correct=true; //replace all svg images with png for browser compatibility @@ -305,11 +305,12 @@ $(document).ready(function(){ $(window).resize(function () { fillHeight($('#leftcontent')); + fillWindow($('#content')); fillWindow($('#rightcontent')); }); $(window).trigger('resize'); - if(!SVGSupport()){//replace all svg images with png images for browser that dont support svg + if(!SVGSupport()){ //replace all svg images with png images for browser that dont support svg replaceSVG(); }else{ SVGSupport.checkMimeType(); @@ -379,7 +380,6 @@ $(document).ready(function(){ } }); - if($('body').attr("id")=="body-user") { $('#settings #expanddiv').hide(); } $('#settings #expand').click(function(event) { $('#settings #expanddiv').slideToggle(); event.stopPropagation(); diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 64353d4d4f..c048653cce 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -44,8 +44,8 @@
    <?php echo $l->t('Settings');?> - t('Settings');?> -
    + t('Settings');?> +
    >
  • class="active">
    • diff --git a/settings/css/settings.css b/settings/css/settings.css index 8d89cee6ec..a8af839a1e 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -26,9 +26,9 @@ tr:hover>td.password>span { margin:0; cursor:pointer; } tr:hover>td.remove>img, tr:hover>td.password>img, tr:hover>td.quota>img { visibility:visible; cursor:pointer; } tr:hover>td.remove>img { float:right; } li.selected { background-color:#ddd; } -#content>table:not(.nostyle) { margin-top:6.5em; } +#content>table:not(.nostyle) { margin-top:3em; } table:not(.nostyle) { width:100%; } - +#rightcontent { padding-left: 1em; } /* APPS */ li { color:#888; }