@ -22,7 +22,7 @@
< template >
< Content app -name = " settings "
: class = "{ 'with-app-sidebar': currentA pp}"
: class = "{ 'with-app-sidebar': a pp}"
: content - class = "{ 'icon-loading': loadingList }"
: navigation - class = "{ 'icon-loading': loading }" >
< AppNavigation >
@ -87,15 +87,70 @@
< / template >
< / AppNavigation >
< AppContent class = "app-settings-content" : class = "{ 'icon-loading': loadingList }" >
< AppList :category ="category" :app ="currentA pp" :search ="searchQuery" / >
< AppList :category ="category" :app ="a pp" :search ="searchQuery" / >
< / AppContent >
< AppSidebar v-if ="id && currentApp" @close="hideAppDetails" >
< AppDetails :category ="category" :app ="currentApp" / >
< AppSidebar
v - if = "id && app"
v - bind = "appSidebar"
: class = "{'app-sidebar--without-background': !appSidebar.background}"
@ close = "hideAppDetails" >
< template v -if = " ! appSidebar.background " # header >
< div class = "app-sidebar-header__figure--default-app-icon icon-settings-dark" / >
< / template >
< template # primary -actions >
< div v-if ="app.level === 300 || app.level === 200 || hasRating" class="app-level" >
< span v -if = " app.level = = = 300 "
v - tooltip . auto = "t('settings', 'This app is supported via your current Nextcloud subscription.')"
class = "supported icon-checkmark-color" >
{ { t ( 'settings' , 'Supported' ) } } < / span >
< span v -if = " app.level = = = 200 "
v - tooltip . auto = "t('settings', 'Featured apps are developed by and within the community. They offer central functionality and are ready for production use.')"
class = "official icon-checkmark" >
{ { t ( 'settings' , 'Featured' ) } } < / span >
< AppScore v -if = " hasRating " :score ="app.appstoreData.ratingOverall" / >
< / div >
< / template >
< template # secondary -actions >
< ActionButton v -if = " app.update "
: disabled = "installing || isLoading"
icon = "icon-download"
@ click = "update(app.id)" >
{ { t ( 'settings' , 'Update to {version}' , { version : app . update } ) } }
< / ActionButton >
< ActionButton v -if = " app.canUnInstall "
: disabled = "installing || isLoading"
icon = "icon-delete"
@ click = "remove(app.id)" >
{ { t ( 'settings' , 'Remove' ) } }
< / ActionButton >
< ActionButton v -if = " app.active "
: disabled = "installing || isLoading"
icon = "icon-close"
@ click = "disable(app.id)" >
{ { t ( 'settings' , 'Disable' ) } }
< / ActionButton >
< ActionButton v -if = " ! app.active & & ( app.canInstall | | app.isCompatible ) "
v - tooltip . auto = "enableButtonTooltip"
: disabled = "!app.canInstall || installing || isLoading"
icon = "icon-checkmark"
@ click = "enable(app.id)" >
{ { enableButtonText } }
< / ActionButton >
< ActionButton v -else -if = " ! app.active "
v - tooltip . auto = "forceEnableButtonTooltip"
: disabled = "installing || isLoading"
icon = "icon-checkmark"
@ click = "forceEnable(app.id)" >
{ { forceEnableButtonText } }
< / ActionButton >
< / template >
< AppDetails :category ="category" :app ="app" / >
< / AppSidebar >
< / Content >
< / template >
< script >
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
@ -108,12 +163,14 @@ import VueLocalStorage from 'vue-localstorage'
import AppList from '../components/AppList'
import AppDetails from '../components/AppDetails'
import AppManagement from '../mixins/AppManagement'
Vue . use ( VueLocalStorage )
export default {
name : 'Apps' ,
components : {
ActionButton ,
AppContent ,
AppDetails ,
AppList ,
@ -124,6 +181,7 @@ export default {
AppSidebar ,
Content ,
} ,
mixins : [ AppManagement ] ,
props : {
category : {
type : String ,
@ -146,7 +204,7 @@ export default {
loadingList ( ) {
return this . $store . getters . loading ( 'list' )
} ,
currentA pp( ) {
a pp( ) {
return this . apps . find ( app => app . id === this . id )
} ,
categories ( ) {
@ -161,6 +219,30 @@ export default {
settings ( ) {
return this . $store . getters . getServerData
} ,
/ / s i d e b a r a p p b i n d i n g
appSidebar ( ) {
const author = Array . isArray ( this . app . author )
? this . app . author [ 0 ] [ '@value' ]
? this . app . author . map ( author => author [ '@value' ] ) . join ( ', ' )
: this . app . author . join ( ', ' )
: this . app . author [ '@value' ]
? this . app . author [ '@value' ]
: this . app . author
const license = t ( 'settings' , '{license}-licensed' , { license : ( '' + this . app . licence ) . toUpperCase ( ) } )
const subtitle = t ( 'settings' , 'by {author}\n{license}' , { author , license } )
return {
subtitle ,
background : this . app . screenshot
? this . app . screenshot
: this . app . preview ,
compact : ! this . app . screenshot ,
title : this . app . name ,
}
} ,
} ,
watch : {
category ( val , old ) {
@ -195,3 +277,43 @@ export default {
} ,
}
< / script >
< style lang = "scss" scoped >
# app - sidebar : : v - deep {
& : not ( . app - sidebar -- without - background ) {
/ / w i t h f u l l s c r e e n s h o t , l e t ' s f i l l t h e f i g u r e
: not ( . app - sidebar - header -- compact ) . app - sidebar - header _ _figure {
background - size : cover
}
/ / r e v e r t s i d e b a r a p p i c o n s o i t i s b l a c k
. app - sidebar - header -- compact . app - sidebar - header _ _figure {
filter : invert ( 1 ) ;
background - size : 32 px ;
}
}
/ / d e f a u l t i c o n s l o t s t y l i n g
& . app - sidebar -- without - background {
. app - sidebar - header _ _figure {
display : flex ;
align - items : center ;
justify - content : center ;
& -- default - app - icon {
height : 32 px ;
width : 32 px ;
background - size : 32 px ;
}
}
}
/ / a l l o w m u l t i l i n e s u b t i t l e f o r t h e l i c e n s e
. app - sidebar - header _ _subtitle {
white - space : pre - line ! important ;
line - height : 16 px ;
overflow : visible ! important ;
height : 22 px ;
}
}
< / style >
John Molakvoæ (skjnldsv)
6 years ago