archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-17 10:22:36 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'redesign-context-restyling' into 'develop'

Browse source 
Restyle context, select, dropdown menus

See merge request
This commit is contained in:
Jonathan Adeline 2023-11-15 06:08:35 +00:00
commit f472d0e6d7
80 changed files with 1995 additions and 1465 deletions
changelog/entries/unreleased/feature
1918_redesign_context_and_select_menus.json
enterprise/web-frontend/modules/baserow_enterprise/components
admin/contexts
CreateAuthProviderContext.vueEditAuthProviderMenuContext.vue
member-roles
MemberRolesDatabaseContextItem.vueMemberRolesTableContextItem.vue
teams
EditTeamContext.vueManageTeamForm.vue
premium/web-frontend/modules/baserow_premium
assets/scss/components/views
kanban.scss
components
admin
users
contexts
EditUserContext.vue
modals
DeleteUserModal.vue
workspaces
contexts
EditWorkspaceContext.vue
modals
DeleteWorkspaceModal.vue
row_comments
RowCommentContext.vue
views
ViewOwnershipMenuLink.vue
kanban
KanbanViewStackContext.vue
web-frontend
modules
builder/components
elements
ElementsListItem.vue
page/settings
PageSettingsPathParamsFormElement.vue
sidebar
SidebarComponentBuilder.vueSidebarItemBuilder.vue
core
assets/scss/components
button.scsscontext.scssdropdown.scssexpand_on_overflow_list.scssfilters.scssgroup_bys.scssselect.scsssortings.scss
components
ColorPickerContext.vueDropdown.vueDropdownItem.vue
application
CreateApplicationContext.vue
settings/members
EditInviteContext.vueEditMemberContext.vueEditRoleContext.vue
sidebar
Sidebar.vueSidebarApplication.vueSidebarDuplicateApplicationContextItem.vue
workspace
RemoveFromWorkspaceModal.vueWorkspaceContext.vueWorkspaceInviteForm.vueWorkspacesContextItem.vue
mixins
dropdown.js
pages
styleGuide.vue
database
components
docs
APIDocsExample.vue
field
FieldContext.vueFieldDateSubForm.vueFieldForm.vueFieldLinkRowSubForm.vueFieldNumberSubForm.vueFieldRatingSubForm.vueFieldRollupSubForm.vue
row
RowEditModalField.vue
settings
APIToken.vue
sidebar
Sidebar.vueSidebarItem.vue
table
SidebarDuplicateTableContextItem.vue
view
ViewContext.vueViewFieldConditionItem.vueViewFilterFormOperator.vueViewFilterTypeCollaborators.vueViewFilterTypeFileTypeDropdown.vueViewFilterTypeLinkRow.vueViewFilterTypeSelectOptions.vueViewGroupByContext.vueViewSortContext.vueViewsContextItem.vue
form
FormViewFieldMultipleLinkRow.vueFormViewModeContext.vue
grid
GridView.vueGridViewFieldFooter.vueGridViewFieldType.vueGridViewRowIdentifierDropdown.vue
fields
GridViewRowsAddContext.vue
webhook
WebhookForm.vue
locales
en.json
integrations/components/services
LocalBaserowTableServiceSortForm.vue
test/unit
core/components/__snapshots__
dropdown.spec.js.snap
database/components
export/__snapshots__
exportTableModal.spec.js.snap
view
__snapshots__
viewFilterForm.spec.js.snap
grid/__snapshots__
gridViewFieldFooter.spec.js.snap

7
changelog/entries/unreleased/feature/1918_redesign_context_and_select_menus.json Normal file
View file

@ -0,0 +1,7 @@
{
"type": "feature",
"message": "Redesign context and select menus",
"issue_number": 1918,
"bullet_points": [],
"created_at": "2023-10-23"
}

6
enterprise/web-frontend/modules/baserow_enterprise/components/admin/contexts/CreateAuthProviderContext.vue
View file

@ -8,8 +8,12 @@
<li <li
v-for="authProviderType in authProviderTypes" v-for="authProviderType in authProviderTypes"
:key="authProviderType.type" :key="authProviderType.type"
class="context__menu-item"
> >
<a @click="$emit('create', authProviderType)"> <a
class="context__menu-item-link"
@click="$emit('create', authProviderType)"
>
<AuthProviderIcon :icon="getIcon(authProviderType)" /> <AuthProviderIcon :icon="getIcon(authProviderType)" />
{{ getName(authProviderType) }} {{ getName(authProviderType) }}
</a> </a>

21
enterprise/web-frontend/modules/baserow_enterprise/components/admin/contexts/EditAuthProviderMenuContext.vue
View file

@ -5,15 +5,24 @@
:max-height-if-outside-viewport="true" :max-height-if-outside-viewport="true"
> >
<ul class="context__menu"> <ul class="context__menu">
<li v-if="canBeEdited(authProvider.type)"> <li v-if="canBeEdited(authProvider.type)" class="context__menu-item">
<a @click="$emit('edit', authProvider.id)"> <a
<i class="context__menu-icon iconoir-edit-pencil"></i> class="context__menu-item-link"
@click="$emit('edit', authProvider.id)"
>
<i class="context__menu-item-icon iconoir-edit-pencil"></i>
{{ $t('editAuthProviderMenuContext.edit') }} {{ $t('editAuthProviderMenuContext.edit') }}
</a> </a>
</li> </li>
<li v-if="canBeDeleted(authProvider.type)"> <li
<a @click="$emit('delete', authProvider.id)"> v-if="canBeDeleted(authProvider.type)"
<i class="context__menu-icon iconoir-bin"></i> class="context__menu-item context__menu-item--with-separator"
>
<a
class="context__menu-item-link context__menu-item-link--delete"
@click="$emit('delete', authProvider.id)"
>
<i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('editAuthProviderMenuContext.delete') }} {{ $t('editAuthProviderMenuContext.delete') }}
</a> </a>
</li> </li>

10
enterprise/web-frontend/modules/baserow_enterprise/components/member-roles/MemberRolesDatabaseContextItem.vue
View file

@ -1,11 +1,9 @@
<template> <template>
<div> <div>
<div @click="() => $refs.modal.show()"> <a class="context__menu-item-link" @click="() => $refs.modal.show()">
<a> <i class="context__menu-item-icon iconoir-community"></i
<i class="context__menu-icon iconoir-community"></i >{{ $t('memberRolesDatabaseContexItem.label') }}</a
>{{ $t('memberRolesDatabaseContexItem.label') }}</a >
>
</div>
<MemberRolesModal ref="modal" :database="application" /> <MemberRolesModal ref="modal" :database="application" />
</div> </div>
</template> </template>

6
enterprise/web-frontend/modules/baserow_enterprise/components/member-roles/MemberRolesTableContextItem.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<div @click="() => $refs.modal.show()"> <div class="context__menu-item" @click="() => $refs.modal.show()">
<a> <a class="context__menu-item-link">
<i class="context__menu-icon iconoir-community"></i <i class="context__menu-item-icon iconoir-community"></i
>{{ $t('memberRolesTableContexItem.label') }}</a >{{ $t('memberRolesTableContexItem.label') }}</a
> >
</div> </div>

12
enterprise/web-frontend/modules/baserow_enterprise/components/teams/EditTeamContext.vue
View file

@ -10,9 +10,10 @@
workspace.id workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="handleEditClick(team)"> <a class="context__menu-item-link" @click="handleEditClick(team)">
<i class="context__menu-icon iconoir-edit-pencil"></i> <i class="context__menu-item-icon iconoir-edit-pencil"></i>
{{ $t('editTeamContext.edit') }} {{ $t('editTeamContext.edit') }}
</a> </a>
</li> </li>
@ -24,15 +25,16 @@
workspace.id workspace.id
) )
" "
class="context__menu-item context__menu-item--with-separator"
> >
<a <a
:class="{ :class="{
'context__menu-item--loading': removeLoading, 'context__menu-item-link--loading': removeLoading,
}" }"
class="color-error" class="context__menu-item-link context__menu-item-link--delete"
@click.prevent="remove(team)" @click.prevent="remove(team)"
> >
<i class="context__menu-icon iconoir-bin"></i> <i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('editTeamContext.remove') }} {{ $t('editTeamContext.remove') }}
</a> </a>
</li> </li>

2
enterprise/web-frontend/modules/baserow_enterprise/components/teams/ManageTeamForm.vue
View file

@ -42,7 +42,7 @@
</div> </div>
<FormElement class="control"> <FormElement class="control">
<div class="control__elements"> <div class="control__elements">
<Dropdown v-model="values.default_role" :show-search="false"> <Dropdown v-model="values.default_role" :show-search="false" small>
<DropdownItem <DropdownItem
v-for="role in roles" v-for="role in roles"
:key="role.uid" :key="role.uid"

9
premium/web-frontend/modules/baserow_premium/assets/scss/components/views/kanban.scss
View file

@ -165,7 +165,9 @@
transition-delay: 0s; transition-delay: 0s;
} }
&:not(.kanban-view__stack-card--disabled):not(.kanban-view__stack-card--dragging):hover { &:not(.kanban-view__stack-card--disabled):not(
.kanban-view__stack-card--dragging
):hover {
cursor: pointer; cursor: pointer;
@include add-elevation($elevation-medium); @include add-elevation($elevation-medium);
@ -186,8 +188,11 @@
border: solid 1px $color-neutral-400; border: solid 1px $color-neutral-400;
border-radius: 100%; border-radius: 100%;
color: $color-neutral-900; color: $color-neutral-900;
width: 28px;
height: 28px;
justify-content: center;
@include center-text(28px, 12px); @include flex-align-items();
line-height: 26px; line-height: 26px;

46
premium/web-frontend/modules/baserow_premium/components/admin/users/contexts/EditUserContext.vue
View file

@ -3,54 +3,66 @@
<template v-if="Object.keys(user).length > 0"> <template v-if="Object.keys(user).length > 0">
<div class="context__menu-title">{{ user.username }} ({{ user.id }})</div> <div class="context__menu-title">{{ user.username }} ({{ user.id }})</div>
<ul class="context__menu"> <ul class="context__menu">
<li> <li class="context__menu-item">
<a @click.prevent="showEditModal"> <a class="context__menu-item-link" @click.prevent="showEditModal">
<i class="context__menu-icon iconoir-edit-pencil"></i> <i class="context__menu-item-icon iconoir-edit-pencil"></i>
{{ $t('action.edit') }} {{ $t('action.edit') }}
</a> </a>
</li> </li>
<li> <li class="context__menu-item">
<a @click.prevent="showChangePasswordModal"> <a
<i class="context__menu-icon iconoir-key-alt"></i> class="context__menu-item-link"
@click.prevent="showChangePasswordModal"
>
<i class="context__menu-item-icon iconoir-key-alt"></i>
{{ $t('editUserContext.changePassword') }} {{ $t('editUserContext.changePassword') }}
</a> </a>
</li> </li>
<li> <li class="context__menu-item">
<a <a
v-if="user.is_active" v-if="user.is_active"
class="context__menu-item-link"
:class="{ :class="{
'context__menu-item--loading': loading, 'context__menu-item-link--loading': loading,
}" }"
@click.prevent="deactivate" @click.prevent="deactivate"
> >
<i class="context__menu-icon iconoir-cancel"></i> <i class="context__menu-item-icon iconoir-cancel"></i>
{{ $t('action.deactivate') }} {{ $t('action.deactivate') }}
</a> </a>
<a <a
v-else v-else
class="context__menu-item-link"
:class="{ :class="{
'context__menu-item--loading': loading, 'context__menu-item-link--loading': loading,
}" }"
@click.prevent="activate" @click.prevent="activate"
> >
<i class="context__menu-icon iconoir-check"></i> <i class="context__menu-item-icon iconoir-check"></i>
{{ $t('action.activate') }} {{ $t('action.activate') }}
</a> </a>
</li> </li>
<li v-if="user.id !== userId && !user.is_staff"> <li
v-if="user.id !== userId && !user.is_staff"
class="context__menu-item"
>
<a <a
class="context__menu-item-link"
:class="{ :class="{
'context__menu-item--loading': impersonateLoading, 'context__menu-item-link--loading': impersonateLoading,
}" }"
@click.prevent="impersonate" @click.prevent="impersonate"
> >
<i class="context__menu-icon iconoir-group"></i> <i class="context__menu-item-icon iconoir-group"></i>
{{ $t('editUserContext.impersonate') }} {{ $t('editUserContext.impersonate') }}
</a> </a>
</li> </li>
<li> <li class="context__menu-item context__menu-item--with-separator">
<a @click.prevent="showDeleteModal"> <a
<i class="context__menu-icon iconoir-bin"></i> class="context__menu-item-link context__menu-item-link--delete"
@click.prevent="showDeleteModal"
>
<i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('editUserContext.delete') }} {{ $t('editUserContext.delete') }}
</a> </a>
</li> </li>

4
premium/web-frontend/modules/baserow_premium/components/admin/users/modals/DeleteUserModal.vue
View file

@ -16,7 +16,7 @@
</p> </p>
<div class="actions"> <div class="actions">
<div class="align-right"> <div class="align-right">
<a <button
class="button button--large button--error button--overflow" class="button button--large button--error button--overflow"
:class="{ 'button--loading': loading }" :class="{ 'button--loading': loading }"
:disabled="loading" :disabled="loading"
@ -24,7 +24,7 @@
@click.prevent="deleteUser()" @click.prevent="deleteUser()"
> >
{{ $t('deleteUserModal.delete', user) }} {{ $t('deleteUserModal.delete', user) }}
</a> </button>
</div> </div>
</div> </div>
</div> </div>

9
premium/web-frontend/modules/baserow_premium/components/admin/workspaces/contexts/EditWorkspaceContext.vue
View file

@ -5,9 +5,12 @@
{{ workspace.name }} ({{ workspace.id }}) {{ workspace.name }} ({{ workspace.id }})
</div> </div>
<ul class="context__menu"> <ul class="context__menu">
<li> <li class="context__menu-item context__menu-item--with-separator">
<a @click.prevent="showDeleteModal"> <a
<i class="context__menu-icon iconoir-bin"></i> class="context__menu-item-link context__menu-item-link--delete"
@click.prevent="showDeleteModal"
>
<i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('editWorkspaceContext.delete') }} {{ $t('editWorkspaceContext.delete') }}
</a> </a>
</li> </li>

4
premium/web-frontend/modules/baserow_premium/components/admin/workspaces/modals/DeleteWorkspaceModal.vue
View file

@ -15,7 +15,7 @@
</p> </p>
<div class="actions"> <div class="actions">
<div class="align-right"> <div class="align-right">
<a <button
class="button button--large button--error button--overflow" class="button button--large button--error button--overflow"
:class="{ 'button--loading': loading }" :class="{ 'button--loading': loading }"
:disabled="loading" :disabled="loading"
@ -23,7 +23,7 @@
@click.prevent="deleteGroup()" @click.prevent="deleteGroup()"
> >
{{ $t('deleteWorkspaceModal.delete', workspace) }} {{ $t('deleteWorkspaceModal.delete', workspace) }}
</a> </button>
</div> </div>
</div> </div>
</div> </div>

20
premium/web-frontend/modules/baserow_premium/components/row_comments/RowCommentContext.vue
View file

@ -6,15 +6,23 @@
> >
<div> <div>
<ul class="context__menu"> <ul class="context__menu">
<li class="edit"> <li class="context__menu-item edit">
<a :class="{ disabled: !canEdit }" @click.prevent="editComment"> <a
<i class="context__menu-icon iconoir-edit-pencil"></i> class="context__menu-item-link"
:class="{ disabled: !canEdit }"
@click.prevent="editComment"
>
<i class="context__menu-item-icon iconoir-edit-pencil"></i>
<span> {{ $t('rowCommentContext.edit') }} </span> <span> {{ $t('rowCommentContext.edit') }} </span>
</a> </a>
</li> </li>
<li class="delete"> <li class="context__menu-item context__menu-item--with-separator">
<a :class="{ disabled: !canDelete }" @click.prevent="deleteComment"> <a
<i class="context__menu-icon iconoir-bin"></i> class="context__menu-item-link context__menu-item-link--delete"
:class="{ disabled: !canDelete }"
@click.prevent="deleteComment"
>
<i class="context__menu-item-icon iconoir-bin"></i>
<span> {{ $t('rowCommentContext.delete') }} </span> <span> {{ $t('rowCommentContext.delete') }} </span>
</a> </a>
</li> </li>

13
premium/web-frontend/modules/baserow_premium/components/views/ViewOwnershipMenuLink.vue
View file

@ -1,8 +1,13 @@
<template> <template>
<a @click="changeOwnershipType(view.ownership_type)"> <li class="context__menu-item">
<i class="context__menu-icon iconoir-right-round-arrow"></i> <a
{{ changeOwnershipTypeText }} class="context__menu-item-link"
</a> @click="changeOwnershipType(view.ownership_type)"
>
<i class="context__menu-item-icon iconoir-right-round-arrow"></i>
{{ changeOwnershipTypeText }}
</a>
</li>
</template> </template>
<script> <script>

20
premium/web-frontend/modules/baserow_premium/components/views/kanban/KanbanViewStackContext.vue
View file

@ -9,9 +9,13 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click=";[$emit('create-row'), hide()]"> <a
<i class="context__menu-icon iconoir-plus"></i> class="context__menu-item-link"
@click=";[$emit('create-row'), hide()]"
>
<i class="context__menu-item-icon iconoir-plus"></i>
{{ $t('kanbanViewStackContext.createCard') }} {{ $t('kanbanViewStackContext.createCard') }}
</a> </a>
</li> </li>
@ -24,12 +28,14 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a <a
ref="updateContextLink" ref="updateContextLink"
class="context__menu-item-link"
@click="$refs.updateContext.toggle($refs.updateContextLink)" @click="$refs.updateContext.toggle($refs.updateContextLink)"
> >
<i class="context__menu-icon iconoir-edit-pencil"></i> <i class="context__menu-item-icon iconoir-edit-pencil"></i>
{{ $t('kanbanViewStackContext.editStack') }} {{ $t('kanbanViewStackContext.editStack') }}
</a> </a>
<KanbanViewUpdateStackContext <KanbanViewUpdateStackContext
@ -49,9 +55,13 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item context__menu-item--with-separator"
> >
<a @click="$refs.deleteModal.show()"> <a
<i class="context__menu-icon iconoir-bin"></i> class="context__menu-item-link context__menu-item-link--delete"
@click="$refs.deleteModal.show()"
>
<i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('kanbanViewStackContext.deleteStack') }} {{ $t('kanbanViewStackContext.deleteStack') }}
</a> </a>
</li> </li>

2
web-frontend/modules/builder/components/elements/ElementsListItem.vue
View file

@ -2,7 +2,7 @@
<a class="select__item-link" @click="$emit('click')"> <a class="select__item-link" @click="$emit('click')">
<span class="select__item-name"> <span class="select__item-name">
<i :class="`${elementType.iconClass} select__item-icon`"></i> <i :class="`${elementType.iconClass} select__item-icon`"></i>
{{ elementType.name }} <span class="select__item-name-text">{{ elementType.name }}</span>
</span> </span>
</a> </a>
</template> </template>

1
web-frontend/modules/builder/components/page/settings/PageSettingsPathParamsFormElement.vue
View file

@ -20,6 +20,7 @@
<div class="page-settings-path-params__dropdown"> <div class="page-settings-path-params__dropdown">
<Dropdown <Dropdown
:value="pathParam.type" :value="pathParam.type"
small
@input="$emit('update', pathParam.name, $event)" @input="$emit('update', pathParam.name, $event)"
> >
<DropdownItem <DropdownItem

5
web-frontend/modules/builder/components/sidebar/SidebarComponentBuilder.vue
View file

@ -15,9 +15,10 @@
application.workspace.id application.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="settingsClicked"> <a class="context__menu-item-link" @click="settingsClicked">
<i class="context__menu-icon iconoir-settings"></i> <i class="context__menu-item-icon iconoir-settings"></i>
{{ $t('sidebarComponentBuilder.settings') }} {{ $t('sidebarComponentBuilder.settings') }}
</a> </a>
</li> </li>

17
web-frontend/modules/builder/components/sidebar/SidebarItemBuilder.vue
View file

@ -35,9 +35,10 @@
v-if=" v-if="
$hasPermission('builder.page.update', page, builder.workspace.id) $hasPermission('builder.page.update', page, builder.workspace.id)
" "
class="context__menu-item"
> >
<a @click="enableRename()"> <a class="context__menu-item-link" @click="enableRename()">
<i class="context__menu-icon iconoir-edit-pencil"></i> <i class="context__menu-item-icon iconoir-edit-pencil"></i>
{{ $t('action.rename') }} {{ $t('action.rename') }}
</a> </a>
</li> </li>
@ -45,15 +46,17 @@
v-if=" v-if="
$hasPermission('builder.page.duplicate', page, builder.workspace.id) $hasPermission('builder.page.duplicate', page, builder.workspace.id)
" "
class="context__menu-item"
> >
<a <a
:class="{ :class="{
'context__menu-item--loading': duplicateLoading, 'context__menu-item-link--loading': duplicateLoading,
disabled: deleteLoading || duplicateLoading, disabled: deleteLoading || duplicateLoading,
}" }"
class="context__menu-item-link"
@click="duplicatePage()" @click="duplicatePage()"
> >
<i class="context__menu-icon iconoir-copy"></i> <i class="context__menu-item-icon iconoir-copy"></i>
{{ $t('action.duplicate') }} {{ $t('action.duplicate') }}
</a> </a>
</li> </li>
@ -61,12 +64,14 @@
v-if=" v-if="
$hasPermission('builder.page.delete', page, builder.workspace.id) $hasPermission('builder.page.delete', page, builder.workspace.id)
" "
class="context__menu-item context__menu-item--with-separator"
> >
<a <a
:class="{ 'context__menu-item--loading': deleteLoading }" :class="{ 'context__menu-item-link--loading': deleteLoading }"
class="context__menu-item-link context__menu-link--delete"
@click="deletePage()" @click="deletePage()"
> >
<i class="context__menu-icon iconoir-bin"></i> <i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('action.delete') }} {{ $t('action.delete') }}
</a> </a>
</li> </li>

2
web-frontend/modules/core/assets/scss/components/button.scss
View file

@ -277,6 +277,8 @@
@extend %ellipsis; @extend %ellipsis;
display: block; display: block;
width: 100%;
text-align: center;
} }
.button--full-width { .button--full-width {

213
web-frontend/modules/core/assets/scss/components/context.scss
View file

@ -3,7 +3,7 @@
z-index: $z-index-context; z-index: $z-index-context;
white-space: nowrap; white-space: nowrap;
background-color: $white; background-color: $white;
border: 1px solid $color-neutral-200; border: 1px solid $palette-neutral-400;
@include add-elevation($elevation-medium); @include add-elevation($elevation-medium);
@include rounded($rounded-md); @include rounded($rounded-md);
@ -47,90 +47,113 @@
} }
.context__menu-title { .context__menu-title {
color: $color-neutral-600; color: $palette-neutral-900;
padding: 12px 8px 2px 8px; padding: 12px 8px 2px 8px;
line-height: 13px; line-height: 13px;
margin-bottom: 10px; margin-bottom: 10px;
font-weight: 500;
}
.context__menu-item-icon {
position: relative;
color: $palette-neutral-800;
text-align: left;
font-size: 16px;
.context__menu-item-link--loading & {
visibility: hidden;
}
}
.context__menu-item-description {
font-size: 12px;
color: $palette-neutral-900;
white-space: normal;
line-height: 18px;
font-weight: 400;
}
.context__menu-item-link {
position: relative;
color: $palette-neutral-1300;
padding: 8px 10px;
user-select: none;
@include rounded($rounded);
@include flex-align-items(6px);
&.disabled {
cursor: not-allowed;
box-shadow: none;
color: $palette-neutral-700;
.context__menu-item-description {
color: $palette-neutral-700;
}
}
&:hover {
background-color: rgba($palette-neutral-1300, 0.04);
text-decoration: none;
&.disabled {
background: transparent;
}
.context__menu-item-icon {
color: $palette-neutral-1300;
}
&.context__menu-item-link--delete {
background: $palette-red-50;
color: $palette-red-800;
.context__menu-item-icon {
color: $palette-red-800;
}
}
}
&:active:not(.disabled) {
color: $palette-neutral-900;
background: #07081014;
.context__menu-item-icon {
color: $palette-neutral-600;
}
&.context__menu-item-link--delete {
background: $palette-red-100;
color: $palette-red-500;
.context__menu-item-icon {
color: $palette-red-500;
}
}
}
} }
.context__menu { .context__menu {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 10px 0; margin: 4px 0;
li { &.context__menu--can-be-active {
margin-bottom: 4px; .context__menu-item-link {
padding: 0 8px; padding-right: 32px;
} display: flex;
a { &.context__menu-item-link--loading {
position: relative; &::before {
color: $color-neutral-900; left: auto;
padding: 7px 8px; right: 8px;
user-select: none; }
font-size: 14px;
@include rounded($rounded); &.active::after {
@include flex-align-items(6px); display: none;
}
&.context__menu-item-with-desc {
flex-direction: column;
align-items: start;
}
&.disabled {
cursor: not-allowed;
opacity: 0.65;
box-shadow: none;
}
&:hover {
background-color: $color-neutral-100;
text-decoration: none;
}
&.context__menu-item--loading {
background-color: transparent;
cursor: initial;
&::before {
content: '';
z-index: 1;
@include loading(14px);
@include absolute(8px, auto, auto, 8px);
} }
} }
&.context__menu-item--delete {
color: $color-error-600;
}
}
&.context__menu--can-be-active a {
padding-right: 32px;
display: flex;
&.context__menu-item--loading {
&::before {
left: auto;
right: 8px;
}
&.active::after {
display: none;
}
}
}
}
.context__menu-icon {
position: relative;
color: $color-neutral-600;
text-align: left;
.context__menu-item--loading & {
color: $white;
} }
} }
@ -138,17 +161,6 @@
@include flex-align-items(4px); @include flex-align-items(4px);
} }
.context__menu-item-description {
font-size: 11px;
color: $color-neutral-600;
white-space: normal;
line-height: 15px;
.context__menu--can-be-active & {
margin-right: -22px;
}
}
.context__form { .context__form {
min-width: 260px; min-width: 260px;
padding: 16px; padding: 16px;
@ -165,9 +177,42 @@
} }
.context__menu-active-icon { .context__menu-active-icon {
color: $palette-green-600; color: $palette-neutral-1200;
position: absolute; position: absolute;
top: 7px; top: 7px;
right: 8px; right: 8px;
font-size: 16px; font-size: 16px;
} }
.context__menu-item {
margin-bottom: 4px;
padding: 0 4px;
font-weight: 500;
}
.context__menu-item--with-separator {
border-top: 1px solid $palette-neutral-200;
padding-top: 4px;
}
.context__menu-item-link--with-desc {
flex-direction: column;
align-items: start;
&.active {
background: rgba($palette-neutral-1300, 0.04);
}
}
.context__menu-item-link--loading {
background-color: transparent;
cursor: initial;
&::before {
content: '';
z-index: 1;
@include loading(14px);
@include absolute(8px, auto, auto, 10px);
}
}

57
web-frontend/modules/core/assets/scss/components/dropdown.scss
View file

@ -1,27 +1,30 @@
.dropdown { .dropdown {
position: relative; position: relative;
background-color: $white; background-color: $white;
@include add-elevation($elevation-low);
@include rounded($rounded);
} }
.dropdown__selected { .dropdown__selected {
position: relative; position: relative;
display: block; display: block;
width: 100%; width: 100%;
border: 1px solid $color-neutral-400; border: 1px solid $palette-neutral-400;
padding: 0 12px; padding: 12px 16px;
color: $color-neutral-900; box-sizing: border-box;
color: $palette-neutral-1200;
@include fixed-height(36px, 13px); @include fixed-height(44px, 13px);
@include rounded($rounded); @include rounded($rounded);
@include flex-align-items(4px); @include flex-align-items(4px);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
border-color: $color-neutral-600; border-color: $palette-neutral-500;
} }
.dropdown--error & { .dropdown--error & {
border-color: $color-error-500; border-color: $palette-red-600;
} }
.dropdown--tiny & { .dropdown--tiny & {
@ -30,13 +33,15 @@
} }
.dropdown--disabled & { .dropdown--disabled & {
background-color: $color-neutral-50; background-color: $palette-neutral-100;
color: $color-neutral-500; color: $palette-neutral-900;
cursor: not-allowed; cursor: not-allowed;
border-color: $palette-neutral-600;
}
&:hover { .dropdown.dropdown--small & {
border-color: $color-neutral-400; padding: 8px 12px;
} @include fixed-height(36px, 13px);
} }
} }
@ -60,17 +65,17 @@
.dropdown__toggle-icon { .dropdown__toggle-icon {
margin-left: auto; margin-left: auto;
color: $palette-neutral-600;
} }
.dropdown__items { .dropdown__items {
border: 1px solid $color-primary-500; border: 1px solid $palette-neutral-400;
background-color: $white; background-color: $white;
box-shadow: 0 2px 6px 0 rgba($black, 0.16);
z-index: 1; z-index: 1;
max-width: 500px;
@include absolute(0, 0, auto, 0); @include absolute(0, 0, auto, 0);
@include rounded($rounded); @include rounded($rounded);
@include add-elevation($elevation-medium);
&.dropdown__items--fixed { &.dropdown__items--fixed {
flex-direction: column; flex-direction: column;
@ -82,22 +87,6 @@
} }
} }
.select__item:hover {
background-color: transparent;
}
.select__item.hover {
background-color: $color-neutral-100;
}
.select__item.active {
background-color: $color-primary-100;
}
.select__item.active:hover::after {
display: block;
}
.dropdown--floating & { .dropdown--floating & {
right: auto; right: auto;
} }
@ -107,3 +96,11 @@
right: 0; right: 0;
} }
} }
.dropdown__selected-placeholder {
color: $palette-neutral-700;
}
.dropdown__items--max-width {
max-width: 500px;
}

1
web-frontend/modules/core/assets/scss/components/expand_on_overflow_list.scss
View file

@ -70,4 +70,5 @@
background-color: $color-neutral-100; background-color: $color-neutral-100;
box-sizing: border-box; box-sizing: border-box;
width: fit-content; width: fit-content;
padding: 0 10px;
} }

9
web-frontend/modules/core/assets/scss/components/filters.scss
View file

@ -86,10 +86,15 @@
color: $color-neutral-500; color: $color-neutral-500;
font-size: 16px; font-size: 16px;
border-radius: 6px; border-radius: 6px;
border: 1px solid #b5b5b7; border: 1px solid $palette-neutral-400;
background: #fff; background: #fff;
box-shadow: 0 1px 2px 0 rgba(7, 8, 16, 0.1); box-shadow: 0 1px 2px 0 rgba(7, 8, 16, 0.1);
padding: 8px 6px 3px; width: 36px;
height: 36px;
justify-content: center;
@include add-elevation($elevation-low);
@include flex-align-items();
&:hover { &:hover {
text-decoration: none; text-decoration: none;

4
web-frontend/modules/core/assets/scss/components/group_bys.scss
View file

@ -142,7 +142,3 @@
.group-bys__add-icon { .group-bys__add-icon {
font-size: 20px; font-size: 20px;
} }
.group-bys__add-context .context__menu-icon {
color: $color-neutral-900;
}

134
web-frontend/modules/core/assets/scss/components/select.scss
View file

@ -6,29 +6,36 @@
flex-direction: column; flex-direction: column;
} }
.select__search-icon {
color: $palette-neutral-600;
padding: 0 10px;
font-size: 16px;
.select__search:focus-within & {
color: $palette-blue-500;
}
}
.select__search { .select__search {
flex: 0 0; flex: 0 0;
position: relative; position: relative;
border-bottom: 1px solid $color-neutral-200; border-bottom: 1px solid $palette-neutral-200;
@include flex-align-items(); @include flex-align-items();
} }
.select__search-icon {
color: $color-neutral-300;
padding: 0 12px;
font-size: 18px;
}
.select__search-input { .select__search-input {
display: block; display: block;
width: 100%; width: 100%;
border: none; border: none;
padding: 0 12px 0 0; padding: 0 12px 0 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
@include fixed-height(36px, 14px); @include rounded($rounded);
@include fixed-height(36px, 12px);
&::placeholder {
color: $palette-neutral-700;
}
} }
.select__items { .select__items {
@ -46,7 +53,7 @@
&::after { &::after {
content: ''; content: '';
display: block; display: block;
height: 10px; height: 4px;
width: 100%; width: 100%;
} }
@ -66,7 +73,7 @@
padding: 20px 10px; padding: 20px 10px;
white-space: normal; white-space: normal;
text-align: center; text-align: center;
color: $color-neutral-500; color: $palette-neutral-700;
} }
.select__items-loading { .select__items-loading {
@ -93,41 +100,38 @@
} }
} }
%select__item-size {
@include fixed-height(32px, 14px);
}
.select__item-active-icon { .select__item-active-icon {
text-align: center; text-align: center;
color: $palette-green-600; color: $palette-neutral-1200;
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 5px; right: 5px;
font-size: 17px; font-size: 17px;
display: none; display: none;
.select__item.disabled &,
.select__item-link:active & {
color: $palette-neutral-400;
}
} }
.select__item { .select__item {
position: relative; position: relative;
margin: 0 8px 4px 8px; margin: 0 4px 3px 4px;
padding: 0 32px 0 10px;
user-select: none; user-select: none;
@include rounded($rounded); @include rounded($rounded);
&.select__item--has-notification {
padding-right: 48px;
}
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&:hover { &:hover,
background-color: $color-neutral-100; &.hover {
background-color: $palette-neutral-100;
} }
&--selected { &--selected {
background-color: $color-primary-100; background-color: $palette-neutral-100;
} }
&--indented { &--indented {
@ -142,7 +146,7 @@
} }
&.active { &.active {
background-color: $color-primary-100; background-color: rgba($palette-neutral-1300, 0.04);
.select__item-active-icon { .select__item-active-icon {
display: block; display: block;
@ -157,6 +161,7 @@
&.disabled { &.disabled {
background-color: transparent; background-color: transparent;
cursor: not-allowed;
&:hover { &:hover {
background-color: transparent; background-color: transparent;
@ -166,14 +171,19 @@
.select__item-link { .select__item-link {
display: block; display: block;
color: $color-neutral-900; color: $palette-neutral-1300;
padding: 8px 32px 8px 10px;
.select__item--has-notification & {
padding-right: 48px;
}
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
.select__item.disabled & { .select__item.disabled & {
color: $color-neutral-400; color: $palette-neutral-700;
&:hover { &:hover {
cursor: inherit; cursor: inherit;
@ -184,12 +194,13 @@
.select__item-name { .select__item-name {
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 500;
line-height: 15px;
@extend %ellipsis; @extend %ellipsis;
@extend %select__item-size;
span:first-child { .select__item-link:active & {
@extend %ellipsis; color: $palette-neutral-900;
} }
} }
@ -200,6 +211,11 @@
.select__item-icon { .select__item-icon {
margin-right: 6px; margin-right: 6px;
font-size: 16px; font-size: 16px;
.select__item.disabled &,
.select__item-link:active & {
color: $palette-neutral-900;
}
} }
.select__item-image { .select__item-image {
@ -209,28 +225,25 @@
} }
.select__item-description { .select__item-description {
font-size: 11px; font-size: 12px;
margin-right: -32px; color: $palette-neutral-900;
line-height: 140%;
color: $color-neutral-600;
padding-bottom: 6px;
padding-right: 10px;
white-space: normal; white-space: normal;
line-height: 18px;
font-weight: 400;
padding-top: 6px;
} }
.select__item-options { .select__item-options {
@extend %select__item-size;
display: none; display: none;
text-align: center; text-align: center;
width: 32px; width: 32px;
color: $color-neutral-600; color: $palette-neutral-800;
font-size: 17px; font-size: 17px;
@include absolute(0, 0, auto, auto); @include absolute(5px, 0, auto, auto);
&:hover { &:hover {
color: $color-neutral-800; color: $palette-neutral-1200;
} }
:not(.select__item--loading):not(.select__item--no-options):hover > & { :not(.select__item--loading):not(.select__item--no-options):hover > & {
@ -245,41 +258,43 @@
.select__footer { .select__footer {
flex: 0 0; flex: 0 0;
border-top: 1px solid $color-neutral-200; border-top: 1px solid $palette-neutral-200;
padding: 4px 4px 0 4px;
} }
.select__footer-button { .select__footer-button {
position: relative; position: relative;
display: block; display: block;
padding: 0 12px; padding: 0 10px;
color: $color-neutral-600; color: $palette-neutral-1300;
user-select: none; user-select: none;
border-bottom-left-radius: 2px; border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
margin-bottom: 4px;
@include rounded($rounded);
@include fixed-height(36px, 14px); @include fixed-height(36px, 14px);
@include flex-align-items(6px); @include flex-align-items(6px);
&:hover { &:hover {
background-color: $color-neutral-100; background-color: rgba($palette-neutral-1300, 0.04);
text-decoration: none; text-decoration: none;
} }
&.button--loading { &.button--loading {
background-color: $color-neutral-200; background-color: $palette-neutral-400;
} }
} }
.select__footer-create { .select__footer-create {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 8px 12px 4px 12px;
} }
.select__footer-create-link { .select__footer-create-link {
position: relative; position: relative;
width: calc(50% - 10px); width: 50%;
color: $color-neutral-900; color: $palette-neutral-1300;
padding: 0 10px; padding: 0 10px;
margin-bottom: 4px; margin-bottom: 4px;
min-width: 0; min-width: 0;
@ -295,28 +310,23 @@
padding-left: 6px; padding-left: 6px;
} }
&:nth-child(2n + 1) {
margin-right: 20px;
}
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
&:not(.select__footer-create-link--disabled):hover { &:not(.select__footer-create-link--disabled):hover {
text-decoration: none; text-decoration: none;
background-color: $color-neutral-100; background-color: rgba($palette-neutral-1300, 0.04);
} }
} }
.select__footer-create-link-icon { .select__footer-create-link-icon {
color: $color-neutral-600; color: $palette-neutral-800;
font-size: 14px; font-size: 14px;
margin-left: auto; margin-left: auto;
}
.select__footer-create-icon { .select__footer-create-link:not(.select__footer-create-link--disabled):hover
color: $color-neutral-600; & {
margin-right: 4px; color: $palette-neutral-1300;
font-size: 14px; }
} }

4
web-frontend/modules/core/assets/scss/components/sortings.scss
View file

@ -142,7 +142,3 @@
.sortings__add-icon { .sortings__add-icon {
font-size: 20px; font-size: 20px;
} }
.sortings__add-context .context__menu-icon {
color: $color-neutral-900;
}

3
web-frontend/modules/core/components/ColorPickerContext.vue
View file

@ -9,6 +9,7 @@
v-model="type" v-model="type"
class="dropdown--floating color-picker-context__color-type" class="dropdown--floating color-picker-context__color-type"
:show-search="false" :show-search="false"
small
> >
<DropdownItem name="Hex" :value="COLOR_NOTATIONS.HEX"></DropdownItem> <DropdownItem name="Hex" :value="COLOR_NOTATIONS.HEX"></DropdownItem>
<DropdownItem name="RGB" :value="COLOR_NOTATIONS.RGB"></DropdownItem> <DropdownItem name="RGB" :value="COLOR_NOTATIONS.RGB"></DropdownItem>
@ -66,7 +67,7 @@
v-if="Object.keys(variables).length > 0" v-if="Object.keys(variables).length > 0"
class="color-picker-context__variables" class="color-picker-context__variables"
> >
<Dropdown :value="isVariable ? value : ''" @input="setVariable"> <Dropdown :value="isVariable ? value : ''" small @input="setVariable">
<DropdownItem name="Custom" value=""></DropdownItem> <DropdownItem name="Custom" value=""></DropdownItem>
<DropdownItem <DropdownItem
v-for="variable in variables" v-for="variable in variables"

6
web-frontend/modules/core/components/Dropdown.vue
View file

@ -4,6 +4,7 @@
:class="{ :class="{
'dropdown--floating': !showInput, 'dropdown--floating': !showInput,
'dropdown--disabled': disabled, 'dropdown--disabled': disabled,
'dropdown--small': small,
}" }"
:tabindex="realTabindex" :tabindex="realTabindex"
@focusin="show()" @focusin="show()"
@ -27,7 +28,9 @@
</template> </template>
<template v-else> <template v-else>
<slot name="defaultValue"> <slot name="defaultValue">
{{ placeholder ? placeholder : $t('action.makeChoice') }} <span class="dropdown__selected-placeholder">{{
placeholder ? placeholder : $t('action.makeChoice')
}}</span>
</slot> </slot>
</template> </template>
<i class="dropdown__toggle-icon iconoir-nav-arrow-down"></i> <i class="dropdown__toggle-icon iconoir-nav-arrow-down"></i>
@ -38,6 +41,7 @@
:class="{ :class="{
hidden: !open, hidden: !open,
'dropdown__items--fixed': fixedItemsImmutable, 'dropdown__items--fixed': fixedItemsImmutable,
'dropdown__items--max-width': maxWidth,
}" }"
> >
<div v-if="showSearch" class="select__search"> <div v-if="showSearch" class="select__search">

2
web-frontend/modules/core/components/DropdownItem.vue
View file

@ -29,7 +29,7 @@
{{ description }} {{ description }}
</div> </div>
</a> </a>
<i class="select__item-active-icon iconoir-check-circle"></i> <i class="select__item-active-icon iconoir-check"></i>
</li> </li>
</template> </template>

17
web-frontend/modules/core/components/application/CreateApplicationContext.vue
View file

@ -9,15 +9,23 @@
class="loading margin-left-2 margin-top-2 margin-right-2 margin-bottom-2" class="loading margin-left-2 margin-top-2 margin-right-2 margin-bottom-2"
></div> ></div>
<ul v-else class="context__menu"> <ul v-else class="context__menu">
<li v-for="(applicationType, type) in applications" :key="type"> <li
v-for="(applicationType, type) in applications"
:key="type"
class="context__menu-item"
>
<a <a
:ref="'createApplicationModalToggle' + type" :ref="'createApplicationModalToggle' + type"
class="context__menu-item-link"
:class="{ :class="{
disabled: !canCreateCreateApplication, disabled: !canCreateCreateApplication,
}" }"
@click="toggleCreateApplicationModal(type)" @click="toggleCreateApplicationModal(type)"
> >
<i class="context__menu-icon" :class="applicationType.iconClass"></i> <i
class="context__menu-item-icon"
:class="applicationType.iconClass"
></i>
{{ applicationType.getName() }} {{ applicationType.getName() }}
</a> </a>
<CreateApplicationModal <CreateApplicationModal
@ -27,14 +35,15 @@
@created="hide" @created="hide"
></CreateApplicationModal> ></CreateApplicationModal>
</li> </li>
<li> <li class="context__menu-item">
<a <a
class="context__menu-item-link"
:class="{ :class="{
disabled: !canCreateCreateApplication, disabled: !canCreateCreateApplication,
}" }"
@click="openTemplateModal()" @click="openTemplateModal()"
> >
<i class="context__menu-icon iconoir-page"></i> <i class="context__menu-item-icon iconoir-page"></i>
{{ $t('createApplicationContext.fromTemplate') }} {{ $t('createApplicationContext.fromTemplate') }}
</a> </a>
<TemplateModal <TemplateModal

15
web-frontend/modules/core/components/settings/members/EditInviteContext.vue
View file

@ -2,21 +2,24 @@
<Context :overflow-scroll="true" :max-height-if-outside-viewport="true"> <Context :overflow-scroll="true" :max-height-if-outside-viewport="true">
<template v-if="Object.keys(invitation).length > 0"> <template v-if="Object.keys(invitation).length > 0">
<ul class="context__menu"> <ul class="context__menu">
<li> <li class="context__menu-item">
<a @click.prevent="copyEmail(invitation)"> <a
class="context__menu-item-link"
@click.prevent="copyEmail(invitation)"
>
<Copied ref="emailCopied"></Copied> <Copied ref="emailCopied"></Copied>
{{ $t('membersSettings.invitesTable.actions.copyEmail') }} {{ $t('membersSettings.invitesTable.actions.copyEmail') }}
</a> </a>
</li> </li>
<li> <li class="context__menu-item context__menu-item--with-separator">
<a <a
:class="{ :class="{
'context__menu-item--loading': removeLoading, 'context__menu-item-link--loading': removeLoading,
}" }"
class="color-error" class="context__menu-item-link context__menu-item-link--delete"
@click.prevent="remove(invitation)" @click.prevent="remove(invitation)"
> >
<i class="context__menu-icon iconoir-bin"></i> <i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('membersSettings.invitesTable.actions.remove') }} {{ $t('membersSettings.invitesTable.actions.remove') }}
</a> </a>
</li> </li>

12
web-frontend/modules/core/components/settings/members/EditMemberContext.vue
View file

@ -2,8 +2,8 @@
<Context :overflow-scroll="true" :max-height-if-outside-viewport="true"> <Context :overflow-scroll="true" :max-height-if-outside-viewport="true">
<template v-if="Object.keys(member).length > 0"> <template v-if="Object.keys(member).length > 0">
<ul class="context__menu"> <ul class="context__menu">
<li> <li class="context__menu-item">
<a @click.prevent="copyEmail(member)"> <a class="context__menu-item-link" @click.prevent="copyEmail(member)">
<Copied ref="emailCopied"></Copied> <Copied ref="emailCopied"></Copied>
{{ $t('membersSettings.membersTable.actions.copyEmail') }} {{ $t('membersSettings.membersTable.actions.copyEmail') }}
</a> </a>
@ -13,9 +13,13 @@
member.user_id !== userId && member.user_id !== userId &&
$hasPermission('workspace_user.delete', member, workspace.id) $hasPermission('workspace_user.delete', member, workspace.id)
" "
class="context__menu-item context__menu-item--with-separator"
> >
<a class="color-error" @click.prevent="showRemoveModal"> <a
<i class="context__menu-icon iconoir-bin"></i> class="context__menu-item-link context__menu-item-link--delete"
@click.prevent="showRemoveModal"
>
<i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('membersSettings.membersTable.actions.remove') }} {{ $t('membersSettings.membersTable.actions.remove') }}
</a> </a>
</li> </li>

21
web-frontend/modules/core/components/settings/members/EditRoleContext.vue
View file

@ -21,9 +21,9 @@
</div> </div>
</div> </div>
<ul class="context__menu context__menu--can-be-active"> <ul class="context__menu context__menu--can-be-active">
<li v-for="role in roles" :key="role.uid"> <li v-for="role in roles" :key="role.uid" class="context__menu-item">
<a <a
class="context__menu-item-with-desc" class="context__menu-item-link context__menu-item-link--with-desc"
:class="{ active: subject[roleValueColumn] === role.uid }" :class="{ active: subject[roleValueColumn] === role.uid }"
@click="roleUpdate(role.uid, subject)" @click="roleUpdate(role.uid, subject)"
> >
@ -33,22 +33,21 @@
>{{ $t('common.free') }} >{{ $t('common.free') }}
</Badge> </Badge>
</span> </span>
<span <div v-if="role.description" class="context__menu-item-description">
v-if="role.description"
class="context__menu-item-description"
>
{{ role.description }} {{ role.description }}
</span> </div>
<i <i
v-if="subject[roleValueColumn] === role.uid" v-if="subject[roleValueColumn] === role.uid"
class="context__menu-active-icon iconoir-check-circle" class="context__menu-active-icon iconoir-check"
></i> ></i>
</a> </a>
</li> </li>
<li> <li
v-if="allowRemovingRole"
class="context__menu-item context__menu-item--with-separator"
>
<a <a
v-if="allowRemovingRole" class="context__menu-item-link context__menu-item-link--delete"
class="context__menu-item--delete"
@click="$emit('delete')" @click="$emit('delete')"
>{{ $t('action.remove') }}</a >{{ $t('action.remove') }}</a
> >

16
web-frontend/modules/core/components/sidebar/Sidebar.vue
View file

@ -37,19 +37,23 @@
> >
<div class="context__menu-title">{{ name }}</div> <div class="context__menu-title">{{ name }}</div>
<ul class="context__menu"> <ul class="context__menu">
<li> <li class="context__menu-item">
<a @click=";[$refs.settingsModal.show(), $refs.userContext.hide()]"> <a
<i class="context__menu-icon iconoir-settings"></i> class="context__menu-item-link"
@click=";[$refs.settingsModal.show(), $refs.userContext.hide()]"
>
<i class="context__menu-item-icon iconoir-settings"></i>
{{ $t('sidebar.settings') }} {{ $t('sidebar.settings') }}
</a> </a>
<SettingsModal ref="settingsModal"></SettingsModal> <SettingsModal ref="settingsModal"></SettingsModal>
</li> </li>
<li> <li class="context__menu-item">
<a <a
:class="{ 'context__menu-item--loading': logoffLoading }" class="context__menu-item-link"
:class="{ 'context__menu-item-link--loading': logoffLoading }"
@click="logoff()" @click="logoff()"
> >
<i class="context__menu-icon iconoir-log-out"></i> <i class="context__menu-item-icon iconoir-log-out"></i>
{{ $t('sidebar.logoff') }} {{ $t('sidebar.logoff') }}
</a> </a>
</li> </li>

26
web-frontend/modules/core/components/sidebar/SidebarApplication.vue
View file

@ -46,6 +46,7 @@
<li <li
v-for="(component, index) in additionalContextComponents" v-for="(component, index) in additionalContextComponents"
:key="index" :key="index"
class="context__menu-item"
@click="$refs.context.hide()" @click="$refs.context.hide()"
> >
<component :is="component" :application="application"></component> <component :is="component" :application="application"></component>
@ -59,9 +60,10 @@
application.workspace.id application.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="enableRename()"> <a class="context__menu-item-link" @click="enableRename()">
<i class="context__menu-icon iconoir-edit-pencil"></i> <i class="context__menu-item-icon iconoir-edit-pencil"></i>
{{ {{
$t('sidebarApplication.rename', { $t('sidebarApplication.rename', {
type: application._.type.name.toLowerCase(), type: application._.type.name.toLowerCase(),
@ -77,6 +79,7 @@
application.workspace.id application.workspace.id
) )
" "
class="context__menu-item"
> >
<SidebarDuplicateApplicationContextItem <SidebarDuplicateApplicationContextItem
:application="application" :application="application"
@ -92,9 +95,10 @@
application.workspace.id application.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="openSnapshots"> <a class="context__menu-item-link" @click="openSnapshots">
<i class="context__menu-icon baserow-icon-history"></i> <i class="context__menu-item-icon baserow-icon-history"></i>
{{ $t('sidebarApplication.snapshots') }} {{ $t('sidebarApplication.snapshots') }}
</a> </a>
</li> </li>
@ -110,9 +114,13 @@
application.workspace.id application.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="showApplicationTrashModal"> <a
<i class="context__menu-icon iconoir-refresh-double"></i> class="context__menu-item-link"
@click="showApplicationTrashModal"
>
<i class="context__menu-item-icon iconoir-refresh-double"></i>
{{ $t('sidebarApplication.viewTrash') }} {{ $t('sidebarApplication.viewTrash') }}
</a> </a>
</li> </li>
@ -124,12 +132,14 @@
application.workspace.id application.workspace.id
) )
" "
class="context__menu-item context__menu-item--with-separator"
> >
<a <a
:class="{ 'context__menu-item--loading': deleting }" class="context__menu-item-link context__menu-item-link--delete"
:class="{ 'context__menu-item-link--loading': deleting }"
@click="deleteApplication()" @click="deleteApplication()"
> >
<i class="context__menu-icon iconoir-bin"></i> <i class="context__menu-item-icon iconoir-bin"></i>
{{ {{
$t('sidebarApplication.delete', { $t('sidebarApplication.delete', {
type: application._.type.name.toLowerCase(), type: application._.type.name.toLowerCase(),

5
web-frontend/modules/core/components/sidebar/SidebarDuplicateApplicationContextItem.vue
View file

@ -1,12 +1,13 @@
<template> <template>
<a <a
class="context__menu-item-link"
:class="{ :class="{
'context__menu-item--loading': duplicating, 'context__menu-item-link--loading': duplicating,
disabled: disabled || duplicating, disabled: disabled || duplicating,
}" }"
@click="duplicateApplication()" @click="duplicateApplication()"
> >
<i class="context__menu-icon iconoir-copy"></i> <i class="context__menu-item-icon iconoir-copy"></i>
{{ {{
$t('sidebarApplication.duplicate', { $t('sidebarApplication.duplicate', {
type: application._.type.name.toLowerCase(), type: application._.type.name.toLowerCase(),

4
web-frontend/modules/core/components/workspace/RemoveFromWorkspaceModal.vue
View file

@ -15,14 +15,14 @@
</p> </p>
<div class="actions"> <div class="actions">
<div class="align-right"> <div class="align-right">
<a <button
class="button button--large button--error button--overflow" class="button button--large button--error button--overflow"
:class="{ 'button--loading': loading }" :class="{ 'button--loading': loading }"
:disabled="loading" :disabled="loading"
@click.prevent="remove()" @click.prevent="remove()"
> >
{{ $t('removeFromWorkspaceModal.remove') }} {{ $t('removeFromWorkspaceModal.remove') }}
</a> </button>
</div> </div>
</div> </div>
</div> </div>

41
web-frontend/modules/core/components/workspace/WorkspaceContext.vue
View file

@ -13,14 +13,21 @@
class="loading margin-left-2 margin-top-2 margin-bottom-2 margin-bottom-2" class="loading margin-left-2 margin-top-2 margin-bottom-2 margin-bottom-2"
></div> ></div>
<ul v-else class="context__menu"> <ul v-else class="context__menu">
<li v-if="$hasPermission('workspace.update', workspace, workspace.id)"> <li
<a @click="$emit('rename')"> v-if="$hasPermission('workspace.update', workspace, workspace.id)"
<i class="context__menu-icon iconoir-edit-pencil"></i> class="context__menu-item"
>
<a class="context__menu-item-link" @click="$emit('rename')">
<i class="context__menu-item-icon iconoir-edit-pencil"></i>
{{ $t('workspaceContext.renameWorkspace') }} {{ $t('workspaceContext.renameWorkspace') }}
</a> </a>
</li> </li>
<li v-if="$hasPermission('invitation.read', workspace, workspace.id)"> <li
v-if="$hasPermission('invitation.read', workspace, workspace.id)"
class="context__menu-item"
>
<a <a
class="context__menu-item-link"
@click=" @click="
$router.push({ $router.push({
name: 'settings-members', name: 'settings-members',
@ -31,30 +38,38 @@
hide() hide()
" "
> >
<i class="context__menu-icon iconoir-community"></i> <i class="context__menu-item-icon iconoir-community"></i>
{{ $t('workspaceContext.members') }} {{ $t('workspaceContext.members') }}
</a> </a>
</li> </li>
<li <li
v-if="$hasPermission('workspace.read_trash', workspace, workspace.id)" v-if="$hasPermission('workspace.read_trash', workspace, workspace.id)"
class="context__menu-item"
> >
<a @click="showWorkspaceTrashModal"> <a class="context__menu-item-link" @click="showWorkspaceTrashModal">
<i class="context__menu-icon iconoir-refresh-double"></i> <i class="context__menu-item-icon iconoir-refresh-double"></i>
{{ $t('workspaceContext.viewTrash') }} {{ $t('workspaceContext.viewTrash') }}
</a> </a>
</li> </li>
<li> <li class="context__menu-item">
<a @click="$refs.leaveWorkspaceModal.show()"> <a
<i class="context__menu-icon iconoir-log-out"></i> class="context__menu-item-link"
@click="$refs.leaveWorkspaceModal.show()"
>
<i class="context__menu-item-icon iconoir-log-out"></i>
{{ $t('workspaceContext.leaveWorkspace') }} {{ $t('workspaceContext.leaveWorkspace') }}
</a> </a>
</li> </li>
<li v-if="$hasPermission('workspace.delete', workspace, workspace.id)"> <li
v-if="$hasPermission('workspace.delete', workspace, workspace.id)"
class="context__menu-item context__menu-item--with-separator"
>
<a <a
:class="{ 'context__menu-item--loading': loading }" class="context__menu-item-link context__menu-item-link--delete"
:class="{ 'context__menu-item-link--loading': loading }"
@click="deleteWorkspace" @click="deleteWorkspace"
> >
<i class="context__menu-icon iconoir-bin"></i> <i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('workspaceContext.deleteWorkspace') }} {{ $t('workspaceContext.deleteWorkspace') }}
</a> </a>
</li> </li>

1
web-frontend/modules/core/components/workspace/WorkspaceInviteForm.vue
View file

@ -28,6 +28,7 @@
v-model="values.permissions" v-model="values.permissions"
class="group-invite-form__role-selector-dropdown" class="group-invite-form__role-selector-dropdown"
:show-search="false" :show-search="false"
small
> >
<DropdownItem <DropdownItem
v-for="role in roles" v-for="role in roles"

20
web-frontend/modules/core/components/workspace/WorkspacesContextItem.vue
View file

@ -10,21 +10,23 @@
> >
<a class="select__item-link" @click="selectWorkspace(workspace)"> <a class="select__item-link" @click="selectWorkspace(workspace)">
<div :title="workspace.name" class="select__item-name"> <div :title="workspace.name" class="select__item-name">
<Editable <span class="select__item-name-text">
ref="rename" <Editable
:value="workspace.name" ref="rename"
@change="renameWorkspace(workspace, $event)" :value="workspace.name"
></Editable> @change="renameWorkspace(workspace, $event)"
></Editable>
</span>
<span <span
v-if="hasUnreadNotifications" v-if="hasUnreadNotifications"
class="sidebar__unread-notifications-icon" class="sidebar__unread-notifications-icon"
></span> ></span>
</div> </div>
<i
v-if="workspace._.selected"
class="select__item-active-icon iconoir-check-circle"
></i>
</a> </a>
<i
v-if="workspace._.selected"
class="select__item-active-icon iconoir-check"
></i>
<a <a
ref="contextLink" ref="contextLink"
class="select__item-options" class="select__item-options"

13
web-frontend/modules/core/mixins/dropdown.js
View file

@ -45,6 +45,11 @@ export default {
required: false, required: false,
default: false, default: false,
}, },
small: {
type: Boolean,
required: false,
default: false,
},
tabindex: { tabindex: {
type: Number, type: Number,
required: false, required: false,
@ -61,6 +66,14 @@ export default {
required: false, required: false,
default: false, default: false,
}, },
/**
* Apply max width to the dropdown items container.
*/
maxWidth: {
type: Boolean,
required: false,
default: false,
},
}, },
data() { data() {
return { return {

277
web-frontend/modules/core/pages/styleGuide.vue
View file

@ -325,6 +325,87 @@
</div> </div>
</div> </div>
</div> </div>
<div class="control">
<label class="control__label">Dropdown small</label>
<div class="control__elements">
value: {{ dropdown }}
<br />
<br />
<div style="width: 200px">
<Dropdown v-model="dropdown" small>
<DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
<DropdownItem
name="Choice 2"
value="choice-2"
icon="iconoir-edit-pencil"
description="Lorem ipsum dolor sit amet, consectetur."
></DropdownItem>
<DropdownItem
name="Choice 3"
value="choice-3"
icon="iconoir-db"
></DropdownItem>
<DropdownItem
name="Choice 4"
value="choice-4"
icon="iconoir-cancel"
:disabled="true"
></DropdownItem>
<DropdownItem
name="Choice 5"
value="choice-5"
icon="iconoir-edit-pencil"
description="Lorem ipsum dolor sit amet, consectetur."
></DropdownItem>
<DropdownItem
name="Choice 6"
value="choice-6"
icon="iconoir-edit-pencil"
description="Lorem ipsum dolor sit amet, consectetur."
></DropdownItem>
</Dropdown>
</div>
</div>
</div>
<div class="control">
<label class="control__label">Dropdown disabled</label>
<div class="control__elements">
<div style="width: 200px">
<Dropdown v-model="dropdown" disabled>
<DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
<DropdownItem
name="Choice 2"
value="choice-2"
icon="iconoir-edit-pencil"
description="Lorem ipsum dolor sit amet, consectetur."
></DropdownItem>
<DropdownItem
name="Choice 3"
value="choice-3"
icon="iconoir-db"
></DropdownItem>
<DropdownItem
name="Choice 4"
value="choice-4"
icon="iconoir-cancel"
:disabled="true"
></DropdownItem>
<DropdownItem
name="Choice 5"
value="choice-5"
icon="iconoir-edit-pencil"
description="Lorem ipsum dolor sit amet, consectetur."
></DropdownItem>
<DropdownItem
name="Choice 6"
value="choice-6"
icon="iconoir-edit-pencil"
description="Lorem ipsum dolor sit amet, consectetur."
></DropdownItem>
</Dropdown>
</div>
</div>
</div>
<div class="control"> <div class="control">
<label class="control__label">Dropdown</label> <label class="control__label">Dropdown</label>
<div class="control__elements"> <div class="control__elements">
@ -450,23 +531,95 @@
<DropdownItem <DropdownItem
name="Choice 2" name="Choice 2"
value="choice-2" value="choice-2"
icon="pencil" icon="iconoir-edit-pencil"
></DropdownItem> ></DropdownItem>
<DropdownItem <DropdownItem
name="Choice 3" name="Choice 3"
value="choice-3" value="choice-3"
icon="database" icon="iconoir-db"
></DropdownItem> ></DropdownItem>
<DropdownItem <DropdownItem
name="Choice 4" name="Choice 4"
value="choice-4" value="choice-4"
icon="times" icon="iconoir-cancel"
:disabled="true" :disabled="true"
></DropdownItem> ></DropdownItem>
</Dropdown> </Dropdown>
</div> </div>
</div> </div>
</div> </div>
<div class="control">
<label class="control__label">Dropdown tiny</label>
<div class="control__elements">
value: {{ dropdown }}
<br />
<br />
<div style="width: 200px">
<Dropdown
v-model="dropdown"
:show-search="false"
class="dropdown--tiny"
>
<DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
<DropdownItem
name="Choice 2"
value="choice-2"
icon="iconoir-edit-pencil"
></DropdownItem>
<DropdownItem
name="Choice 3"
value="choice-3"
icon="iconoir-db"
></DropdownItem>
<DropdownItem
name="Choice 4"
value="choice-4"
icon="iconoir-cancel"
:disabled="true"
></DropdownItem>
</Dropdown>
</div>
</div>
</div>
<div class="control">
<label class="control__label">Dropdown error</label>
<div class="control__elements">
<div style="width: 200px">
<Dropdown v-model="dropdown" class="dropdown--error">
<DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
<DropdownItem
name="Choice 2"
value="choice-2"
icon="iconoir-edit-pencil"
description="Lorem ipsum dolor sit amet, consectetur."
></DropdownItem>
<DropdownItem
name="Choice 3"
value="choice-3"
icon="iconoir-db"
></DropdownItem>
<DropdownItem
name="Choice 4"
value="choice-4"
icon="iconoir-cancel"
:disabled="true"
></DropdownItem>
<DropdownItem
name="Choice 5"
value="choice-5"
icon="iconoir-edit-pencil"
description="Lorem ipsum dolor sit amet, consectetur."
></DropdownItem>
<DropdownItem
name="Choice 6"
value="choice-6"
icon="iconoir-edit-pencil"
description="Lorem ipsum dolor sit amet, consectetur."
></DropdownItem>
</Dropdown>
</div>
</div>
</div>
<div class="control"> <div class="control">
<label class="control__label">Datepicker field</label> <label class="control__label">Datepicker field</label>
<div class="control__elements"> <div class="control__elements">
@ -709,6 +862,18 @@
type="ghost" type="ghost"
></Button> ></Button>
</div> </div>
<div
class="margin-bottom-3 style-guide__buttons"
:style="{ backgroundColor: 'white', padding: '5px' }"
>
<h3>Overflow button</h3>
<Button overflow>Overflow</Button>
<button class="button button--large button--error button--overflow">
Remove
</button>
</div>
<div <div
class="margin-bottom-3" class="margin-bottom-3"
:style="{ backgroundColor: 'white', padding: '5px' }" :style="{ backgroundColor: 'white', padding: '5px' }"
@ -841,21 +1006,24 @@
<div class="context"> <div class="context">
<div class="context__menu-title">Vehicles</div> <div class="context__menu-title">Vehicles</div>
<ul class="context__menu"> <ul class="context__menu">
<li> <li class="context__menu-item">
<a href="#"> <a class="context__menu-item-link" href="#">
<i class="context__menu-icon iconoir-edit-pencil"></i> <i class="context__menu-item-icon iconoir-edit-pencil"></i>
Rename database Rename database
</a> </a>
</li> </li>
<li> <li class="context__menu-item">
<a href="#"> <a class="context__menu-item-link" href="#">
<i class="context__menu-icon iconoir-bin"></i> <i class="context__menu-item-icon iconoir-bin"></i>
Delete table Delete table
</a> </a>
</li> </li>
<li> <li class="context__menu-item">
<a href="#" class="context__menu-item--loading"> <a
<i class="context__menu-icon iconoir-bin"></i> class="context__menu-item-link context__menu-item-link--loading"
href="#"
>
<i class="context__menu-item-icon iconoir-bin"></i>
Loading Loading
</a> </a>
</li> </li>
@ -864,20 +1032,35 @@
<div class="context" style="max-width: 264px"> <div class="context" style="max-width: 264px">
<div class="context__menu-title">Workspace permissions</div> <div class="context__menu-title">Workspace permissions</div>
<ul class="context__menu context__menu--can-be-active"> <ul class="context__menu context__menu--can-be-active">
<li> <li class="context__menu-item">
<a href="#" class="context__menu-item-with-desc active"> <a
href="#"
class="context__menu-item-link context__menu-item-link--with-desc active"
>
<span class="context__menu-item-title">Admin</span> <span class="context__menu-item-title">Admin</span>
<div class="context__menu-item-description"> <div class="context__menu-item-description">
Description of what an admin can or can’t do on the Description of what an admin can or can’t do on the
workspace. workspace.
</div> </div>
<i class="context__menu-active-icon iconoir-check-circle"></i> <i class="context__menu-active-icon iconoir-check"></i>
</a> </a>
</li> </li>
<li> <li class="context__menu-item">
<a <a
href="#" href="#"
class="context__menu-item-with-desc context__menu-item--loading" class="context__menu-item-link context__menu-item-link--with-desc disabled"
>
<span class="context__menu-item-title">Admin</span>
<div class="context__menu-item-description">
Description of what an admin can or can’t do on the
workspace.
</div>
</a>
</li>
<li class="context__menu-item">
<a
href="#"
class="context__menu-item-link context__menu-item-link--with-desc context__menu-item-link--loading"
> >
<span class="context__menu-item-title">Builder</span> <span class="context__menu-item-title">Builder</span>
<div class="context__menu-item-description"> <div class="context__menu-item-description">
@ -886,8 +1069,13 @@
</div> </div>
</a> </a>
</li> </li>
<li> <li class="context__menu-item context__menu-item--with-separator">
<a class="color-error" href="#"> Remove from workspace </a> <a
class="context__menu-item-link context__menu-item-link--delete"
href="#"
>
Remove from workspace
</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -904,8 +1092,8 @@
<li class="select__item active"> <li class="select__item active">
<a href="#" class="select__item-link"> <a href="#" class="select__item-link">
<div class="select__item-name">Workspace name 1</div> <div class="select__item-name">Workspace name 1</div>
<i class="select__item-active-icon iconoir-check-circle"></i>
</a> </a>
<i class="select__item-active-icon iconoir-check"></i>
<a href="#" class="select__item-options"> <a href="#" class="select__item-options">
<i class="baserow-icon-more-vertical"></i> <i class="baserow-icon-more-vertical"></i>
</a> </a>
@ -928,7 +1116,7 @@
</li> </li>
<li class="select__item"> <li class="select__item">
<a href="#" class="select__item-link"> <a href="#" class="select__item-link">
<div class="select__item-name">roup name 4</div> <div class="select__item-name">Workspace name 4</div>
</a> </a>
<a href="#" class="select__item-options"> <a href="#" class="select__item-options">
<i class="baserow-icon-more-vertical"></i> <i class="baserow-icon-more-vertical"></i>
@ -1230,22 +1418,30 @@
<Context ref="context1"> <Context ref="context1">
<div class="context__menu-title">Vehicles</div> <div class="context__menu-title">Vehicles</div>
<ul class="context__menu"> <ul class="context__menu">
<li> <li class="context__menu-item">
<a href="#"> <a class="context__menu-item-link" href="#">
<i class="context__menu-icon iconoir-edit-pencil"></i> <i class="context__menu-item-icon iconoir-edit-pencil"></i>
This does nothing This does nothing
</a> </a>
</li> </li>
<li> <li class="context__menu-item">
<a @click="$refs.context2.toggle($event.target)"> <a
class="context__menu-item-link"
@click="$refs.context2.toggle($event.target)"
>
Open another context Open another context
</a> </a>
<Context ref="context2"> <Context ref="context2">
<div class="context__menu-title">Open modal</div> <div class="context__menu-title">Open modal</div>
<ul class="context__menu"> <ul class="context__menu">
<li> <li class="context__menu-item">
<a @click="$refs.modal1.show()"> <a
<i class="context__menu-icon iconoir-edit-pencil"></i> class="context__menu-item-link"
@click="$refs.modal1.show()"
>
<i
class="context__menu-item-icon iconoir-edit-pencil"
></i>
Click to open modal Click to open modal
</a> </a>
</li> </li>
@ -1259,25 +1455,30 @@
<Context ref="context3"> <Context ref="context3">
<div class="context__menu-title">Vehicles</div> <div class="context__menu-title">Vehicles</div>
<ul class="context__menu"> <ul class="context__menu">
<li> <li class="context__menu-item">
<a href="#"> <a class="context__menu-item-link" href="#">
<i <i
class="context__menu-icon iconoir-edit-pencil" class="context__menu-item-icon iconoir-edit-pencil"
></i> ></i>
This does nothing This does nothing
</a> </a>
</li> </li>
<li> <li class="context__menu-item">
<a @click="$refs.context4.toggle($event.target)"> <a
class="context__menu-item-link"
@click="$refs.context4.toggle($event.target)"
>
Open another context Open another context
</a> </a>
<Context ref="context4"> <Context ref="context4">
<div class="context__menu-title">End!</div> <div class="context__menu-title">End!</div>
</Context> </Context>
</li> </li>
<li> <li class="context__menu-item">
<a href="#"> <a class="context__menu-item-link" href="#">
<i class="context__menu-icon iconoir-bin"></i> <i
class="context__menu-item-icon iconoir-bin"
></i>
This does nothing This does nothing
</a> </a>
</li> </li>
@ -1289,7 +1490,7 @@
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<i class="context__menu-icon iconoir-bin"></i> <i class="context__menu-item-icon iconoir-bin"></i>
This does nothing This does nothing
</a> </a>
</li> </li>

1
web-frontend/modules/database/components/docs/APIDocsExample.vue
View file

@ -52,6 +52,7 @@
<Dropdown <Dropdown
class="dropdown--floating" class="dropdown--floating"
:value="value.type" :value="value.type"
small
@input=" @input="
$emit('input', { $emit('input', {
userFieldNames: value.userFieldNames, userFieldNames: value.userFieldNames,

11
web-frontend/modules/database/components/field/FieldContext.vue
View file

@ -14,10 +14,11 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a <a
ref="updateFieldContextLink" ref="updateFieldContextLink"
class="grid-view__description-options" class="context__menu-item-link grid-view__description-options"
@click=" @click="
$refs.updateFieldContext.toggle( $refs.updateFieldContext.toggle(
$refs.updateFieldContextLink, $refs.updateFieldContextLink,
@ -27,7 +28,7 @@
) )
" "
> >
<i class="context__menu-icon iconoir-edit-pencil"></i> <i class="context__menu-item-icon iconoir-edit-pencil"></i>
{{ $t('fieldContext.editField') }} {{ $t('fieldContext.editField') }}
</a> </a>
<UpdateFieldContext <UpdateFieldContext
@ -48,12 +49,14 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item context__menu-item--with-separator"
> >
<a <a
:class="{ 'context__menu-item--loading': deleteLoading }" :class="{ 'context__menu-item-link--loading': deleteLoading }"
class="context__menu-item-link context__menu-item-link--delete"
@click="deleteField()" @click="deleteField()"
> >
<i class="context__menu-icon iconoir-bin"></i> <i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('fieldContext.deleteField') }} {{ $t('fieldContext.deleteField') }}
</a> </a>
</li> </li>

2
web-frontend/modules/database/components/field/FieldDateSubForm.vue
View file

@ -9,6 +9,7 @@
v-model="values.date_format" v-model="values.date_format"
:class="{ 'dropdown--error': $v.values.date_format.$error }" :class="{ 'dropdown--error': $v.values.date_format.$error }"
:fixed-items="true" :fixed-items="true"
small
@hide="$v.values.date_format.$touch()" @hide="$v.values.date_format.$touch()"
> >
<DropdownItem <DropdownItem
@ -39,6 +40,7 @@
<Dropdown <Dropdown
v-model="values.date_time_format" v-model="values.date_time_format"
:fixed-items="true" :fixed-items="true"
small
@hide="$v.values.date_time_format.$touch()" @hide="$v.values.date_time_format.$touch()"
> >
<DropdownItem <DropdownItem

1
web-frontend/modules/database/components/field/FieldForm.vue
View file

@ -51,6 +51,7 @@
v-model="values.type" v-model="values.type"
:class="{ 'dropdown--error': $v.values.type.$error }" :class="{ 'dropdown--error': $v.values.type.$error }"
:fixed-items="true" :fixed-items="true"
small
@hide="$v.values.type.$touch()" @hide="$v.values.type.$touch()"
> >
<DropdownItem <DropdownItem

1
web-frontend/modules/database/components/field/FieldLinkRowSubForm.vue
View file

@ -11,6 +11,7 @@
:class="{ 'dropdown--error': $v.values.link_row_table_id.$error }" :class="{ 'dropdown--error': $v.values.link_row_table_id.$error }"
:fixed-items="true" :fixed-items="true"
:disabled="!isSelectedFieldAccessible" :disabled="!isSelectedFieldAccessible"
small
@hide="$v.values.link_row_table_id.$touch()" @hide="$v.values.link_row_table_id.$touch()"
> >
<DropdownItem <DropdownItem

1
web-frontend/modules/database/components/field/FieldNumberSubForm.vue
View file

@ -9,6 +9,7 @@
v-model="values.number_decimal_places" v-model="values.number_decimal_places"
:class="{ 'dropdown--error': $v.values.number_decimal_places.$error }" :class="{ 'dropdown--error': $v.values.number_decimal_places.$error }"
:fixed-items="true" :fixed-items="true"
small
@hide="$v.values.number_decimal_places.$touch()" @hide="$v.values.number_decimal_places.$touch()"
> >
<DropdownItem name="0 (1)" :value="0"></DropdownItem> <DropdownItem name="0 (1)" :value="0"></DropdownItem>

2
web-frontend/modules/database/components/field/FieldRatingSubForm.vue
View file

@ -25,6 +25,7 @@
:class="{ 'dropdown--error': $v.values.style.$error }" :class="{ 'dropdown--error': $v.values.style.$error }"
:fixed-items="true" :fixed-items="true"
:show-search="false" :show-search="false"
small
@hide="$v.values.style.$touch()" @hide="$v.values.style.$touch()"
> >
<DropdownItem <DropdownItem
@ -48,6 +49,7 @@
:class="{ 'dropdown--error': $v.values.max_value.$error }" :class="{ 'dropdown--error': $v.values.max_value.$error }"
:show-search="false" :show-search="false"
:fixed-items="true" :fixed-items="true"
small
@hide="$v.values.max_value.$touch()" @hide="$v.values.max_value.$touch()"
> >
<DropdownItem <DropdownItem

2
web-frontend/modules/database/components/field/FieldRollupSubForm.vue
View file

@ -22,8 +22,10 @@
<div class="control__elements"> <div class="control__elements">
<Dropdown <Dropdown
v-model="values.rollup_function" v-model="values.rollup_function"
max-width
:class="{ 'dropdown--error': $v.values.rollup_function.$error }" :class="{ 'dropdown--error': $v.values.rollup_function.$error }"
:fixed-items="true" :fixed-items="true"
small
@hide="$v.values.rollup_function.$touch()" @hide="$v.values.rollup_function.$touch()"
> >
<DropdownItem <DropdownItem

9
web-frontend/modules/database/components/row/RowEditModalField.vue
View file

@ -22,10 +22,13 @@
@update="$emit('field-updated', $event)" @update="$emit('field-updated', $event)"
@delete="$emit('field-deleted')" @delete="$emit('field-deleted')"
> >
<li v-if="canBeHidden"> <li v-if="canBeHidden" class="context__menu-item">
<a @click="$emit('toggle-field-visibility', { field })"> <a
class="context__menu-item-link"
@click="$emit('toggle-field-visibility', { field })"
>
<i <i
class="context__menu-icon" class="context__menu-item-icon"
:class="[hidden ? 'iconoir-eye-empty' : 'iconoir-eye-off']" :class="[hidden ? 'iconoir-eye-empty' : 'iconoir-eye-off']"
></i> ></i>
{{ $t(hidden ? 'fieldContext.showField' : 'fieldContext.hideField') }} {{ $t(hidden ? 'fieldContext.showField' : 'fieldContext.hideField') }}

29
web-frontend/modules/database/components/settings/APIToken.vue
View file

@ -61,37 +61,42 @@
</a> </a>
</div> </div>
<ul class="context__menu"> <ul class="context__menu">
<li> <li class="context__menu-item">
<nuxt-link :to="{ name: 'database-api-docs' }"> <nuxt-link
<i class="context__menu-icon iconoir-book"></i> class="context__menu-item-link"
:to="{ name: 'database-api-docs' }"
>
<i class="context__menu-item-icon iconoir-book"></i>
{{ $t('apiToken.viewAPIDocs') }} {{ $t('apiToken.viewAPIDocs') }}
</nuxt-link> </nuxt-link>
</li> </li>
<li> <li class="context__menu-item">
<a <a
class="context__menu-item-link"
:class="{ :class="{
'context__menu-item--loading': rotateLoading, 'context__menu-item-link--loading': rotateLoading,
}" }"
@click="rotateKey(token)" @click="rotateKey(token)"
> >
<i class="context__menu-icon iconoir-refresh-double"></i> <i class="context__menu-item-icon iconoir-refresh-double"></i>
{{ $t('apiToken.generateNewToken') }} {{ $t('apiToken.generateNewToken') }}
</a> </a>
</li> </li>
<li> <li class="context__menu-item">
<a @click="enableRename()"> <a class="context__menu-item-link" @click="enableRename()">
<i class="context__menu-icon iconoir-edit-pencil"></i> <i class="context__menu-item-icon iconoir-edit-pencil"></i>
{{ $t('action.rename') }} {{ $t('action.rename') }}
</a> </a>
</li> </li>
<li> <li class="context__menu-item">
<a <a
:class="{ :class="{
'context__menu-item--loading': deleteLoading, 'context__menu-item-link--loading': deleteLoading,
}" }"
class="context__menu-item-link"
@click.prevent="deleteToken(token)" @click.prevent="deleteToken(token)"
> >
<i class="context__menu-icon iconoir-bin"></i> <i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('action.delete') }} {{ $t('action.delete') }}
</a> </a>
</li> </li>

5
web-frontend/modules/database/components/sidebar/Sidebar.vue
View file

@ -5,7 +5,7 @@
@selected="selected" @selected="selected"
> >
<template #context> <template #context>
<li> <li class="context__menu-item">
<nuxt-link <nuxt-link
:to="{ :to="{
name: 'database-api-docs-detail', name: 'database-api-docs-detail',
@ -13,8 +13,9 @@
databaseId: application.id, databaseId: application.id,
}, },
}" }"
class="context__menu-item-link"
> >
<i class="context__menu-icon iconoir-book"></i> <i class="context__menu-item-icon iconoir-book"></i>
{{ $t('sidebar.viewAPI') }} {{ $t('sidebar.viewAPI') }}
</nuxt-link> </nuxt-link>
</li> </li>

25
web-frontend/modules/database/components/sidebar/SidebarItem.vue
View file

@ -34,6 +34,7 @@
<li <li
v-for="(component, index) in additionalContextComponents" v-for="(component, index) in additionalContextComponents"
:key="index" :key="index"
class="context__menu-item"
@click="$refs.context.hide()" @click="$refs.context.hide()"
> >
<component <component
@ -50,9 +51,10 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="exportTable()"> <a class="context__menu-item-link" @click="exportTable()">
<i class="context__menu-icon iconoir-share-ios"></i> <i class="context__menu-item-icon iconoir-share-ios"></i>
{{ $t('sidebarItem.exportTable') }} {{ $t('sidebarItem.exportTable') }}
</a> </a>
</li> </li>
@ -64,10 +66,11 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="openWebhookModal()"> <a class="context__menu-item-link" @click="openWebhookModal()">
<i class="context__menu-icon iconoir-globe"></i> <i class="context__menu-item-icon iconoir-globe"></i>
Webhooks {{ $t('sidebarItem.webhooks') }}
</a> </a>
</li> </li>
<li <li
@ -78,9 +81,10 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="enableRename()"> <a class="context__menu-item-link" @click="enableRename()">
<i class="context__menu-icon iconoir-edit-pencil"></i> <i class="context__menu-item-icon iconoir-edit-pencil"></i>
{{ $t('action.rename') }} {{ $t('action.rename') }}
</a> </a>
</li> </li>
@ -92,6 +96,7 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<SidebarDuplicateTableContextItem <SidebarDuplicateTableContextItem
:database="database" :database="database"
@ -108,12 +113,14 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a <a
:class="{ 'context__menu-item--loading': deleteLoading }" class="context__menu-item-link context__menu-item-link--delete"
:class="{ 'context__menu-item-link--loading': deleteLoading }"
@click="deleteTable()" @click="deleteTable()"
> >
<i class="context__menu-icon iconoir-bin"></i> <i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('action.delete') }} {{ $t('action.delete') }}
</a> </a>
</li> </li>

5
web-frontend/modules/database/components/sidebar/table/SidebarDuplicateTableContextItem.vue
View file

@ -1,12 +1,13 @@
<template> <template>
<a <a
class="context__menu-item-link"
:class="{ :class="{
'context__menu-item--loading': duplicating, 'context__menu-item-link--loading': duplicating,
disabled: disabled || duplicating, disabled: disabled || duplicating,
}" }"
@click="duplicateTable()" @click="duplicateTable()"
> >
<i class="context__menu-icon iconoir-copy"></i> <i class="context__menu-item-icon iconoir-copy"></i>
{{ $t('action.duplicate') }} {{ $t('action.duplicate') }}
</a> </a>
</template> </template>

28
web-frontend/modules/database/components/view/ViewContext.vue
View file

@ -15,9 +15,10 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="exportView()"> <a class="context__menu-item-link" @click="exportView()">
<i class="context__menu-icon iconoir-share-ios"></i> <i class="context__menu-item-icon iconoir-share-ios"></i>
{{ $t('viewContext.exportView') }} {{ $t('viewContext.exportView') }}
</a> </a>
</li> </li>
@ -29,9 +30,10 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="importFile()"> <a class="context__menu-item-link" @click="importFile()">
<i class="context__menu-icon iconoir-import"></i> <i class="context__menu-item-icon iconoir-import"></i>
{{ $t('viewContext.importFile') }} {{ $t('viewContext.importFile') }}
</a> </a>
</li> </li>
@ -43,12 +45,14 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a <a
class="context__menu-item-link"
:class="{ 'context__menu-item--loading': duplicateLoading }" :class="{ 'context__menu-item--loading': duplicateLoading }"
@click="duplicateView()" @click="duplicateView()"
> >
<i class="context__menu-icon iconoir-copy"></i> <i class="context__menu-item-icon iconoir-copy"></i>
{{ $t('viewContext.duplicateView') }} {{ $t('viewContext.duplicateView') }}
</a> </a>
</li> </li>
@ -71,9 +75,10 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="openWebhookModal()"> <a class="context__menu-item-link" @click="openWebhookModal()">
<i class="context__menu-icon iconoir-globe"></i> <i class="context__menu-item-icon iconoir-globe"></i>
{{ $t('viewContext.webhooks') }} {{ $t('viewContext.webhooks') }}
</a> </a>
</li> </li>
@ -85,9 +90,10 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="enableRename()"> <a class="context__menu-item-link" @click="enableRename()">
<i class="context__menu-icon iconoir-edit-pencil"></i> <i class="context__menu-item-icon iconoir-edit-pencil"></i>
{{ $t('viewContext.renameView') }} {{ $t('viewContext.renameView') }}
</a> </a>
</li> </li>
@ -99,12 +105,14 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item context-menu-item--with-separator"
> >
<a <a
class="context__menu-item-link context__menu-item-link--delete"
:class="{ 'context__menu-item--loading': deleteLoading }" :class="{ 'context__menu-item--loading': deleteLoading }"
@click="deleteView()" @click="deleteView()"
> >
<i class="context__menu-icon iconoir-bin"></i> <i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('viewContext.deleteView') }} {{ $t('viewContext.deleteView') }}
</a> </a>
</li> </li>

4
web-frontend/modules/database/components/view/ViewFieldConditionItem.vue
View file

@ -8,7 +8,7 @@
:value="filter.field" :value="filter.field"
:disabled="disableFilter" :disabled="disableFilter"
:fixed-items="true" :fixed-items="true"
class="dropdown--tiny" small
@input="$emit('updateFilter', { field: $event })" @input="$emit('updateFilter', { field: $event })"
> >
<DropdownItem <DropdownItem
@ -25,7 +25,7 @@
:disabled="disableFilter" :disabled="disableFilter"
:value="filter.type" :value="filter.type"
:fixed-items="true" :fixed-items="true"
class="dropdown--tiny" small
@input="$emit('updateFilter', { type: $event })" @input="$emit('updateFilter', { type: $event })"
> >
<DropdownItem <DropdownItem

2
web-frontend/modules/database/components/view/ViewFilterFormOperator.vue
View file

@ -8,7 +8,7 @@
:value="filterType" :value="filterType"
:show-search="false" :show-search="false"
:fixed-items="true" :fixed-items="true"
class="dropdown--tiny" small
@input="$emit('select-boolean-operator', $event)" @input="$emit('select-boolean-operator', $event)"
> >
<DropdownItem <DropdownItem

3
web-frontend/modules/database/components/view/ViewFilterTypeCollaborators.vue
View file

@ -5,7 +5,8 @@
:value="copy" :value="copy"
:show-empty-value="false" :show-empty-value="false"
:fixed-items="true" :fixed-items="true"
class="dropdown--floating filters__value-dropdown dropdown--tiny" class="dropdown--floating filters__value-dropdown"
small
@input="input" @input="input"
></FieldCollaboratorDropdown> ></FieldCollaboratorDropdown>
</template> </template>

3
web-frontend/modules/database/components/view/ViewFilterTypeFileTypeDropdown.vue
View file

@ -3,7 +3,8 @@
:value="filter.value" :value="filter.value"
:show-search="false" :show-search="false"
:fixed-items="true" :fixed-items="true"
class="filters__value-dropdown dropdown--tiny" class="filters__value-dropdown"
small
@input="$emit('input', $event)" @input="$emit('input', $event)"
> >
<DropdownItem <DropdownItem

3
web-frontend/modules/database/components/view/ViewFilterTypeLinkRow.vue
View file

@ -6,7 +6,8 @@
:fetch-on-open="true" :fetch-on-open="true"
:disabled="disabled" :disabled="disabled"
:fixed-items="true" :fixed-items="true"
class="filters__value-dropdown dropdown--tiny" class="filters__value-dropdown"
small
@input="$emit('input', $event)" @input="$emit('input', $event)"
></PaginatedDropdown> ></PaginatedDropdown>
<a <a

3
web-frontend/modules/database/components/view/ViewFilterTypeSelectOptions.vue
View file

@ -4,7 +4,8 @@
:options="field.select_options" :options="field.select_options"
:disabled="disabled" :disabled="disabled"
:fixed-items="true" :fixed-items="true"
class="dropdown--floating filters__value-dropdown dropdown--tiny" class="dropdown--floating filters__value-dropdown"
small
@input="input" @input="input"
></FieldSelectOptionsDropdown> ></FieldSelectOptionsDropdown>
</template> </template>

8
web-frontend/modules/database/components/view/ViewGroupByContext.vue
View file

@ -43,7 +43,8 @@
:value="groupBy.field" :value="groupBy.field"
:disabled="disableGroupBy" :disabled="disableGroupBy"
:fixed-items="true" :fixed-items="true"
class="dropdown--floating dropdown--tiny" class="dropdown--floating"
small
@input="updateGroupBy(groupBy, { field: $event })" @input="updateGroupBy(groupBy, { field: $event })"
> >
<DropdownItem <DropdownItem
@ -132,10 +133,11 @@
v-for="field in fields" v-for="field in fields"
v-show="isFieldAvailable(field)" v-show="isFieldAvailable(field)"
:key="field.id" :key="field.id"
class="context__menu-item"
> >
<a @click="addGroupBy(field)"> <a class="context__menu-item-link" @click="addGroupBy(field)">
<i <i
class="context__menu-icon" class="context__menu-item-icon"
:class="field._.type.iconClass" :class="field._.type.iconClass"
></i> ></i>
{{ field.name }} {{ field.name }}

8
web-frontend/modules/database/components/view/ViewSortContext.vue
View file

@ -44,7 +44,8 @@
:value="sort.field" :value="sort.field"
:disabled="disableSort" :disabled="disableSort"
:fixed-items="true" :fixed-items="true"
class="dropdown--floating dropdown--tiny" class="dropdown--floating"
small
@input="updateSort(sort, { field: $event })" @input="updateSort(sort, { field: $event })"
> >
<DropdownItem <DropdownItem
@ -132,10 +133,11 @@
v-for="field in fields" v-for="field in fields"
v-show="isFieldAvailable(field)" v-show="isFieldAvailable(field)"
:key="field.id" :key="field.id"
class="context__menu-item"
> >
<a @click="addSort(field)"> <a class="context__menu-item-link" @click="addSort(field)">
<i <i
class="context__menu-icon" class="context__menu-item-icon"
:class="field._.type.iconClass" :class="field._.type.iconClass"
></i> ></i>
{{ field.name }} {{ field.name }}

4
web-frontend/modules/database/components/view/ViewsContextItem.vue
View file

@ -22,6 +22,10 @@
</div> </div>
</div> </div>
</a> </a>
<i
v-if="view._.selected"
class="select__item-active-icon iconoir-check"
></i>
<component <component
:is="deactivatedClickModal" :is="deactivatedClickModal"
v-if="deactivatedClickModal !== null" v-if="deactivatedClickModal !== null"

2
web-frontend/modules/database/components/view/form/FormViewFieldMultipleLinkRow.vue
View file

@ -10,7 +10,7 @@
:fetch-page="fetchPage" :fetch-page="fetchPage"
:value="value[index].id" :value="value[index].id"
:initial-display-name="value[index].value" :initial-display-name="value[index].value"
class="dropdown--tiny" small
:class="{ :class="{
'dropdown--error': 'dropdown--error':
touched && !valid && isInvalidValue(value[index]), touched && !valid && isInvalidValue(value[index]),

14
web-frontend/modules/database/components/view/form/FormViewModeContext.vue
View file

@ -9,21 +9,21 @@
:class="{ active: mode.type === view.mode }" :class="{ active: mode.type === view.mode }"
> >
<a class="select__item-link" @click="select(mode, index)" <a class="select__item-link" @click="select(mode, index)"
><div class="select__item-name"> ><span class="select__item-name">
<i :class="`select__item-icon ${mode.getIconClass()}`"></i> <i :class="`select__item-icon ${mode.getIconClass()}`"></i>
{{ mode.getName() }} <span class="select__item-name-text">{{ mode.getName() }}</span>
<div v-if="isDeactivated(mode)" class="deactivated-label"> <div v-if="isDeactivated(mode)" class="deactivated-label">
<i class="iconoir-lock"></i> <i class="iconoir-lock"></i>
</div> </div>
</div> </span>
<div class="select__item-description"> <div class="select__item-description">
{{ mode.getDescription() }} {{ mode.getDescription() }}
</div> </div>
<i
v-if="mode.type === view.mode"
class="select__item-active-icon iconoir-check-circle"
></i>
</a> </a>
<i
v-if="mode.type === view.mode"
class="select__item-active-icon iconoir-check"
></i>
<component <component
:is="mode.getDeactivatedClickModal()" :is="mode.getDeactivatedClickModal()"
v-if="hasDeactivatedClickModal(mode)" v-if="hasDeactivatedClickModal(mode)"

68
web-frontend/modules/database/components/view/grid/GridView.vue
View file

@ -141,9 +141,12 @@
:max-height-if-outside-viewport="true" :max-height-if-outside-viewport="true"
> >
<ul v-show="isMultiSelectActive" class="context__menu"> <ul v-show="isMultiSelectActive" class="context__menu">
<li> <li class="context__menu-item">
<a @click=";[copySelection($event), $refs.rowContext.hide()]"> <a
<i class="context__menu-icon iconoir-copy"></i> class="context__menu-item-link"
@click=";[copySelection($event), $refs.rowContext.hide()]"
>
<i class="context__menu-item-icon iconoir-copy"></i>
{{ $t('gridView.copyCells') }} {{ $t('gridView.copyCells') }}
</a> </a>
</li> </li>
@ -156,12 +159,14 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a <a
:class="{ 'context__menu-item--loading': deletingRow }" class="context__menu-item-link"
:class="{ 'context__menu-item-link--loading': deletingRow }"
@click.stop="deleteRowsFromMultipleCellSelection()" @click.stop="deleteRowsFromMultipleCellSelection()"
> >
<i class="context__menu-icon iconoir-bin"></i> <i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('gridView.deleteRows') }} {{ $t('gridView.deleteRows') }}
</a> </a>
</li> </li>
@ -169,9 +174,10 @@
<ul v-show="!isMultiSelectActive" class="context__menu"> <ul v-show="!isMultiSelectActive" class="context__menu">
<li> <li>
<a <a
class="context__menu-item-link"
@click=";[selectRow($event, selectedRow), $refs.rowContext.hide()]" @click=";[selectRow($event, selectedRow), $refs.rowContext.hide()]"
> >
<i class="context__menu-icon iconoir-check-circle"></i> <i class="context__menu-item-icon iconoir-check-circle"></i>
{{ $t('gridView.selectRow') }} {{ $t('gridView.selectRow') }}
</a> </a>
</li> </li>
@ -184,9 +190,13 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="addRowAboveSelectedRow($event, selectedRow)"> <a
<i class="context__menu-icon iconoir-arrow-up"></i> class="context__menu-item-link"
@click="addRowAboveSelectedRow($event, selectedRow)"
>
<i class="context__menu-item-icon iconoir-arrow-up"></i>
{{ $t('gridView.insertRowAbove') }} {{ $t('gridView.insertRowAbove') }}
</a> </a>
</li> </li>
@ -199,9 +209,13 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="addRowBelowSelectedRow($event, selectedRow)"> <a
<i class="context__menu-icon iconoir-arrow-down"></i> class="context__menu-item-link"
@click="addRowBelowSelectedRow($event, selectedRow)"
>
<i class="context__menu-item-icon iconoir-arrow-down"></i>
{{ $t('gridView.insertRowBelow') }} {{ $t('gridView.insertRowBelow') }}
</a> </a>
</li> </li>
@ -214,21 +228,34 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="duplicateSelectedRow($event, selectedRow)"> <a
<i class="context__menu-icon iconoir-copy"></i> class="context__menu-item-link"
@click="duplicateSelectedRow($event, selectedRow)"
>
<i class="context__menu-item-icon iconoir-copy"></i>
{{ $t('gridView.duplicateRow') }} {{ $t('gridView.duplicateRow') }}
</a> </a>
</li> </li>
<li v-if="!readOnly"> <li v-if="!readOnly" class="context__menu-item">
<a @click="copyLinkToSelectedRow($event, selectedRow)"> <a
<i class="context__menu-icon iconoir-link"></i> class="context__menu-item-link"
@click="copyLinkToSelectedRow($event, selectedRow)"
>
<i class="context__menu-item-icon iconoir-link"></i>
{{ $t('gridView.copyRowURL') }} {{ $t('gridView.copyRowURL') }}
</a> </a>
</li> </li>
<li v-if="selectedRow !== null && !selectedRow._.loading"> <li
<a @click=";[openRowEditModal(selectedRow), $refs.rowContext.hide()]"> v-if="selectedRow !== null && !selectedRow._.loading"
<i class="context__menu-icon iconoir-expand"></i> class="context__menu-item"
>
<a
class="context__menu-item-link"
@click=";[openRowEditModal(selectedRow), $refs.rowContext.hide()]"
>
<i class="context__menu-item-icon iconoir-expand"></i>
{{ $t('gridView.enlargeRow') }} {{ $t('gridView.enlargeRow') }}
</a> </a>
</li> </li>
@ -241,9 +268,10 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="deleteRow(selectedRow)"> <a class="context__menu-item-link" @click="deleteRow(selectedRow)">
<i class="context__menu-icon iconoir-bin"></i> <i class="context__menu-item-icon iconoir-bin"></i>
{{ $t('gridView.deleteRow') }} {{ $t('gridView.deleteRow') }}
</a> </a>
</li> </li>

30
web-frontend/modules/database/components/view/grid/GridViewFieldFooter.vue
View file

@ -29,12 +29,16 @@
:class="{ active: !viewAggregationType }" :class="{ active: !viewAggregationType }"
> >
<a class="select__item-link" @click="selectAggregation('none')" <a class="select__item-link" @click="selectAggregation('none')"
><div class="select__item-name">{{ $t('common.none') }}</div> ><div class="select__item-name">
<i <span class="select__item-name-text">{{
v-if="!viewAggregationType" $t('common.none')
class="select__item-active-icon iconoir-check-circle" }}</span>
></i </div>
></a> </a>
<i
v-if="!viewAggregationType"
class="select__item-active-icon iconoir-check"
></i>
</li> </li>
<li <li
v-for="viewAggregation in viewAggregationTypes" v-for="viewAggregation in viewAggregationTypes"
@ -48,13 +52,15 @@
class="select__item-link" class="select__item-link"
@click="selectAggregation(viewAggregation.getType())" @click="selectAggregation(viewAggregation.getType())"
><div class="select__item-name"> ><div class="select__item-name">
{{ viewAggregation.getName() }} <span class="select__item-name-text">{{
viewAggregation.getName()
}}</span>
</div> </div>
<i </a>
v-if="viewAggregation === viewAggregationType" <i
class="select__item-active-icon iconoir-check-circle" v-if="viewAggregation === viewAggregationType"
></i class="select__item-active-icon iconoir-check"
></a> ></i>
</li> </li>
</ul> </ul>
</Context> </Context>

41
web-frontend/modules/database/components/view/grid/GridViewFieldType.vue
View file

@ -57,14 +57,16 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a <a
ref="insertLeftLink" ref="insertLeftLink"
class="context__menu-item-link"
@click=" @click="
$refs.insertFieldContext.toggle($refs.insertLeftLink, 'left') $refs.insertFieldContext.toggle($refs.insertLeftLink, 'left')
" "
> >
<i class="context__menu-icon iconoir-arrow-left"></i> <i class="context__menu-item-icon iconoir-arrow-left"></i>
{{ $t('gridViewFieldType.insertLeft') }} {{ $t('gridViewFieldType.insertLeft') }}
</a> </a>
</li> </li>
@ -78,14 +80,16 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a <a
ref="insertRightLink" ref="insertRightLink"
class="context__menu-item-link"
@click=" @click="
$refs.insertFieldContext.toggle($refs.insertRightLink, 'right') $refs.insertFieldContext.toggle($refs.insertRightLink, 'right')
" "
> >
<i class="context__menu-icon iconoir-arrow-right"></i> <i class="context__menu-item-icon iconoir-arrow-right"></i>
{{ $t('gridViewFieldType.insertRight') }} {{ $t('gridViewFieldType.insertRight') }}
</a> </a>
<InsertFieldContext <InsertFieldContext
@ -105,11 +109,13 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a <a
class="context__menu-item-link"
@click=";[$refs.duplicateFieldModal.toggle(), $refs.context.hide()]" @click=";[$refs.duplicateFieldModal.toggle(), $refs.context.hide()]"
> >
<i class="context__menu-icon iconoir-copy"></i> <i class="context__menu-item-icon iconoir-copy"></i>
{{ $t('gridViewFieldType.duplicate') }} {{ $t('gridViewFieldType.duplicate') }}
</a> </a>
<DuplicateFieldModal <DuplicateFieldModal
@ -130,9 +136,13 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="createFilter($event, view, field)"> <a
<i class="context__menu-icon iconoir-filter"></i> class="context__menu-item-link"
@click="createFilter($event, view, field)"
>
<i class="context__menu-item-icon iconoir-filter"></i>
{{ $t('gridViewFieldType.createFilter') }} {{ $t('gridViewFieldType.createFilter') }}
</a> </a>
</li> </li>
@ -145,9 +155,13 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="createSort($event, view, field, 'ASC')"> <a
<i class="context__menu-icon iconoir-sort-down"></i> class="context__menu-item-link"
@click="createSort($event, view, field, 'ASC')"
>
<i class="context__menu-item-icon iconoir-sort-down"></i>
{{ $t('gridViewFieldType.sortField') }} {{ $t('gridViewFieldType.sortField') }}
<template v-if="getSortIndicator(field, 0) === 'text'">{{ <template v-if="getSortIndicator(field, 0) === 'text'">{{
getSortIndicator(field, 1) getSortIndicator(field, 1)
@ -175,9 +189,13 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="createSort($event, view, field, 'DESC')"> <a
<i class="context__menu-icon iconoir-sort-down"></i> class="context__menu-item-link"
@click="createSort($event, view, field, 'DESC')"
>
<i class="context__menu-item-icon iconoir-sort-down"></i>
{{ $t('gridViewFieldType.sortField') }} {{ $t('gridViewFieldType.sortField') }}
<template v-if="getSortIndicator(field, 0) === 'text'">{{ <template v-if="getSortIndicator(field, 0) === 'text'">{{
getSortIndicator(field, 2) getSortIndicator(field, 2)
@ -205,9 +223,10 @@
database.workspace.id database.workspace.id
) )
" "
class="context__menu-item"
> >
<a @click="hide($event, view, field)"> <a class="context__menu-item-link" @click="hide($event, view, field)">
<i class="context__menu-icon iconoir-eye-off"></i> <i class="context__menu-item-icon iconoir-eye-off"></i>
{{ $t('gridViewFieldType.hideField') }} {{ $t('gridViewFieldType.hideField') }}
</a> </a>
</li> </li>

14
web-frontend/modules/database/components/view/grid/GridViewRowIdentifierDropdown.vue
View file

@ -15,18 +15,20 @@
<li <li
v-for="option in options" v-for="option in options"
:key="option" :key="option"
class="select__item select__item-no-options" class="select__item select__item--no-options"
:class="{ active: option === rowIdentifierTypeSelected }" :class="{ active: option === rowIdentifierTypeSelected }"
> >
<a class="select__item-link" @click="setRowIdentifierTypes(option)"> <a class="select__item-link" @click="setRowIdentifierTypes(option)">
<span class="select__item-name"> <span class="select__item-name">
{{ $t(`gridViewIdentifierOptions.${option}`) }} <span class="select__item-text">{{
$t(`gridViewIdentifierOptions.${option}`)
}}</span>
</span> </span>
<i
v-if="option === rowIdentifierTypeSelected"
class="select__item-active-icon iconoir-check-circle"
></i>
</a> </a>
<i
v-if="option === rowIdentifierTypeSelected"
class="select__item-active-icon iconoir-check"
></i>
</li> </li>
</ul> </ul>
</Context> </Context>

11
web-frontend/modules/database/components/view/grid/fields/GridViewRowsAddContext.vue
View file

@ -4,8 +4,15 @@
{{ $t('gridViewRowsAddContext.title') }} {{ $t('gridViewRowsAddContext.title') }}
</div> </div>
<ul class="context__menu"> <ul class="context__menu">
<li v-for="rowAmountChoice in rowAmountChoices" :key="rowAmountChoice"> <li
<a @click="$emit('add-rows', rowAmountChoice)"> v-for="rowAmountChoice in rowAmountChoices"
:key="rowAmountChoice"
class="context__menu-item"
>
<a
class="context__menu-item-link"
@click="$emit('add-rows', rowAmountChoice)"
>
{{ $t('gridViewRowsAddContext.choice', { rowAmountChoice }) }} {{ $t('gridViewRowsAddContext.choice', { rowAmountChoice }) }}
</a> </a>
</li> </li>

3
web-frontend/modules/database/components/webhook/WebhookForm.vue
View file

@ -52,7 +52,7 @@
{{ $t('webhookForm.inputLabels.requestMethod') }} {{ $t('webhookForm.inputLabels.requestMethod') }}
</div> </div>
<div class="control__elements"> <div class="control__elements">
<Dropdown v-model="values.request_method"> <Dropdown v-model="values.request_method" small>
<DropdownItem name="GET" value="GET"></DropdownItem> <DropdownItem name="GET" value="GET"></DropdownItem>
<DropdownItem name="POST" value="POST"></DropdownItem> <DropdownItem name="POST" value="POST"></DropdownItem>
<DropdownItem name="PATCH" value="PATCH"></DropdownItem> <DropdownItem name="PATCH" value="PATCH"></DropdownItem>
@ -197,6 +197,7 @@
<Dropdown <Dropdown
v-model="exampleWebhookEventType" v-model="exampleWebhookEventType"
class="dropdown--floating-left" class="dropdown--floating-left"
small
> >
<DropdownItem <DropdownItem
v-for="webhookEvent in webhookEventTypes" v-for="webhookEvent in webhookEventTypes"

1611
web-frontend/modules/database/locales/en.json
View file

File diff suppressed because it is too large Load diff

3
web-frontend/modules/integrations/components/services/LocalBaserowTableServiceSortForm.vue
View file

@ -36,7 +36,8 @@
:value="sort.field" :value="sort.field"
:disabled="disableSort" :disabled="disableSort"
:fixed-items="true" :fixed-items="true"
class="dropdown--floating dropdown--tiny" class="dropdown--floating"
small
@input="updateSort(sort, { field: $event })" @input="updateSort(sort, { field: $event })"
> >
<DropdownItem <DropdownItem

70
web-frontend/test/unit/core/components/__snapshots__/dropdown.spec.js.snap
View file

@ -55,7 +55,7 @@ exports[`Dropdown component Test slots 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -75,9 +75,12 @@ exports[`Dropdown component With items 1`] = `
<a <a
class="dropdown__selected" class="dropdown__selected"
> >
<span
action.makeChoice class="dropdown__selected-placeholder"
>
action.makeChoice
</span>
<i <i
class="dropdown__toggle-icon iconoir-nav-arrow-down" class="dropdown__toggle-icon iconoir-nav-arrow-down"
/> />
@ -130,7 +133,7 @@ exports[`Dropdown component With items 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -212,7 +215,7 @@ exports[`Dropdown component With items 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -241,7 +244,7 @@ exports[`Dropdown component With items 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -270,7 +273,7 @@ exports[`Dropdown component With items 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -301,7 +304,7 @@ exports[`Dropdown component With items 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -336,7 +339,7 @@ exports[`Dropdown component With items 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -402,7 +405,7 @@ exports[`Dropdown component With items 3`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -431,7 +434,7 @@ exports[`Dropdown component With items 3`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -451,9 +454,12 @@ exports[`Dropdown component basics 1`] = `
<a <a
class="dropdown__selected" class="dropdown__selected"
> >
<span
action.makeChoice class="dropdown__selected-placeholder"
>
action.makeChoice
</span>
<i <i
class="dropdown__toggle-icon iconoir-nav-arrow-down" class="dropdown__toggle-icon iconoir-nav-arrow-down"
/> />
@ -497,9 +503,12 @@ exports[`Dropdown component basics 2`] = `
<a <a
class="dropdown__selected" class="dropdown__selected"
> >
<span
action.makeChoice class="dropdown__selected-placeholder"
>
action.makeChoice
</span>
<i <i
class="dropdown__toggle-icon iconoir-nav-arrow-down" class="dropdown__toggle-icon iconoir-nav-arrow-down"
/> />
@ -530,9 +539,12 @@ exports[`Dropdown component basics 3`] = `
<a <a
class="dropdown__selected" class="dropdown__selected"
> >
<span
action.makeChoice class="dropdown__selected-placeholder"
>
action.makeChoice
</span>
<i <i
class="dropdown__toggle-icon iconoir-nav-arrow-down" class="dropdown__toggle-icon iconoir-nav-arrow-down"
/> />
@ -638,7 +650,7 @@ exports[`Dropdown component change value prop 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -667,7 +679,7 @@ exports[`Dropdown component change value prop 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -749,7 +761,7 @@ exports[`Dropdown component test focus 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -831,7 +843,7 @@ exports[`Dropdown component test focus 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -913,7 +925,7 @@ exports[`Dropdown component test interactions 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -942,7 +954,7 @@ exports[`Dropdown component test interactions 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -1024,7 +1036,7 @@ exports[`Dropdown component test interactions 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1053,7 +1065,7 @@ exports[`Dropdown component test interactions 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>

164
web-frontend/test/unit/database/components/export/__snapshots__/exportTableModal.spec.js.snap
View file

@ -107,7 +107,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -138,7 +138,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -285,7 +285,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -314,7 +314,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -343,7 +343,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -372,7 +372,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -401,7 +401,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -430,7 +430,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -528,7 +528,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -557,7 +557,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -586,7 +586,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -615,7 +615,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -644,7 +644,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -673,7 +673,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -702,7 +702,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -731,7 +731,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -760,7 +760,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -789,7 +789,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -818,7 +818,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -847,7 +847,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -876,7 +876,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -905,7 +905,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -934,7 +934,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -963,7 +963,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -992,7 +992,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1021,7 +1021,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1050,7 +1050,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1079,7 +1079,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1108,7 +1108,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1137,7 +1137,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1166,7 +1166,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1195,7 +1195,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1224,7 +1224,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1253,7 +1253,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1282,7 +1282,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1311,7 +1311,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1340,7 +1340,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1369,7 +1369,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1398,7 +1398,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1427,7 +1427,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1456,7 +1456,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -1643,7 +1643,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1674,7 +1674,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -1821,7 +1821,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1850,7 +1850,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1879,7 +1879,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1908,7 +1908,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1937,7 +1937,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -1966,7 +1966,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -2064,7 +2064,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2093,7 +2093,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2122,7 +2122,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2151,7 +2151,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2180,7 +2180,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2209,7 +2209,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2238,7 +2238,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2267,7 +2267,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2296,7 +2296,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2325,7 +2325,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2354,7 +2354,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2383,7 +2383,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2412,7 +2412,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2441,7 +2441,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2470,7 +2470,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2499,7 +2499,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2528,7 +2528,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2557,7 +2557,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2586,7 +2586,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2615,7 +2615,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2644,7 +2644,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2673,7 +2673,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2702,7 +2702,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2731,7 +2731,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2760,7 +2760,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2789,7 +2789,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2818,7 +2818,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2847,7 +2847,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2876,7 +2876,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2905,7 +2905,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2934,7 +2934,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2963,7 +2963,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -2992,7 +2992,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>

88
web-frontend/test/unit/database/components/view/__snapshots__/viewFilterForm.spec.js.snap
View file

@ -94,7 +94,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
class="filters__field" class="filters__field"
> >
<div <div
class="dropdown dropdown--tiny" class="dropdown dropdown--small"
tabindex="0" tabindex="0"
> >
<a <a
@ -162,7 +162,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -190,7 +190,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -218,7 +218,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -234,7 +234,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
class="filters__type" class="filters__type"
> >
<div <div
class="dropdown dropdown--tiny" class="dropdown dropdown--small"
tabindex="0" tabindex="0"
> >
<a <a
@ -302,7 +302,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -330,7 +330,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -358,7 +358,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -386,7 +386,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -414,7 +414,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -442,7 +442,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -470,7 +470,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -498,7 +498,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -526,7 +526,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -567,7 +567,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
<!----> <!---->
<div <div
class="dropdown dropdown--tiny" class="dropdown dropdown--small"
tabindex="0" tabindex="0"
> >
<a <a
@ -622,7 +622,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
@ -651,7 +651,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -672,7 +672,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
class="filters__field" class="filters__field"
> >
<div <div
class="dropdown dropdown--tiny" class="dropdown dropdown--small"
tabindex="0" tabindex="0"
> >
<a <a
@ -740,7 +740,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -768,7 +768,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -796,7 +796,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -812,7 +812,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
class="filters__type" class="filters__type"
> >
<div <div
class="dropdown dropdown--tiny" class="dropdown dropdown--small"
tabindex="0" tabindex="0"
> >
<a <a
@ -880,7 +880,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -908,7 +908,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -936,7 +936,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -964,7 +964,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -1093,7 +1093,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
class="filters__field" class="filters__field"
> >
<div <div
class="dropdown dropdown--tiny" class="dropdown dropdown--small"
tabindex="0" tabindex="0"
> >
<a <a
@ -1161,7 +1161,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -1189,7 +1189,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -1217,7 +1217,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -1233,7 +1233,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
class="filters__type" class="filters__type"
> >
<div <div
class="dropdown dropdown--tiny" class="dropdown dropdown--small"
tabindex="" tabindex=""
> >
<a <a
@ -1302,7 +1302,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -1330,7 +1330,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -1358,7 +1358,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -1386,7 +1386,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -1515,7 +1515,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
class="filters__field" class="filters__field"
> >
<div <div
class="dropdown dropdown--tiny" class="dropdown dropdown--small"
tabindex="0" tabindex="0"
> >
<a <a
@ -1583,7 +1583,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -1611,7 +1611,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -1639,7 +1639,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>
@ -1655,7 +1655,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
class="filters__type" class="filters__type"
> >
<div <div
class="dropdown dropdown--tiny" class="dropdown dropdown--small"
tabindex="0" tabindex="0"
> >
<a <a
@ -1724,7 +1724,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -1752,7 +1752,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -1780,7 +1780,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
<li <li
@ -1808,7 +1808,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
</a> </a>
<i <i
class="select__item-active-icon iconoir-check-circle" class="select__item-active-icon iconoir-check"
/> />
</li> </li>
</ul> </ul>

64
web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewFieldFooter.spec.js.snap
View file

@ -17,11 +17,15 @@ exports[`Field footer component Change type 1`] = `
<div <div
class="select__item-name" class="select__item-name"
> >
common.none <span
class="select__item-name-text"
>
common.none
</span>
</div> </div>
<!---->
</a> </a>
<!---->
</li> </li>
<li <li
@ -33,13 +37,15 @@ exports[`Field footer component Change type 1`] = `
<div <div
class="select__item-name" class="select__item-name"
> >
<span
class="select__item-name-text"
>
viewAggregationType.emptyCount viewAggregationType.emptyCount
</span>
</div> </div>
<!---->
</a> </a>
<!---->
</li> </li>
<li <li
class="select__item select__item--no-options active" class="select__item select__item--no-options active"
@ -50,15 +56,17 @@ exports[`Field footer component Change type 1`] = `
<div <div
class="select__item-name" class="select__item-name"
> >
<span
class="select__item-name-text"
>
viewAggregationType.notEmptyCount viewAggregationType.notEmptyCount
</span>
</div> </div>
<i
class="select__item-active-icon iconoir-check-circle"
/>
</a> </a>
<i
class="select__item-active-icon iconoir-check"
/>
</li> </li>
<li <li
class="select__item select__item--no-options" class="select__item select__item--no-options"
@ -69,13 +77,15 @@ exports[`Field footer component Change type 1`] = `
<div <div
class="select__item-name" class="select__item-name"
> >
<span
class="select__item-name-text"
>
viewAggregationType.emptyPercentage viewAggregationType.emptyPercentage
</span>
</div> </div>
<!---->
</a> </a>
<!---->
</li> </li>
<li <li
class="select__item select__item--no-options" class="select__item select__item--no-options"
@ -86,13 +96,15 @@ exports[`Field footer component Change type 1`] = `
<div <div
class="select__item-name" class="select__item-name"
> >
<span
class="select__item-name-text"
>
viewAggregationType.notEmptyPercentage viewAggregationType.notEmptyPercentage
</span>
</div> </div>
<!---->
</a> </a>
<!---->
</li> </li>
<li <li
class="select__item select__item--no-options" class="select__item select__item--no-options"
@ -103,13 +115,15 @@ exports[`Field footer component Change type 1`] = `
<div <div
class="select__item-name" class="select__item-name"
> >
<span
class="select__item-name-text"
>
viewAggregationType.uniqueCount viewAggregationType.uniqueCount
</span>
</div> </div>
<!---->
</a> </a>
<!---->
</li> </li>
</ul> </ul>
</div> </div>