Merge pull request #7817 from owncloud/app-navigation-for-apps
Makes #app-navigation a part of app management.
This commit is contained in:
commit
bd2cf6ee29
4 changed files with 50 additions and 60 deletions
|
@ -29,10 +29,14 @@
|
|||
-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: #ddd;
|
||||
}
|
||||
#app-navigation li:hover > a,
|
||||
#app-navigation .selected,
|
||||
#app-navigation .selected a {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
/* special rules for first-level entries and folders */
|
||||
#app-navigation > ul > li {
|
||||
|
|
|
@ -57,13 +57,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;
|
||||
|
@ -101,30 +95,21 @@ 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;
|
||||
#app-navigation {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
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; }
|
||||
|
||||
|
|
|
@ -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 ul 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 ul 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 =
|
||||
$('<li data-id="' + appdata.id + '" data-type="external" data-installed="0">'
|
||||
+ '<a class="app externalapp" href="' + OC.filePath('settings', 'apps', 'index.php') + '&appid=' + appdata.id+'">'
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -7,32 +7,33 @@
|
|||
src="<?php print_unescaped(OC_Helper::linkToRoute('apps_custom'));?>?appid=<?php p($_['appid']); ?>"></script>
|
||||
<script type="text/javascript" src="<?php print_unescaped(OC_Helper::linkTo('settings/js', 'apps.js'));?>"></script>
|
||||
|
||||
<div id="app-navigation">
|
||||
<ul class="applist">
|
||||
<?php if(OC_Config::getValue('appstoreenabled', true) === true): ?>
|
||||
<li>
|
||||
<a class="app-external" target="_blank" href="http://owncloud.org/dev"><?php p($l->t('Add your App'));?> …</a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
|
||||
<ul id="leftcontent" class="applist">
|
||||
<?php if(OC_Config::getValue('appstoreenabled', true) === true): ?>
|
||||
<li>
|
||||
<a class="app-external" target="_blank" href="http://owncloud.org/dev"><?php p($l->t('Add your App'));?> …</a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
<?php foreach($_['apps'] as $app):?>
|
||||
<li <?php if($app['active']) print_unescaped('class="active"')?> data-id="<?php p($app['id']) ?>"
|
||||
<?php if ( isset( $app['ocs_id'] ) ) { print_unescaped("data-id-ocs=\"{".OC_Util::sanitizeHTML($app['ocs_id'])."}\""); } ?>
|
||||
data-type="<?php p($app['internal'] ? 'internal' : 'external') ?>" data-installed="1">
|
||||
<a class="app<?php if(!$app['internal']) p(' externalapp') ?>"
|
||||
href="?appid=<?php p($app['id']) ?>"><?php p($app['name']) ?></a>
|
||||
<?php if(!$app['internal'])
|
||||
print_unescaped('<small class="'.OC_Util::sanitizeHTML($app['internalclass']).' list">'.OC_Util::sanitizeHTML($app['internallabel']).'</small>') ?>
|
||||
</li>
|
||||
<?php endforeach;?>
|
||||
|
||||
<?php foreach($_['apps'] as $app):?>
|
||||
<li <?php if($app['active']) print_unescaped('class="active"')?> data-id="<?php p($app['id']) ?>"
|
||||
<?php if ( isset( $app['ocs_id'] ) ) { print_unescaped("data-id-ocs=\"{".OC_Util::sanitizeHTML($app['ocs_id'])."}\""); } ?>
|
||||
data-type="<?php p($app['internal'] ? 'internal' : 'external') ?>" data-installed="1">
|
||||
<a class="app<?php if(!$app['internal']) p(' externalapp') ?>"
|
||||
href="?appid=<?php p($app['id']) ?>"><?php p($app['name']) ?></a>
|
||||
<?php if(!$app['internal'])
|
||||
print_unescaped('<small class="'.OC_Util::sanitizeHTML($app['internalclass']).' list">'.OC_Util::sanitizeHTML($app['internallabel']).'</small>') ?>
|
||||
</li>
|
||||
<?php endforeach;?>
|
||||
|
||||
<?php if(OC_Config::getValue('appstoreenabled', true) === true): ?>
|
||||
<li>
|
||||
<a class="app-external" target="_blank" href="http://apps.owncloud.com"><?php p($l->t('More Apps'));?> …</a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
<div id="rightcontent">
|
||||
<?php if(OC_Config::getValue('appstoreenabled', true) === true): ?>
|
||||
<li>
|
||||
<a class="app-external" target="_blank" href="http://apps.owncloud.com"><?php p($l->t('More Apps'));?> …</a>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="app-content">
|
||||
<div class="appinfo">
|
||||
<h3><strong><span class="name"><?php p($l->t('Select an App'));?></span></strong><span
|
||||
class="version"></span><small class="externalapp" style="visibility:hidden;"></small></h3>
|
||||
|
|
Loading…
Reference in a new issue