Also show avatar in sharee list
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
This commit is contained in:
Raimund Schlüßler
parent
a103fd7a84
commit
acc15a6906
5 changed files with 96 additions and 157 deletions
|
|
@ -1,85 +0,0 @@
|
|||
/**
|
||||
* @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
|
||||
*
|
||||
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||
* @author Team Popcorn <teampopcornberlin@gmail.com>
|
||||
* @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
|
||||
*
|
||||
* @license GNU AGPL version 3 or any later version
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
|
||||
.calendar-sharee {
|
||||
padding: 0 5px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.icon {
|
||||
margin-right: 5px;
|
||||
opacity: 0.2;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
margin-bottom: 2px;
|
||||
&.icon-loading-small {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__identifier {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&__utils {
|
||||
padding: 0 !important;
|
||||
float: right;
|
||||
position: relative !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
height: 20px;
|
||||
|
||||
.icon-delete {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.4;
|
||||
margin-bottom: 2px;
|
||||
margin-left: 4px;
|
||||
&:hover {
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
// loading state
|
||||
&--disabled {
|
||||
opacity: .2 !important;
|
||||
}
|
||||
.checkbox + label {
|
||||
padding: 0 !important;
|
||||
}
|
||||
label {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -23,40 +23,49 @@
|
|||
*/
|
||||
|
||||
.calendar-shares {
|
||||
width: calc(100% - 6px);
|
||||
margin: 6px;
|
||||
&__list {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__shareematch--bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.app-navigation-entry {
|
||||
padding-left: 0 !important;
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: var(--color-border-dark);
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
&__utils {
|
||||
.action-checkbox__label {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.icon-loading::after {
|
||||
top: 70%;
|
||||
left: 95%;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
width: inherit;
|
||||
margin: 0;
|
||||
.multiselect__tags:focus-within,
|
||||
.multiselect__tags:hover {
|
||||
border-color: var(--color-primary-element);
|
||||
.action-checkbox__label::before {
|
||||
margin: 4px 4px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__multiselect {
|
||||
padding-left: 6px !important;
|
||||
|
||||
&:not(.showContent) .multiselect__content-wrapper {
|
||||
display: none;
|
||||
}
|
||||
.multiselect {
|
||||
width: calc(100% - 14px);
|
||||
margin: 0;
|
||||
.multiselect__tags:focus-within,
|
||||
.multiselect__tags:hover {
|
||||
border-color: var(--color-primary-element);
|
||||
}
|
||||
|
||||
.multiselect__content-wrapper {
|
||||
z-index: 101 !important;
|
||||
&:not(.showContent) .multiselect__content-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.multiselect__content-wrapper {
|
||||
z-index: 101 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,4 +27,3 @@
|
|||
|
||||
@import './src/Calendars/Calendar.scss';
|
||||
@import './src/Calendars/CalendarShares.scss';
|
||||
@import './src/Calendars/CalendarSharee.scss';
|
||||
|
|
|
|||
|
|
@ -23,23 +23,25 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
|
||||
<template>
|
||||
<div class="calendar-shares">
|
||||
<Multiselect
|
||||
id="users-groups-search"
|
||||
:options="usersOrGroups"
|
||||
:searchable="true"
|
||||
:internal-search="false"
|
||||
:max-height="600"
|
||||
:show-no-results="true"
|
||||
:placeholder="placeholder"
|
||||
:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
|
||||
:user-select="true"
|
||||
open-direction="bottom"
|
||||
track-by="user"
|
||||
label="user"
|
||||
@search-change="findSharee"
|
||||
@input="shareCalendar" />
|
||||
<!-- list of user or groups calendar is shared with -->
|
||||
<ul v-if="calendar.shares.length > 0" class="calendar-shares__list">
|
||||
<ul>
|
||||
<li class="app-navigation-entry__multiselect">
|
||||
<Multiselect
|
||||
id="users-groups-search"
|
||||
:options="usersOrGroups"
|
||||
:searchable="true"
|
||||
:internal-search="false"
|
||||
:max-height="600"
|
||||
:show-no-results="true"
|
||||
:placeholder="placeholder"
|
||||
:class="{ 'showContent': inputGiven, 'icon-loading': isLoading }"
|
||||
:user-select="true"
|
||||
open-direction="bottom"
|
||||
track-by="user"
|
||||
label="user"
|
||||
@search-change="findSharee"
|
||||
@input="shareCalendar" />
|
||||
</li>
|
||||
<!-- list of user or groups calendar is shared with -->
|
||||
<CalendarSharee v-for="sharee in calendar.shares"
|
||||
:key="sharee.uri"
|
||||
:sharee="sharee"
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
@author Team Popcorn <teampopcornberlin@gmail.com>
|
||||
@author Raimund Schlüßler <raimund.schluessler@mailbox.org>
|
||||
|
||||
@copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com>
|
||||
@author Georg Ehrke <oc.list@georgehrke.com>
|
||||
|
||||
@license GNU AGPL version 3 or any later version
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
|
|
@ -22,40 +25,51 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|||
-->
|
||||
|
||||
<template>
|
||||
<li class="calendar-sharee">
|
||||
<span :class="{
|
||||
'icon-loading-small': loading,
|
||||
'icon-group': sharee.isGroup && !loading,
|
||||
'icon-user': !sharee.isGroup && !loading
|
||||
}"
|
||||
class="icon" />
|
||||
<span class="calendar-sharee__identifier">
|
||||
{{ sharee.displayName }}
|
||||
</span>
|
||||
<span class="calendar-sharee__utils">
|
||||
<input
|
||||
:id="uid"
|
||||
:checked="writeable"
|
||||
<AppNavigationItem
|
||||
:title="sharee.displayName">
|
||||
<template slot="icon">
|
||||
<div v-if="sharee.isGroup" class="avatar icon-group" />
|
||||
<div v-else-if="sharee.isCircle" class="avatar icon-circle" />
|
||||
<Avatar v-else
|
||||
:user="sharee.id"
|
||||
:display-name="sharee.displayName"
|
||||
:disable-menu="true" />
|
||||
</template>
|
||||
|
||||
<template slot="counter">
|
||||
<ActionCheckbox
|
||||
:disabled="loading"
|
||||
class="checkbox"
|
||||
name="editable"
|
||||
type="checkbox"
|
||||
@change="editSharee">
|
||||
<label :for="uid">
|
||||
:checked="writeable"
|
||||
@update:checked="editSharee">
|
||||
{{ $t('tasks', 'can edit') }}
|
||||
</label>
|
||||
<a :class="{'calendar-sharee__utils--disabled': loading}"
|
||||
href="#"
|
||||
title="Delete"
|
||||
class="icon-delete"
|
||||
@click="deleteSharee" />
|
||||
</span>
|
||||
</li>
|
||||
</ActionCheckbox>
|
||||
</template>
|
||||
|
||||
<template slot="actions">
|
||||
<ActionButton
|
||||
icon="icon-delete"
|
||||
:disabled="loading"
|
||||
@click.prevent.stop="deleteSharee">
|
||||
{{ $t('tasks', 'Unshare with {displayName}', { displayName: sharee.displayName }) }}
|
||||
</ActionButton>
|
||||
</template>
|
||||
</AppNavigationItem>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ActionButton } from '@nextcloud/vue/dist/Components/ActionButton'
|
||||
import { ActionCheckbox } from '@nextcloud/vue/dist/Components/ActionCheckbox'
|
||||
import { AppNavigationItem } from '@nextcloud/vue/dist/Components/AppNavigationItem'
|
||||
import { Avatar } from '@nextcloud/vue/dist/Components/Avatar'
|
||||
|
||||
export default {
|
||||
name: 'CalendarSharee',
|
||||
components: {
|
||||
ActionButton,
|
||||
ActionCheckbox,
|
||||
AppNavigationItem,
|
||||
Avatar,
|
||||
},
|
||||
props: {
|
||||
calendar: {
|
||||
type: Object,
|
||||
|
|
|
|||
Loading…
Reference in a new issue