From 59d1ee565e66a0394e2cf1d59bde125cb2e70a48 Mon Sep 17 00:00:00 2001 From: raghunayyar Date: Thu, 20 Mar 2014 13:34:50 +0530 Subject: [PATCH 1/5] Makes #app-navigation a part of app management. --- settings/css/settings.css | 26 +++----------------- settings/js/apps.js | 26 ++++++++++---------- settings/templates/apps.php | 49 +++++++++++++++++++------------------ 3 files changed, 42 insertions(+), 59 deletions(-) diff --git a/settings/css/settings.css b/settings/css/settings.css index a47e7bf656..d7d8b0aede 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -62,13 +62,7 @@ tr:hover>td.password>span, tr:hover>td.displayName>span { margin:0; cursor:point tr:hover>td.remove>a, tr:hover>td.password>img,tr:hover>td.displayName>img, tr:hover>td.quota>img { visibility:visible; cursor:pointer; } tr:hover>td.remove>a { float:right; } -li.selected, -#leftcontent li.selected { - background-color: #ddd; -} - table.grid { width:100%; } -#rightcontent { padding-left: 10px; } div.quota { float: right; display: block; @@ -106,30 +100,18 @@ select.quota.active { background: #fff; } /* APPS */ .appinfo { margin: 1em 40px; } h3 { font-size: 1.4em; font-weight: bold; } -ul.applist a { - height: 2.2em; - padding: 0.2em 0.2em 0.2em 0.8em !important; -} -ul.applist .app-external { - width: 100%; -} -li { color:#888; } -li.active { color:#000; } -#leftcontent .appwarning { +#app-navigation .appwarning { background: #fcc; } -#leftcontent .appwarning:hover { +#app-navigation.appwarning:hover { background: #fbb; } small.externalapp { color:#FFF; background-color:#BBB; font-weight:bold; font-size: 0.6em; margin: 0; padding: 0.1em 0.2em; border-radius: 4px;} -small.externalapp.list { float: right; } small.recommendedapp { color:#FFF; background-color:#888; font-weight:bold; font-size: 0.6em; margin: 0; padding: 0.1em 0.2em; border-radius: 4px;} -small.recommendedapp.list { float: right; } +small.externalapp.list, small.recommendedapp.list { position: absolute; right: 10px; top: 12px; } span.version { margin-left:1em; margin-right:1em; color:#555; } -.app { position: relative; display: inline-block; padding: 0.2em 0 0.2em 0 !important; text-overflow: hidden; overflow: hidden; white-space: nowrap; /*transition: .2s max-width linear; -o-transition: .2s max-width linear; -moz-transition: .2s max-width linear; -webkit-transition: .2s max-width linear; -ms-transition: .2s max-width linear;*/ } -.app.externalapp { max-width: 12.5em; } -.app.recommendedapp { max-width: 12.5em; } + /* Transition to complete width! */ .app:hover, .app:active { max-width: inherit; } diff --git a/settings/js/apps.js b/settings/js/apps.js index 3dbc8a2f7c..f151a034a8 100644 --- a/settings/js/apps.js +++ b/settings/js/apps.js @@ -8,7 +8,7 @@ OC.Settings = OC.Settings || {}; OC.Settings.Apps = OC.Settings.Apps || { loadApp:function(app) { - var page = $('#rightcontent'); + var page = $('#app-content'); page.find('p.license').show(); page.find('span.name').text(app.name); page.find('small.externalapp').text(app.internallabel); @@ -82,16 +82,16 @@ OC.Settings.Apps = OC.Settings.Apps || { page.find('p.appslink').hide(); page.find('span.score').hide(); } - if (typeof($('#leftcontent li[data-id="'+app.id+'"]').data('errormsg')) !== "undefined") { + if (typeof($('#app-navigation li[data-id="'+app.id+'"]').data('errormsg')) !== "undefined") { page.find(".warning").show(); - page.find(".warning").text($('#leftcontent li[data-id="'+app.id+'"]').data('errormsg')); + page.find(".warning").text($('#app-navigation li[data-id="'+app.id+'"]').data('errormsg')); } else { page.find(".warning").hide(); } }, enableApp:function(appid, active, element) { console.log('enableApp:', appid, active, element); - var appitem=$('#leftcontent li[data-id="'+appid+'"]'); + var appitem=$('#app-navigation ul li[data-id="'+appid+'"]'); element.val(t('settings','Please wait....')); if(active) { $.post(OC.filePath('settings','ajax','disableapp.php'),{appid:appid},function(result) { @@ -160,7 +160,7 @@ OC.Settings.Apps = OC.Settings.Apps || { }, insertApp:function(appdata) { - var applist = $('#leftcontent li'); + var applist = $('#app-navigation ul li'); var app = $('
  • ' + '' @@ -242,30 +242,30 @@ OC.Settings.Apps = OC.Settings.Apps || { }; $(document).ready(function(){ - $('#leftcontent li').each(function(index,li){ + $('#app-navigation ul li').each(function(index,li){ var app = OC.get('appData_'+$(li).data('id')); $(li).data('app',app); $(this).find('span.hidden').remove(); }); - $('#leftcontent li').keydown(function(event) { + $('#app-navigation ul li').keydown(function(event) { if (event.which === 13 || event.which === 32) { $(event.target).click(); } return false; }); - $(document).on('click', '#leftcontent', function(event){ + $(document).on('click', '#app-navigation', function(event){ var tgt = $(event.target); if (tgt.is('li') || tgt.is('a')) { var item = tgt.is('li') ? $(tgt) : $(tgt).parent(); var app = item.data('app'); OC.Settings.Apps.loadApp(app); - $('#leftcontent .selected').removeClass('selected'); + $('#app-navigation .selected').removeClass('selected'); item.addClass('selected'); } return false; }); - $('#rightcontent input.enable').click(function(){ + $('#app-content input.enable').click(function(){ var element = $(this); var appid=$(this).data('appid'); var active=$(this).data('active'); @@ -273,7 +273,7 @@ $(document).ready(function(){ OC.Settings.Apps.enableApp(appid, active, element); } }); - $('#rightcontent input.update').click(function(){ + $('#app-content input.update').click(function(){ var element = $(this); var appid=$(this).data('appid'); if(appid) { @@ -282,11 +282,11 @@ $(document).ready(function(){ }); if(appid) { - var item = $('#leftcontent li[data-id="'+appid+'"]'); + var item = $('#app-navigation ul li[data-id="'+appid+'"]'); if(item) { item.trigger('click'); item.addClass('active'); - $('#leftcontent').animate({scrollTop: $(item).offset().top-70}, 'slow','swing'); + $('#app-navigation').animate({scrollTop: $(item).offset().top-70}, 'slow','swing'); } } }); diff --git a/settings/templates/apps.php b/settings/templates/apps.php index 4c77c62f51..b7f3b6121a 100644 --- a/settings/templates/apps.php +++ b/settings/templates/apps.php @@ -7,32 +7,33 @@ src="?appid="> +
    + +
    +

    t('Select an App'));?>

    From 3d8ce8104f134d8c53bedc62ef9e0fcbb9e03465 Mon Sep 17 00:00:00 2001 From: raghunayyar Date: Mon, 24 Mar 2014 17:59:53 +0530 Subject: [PATCH 2/5] Adds Style changes to app-navigation in core/css/apps.css --- core/css/apps.css | 13 +++++++++++-- settings/js/apps.js | 4 ++-- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/core/css/apps.css b/core/css/apps.css index 0e6a080c9c..5bfc2d4a08 100644 --- a/core/css/apps.css +++ b/core/css/apps.css @@ -29,10 +29,19 @@ -moz-box-sizing: border-box; box-sizing: border-box; } #app-navigation .active, -#app-navigation .active a, -#app-navigation li:hover > a { +#app-navigation .active a { + background-color: #eee; +} +#app-navigation li:hover > a { background-color: #ddd; } +#app-navigation .active { + font-weight:700; +} +#app-navigation .selected, +#app-navigation .selected a { + background-color:#ddd; +} /* special rules for first-level entries and folders */ #app-navigation > ul > li { diff --git a/settings/js/apps.js b/settings/js/apps.js index f151a034a8..05db4c9a04 100644 --- a/settings/js/apps.js +++ b/settings/js/apps.js @@ -82,9 +82,9 @@ OC.Settings.Apps = OC.Settings.Apps || { page.find('p.appslink').hide(); page.find('span.score').hide(); } - if (typeof($('#app-navigation li[data-id="'+app.id+'"]').data('errormsg')) !== "undefined") { + if (typeof($('#app-navigation ul li[data-id="'+app.id+'"]').data('errormsg')) !== "undefined") { page.find(".warning").show(); - page.find(".warning").text($('#app-navigation li[data-id="'+app.id+'"]').data('errormsg')); + page.find(".warning").text($('#app-navigation ul li[data-id="'+app.id+'"]').data('errormsg')); } else { page.find(".warning").hide(); } From 881c66df52cba16df17297a88978297231d1d7d9 Mon Sep 17 00:00:00 2001 From: raghunayyar Date: Sun, 30 Mar 2014 15:48:47 +0530 Subject: [PATCH 3/5] Removes highlighting of selected items, padding from apps management. --- core/css/apps.css | 3 --- settings/css/settings.css | 3 +++ 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/core/css/apps.css b/core/css/apps.css index 5bfc2d4a08..9e48e28fce 100644 --- a/core/css/apps.css +++ b/core/css/apps.css @@ -35,9 +35,6 @@ #app-navigation li:hover > a { background-color: #ddd; } -#app-navigation .active { - font-weight:700; -} #app-navigation .selected, #app-navigation .selected a { background-color:#ddd; diff --git a/settings/css/settings.css b/settings/css/settings.css index d7d8b0aede..50e3eacbc1 100644 --- a/settings/css/settings.css +++ b/settings/css/settings.css @@ -100,6 +100,9 @@ select.quota.active { background: #fff; } /* APPS */ .appinfo { margin: 1em 40px; } h3 { font-size: 1.4em; font-weight: bold; } +#app-navigation { + padding-bottom: 0px; +} #app-navigation .appwarning { background: #fcc; } From 8bd308ffedec77f1dd4b7ddaf588c7a4029ea34f Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Mon, 31 Mar 2014 13:51:53 +0200 Subject: [PATCH 4/5] merge CSS rules --- core/css/apps.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/core/css/apps.css b/core/css/apps.css index 9e48e28fce..5899aa0909 100644 --- a/core/css/apps.css +++ b/core/css/apps.css @@ -32,12 +32,10 @@ #app-navigation .active a { background-color: #eee; } -#app-navigation li:hover > a { - background-color: #ddd; -} +#app-navigation li:hover > a, #app-navigation .selected, #app-navigation .selected a { - background-color:#ddd; + background-color: #ddd; } /* special rules for first-level entries and folders */ From 0d2a81a0959576f02a0d82bc1efba88ee7bb09d0 Mon Sep 17 00:00:00 2001 From: Morris Jobke Date: Tue, 1 Apr 2014 10:48:55 +0200 Subject: [PATCH 5/5] apply proposed change --- core/css/apps.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/css/apps.css b/core/css/apps.css index 5899aa0909..836d36d8b8 100644 --- a/core/css/apps.css +++ b/core/css/apps.css @@ -30,12 +30,12 @@ } #app-navigation .active, #app-navigation .active a { - background-color: #eee; + background-color: #ddd; } #app-navigation li:hover > a, #app-navigation .selected, #app-navigation .selected a { - background-color: #ddd; + background-color: #ccc; } /* special rules for first-level entries and folders */