show if we have a message id and current user is author -->
<Actions v-if="isOwnComment && id && !loading" class="comment__actions">
<template v-if="!editing">
- <ActionButton
- :close-after-click="true"
+ <ActionButton :close-after-click="true"
icon="icon-rename"
@click="onEdit">
{{ t('comments', 'Edit comment') }}
</ActionButton>
<ActionSeparator />
- <ActionButton
- :close-after-click="true"
+ <ActionButton :close-after-click="true"
icon="icon-delete"
@click="onDeleteWithUndo">
{{ t('comments', 'Delete comment') }}
<div class="availability-slot-group">
<template v-for="(slot, idx) in day.slots">
<div :key="`slot-${day.id}-${idx}`" class="availability-slot">
- <DatetimePicker
- v-model="slot.start"
+ <DatetimePicker v-model="slot.start"
type="time"
class="start-date"
format="H:mm" />
<span class="to-text">
{{ $t('dav', 'to') }}
</span>
- <DatetimePicker
- v-model="slot.end"
+ <DatetimePicker v-model="slot.end"
type="time"
class="end-date"
format="H:mm" />
<!-- eslint-disable-next-line vue/no-v-html -->
<p class="settings-hint" v-html="hint" />
<p>
- <input
- id="caldavSendInvitations"
+ <input id="caldavSendInvitations"
v-model="sendInvitations"
type="checkbox"
class="checkbox">
<em v-html="sendInvitationsHelpText" />
</p>
<p>
- <input
- id="caldavGenerateBirthdayCalendar"
+ <input id="caldavGenerateBirthdayCalendar"
v-model="generateBirthdayCalendar"
type="checkbox"
class="checkbox">
</em>
</p>
<p>
- <input
- id="caldavSendEventReminders"
+ <input id="caldavSendEventReminders"
v-model="sendEventReminders"
type="checkbox"
class="checkbox">
</em>
</p>
<p>
- <input
- id="caldavSendEventRemindersPush"
+ <input id="caldavSendEventRemindersPush"
v-model="sendEventRemindersPush"
type="checkbox"
class="checkbox"
-
-->
<template>
- <AppSidebarTab
- :id="id"
+ <AppSidebarTab :id="id"
ref="tab"
:name="name"
:icon="icon"
<label for="targetUser">
<span>{{ t('files', 'New owner') }}</span>
</label>
- <Multiselect
- id="targetUser"
+ <Multiselect id="targetUser"
v-model="selectedUser"
:options="formatedUserSuggestions"
:multiple="false"
export default class Sidebar {
- _state;
+ _state
constructor() {
// init empty state
-->
<template>
- <AppSidebar
- v-if="file"
+ <AppSidebar v-if="file"
ref="sidebar"
v-bind="appSidebar"
:force-menu="true"
<template v-if="fileInfo" #secondary-actions>
<!-- TODO: create proper api for apps to register actions
And inject themselves here. -->
- <ActionButton
- v-if="isSystemTagsEnabled"
+ <ActionButton v-if="isSystemTagsEnabled"
:close-after-click="true"
icon="icon-tag"
@click="toggleTags">
<!-- If fileInfo fetch is complete, render tabs -->
<template v-for="tab in tabs" v-else-if="fileInfo">
<!-- Hide them if we're loading another file but keep them mounted -->
- <SidebarTab
- v-if="tab.enabled(fileInfo)"
+ <SidebarTab v-if="tab.enabled(fileInfo)"
v-show="!loading"
:id="tab.id"
:key="tab.id"
<!-- Templates list -->
<ul class="templates-picker__list">
- <TemplatePreview
- v-bind="emptyTemplate"
+ <TemplatePreview v-bind="emptyTemplate"
:checked="checked === emptyTemplate.fileid"
@check="onCheck" />
- <TemplatePreview
- v-for="template in provider.templates"
+ <TemplatePreview v-for="template in provider.templates"
:key="template.fileid"
v-bind="template"
:checked="checked === template.fileid"
<span>{{ share.status.message || '' }}</span>
</p>
</component>
- <Actions
- menu-align="right"
+ <Actions menu-align="right"
class="sharing-entry__actions"
@close="onMenuClose">
<template v-if="share.canEdit">
<!-- edit permission -->
- <ActionCheckbox
- ref="canEdit"
+ <ActionCheckbox ref="canEdit"
:checked.sync="canEdit"
:value="permissionsEdit"
:disabled="saving || !canSetEdit">
</ActionCheckbox>
<!-- create permission -->
- <ActionCheckbox
- v-if="isFolder"
+ <ActionCheckbox v-if="isFolder"
ref="canCreate"
:checked.sync="canCreate"
:value="permissionsCreate"
</ActionCheckbox>
<!-- delete permission -->
- <ActionCheckbox
- v-if="isFolder"
+ <ActionCheckbox v-if="isFolder"
ref="canDelete"
:checked.sync="canDelete"
:value="permissionsDelete"
</ActionCheckbox>
<!-- reshare permission -->
- <ActionCheckbox
- v-if="config.isResharingAllowed"
+ <ActionCheckbox v-if="config.isResharingAllowed"
ref="canReshare"
:checked.sync="canReshare"
:value="permissionsShare"
<!-- note -->
<template v-if="canHaveNote">
- <ActionCheckbox
- :checked.sync="hasNote"
+ <ActionCheckbox :checked.sync="hasNote"
:disabled="saving"
@uncheck="queueUpdate('note')">
{{ t('files_sharing', 'Note to recipient') }}
-->
<template>
- <SharingEntrySimple
- :key="share.id"
+ <SharingEntrySimple :key="share.id"
class="sharing-entry__inherited"
:title="share.shareWithDisplayName">
<template #avatar>
- <Avatar
- :user="share.shareWith"
+ <Avatar :user="share.shareWith"
:display-name="share.shareWithDisplayName"
class="sharing-entry__avatar"
tooltip-message="" />
<template>
- <SharingEntrySimple
- class="sharing-entry__internal"
+ <SharingEntrySimple class="sharing-entry__internal"
:title="t('files_sharing', 'Internal link')"
:subtitle="internalLinkSubtitle">
<template #avatar>
<template v-if="share">
<template v-if="share.canEdit && canReshare">
<!-- Custom Label -->
- <ActionInput
- ref="label"
+ <ActionInput ref="label"
v-tooltip.auto="{
content: errors.label,
show: errors.label,
{{ t('files_sharing', 'Allow editing') }}
</ActionCheckbox>
- <ActionCheckbox
- :checked.sync="share.hideDownload"
+ <ActionCheckbox :checked.sync="share.hideDownload"
:disabled="saving"
@change="queueUpdate('hideDownload')">
{{ t('files_sharing', 'Hide download') }}
export default class Share {
- _share;
+ _share
/**
* Create the share object
export default class ExternalLinkActions {
- _state;
+ _state
constructor() {
// init empty state
export default class ExternalShareActions {
- _state;
+ _state
constructor() {
// init empty state
export default class ShareSearch {
- _state;
+ _state
constructor() {
// init empty state
export default class TabSections {
- _sections;
+ _sections
constructor() {
this._sections = []
<template>
<ul id="sharing-inherited-shares">
<!-- Main collapsible entry -->
- <SharingEntrySimple
- class="sharing-entry__inherited"
+ <SharingEntrySimple class="sharing-entry__inherited"
:title="mainTitle"
:subtitle="subTitle">
<template #avatar>
<!-- shared with me information -->
<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
<template #avatar>
- <Avatar
- :user="sharedWithMe.user"
+ <Avatar :user="sharedWithMe.user"
:display-name="sharedWithMe.displayName"
class="sharing-entry__avatar"
tooltip-message="" />
<template>
- <Multiselect
- v-model="selected"
+ <Multiselect v-model="selected"
class="group-multiselect"
:placeholder="t('settings', 'None')"
track-by="gid"
<template>
<div class="biography">
- <textarea
- id="biography"
+ <textarea id="biography"
:placeholder="t('settings', 'Your biography')"
:value="biography"
rows="8"
<template>
<section>
- <HeaderBar
- :account-property="accountProperty"
+ <HeaderBar :account-property="accountProperty"
label-for="biography"
:scope.sync="primaryBiography.scope" />
- <Biography
- :biography.sync="primaryBiography.value"
+ <Biography :biography.sync="primaryBiography.value"
:scope.sync="primaryBiography.scope" />
</section>
</template>
<template>
<div class="displayname">
- <input
- id="displayname"
+ <input id="displayname"
type="text"
:placeholder="t('settings', 'Your full name')"
:value="displayName"
<template>
<section>
- <HeaderBar
- :account-property="accountProperty"
+ <HeaderBar :account-property="accountProperty"
label-for="displayname"
:is-editable="displayNameChangeSupported"
:is-valid-section="isValidSection"
:scope.sync="primaryDisplayName.scope" />
<template v-if="displayNameChangeSupported">
- <DisplayName
- :display-name.sync="primaryDisplayName.value"
+ <DisplayName :display-name.sync="primaryDisplayName.value"
:scope.sync="primaryDisplayName.scope" />
</template>
<template>
<div>
<div class="email">
- <input
- :id="inputId"
+ <input :id="inputId"
ref="email"
type="email"
:placeholder="inputPlaceholder"
</transition>
<template v-if="!primary">
- <FederationControl
- :account-property="accountProperty"
+ <FederationControl :account-property="accountProperty"
:additional="true"
:additional-value="email"
:disabled="federationDisabled"
@update:scope="onScopeChange" />
</template>
- <Actions
- class="email__actions"
+ <Actions class="email__actions"
:aria-label="t('settings', 'Email options')"
:disabled="deleteDisabled"
:force-menu="true">
- <ActionButton
- :aria-label="deleteEmailLabel"
+ <ActionButton :aria-label="deleteEmailLabel"
:close-after-click="true"
:disabled="deleteDisabled"
icon="icon-delete"
<template>
<section>
- <HeaderBar
- :account-property="accountProperty"
+ <HeaderBar :account-property="accountProperty"
label-for="email"
:handle-scope-change="savePrimaryEmailScope"
:is-editable="true"
@add-additional="onAddAdditionalEmail" />
<template v-if="displayNameChangeSupported">
- <Email
- :primary="true"
+ <Email :primary="true"
:scope.sync="primaryEmail.scope"
:email.sync="primaryEmail.value"
:active-notification-email.sync="notificationEmail"
<template>
<div class="headline">
- <input
- id="headline"
+ <input id="headline"
type="text"
:placeholder="t('settings', 'Your headline')"
:value="headline"
<template>
<section>
- <HeaderBar
- :account-property="accountProperty"
+ <HeaderBar :account-property="accountProperty"
label-for="headline"
:scope.sync="primaryHeadline.scope" />
- <Headline
- :headline.sync="primaryHeadline.value"
+ <Headline :headline.sync="primaryHeadline.value"
:scope.sync="primaryHeadline.scope" />
</section>
</template>
<template>
<div class="language">
- <select
- id="language"
+ <select id="language"
:placeholder="t('settings', 'Language')"
@change="onLanguageChange">
<option v-for="commonLanguage in commonLanguages"
</option>
</select>
- <a
- href="https://www.transifex.com/nextcloud/nextcloud/"
+ <a href="https://www.transifex.com/nextcloud/nextcloud/"
target="_blank"
rel="noreferrer noopener">
<em>{{ t('settings', 'Help translate') }}</em>
<template>
<section>
- <HeaderBar
- :account-property="accountProperty"
+ <HeaderBar :account-property="accountProperty"
label-for="language" />
<template v-if="isEditable">
- <Language
- :common-languages="commonLanguages"
+ <Language :common-languages="commonLanguages"
:other-languages="otherLanguages"
:language.sync="language" />
</template>
<template>
<div class="organisation">
- <input
- id="organisation"
+ <input id="organisation"
type="text"
:placeholder="t('settings', 'Your organisation')"
:value="organisation"
<template>
<section>
- <HeaderBar
- :account-property="accountProperty"
+ <HeaderBar :account-property="accountProperty"
label-for="organisation"
:scope.sync="primaryOrganisation.scope" />
- <Organisation
- :organisation.sync="primaryOrganisation.value"
+ <Organisation :organisation.sync="primaryOrganisation.value"
:scope.sync="primaryOrganisation.scope" />
</section>
</template>
-->
<template>
- <a
- :class="{ disabled }"
+ <a :class="{ disabled }"
href="#profile-visibility"
v-on="$listeners">
- <ChevronDownIcon
- class="anchor-icon"
+ <ChevronDownIcon class="anchor-icon"
decorative
title=""
:size="22" />
<template>
<div class="checkbox-container">
- <input
- id="enable-profile"
+ <input id="enable-profile"
class="checkbox"
type="checkbox"
:checked="profileEnabled"
-->
<template>
- <a
- class="preview-card"
+ <a class="preview-card"
:class="{ disabled }"
:href="profilePageLink">
- <Avatar
- class="preview-card__avatar"
+ <Avatar class="preview-card__avatar"
:user="userId"
:size="48"
:show-user-status="true"
<template>
<section>
- <HeaderBar
- :account-property="accountProperty" />
+ <HeaderBar :account-property="accountProperty" />
- <ProfileCheckbox
- :profile-enabled.sync="profileEnabled" />
+ <ProfileCheckbox :profile-enabled.sync="profileEnabled" />
- <ProfilePreviewCard
- :organisation="organisation"
+ <ProfilePreviewCard :organisation="organisation"
:display-name="displayName"
:profile-enabled="profileEnabled"
:user-id="userId" />
- <EditProfileAnchorLink
- :profile-enabled="profileEnabled" />
+ <EditProfileAnchorLink :profile-enabled="profileEnabled" />
</section>
</template>
<template>
<!-- TODO remove this inline margin placeholder once the settings layout is updated -->
- <section
- id="profile-visibility"
+ <section id="profile-visibility"
:style="{ marginLeft }">
- <HeaderBar
- :account-property="heading" />
+ <HeaderBar :account-property="heading" />
<em :class="{ disabled }">
{{ t('settings', 'The more restrictive setting of either visibility or scope is respected on your Profile. For example, if visibility is set to "Show to everyone" and scope is set to "Private", "Private" is respected.') }}
</em>
- <div
- class="visibility-dropdowns"
+ <div class="visibility-dropdowns"
:style="{
gridTemplateRows: `repeat(${rows}, 44px)`,
}">
-->
<template>
- <div
- class="visibility-container"
+ <div class="visibility-container"
:class="{ disabled }">
<label :for="inputId">
{{ t('settings', '{displayId}', { displayId }) }}
</label>
- <Multiselect
- :id="inputId"
+ <Multiselect :id="inputId"
class="visibility-container__multiselect"
:options="visibilityOptions"
track-by="name"
<template>
<div class="role">
- <input
- id="role"
+ <input id="role"
type="text"
:placeholder="t('settings', 'Your role')"
:value="role"
<template>
<section>
- <HeaderBar
- :account-property="accountProperty"
+ <HeaderBar :account-property="accountProperty"
label-for="role"
:scope.sync="primaryRole.scope" />
- <Role
- :role.sync="primaryRole.value"
+ <Role :role.sync="primaryRole.value"
:scope.sync="primaryRole.scope" />
</section>
</template>
-->
<template>
- <button
- :disabled="disabled"
+ <button :disabled="disabled"
v-on="$listeners">
<span class="icon icon-add" />
{{ t('settings', 'Add') }}
-->
<template>
- <Actions
- :class="{ 'federation-actions': !additional, 'federation-actions--additional': additional }"
+ <Actions :class="{ 'federation-actions': !additional, 'federation-actions--additional': additional }"
:aria-label="ariaLabel"
:default-icon="scopeIcon"
:disabled="disabled">
-->
<template>
- <ActionButton
- :aria-label="isSupportedScope ? tooltip : tooltipDisabled"
+ <ActionButton :aria-label="isSupportedScope ? tooltip : tooltipDisabled"
class="federation-actions__btn"
:class="{ 'federation-actions__btn--active': activeScope === name }"
:close-after-click="true"
-->
<template>
- <h3
- :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }">
+ <h3 :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }">
<label :for="labelFor">
<!-- Already translated as required by prop validator -->
{{ accountProperty }}
</label>
<template v-if="scope">
- <FederationControl
- class="federation-control"
+ <FederationControl class="federation-control"
:account-property="accountProperty"
:scope.sync="localScope"
@update:scope="onScopeChange" />
</template>
<template v-if="isEditable && isMultiValueSupported">
- <AddButton
- class="add-button"
+ <AddButton class="add-button"
:disabled="!isValidSection"
@click.stop.prevent="onAddAdditional" />
</template>
</div>
<!-- User full data -->
- <UserRowSimple
- v-else-if="!editing"
+ <UserRowSimple v-else-if="!editing"
:editing.sync="editing"
:feedback-message="feedbackMessage"
:groups="groups"
</div>
<!-- dirty hack to ellipsis on two lines -->
<div v-if="user.backendCapabilities.setDisplayName" class="displayName">
- <form
- :class="{'icon-loading-small': loading.displayName}"
+ <form :class="{'icon-loading-small': loading.displayName}"
class="displayName"
@submit.prevent="updateDisplayName">
- <input
- :id="'displayName'+user.id+rand"
+ <input :id="'displayName'+user.id+rand"
ref="displayName"
:disabled="loading.displayName||loading.all"
:value="user.displayname"
autocorrect="off"
spellcheck="false"
type="text">
- <input
- class="icon-confirm"
+ <input class="icon-confirm"
type="submit"
value="">
</form>
<template>
- <div
- class="row"
+ <div class="row"
:class="{'disabled': loading.delete || loading.disable}"
:data-id="user.id">
<div class="avatar" :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}">
<div class="userQuota">
<div class="quota">
{{ userQuota }} ({{ usedSpace }})
- <progress
- class="quota-user-progress"
+ <progress class="quota-user-progress"
:class="{'warn': usedQuota > 80}"
:value="usedQuota"
max="100" />
</ActionButton>
</Actions>
<div class="userPopoverMenuWrapper">
- <button
- v-click-outside="hideMenu"
+ <button v-click-outside="hideMenu"
class="icon-more"
:aria-label="t('settings', 'Toggle user actions menu')"
@click.prevent="toggleMenu" />
<!-- Categories & filters -->
<AppNavigation>
<template #list>
- <AppNavigationItem
- id="app-category-your-apps"
+ <AppNavigationItem id="app-category-your-apps"
:to="{ name: 'apps' }"
:exact="true"
icon="icon-category-installed"
:title="t('settings', 'Your apps')" />
- <AppNavigationItem
- id="app-category-enabled"
+ <AppNavigationItem id="app-category-enabled"
:to="{ name: 'apps-category', params: { category: 'enabled' } }"
icon="icon-category-enabled"
:title="t('settings', 'Active apps')" />
- <AppNavigationItem
- id="app-category-disabled"
+ <AppNavigationItem id="app-category-disabled"
:to="{ name: 'apps-category', params: { category: 'disabled' } }"
icon="icon-category-disabled"
:title="t('settings', 'Disabled apps')" />
- <AppNavigationItem
- v-if="updateCount > 0"
+ <AppNavigationItem v-if="updateCount > 0"
id="app-category-updates"
:to="{ name: 'apps-category', params: { category: 'updates' } }"
icon="icon-download"
{{ updateCount }}
</AppNavigationCounter>
</AppNavigationItem>
- <AppNavigationItem
- id="app-category-your-bundles"
+ <AppNavigationItem id="app-category-your-bundles"
:to="{ name: 'apps-category', params: { category: 'app-bundles' } }"
icon="icon-category-app-bundles"
:title="t('settings', 'App bundles')" />
<!-- App store categories -->
<template v-if="settings.appstoreEnabled">
- <AppNavigationItem
- id="app-category-featured"
+ <AppNavigationItem id="app-category-featured"
:to="{ name: 'apps-category', params: { category: 'featured' } }"
icon="icon-favorite"
:title="t('settings', 'Featured apps')" />
- <AppNavigationItem
- v-for="cat in categories"
+ <AppNavigationItem v-for="cat in categories"
:key="'icon-category-' + cat.ident"
:icon="'icon-category-' + cat.ident"
:to="{
:title="cat.displayName" />
</template>
- <AppNavigationItem
- id="app-developer-docs"
+ <AppNavigationItem id="app-developer-docs"
href="settings.developerDocumentation"
:title="t('settings', 'Developer documentation') + ' ↗'" />
</template>
</AppContent>
<!-- Selected app details -->
- <AppSidebar
- v-if="id && app"
+ <AppSidebar v-if="id && app"
v-bind="appSidebar"
:class="{'app-sidebar--without-background': !appSidebar.background}"
@close="hideAppDetails">
@keyup.enter="showNewUserMenu"
@keyup.space="showNewUserMenu" />
<template #list>
- <AppNavigationItem
- id="addgroup"
+ <AppNavigationItem id="addgroup"
ref="addGroup"
:edit-placeholder="t('settings', 'Enter group name')"
:editable="true"
icon="icon-add"
@click="showAddGroupForm"
@update:title="createGroup" />
- <AppNavigationItem
- id="everyone"
+ <AppNavigationItem id="everyone"
:exact="true"
:title="t('settings', 'Active users')"
:to="{ name: 'users' }"
{{ userCount }}
</AppNavigationCounter>
</AppNavigationItem>
- <AppNavigationItem
- v-if="settings.isAdmin"
+ <AppNavigationItem v-if="settings.isAdmin"
id="admin"
:exact="true"
:title="t('settings', 'Admins')"
</AppNavigationItem>
<!-- Hide the disabled if none, if we don't have the data (-1) show it -->
- <AppNavigationItem
- v-if="disabledGroupMenu.usercount > 0 || disabledGroupMenu.usercount === -1"
+ <AppNavigationItem v-if="disabledGroupMenu.usercount > 0 || disabledGroupMenu.usercount === -1"
id="disabled"
:exact="true"
:title="t('settings', 'Disabled users')"
</AppNavigationItem>
<AppNavigationCaption v-if="groupList.length > 0" :title="t('settings', 'Groups')" />
- <AppNavigationItem
- v-for="group in groupList"
+ <AppNavigationItem v-for="group in groupList"
:key="group.id"
:exact="true"
:title="group.title"
{{ group.count }}
</AppNavigationCounter>
<template slot="actions">
- <ActionButton
- v-if="group.id !== 'admin' && group.id !== 'disabled' && settings.isAdmin"
+ <ActionButton v-if="group.id !== 'admin' && group.id !== 'disabled' && settings.isAdmin"
icon="icon-delete"
@click="removeGroup(group.id)">
{{ t('settings', 'Remove group') }}
</template>
</AppNavigation>
<AppContent>
- <UserList
- :users="users"
+ <UserList :users="users"
:show-config="showConfig"
:selected-group="selectedGroupDecoded"
:external-actions="externalActions" />
<li>
<div class="user-status-menu-item">
<!-- Username display -->
- <a
- v-if="!inline"
+ <a v-if="!inline"
class="user-status-menu-item__header"
:href="profilePageLink"
@click="loadProfilePage">
</div>
<!-- Status management modal -->
- <SetStatusModal
- v-if="isModalOpen"
+ <SetStatusModal v-if="isModalOpen"
@close="closeModal" />
</li>
</template>
<template>
<div class="clear-at-select">
- <span
- class="clear-at-select__label">
+ <span class="clear-at-select__label">
{{ $t('user_status', 'Clear status message after') }}
</span>
- <Multiselect
- label="label"
+ <Multiselect label="label"
:value="option"
:options="options"
open-direction="top"
-
-->
<template>
- <form
- class="custom-input__form"
+ <form class="custom-input__form"
@submit.prevent>
- <input
- ref="input"
+ <input ref="input"
maxlength="80"
:disabled="disabled"
:placeholder="$t('user_status', 'What is your status?')"
-
-->
<template>
- <div
- class="predefined-status"
+ <div class="predefined-status"
tabindex="0"
@keyup.enter="select"
@keyup.space="select"
-->
<template>
- <div
- v-if="hasLoaded"
+ <div v-if="hasLoaded"
class="predefined-statuses-list">
- <PredefinedStatus
- v-for="status in predefinedStatuses"
+ <PredefinedStatus v-for="status in predefinedStatuses"
:key="status.id"
:message-id="status.id"
:icon="status.icon"
:clear-at="status.clearAt"
@select="selectStatus(status)" />
</div>
- <div
- v-else
+ <div v-else
class="predefined-statuses-list">
<div class="icon icon-loading-small" />
</div>
-->
<template>
- <Modal
- size="normal"
+ <Modal size="normal"
:title="$t('user_status', 'Set status')"
@close="closeModal">
<div class="set-status-modal">
</div>
<div class="set-status-modal__custom-input">
<EmojiPicker @select="setIcon">
- <button
- class="custom-input__emoji-button">
+ <button class="custom-input__emoji-button">
{{ visibleIcon }}
</button>
</EmojiPicker>
- <CustomMessageInput
- ref="customMessageInput"
+ <CustomMessageInput ref="customMessageInput"
:message="message"
@change="setMessage"
@submit="saveStatus" />
</div>
- <PredefinedStatusesList
- @selectStatus="selectPredefinedMessage" />
- <ClearAtSelect
- :clear-at="clearAt"
+ <PredefinedStatusesList @selectStatus="selectPredefinedMessage" />
+ <ClearAtSelect :clear-at="clearAt"
@selectClearAt="setClearAt" />
<div class="status-buttons">
<button class="status-buttons__select" :disabled="isSavingStatus" @click="clearStatus">
-->
<template>
- <DashboardWidget
- id="user-status_panel"
+ <DashboardWidget id="user-status_panel"
:items="items"
:loading="loading">
<template #default="{ item }">
- <DashboardWidgetItem
- :main-text="item.mainText"
+ <DashboardWidgetItem :main-text="item.mainText"
:sub-text="item.subText">
<template #avatar>
- <Avatar
- class="item-avatar"
+ <Avatar class="item-avatar"
:size="44"
:user="item.avatarUsername"
:display-name="item.mainText"
</DashboardWidgetItem>
</template>
<template #empty-content>
- <EmptyContent
- id="user_status-widget-empty-content"
+ <EmptyContent id="user_status-widget-empty-content"
icon="icon-user-status">
{{ t('user_status', 'No recent status changes') }}
</EmptyContent>
<template>
<li :class="{ inline }">
<div id="weather-status-menu-item">
- <Actions
- class="weather-status-menu-item__subheader"
+ <Actions class="weather-status-menu-item__subheader"
:default-icon="weatherIcon"
:menu-title="currentWeatherMessage">
<ActionText v-if="gotWeather"
{{ addRemoveFavoriteText }}
</ActionButton>
<ActionSeparator v-if="address && !errorMessage" />
- <ActionButton
- icon="icon-crosshair"
+ <ActionButton icon="icon-crosshair"
:close-after-click="true"
@click="onBrowserLocationClick">
{{ t('weather_status', 'Detect location') }}
</ActionButton>
- <ActionInput
- ref="addressInput"
+ <ActionInput ref="addressInput"
:disabled="false"
icon="icon-rename"
type="text"
@submit="onAddressSubmit">
{{ t('weather_status', 'Set custom address') }}
</ActionInput>
- <ActionButton
- v-show="favorites.length > 0"
+ <ActionButton v-show="favorites.length > 0"
:icon="toggleFavoritesIcon"
@click="showFavorites = !showFavorites">
{{ t('weather_status', 'Favorites') }}
<template>
<div>
- <Multiselect
- :value="currentValue"
+ <Multiselect :value="currentValue"
:placeholder="t('workflowengine', 'Select a file type')"
label="label"
track-by="pattern"
<template>
<div>
- <Multiselect
- :value="currentValue"
+ <Multiselect :value="currentValue"
:placeholder="t('workflowengine', 'Select a request URL')"
label="label"
track-by="pattern"
<template>
<div>
- <Multiselect
- :value="currentValue"
+ <Multiselect :value="currentValue"
:placeholder="t('workflowengine', 'Select a user agent')"
label="label"
track-by="pattern"
-
-->
<template>
- <div
- :id="id"
+ <div :id="id"
v-click-outside="clickOutsideConfig"
:class="{ 'header-menu--opened': opened }"
class="header-menu">
-->
<template>
- <a
- class="profile__primary-action-button"
+ <a class="profile__primary-action-button"
:class="{ 'disabled': disabled }"
:href="href"
:target="target"
rel="noopener noreferrer nofollow"
v-on="$listeners">
- <img
- class="icon"
+ <img class="icon"
:class="[icon, { 'icon-invert': colorPrimaryText === '#ffffff' }]"
:src="icon">
<slot />
<!-- Placeholders -->
<li v-for="placeholder in [1, 2, 3]" :key="placeholder">
- <svg
- class="unified-search__result-placeholder"
+ <svg class="unified-search__result-placeholder"
xmlns="http://www.w3.org/2000/svg"
fill="url(#unified-search__result-placeholder-gradient)">
<rect class="unified-search__result-placeholder-icon" />
-->
<template>
- <button
- class="primary"
+ <button class="primary"
:autofocus="true"
v-on="$listeners">
{{ t('core', 'Install recommended apps') }}
<transition name="fade" mode="out-in">
<div v-if="!passwordlessLogin && !resetPassword && resetPasswordTarget === ''"
key="login">
- <LoginForm
- :username.sync="user"
+ <LoginForm :username.sync="user"
:redirect-url="redirectUrl"
:direct-login="directLogin"
:messages="messages"
<div v-else-if="!loading && passwordlessLogin"
key="reset"
class="login-additional">
- <PasswordLessLoginForm
- :username.sync="user"
+ <PasswordLessLoginForm :username.sync="user"
:redirect-url="redirectUrl"
:inverted-colors="invertedColors"
:auto-complete-allowed="autoCompleteAllowed"
<a v-if="isCurrentUser"
class="primary profile__header__container__edit-button"
:href="settingsUrl">
- <PencilIcon
- class="pencil-icon"
+ <PencilIcon class="pencil-icon"
decorative
title=""
:size="16" />
<div class="profile__content">
<div class="profile__sidebar">
- <Avatar
- class="avatar"
+ <Avatar class="avatar"
:class="{ interactive: isCurrentUser }"
:user="userId"
:size="180"
backgroundImage: `url(${action.icon})`,
...(colorMainBackground === '#181818' && { filter: 'invert(1)' })
}">
- <ActionLink
- :close-after-click="true"
+ <ActionLink :close-after-click="true"
:icon="action.icon"
:href="action.target"
:target="action.id === 'phone' ? '_self' :'_blank'">
</ActionLink>
</Actions>
<template v-if="otherActions">
- <Actions
- :force-menu="true">
+ <Actions :force-menu="true">
<ActionLink v-for="action in otherActions"
:key="action.id"
:class="{ 'icon-invert': colorMainBackground === '#181818' }"
</div>
<div v-if="address" class="detail">
<p>
- <MapMarkerIcon
- class="map-icon"
+ <MapMarkerIcon class="map-icon"
decorative
title=""
:size="16" />
</template>
<template v-else>
<div class="profile__blocks-empty-info">
- <AccountIcon
- decorative
+ <AccountIcon decorative
title=""
fill-color="var(--color-text-maxcontrast)"
:size="60" />