Skip to content

Commit

Permalink
Create right table view
Browse files Browse the repository at this point in the history
Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
  • Loading branch information
JuliaKirschenheuter authored and AndyScherzinger committed Sep 4, 2023
1 parent 9053eea commit bb218d2
Show file tree
Hide file tree
Showing 9 changed files with 112 additions and 50 deletions.
2 changes: 1 addition & 1 deletion apps/settings/css/settings.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion apps/settings/css/settings.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 1 addition & 9 deletions apps/settings/css/settings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -842,10 +842,6 @@ span.version {
overflow: hidden;
}

.app-name, .app-version, .app-score, .app-level {
display: inline-block;
}

.app-description-toggle-show, .app-description-toggle-hide {
clear: both;
padding: 7px 0;
Expand Down Expand Up @@ -918,7 +914,6 @@ span.version {
display: table;
width: 100%;
height: auto;
margin-top: $toolbar-height;
}

margin-bottom: 100px;
Expand Down Expand Up @@ -1042,7 +1037,6 @@ span.version {

/* Bundle header */
.apps-header {
display: table-row;
position: relative;

div {
Expand All @@ -1051,11 +1045,9 @@ span.version {
}

h2 {
display: table-cell;
position: absolute;
padding-left: 6px;
padding-top: 15px;

margin-bottom: 12px;
.enable {
position: relative;
top: -1px;
Expand Down
86 changes: 68 additions & 18 deletions apps/settings/src/components/AppList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -38,35 +38,71 @@
{{ t('settings', 'All apps are up-to-date.') }}
</div>

<transition-group name="app-list" tag="div" class="apps-list-container">
<transition-group name="app-list" tag="table" class="apps-list-container">
<tr key="app-list-view-header" class="apps-header">
<th class="app-image">
<span class="hidden-visually">{{ t('settings', 'Icon') }}</span>
</th>
<th class="app-name">
<span class="hidden-visually">{{ t('settings', 'Name') }}</span>
</th>
<th class="app-version">
<span class="hidden-visually">{{ t('settings', 'Version') }}</span>
</th>
<th class="app-level">
<span class="hidden-visually">{{ t('settings', 'Level') }}</span>
</th>
<th class="actions">
<span class="hidden-visually">{{ t('settings', 'Actions') }}</span>
</th>
</tr>
<AppItem v-for="app in apps"
:key="app.id"
:app="app"
:category="category" />
</transition-group>
</template>

<transition-group v-if="useBundleView"
name="app-list"
tag="div"
<table v-if="useBundleView"
class="apps-list-container">
<tr key="app-list-view-header" class="apps-header">
<th id="app-table-col-icon" class="app-image">
<span class="hidden-visually">{{ t('settings', 'Icon') }}</span>
</th>
<th id="app-table-col-name" class="app-name">
<span class="hidden-visually">{{ t('settings', 'Name') }}</span>
</th>
<th id="app-table-col-version" class="app-version">
<span class="hidden-visually">{{ t('settings', 'Version') }}</span>
</th>
<th id="app-table-col-level" class="app-level">
<span class="hidden-visually">{{ t('settings', 'Level') }}</span>
</th>
<th id="app-table-col-actions" class="actions">
<span class="hidden-visually">{{ t('settings', 'Actions') }}</span>
</th>
</tr>
<template v-for="bundle in bundles">
<div :key="bundle.id" class="apps-header">
<div class="app-image" />
<h2>{{ bundle.name }} <input type="button" :value="bundleToggleText(bundle.id)" @click="toggleBundle(bundle.id)"></h2>
<div class="app-version" />
<div class="app-level" />
<div class="app-groups" />
<div class="actions">
&nbsp;
</div>
</div>
<tr :key="bundle.id">
<th :id="`app-table-rowgroup-${bundle.id}`" colspan="5" scope="rowgroup">
<div class="app-bundle-heading">
<span class="app-bundle-header">
{{ bundle.name }}
</span>
<NcButton type="secondary" @click="toggleBundle(bundle.id)">
{{ t('settings', bundleToggleText(bundle.id)) }}
</NcButton>
</div>
</th>
</tr>
<AppItem v-for="app in bundleApps(bundle.id)"
:key="bundle.id + app.id"
:use-bundle-view="true"
:headers="`app-table-rowgroup-${bundle.id}`"
:app="app"
:category="category" />
</template>
</transition-group>
</table>
<template v-if="useAppStoreView">
<AppItem v-for="app in apps"
:key="app.id"
Expand All @@ -88,8 +124,7 @@
<AppItem v-for="app in searchApps"
:key="app.id"
:app="app"
:category="category"
:list-view="true" />
:category="category" />
</template>
</div>
</div>
Expand Down Expand Up @@ -240,9 +275,24 @@ export default {
const limit = pLimit(1)
this.apps
.filter(app => app.update)
.map(app => limit(() => this.$store.dispatch('updateApp', { appId: app.id }))
.map(app => limit(() => this.$store.dispatch('updateApp', { appId: app.id })),
)
},
},
}
</script>

<style lang="scss" scoped>
.app-bundle-heading {
display: flex;
align-items: center;
margin: 20px 10px 20px 0;
}
.app-bundle-header {
margin: 0 10px 0 50px;
font-weight: bold;
font-size: 20px;
line-height: 30px;
color: var(--color-text-light);
}
</style>
50 changes: 35 additions & 15 deletions apps/settings/src/components/AppList/AppItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,11 @@
-->

<template>
<div class="section" :class="{ selected: isSelected }" @click="showAppDetails">
<div class="app-image app-image-icon" @click="showAppDetails">
<component :is="listView ? `tr` : `div`"
class="section"
:class="{ selected: isSelected }"
@click="showAppDetails">
<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-icon`)" class="app-image app-image-icon" @click="showAppDetails">

Check failure on line 28 in apps/settings/src/components/AppList/AppItem.vue

View workflow job for this annotation

GitHub Actions / eslint

'@click' should be on a new line
<div v-if="(listView && !app.preview) || (!listView && !screenshotLoaded)" class="icon-settings-dark" />

<svg v-else-if="listView && app.preview"
Expand All @@ -39,19 +42,22 @@
</svg>

<img v-if="!listView && app.screenshot && screenshotLoaded" :src="app.screenshot" width="100%">
</div>
<div class="app-name" @click="showAppDetails">
</component>
<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-name`)" class="app-name" @click="showAppDetails">

Check failure on line 46 in apps/settings/src/components/AppList/AppItem.vue

View workflow job for this annotation

GitHub Actions / eslint

'@click' should be on a new line
{{ app.name }}
</div>
<div v-if="!listView" class="app-summary">
</component>
<component :is="dataItemTag"
v-if="!listView"
:headers="getDataItemHeaders(`app-version`)"
class="app-summary">
{{ app.summary }}
</div>
<div v-if="listView" class="app-version">
</component>
<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-version`)" v-if="listView" class="app-version">

Check failure on line 55 in apps/settings/src/components/AppList/AppItem.vue

View workflow job for this annotation

GitHub Actions / eslint

'class' should be on a new line
<span v-if="app.version">{{ app.version }}</span>
<span v-else-if="app.appstoreData.releases[0].version">{{ app.appstoreData.releases[0].version }}</span>
</div>
</component>

<div class="app-level">
<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-level`)" class="app-level">
<span v-if="app.level === 300"
:title="t('settings', 'This app is supported via your current Nextcloud subscription.')"
:aria-label="t('settings', 'This app is supported via your current Nextcloud subscription.')"
Expand All @@ -63,9 +69,8 @@
class="official icon-checkmark">
{{ t('settings', 'Featured') }}</span>
<AppScore v-if="hasRating && !listView" :score="app.score" />
</div>

<div class="actions">
</component>
<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-actions`)" class="actions">
<div v-if="app.error" class="warning">
{{ app.error }}
</div>
Expand Down Expand Up @@ -104,8 +109,8 @@
@click.stop="forceEnable(app.id)">
{{ forceEnableButtonText }}
</NcButton>
</div>
</div>
</component>
</component>
</template>

<script>
Expand All @@ -128,6 +133,14 @@ export default {
type: Boolean,
default: true,
},
useBundleView: {
type: Boolean,
default: false,
},
headers: {
type: String,
default: null,
},
},
data() {
return {
Expand All @@ -140,6 +153,9 @@ export default {
hasRating() {
return this.app.appstoreData && this.app.appstoreData.ratingNumOverall > 5
},
dataItemTag() {
return this.listView ? 'td' : 'div'
},
},
watch: {
'$route.params.id'(id) {
Expand Down Expand Up @@ -176,6 +192,10 @@ export default {
prefix(prefix, content) {
return prefix + '_' + content
},
getDataItemHeaders(columnName) {
return this.useBundleView ? [this.headers, columnName].join(' ') : null
},
},
}
</script>
Expand Down
4 changes: 2 additions & 2 deletions dist/settings-apps-view-7418.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/settings-apps-view-7418.js.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/settings-vue-settings-apps-users-management.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/settings-vue-settings-apps-users-management.js.map

Large diffs are not rendered by default.

0 comments on commit bb218d2

Please sign in to comment.