General UI/UX improvements for compose
This commit is contained in:
Jože Fortun
@@ -59,7 +59,6 @@
|
||||
variant="light"
|
||||
:title="$t('tooltip.field')"
|
||||
:disabled="!value.cap.configurable"
|
||||
class="px-2"
|
||||
@click.prevent="$emit('edit')"
|
||||
>
|
||||
<font-awesome-icon
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<b-dropdown
|
||||
v-if="recordPage"
|
||||
:size="size"
|
||||
variant="light"
|
||||
variant="primary"
|
||||
:text="$t('related-pages')"
|
||||
boundary="viewport"
|
||||
class="related-pages-dropdown"
|
||||
|
||||
@@ -45,46 +45,61 @@
|
||||
cols="12"
|
||||
xl="6"
|
||||
lg="7"
|
||||
class="text-right pr-2"
|
||||
class="text-right"
|
||||
>
|
||||
<router-link
|
||||
<b-button-group
|
||||
v-if="item.canUpdatePage"
|
||||
data-test-id="button-page-builder"
|
||||
:to="{name: 'admin.pages.builder', params: { pageID: item.pageID }}"
|
||||
class="btn btn-light mr-2"
|
||||
size="sm"
|
||||
class="mr-1"
|
||||
>
|
||||
{{ $t('block.general.label.pageBuilder') }}
|
||||
</router-link>
|
||||
<span class="view d-inline-block">
|
||||
<router-link
|
||||
data-test-id="button-page-view"
|
||||
:to="pageViewer(item)"
|
||||
class="btn"
|
||||
<b-button
|
||||
data-test-id="button-page-builder"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
:to="{name: 'admin.pages.builder', params: { pageID: item.pageID }}"
|
||||
>
|
||||
{{ $t('view') }}
|
||||
</router-link>
|
||||
</span>
|
||||
<span
|
||||
class="d-none d-md-inline-block edit text-left"
|
||||
>
|
||||
<router-link
|
||||
v-if="item.canUpdatePage"
|
||||
{{ $t('block.general.label.pageBuilder') }}
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'tools']"
|
||||
class="ml-2"
|
||||
/>
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
data-test-id="button-page-view"
|
||||
variant="primary"
|
||||
:title="$t('tooltip.view')"
|
||||
:to="pageViewer(item)"
|
||||
class="d-flex align-items-center"
|
||||
style="margin-left:2px;"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['far', 'eye']"
|
||||
/>
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
data-test-id="button-page-edit"
|
||||
variant="primary"
|
||||
:title="$t('tooltip.edit.page')"
|
||||
:to="{name: 'admin.pages.edit', params: { pageID: item.pageID }}"
|
||||
data-test-id="button-page-edit"
|
||||
class="btn text-primary"
|
||||
class="d-flex align-items-center"
|
||||
style="margin-left:2px;"
|
||||
>
|
||||
{{ $t('edit.edit') }}
|
||||
</router-link>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'pen']"
|
||||
/>
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
|
||||
</span>
|
||||
<c-permissions-button
|
||||
v-if="namespace.canGrant"
|
||||
v-if="item.canGrant"
|
||||
:title="item.title || item.handle || item.pageID"
|
||||
:target="item.title || item.handle || item.pageID"
|
||||
:resource="`corteza::compose:page/${namespace.namespaceID}/${item.pageID}`"
|
||||
:tooltip="$t('permissions:resources.compose.page.tooltip')"
|
||||
link
|
||||
class="btn px-2"
|
||||
button-variant="outline-light"
|
||||
class="text-dark d-print-none border-0"
|
||||
/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
@@ -221,17 +236,6 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
$edit-width: 130px;
|
||||
$view-width: 70px;
|
||||
|
||||
.edit {
|
||||
width: $edit-width;
|
||||
}
|
||||
|
||||
.view {
|
||||
width: $view-width;
|
||||
}
|
||||
|
||||
.grab {
|
||||
cursor: grab;
|
||||
z-index: 1;
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
key="namespaceID"
|
||||
data-test-id="select-namespace"
|
||||
label="name"
|
||||
class="namespace-selector sticky-top"
|
||||
:clearable="false"
|
||||
:options="filteredNamespaces"
|
||||
:get-option-key="getOptionKey"
|
||||
@@ -16,6 +15,7 @@
|
||||
:placeholder="$t('pickNamespace')"
|
||||
:calculate-position="calculateDropdownPosition"
|
||||
:autoscroll="false"
|
||||
class="namespace-selector"
|
||||
@option:selected="namespaceSelected"
|
||||
>
|
||||
<template #list-header>
|
||||
@@ -33,11 +33,12 @@
|
||||
</li>
|
||||
</template>
|
||||
</vue-select>
|
||||
|
||||
<b-input-group-append>
|
||||
<b-button
|
||||
v-if="canManageNamespaces"
|
||||
:disabled="!namespace.canUpdateNamespace"
|
||||
:title="$t('manageNamespace')"
|
||||
:title="$t('editNamespace')"
|
||||
variant="primary"
|
||||
class="d-flex align-items-center"
|
||||
:to="{ name: 'namespace.edit', params: { namespaceID: namespace.namespaceID } }"
|
||||
@@ -445,33 +446,40 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.namespace-selector {
|
||||
position: relative;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
min-width: auto !important;
|
||||
flex: auto;
|
||||
|
||||
.vs__dropdown-menu {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.vs__dropdown-option {
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
&:not(.vs--open) .vs__selected + .vs__search {
|
||||
// force this to not use any space
|
||||
// we still need it to be rendered for the focus
|
||||
width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.vs__selected-options {
|
||||
flex-wrap: nowrap;
|
||||
// do not allow growing
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.vs__selected {
|
||||
max-width: 230px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.vs__open-indicator {
|
||||
fill: $primary;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.vs__dropdown-menu .vs__dropdown-option {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -63,7 +63,7 @@ import {
|
||||
faExclamationTriangle,
|
||||
faEllipsisV,
|
||||
faLocationArrow,
|
||||
faCog,
|
||||
faTools,
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
import {
|
||||
@@ -175,5 +175,5 @@ library.add(
|
||||
faSync,
|
||||
faEllipsisV,
|
||||
faLocationArrow,
|
||||
faCog,
|
||||
faTools,
|
||||
)
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
>
|
||||
{{ $t('label.pageBuilder') }}
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'cog']"
|
||||
:icon="['fas', 'tools']"
|
||||
class="ml-2"
|
||||
/>
|
||||
</b-button>
|
||||
@@ -306,7 +306,6 @@
|
||||
variant="light"
|
||||
class="d-flex align-items-center px-3"
|
||||
:title="$t('page-layout.tooltip.configure')"
|
||||
style="margin-left:2px;"
|
||||
@click="configureLayout(index)"
|
||||
>
|
||||
<font-awesome-icon
|
||||
@@ -322,7 +321,7 @@
|
||||
:to="{ name: 'admin.pages.builder', query: { layoutID: layout.pageLayoutID} }"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'cog']"
|
||||
:icon="['fas', 'tools']"
|
||||
/>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
|
||||
@@ -21,6 +21,10 @@
|
||||
:disabled="!namespaceEnabled"
|
||||
>
|
||||
{{ $t('visit') }}
|
||||
<font-awesome-icon
|
||||
:icon="['far', 'eye']"
|
||||
class="ml-2"
|
||||
/>
|
||||
</b-button>
|
||||
<b-button
|
||||
v-if="namespace.canManageNamespace"
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
>
|
||||
{{ $t('general:label.pageBuilder') }}
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'cog']"
|
||||
:icon="['fas', 'tools']"
|
||||
class="ml-2"
|
||||
/>
|
||||
</b-button>
|
||||
|
||||
@@ -51,7 +51,7 @@ subtitle:
|
||||
title: Low Code Namespaces
|
||||
tooltip:
|
||||
translations: Namespace translations
|
||||
visit: Visit namespace
|
||||
visit: View namespace
|
||||
configure: Configure namespace
|
||||
|
||||
manage:
|
||||
|
||||
@@ -6,7 +6,7 @@ noPages: No pages
|
||||
page: Pages
|
||||
pickNamespace: Select a namespace
|
||||
publicPages: Public pages
|
||||
manageNamespace: Manage namespaces
|
||||
editNamespace: Edit namespace
|
||||
searchPlaceholder:
|
||||
admin: Search resources...
|
||||
public: Search pages...
|
||||
|
||||
Reference in New Issue
Block a user