Skip to content

Commit

Permalink
Comply to new resizeable list feature
Browse files Browse the repository at this point in the history
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
  • Loading branch information
skjnldsv committed Jun 10, 2021
1 parent ae4a51c commit 55bce1f
Show file tree
Hide file tree
Showing 7 changed files with 131 additions and 226 deletions.
12 changes: 5 additions & 7 deletions css/contacts.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ $grid-height-unit: 40px;
$grid-input-padding: 7px;
$grid-input-margin: 3px;
$grid-input-height-with-margin: $grid-height-unit - $grid-input-margin * 2;
$list-width: 300px;

// components
@import 'SettingsSection';
Expand All @@ -42,19 +41,18 @@ $list-width: 300px;


// global design overrides
#app-content-wrapper {
display: flex;
.app-content {
// center error messages
& > .empty-content {
margin: 40vh;
}
}

.app-content-details {
// Starts shrinking at the same width as the list
flex: 1 1 $list-width;
min-width: 0;
padding: 0 80px 80px 80px;
}

.app-content-list {
flex: 1 1 $list-width;
// Cancel scrolling
overflow: visible;

Expand Down
50 changes: 15 additions & 35 deletions package-lock.json

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

70 changes: 0 additions & 70 deletions src/components/AppContent/AppDetailsToggle.vue

This file was deleted.

101 changes: 50 additions & 51 deletions src/components/AppContent/CircleContent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,55 +21,56 @@
-->

<template>
<AppContent>
<div v-if="!circle">
<EmptyContent icon="icon-circles">
{{ t('contacts', 'Please select a circle') }}
</EmptyContent>
</div>

<div v-else-if="loading">
<EmptyContent icon="icon-loading">
{{ t('contacts', 'Loading circle …') }}
</EmptyContent>
</div>

<div v-else id="app-content-wrapper">
<AppDetailsToggle v-if="isMobile && showDetails" @click.native.stop.prevent="hideDetails" />

<!-- member list -->
<MemberList :list="members" :loading="loadingList" :show-details.sync="showDetails" />

<!-- main contacts details -->
<CircleDetails :circle="circle">
<!-- not a member -->
<template v-if="!circle.isMember">
<!-- Join request in progress -->
<EmptyContent v-if="loadingJoin" icon="icon-loading">
{{ t('contacts', 'Joining circle') }}
</EmptyContent>

<!-- Pending request validation -->
<EmptyContent v-else-if="circle.isPendingJoin" icon="icon-loading">
{{ t('contacts', 'Your request to join this circle is pending approval') }}
</EmptyContent>

<EmptyContent v-else icon="icon-circles">
{{ t('contacts', 'You are not a member of {circle}', { circle: circle.displayName}) }}

<!-- Only show the join button if the circle is accepting requests -->
<template v-if="circle.canJoin" #desc>
<button :disabled="loadingJoin" class="primary" @click="requestJoin">
<Login slot="icon"
:size="16"
decorative />
{{ t('contacts', 'Request to join') }}
</button>
</template>
</EmptyContent>
</template>
</CircleDetails>
</div>
<AppContent v-if="!circle">
<EmptyContent icon="icon-circles">
{{ t('contacts', 'Please select a circle') }}
</EmptyContent>
</AppContent>

<AppContent v-else-if="loading">
<EmptyContent icon="icon-loading">
{{ t('contacts', 'Loading circle …') }}
</EmptyContent>
</AppContent>

<AppContent v-else :show-details.sync="showDetails">
<!-- member list -->
<template #list>
<MemberList
:list="members"
:loading="loadingList"
:show-details.sync="showDetails" />
</template>

<!-- main contacts details -->
<CircleDetails :circle="circle">
<!-- not a member -->
<template v-if="!circle.isMember">
<!-- Join request in progress -->
<EmptyContent v-if="loadingJoin" icon="icon-loading">
{{ t('contacts', 'Joining circle') }}
</EmptyContent>

<!-- Pending request validation -->
<EmptyContent v-else-if="circle.isPendingJoin" icon="icon-loading">
{{ t('contacts', 'Your request to join this circle is pending approval') }}
</EmptyContent>

<EmptyContent v-else icon="icon-circles">
{{ t('contacts', 'You are not a member of {circle}', { circle: circle.displayName}) }}

<!-- Only show the join button if the circle is accepting requests -->
<template v-if="circle.canJoin" #desc>
<button :disabled="loadingJoin" class="primary" @click="requestJoin">
<Login slot="icon"
:size="16"
decorative />
{{ t('contacts', 'Request to join') }}
</button>
</template>
</EmptyContent>
</template>
</CircleDetails>
</AppContent>
</template>
<script>
Expand All @@ -79,7 +80,6 @@ import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'

import Login from 'vue-material-design-icons/Login'

import AppDetailsToggle from '../AppContent/AppDetailsToggle'
import CircleDetails from '../CircleDetails'
import MemberList from '../MemberList'
import RouterMixin from '../../mixins/RouterMixin'
Expand All @@ -91,7 +91,6 @@ export default {

components: {
AppContent,
AppDetailsToggle,
CircleDetails,
EmptyContent,
Login,
Expand Down
Loading

0 comments on commit 55bce1f

Please sign in to comment.