From 7aa4911caa6011e776d8047ec008320e81728c01 Mon Sep 17 00:00:00 2001 From: Ben Haynes Date: Tue, 12 May 2020 20:10:48 -0400 Subject: [PATCH] Various style tweaks (#555) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * icon width * updated pagination style * file preview zoom WIP — shouldn’t show up on MODAL preview * overlay/modal close button styling * duplicate key * bookmark styling * card fade also adds an rgb value for the page background variable * style per page dropdown * cards per page dropdown color * inset non-dense notifications within sidebar * reduce border radius for xs avatars * hide non-expanded prepend/append * reduce sidebar padding this gives content a bit more room * WIP: split and update comments and revisions work in progress * fix collections module name * fix file library title * consistent border on disabled * fix title/breadcrumb positioning * breadcrumb fixes * add “open” button to image interface WIP — this needs the actual logic, and we might want to remove a button * hide presets delete until selection * image shadow and subtext color * Remove breadcrumb calculation * increase contrast for image subtitle * fix textarea hover style * Update src/modules/collections/index.ts * Fix typing of translateresult to format * Add undefined check to collection name * Put v-if on dialog instead of button * Remove breadcrumb logic * Remove breadcrumb calculation * Rename shadow to collapsed in header bar * fix rating star display going over table header * show collection breadcrumb for bookmarks WIP — needs the formatted collection title * shorter error to avoid wrapping * remove periods * Fix standard font-size of divider label, use large in interface * Add extra date format strings * Structure comments, support date headers * Add ability to delete comments * Add edited on status badge Co-authored-by: rijkvanzanten --- src/app.vue | 4 +- src/components/v-avatar/v-avatar.vue | 2 + src/components/v-dialog/v-dialog.story.ts | 4 +- src/components/v-dialog/v-dialog.vue | 2 +- src/components/v-divider/v-divider.vue | 16 +- src/components/v-input/v-input.story.ts | 2 +- src/components/v-menu/v-menu.story.ts | 10 +- src/components/v-menu/v-menu.vue | 2 +- src/components/v-modal/v-modal.story.ts | 4 +- src/components/v-pagination/v-pagination.vue | 12 +- src/components/v-select/v-select.story.ts | 4 +- .../v-table/table-header/table-header.vue | 2 +- src/components/v-textarea/v-textarea.vue | 5 +- src/interfaces/divider/divider.vue | 1 + src/interfaces/image/image.vue | 26 +- src/lang/en-US/index.json | 33 +- src/layouts/cards/cards.vue | 4 + src/layouts/cards/components/card.vue | 14 + src/layouts/tabular/tabular.vue | 4 + src/modules/activity/routes/browse/browse.vue | 10 +- src/modules/activity/routes/detail/detail.vue | 12 +- src/modules/collections/index.ts | 2 +- .../collections/routes/browse/browse.vue | 32 +- .../collections/routes/detail/detail.vue | 35 +- src/modules/files/routes/browse/browse.vue | 2 +- src/modules/files/routes/detail/detail.vue | 10 +- .../routes/data-model/fields/fields.vue | 15 - .../settings/routes/presets/browse/browse.vue | 10 +- .../settings/routes/roles/detail/detail.vue | 33 +- .../routes/webhooks/detail/detail.vue | 33 +- src/modules/users/routes/browse/browse.vue | 2 +- src/modules/users/routes/detail/detail.vue | 10 +- src/styles/themes/_light.scss | 1 + .../activity-drawer-detail.vue | 279 ------------- .../activity-drawer-detail/index.ts | 4 - .../comments-drawer-detail/comment-input.vue | 151 +++++++ .../comment-item-header.vue | 232 +++++++++++ .../comments-drawer-detail/comment-item.vue | 204 ++++++++++ .../comments-drawer-detail.vue | 175 +++++++++ .../comments-drawer-detail/index.ts | 4 + .../comments-drawer-detail/readme.md | 9 + .../comments-drawer-detail/types.ts | 21 + .../drawer-detail/drawer-detail.vue | 2 +- .../file-lightbox/file-lightbox.vue | 7 +- .../components/file-preview/file-preview.vue | 46 ++- .../components/header-bar/header-bar.vue | 36 +- .../notifications-group.vue | 2 +- .../revisions-drawer-detail/index.ts | 4 + .../readme.md | 0 .../revisions-drawer-detail.vue | 370 ++++++++++++++++++ 50 files changed, 1465 insertions(+), 439 deletions(-) delete mode 100644 src/views/private/components/activity-drawer-detail/activity-drawer-detail.vue delete mode 100644 src/views/private/components/activity-drawer-detail/index.ts create mode 100644 src/views/private/components/comments-drawer-detail/comment-input.vue create mode 100644 src/views/private/components/comments-drawer-detail/comment-item-header.vue create mode 100644 src/views/private/components/comments-drawer-detail/comment-item.vue create mode 100644 src/views/private/components/comments-drawer-detail/comments-drawer-detail.vue create mode 100644 src/views/private/components/comments-drawer-detail/index.ts create mode 100644 src/views/private/components/comments-drawer-detail/readme.md create mode 100644 src/views/private/components/comments-drawer-detail/types.ts create mode 100644 src/views/private/components/revisions-drawer-detail/index.ts rename src/views/private/components/{activity-drawer-detail => revisions-drawer-detail}/readme.md (100%) create mode 100644 src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue diff --git a/src/app.vue b/src/app.vue index 47e978f096..3065961814 100644 --- a/src/app.vue +++ b/src/app.vue @@ -6,8 +6,8 @@ - - + + diff --git a/src/components/v-avatar/v-avatar.vue b/src/components/v-avatar/v-avatar.vue index e622a176b2..f549a13833 100644 --- a/src/components/v-avatar/v-avatar.vue +++ b/src/components/v-avatar/v-avatar.vue @@ -55,6 +55,8 @@ body { &.x-small { --v-avatar-size: 24px; + + border-radius: 2px; } &.small { diff --git a/src/components/v-dialog/v-dialog.story.ts b/src/components/v-dialog/v-dialog.story.ts index eb25cf5ed0..1ed200d005 100644 --- a/src/components/v-dialog/v-dialog.story.ts +++ b/src/components/v-dialog/v-dialog.story.ts @@ -37,7 +37,7 @@ export const basic = () => Yes - + `, }); @@ -66,7 +66,7 @@ export const activatorSlot = () => Yes - + `, }); diff --git a/src/components/v-dialog/v-dialog.vue b/src/components/v-dialog/v-dialog.vue index 36f7179f41..b7eb4d6637 100644 --- a/src/components/v-dialog/v-dialog.vue +++ b/src/components/v-dialog/v-dialog.vue @@ -2,7 +2,7 @@
- +
diff --git a/src/components/v-divider/v-divider.vue b/src/components/v-divider/v-divider.vue index 7e0f508a1c..3337df6f20 100644 --- a/src/components/v-divider/v-divider.vue +++ b/src/components/v-divider/v-divider.vue @@ -1,9 +1,9 @@ @@ -21,6 +21,10 @@ export default defineComponent({ type: Boolean, default: true, }, + large: { + type: Boolean, + default: false, + }, }, }); @@ -53,8 +57,14 @@ body { span.wrapper { margin-right: 16px; + } + + .type-text { color: var(--v-divider-label-color); - font-weight: normal; + } + + &.large .type-text { + font-weight: 400; font-size: 24px; } diff --git a/src/components/v-input/v-input.story.ts b/src/components/v-input/v-input.story.ts index f162913053..6648422c1a 100644 --- a/src/components/v-input/v-input.story.ts +++ b/src/components/v-input/v-input.story.ts @@ -138,7 +138,7 @@ export const withMenu = () => - +
`, }); diff --git a/src/components/v-menu/v-menu.story.ts b/src/components/v-menu/v-menu.story.ts index 9b321bf630..4090959bb8 100644 --- a/src/components/v-menu/v-menu.story.ts +++ b/src/components/v-menu/v-menu.story.ts @@ -45,7 +45,7 @@ export const basic = () => - +
`, }); @@ -72,7 +72,7 @@ export const withVModel = () => - + `, }); @@ -124,7 +124,7 @@ export const positioning = () => - + `, }); @@ -186,7 +186,7 @@ export const withEdgeOffset = () => - + `, }); @@ -225,7 +225,7 @@ export const attached = () => - + `, }); diff --git a/src/components/v-menu/v-menu.vue b/src/components/v-menu/v-menu.vue index 90709989c4..6cf3a73c70 100644 --- a/src/components/v-menu/v-menu.vue +++ b/src/components/v-menu/v-menu.vue @@ -12,7 +12,7 @@ /> - +
Close modal - +
`, }); @@ -78,7 +78,7 @@ export const withNav = () => Close modal - + `, }); diff --git a/src/components/v-pagination/v-pagination.vue b/src/components/v-pagination/v-pagination.vue index 1339417acf..b36f750cea 100644 --- a/src/components/v-pagination/v-pagination.vue +++ b/src/components/v-pagination/v-pagination.vue @@ -137,9 +137,9 @@ body { } .v-button { - --v-button-background-color-hover: var(--background-subdued); + --v-button-background-color-hover: var(--background-normal); --v-button-background-color: var(--background-subdued); - --v-button-color: var(--foreground-subdued); + --v-button-color: var(--foreground-normal); margin: 0 2px; vertical-align: middle; @@ -159,10 +159,10 @@ body { } &.active { - --v-button-background-color-hover: var(--primary-25); - --v-button-color-hover: var(--primary); - --v-button-background-color: var(--primary-25); - --v-button-color: var(--primary); + --v-button-background-color-hover: var(--foreground-normal); + --v-button-color-hover: var(--foreground-inverted); + --v-button-background-color: var(--foreground-normal); + --v-button-color: var(--foreground-inverted); } } } diff --git a/src/components/v-select/v-select.story.ts b/src/components/v-select/v-select.story.ts index 17c11d70af..31cfbf2476 100644 --- a/src/components/v-select/v-select.story.ts +++ b/src/components/v-select/v-select.story.ts @@ -51,7 +51,7 @@ export const basic = () => :inline="inline" /> {{ value }} - + `, }); @@ -89,7 +89,7 @@ export const multiple = () => multiple /> {{ value }} - + `, }); diff --git a/src/components/v-table/table-header/table-header.vue b/src/components/v-table/table-header/table-header.vue index 0e843916a3..5d02ea75ea 100644 --- a/src/components/v-table/table-header/table-header.vue +++ b/src/components/v-table/table-header/table-header.vue @@ -302,7 +302,7 @@ export default defineComponent({ .fixed { position: sticky; top: var(--v-table-sticky-offset-top); - z-index: 2; + z-index: 3; } .manual { diff --git a/src/components/v-textarea/v-textarea.vue b/src/components/v-textarea/v-textarea.vue index a858dda40a..8e40e4869c 100644 --- a/src/components/v-textarea/v-textarea.vue +++ b/src/components/v-textarea/v-textarea.vue @@ -112,6 +112,7 @@ body { .prepend { opacity: 0; transition: opacity var(--medium) var(--transition); + pointer-events: none; } &:focus, @@ -122,12 +123,13 @@ body { .append, .prepend { opacity: 1; + pointer-events: auto; } } } &:hover { - border-color: var(--border-normal); + border-color: var(--border-normal-alt); } &:focus, @@ -142,7 +144,6 @@ body { &.disabled { color: var(--foreground-subdued); background-color: var(--background-subdued); - border-color: var(--border-subdued); cursor: not-allowed; } diff --git a/src/interfaces/divider/divider.vue b/src/interfaces/divider/divider.vue index b7e3fa365d..1894fde4a1 100644 --- a/src/interfaces/divider/divider.vue +++ b/src/interfaces/divider/divider.vue @@ -6,6 +6,7 @@ '--v-divider-color': color, '--v-divider-label-color': color, }" + large > diff --git a/src/interfaces/image/image.vue b/src/interfaces/image/image.vue index a4bbdeb59b..ccf5edcf16 100644 --- a/src/interfaces/image/image.vue +++ b/src/interfaces/image/image.vue @@ -4,16 +4,25 @@
- - - - + - + - + + + + + + +
@@ -216,7 +225,7 @@ img { line-height: 1; white-space: nowrap; text-overflow: ellipsis; - background: linear-gradient(180deg, rgba(38, 50, 56, 0) 0%, rgba(38, 50, 56, 0.75) 100%); + background: linear-gradient(180deg, rgba(38, 50, 56, 0) 0%, rgba(38, 50, 56, 0.25) 100%); transition: height var(--fast) var(--transition); } @@ -271,13 +280,14 @@ img { height: 17px; max-height: 0; overflow: hidden; - color: var(--foreground-subdued); + color: rgba(255, 255, 255, 0.75); transition: max-height var(--fast) var(--transition); } .image-preview:hover { .shadow { height: 100%; + background: linear-gradient(180deg, rgba(38, 50, 56, 0) 0%, rgba(38, 50, 56, 0.5) 100%); } .actions .v-button { diff --git a/src/lang/en-US/index.json b/src/lang/en-US/index.json index 252adcfb9f..dc5340f259 100644 --- a/src/lang/en-US/index.json +++ b/src/lang/en-US/index.json @@ -72,11 +72,13 @@ "settings_update_success": "Settings updated", "settings_update_failed": "Updating settings failed", - "activity_delta_created": "Created this item", - "activity_delta_created_externally": "Created externally", - "activity_delta_updated": "Updated this item", - "activity_delta_deleted": "Deleted this item", + "revision_delta_created": "Created", + "revision_delta_created_externally": "Created Externally", + "revision_delta_updated": "Updated {count} Fields", + "revision_delta_soft_deleted": "Soft Deleted", + "revision_delta_deleted": "Deleted", "private_user": "Private User", + "revision_unknown": "Created Outside System", "leave_comment": "Leave a comment...", "post_comment_success": "Comment posted", @@ -99,8 +101,17 @@ "corresponding_field_name": "Corresponding Field Name", "datetime": "DateTime", + "today": "Today", + "yesterday": "Yesterday", + + "delete_comment": "Delete Comment", + + "date-fns_datetime": "PPP h:mma", "date-fns_date": "PPP", - "date-fns_time": "K:mm a", + "date-fns_date_short": "MMM d, u", + "date-fns_date_short_no_year": "MMM d", + "date-fns_time": "h:mma", + "month": "Month", "date": "Date", "year": "Year", @@ -126,6 +137,10 @@ "set_to_now": "Set to Now", + "zoom": "Zoom", + "download": "Download", + "open": "Open", + "name": "Name", "primary_key_field": "Primary Key Field", "type": "Type", @@ -151,6 +166,8 @@ "add_existing": "Add Existing", "comments": "Comments", + "no_comments": "No Comments Yet", + "click_to_expand": "Click to Expand", "select_item": "Select Item", @@ -166,8 +183,8 @@ "radio_buttons": "Radio Buttons", "checkboxes": "Checkboxes", - "relationship_not_setup": "The relationship hasn't been configured correctly.", - "display_template_not_setup": "The display template hasn't been configured correctly.", + "relationship_not_setup": "The relationship hasn't been configured correctly", + "display_template_not_setup": "The display template is misconfigured", "choose_status": "Choose Status...", @@ -835,7 +852,7 @@ "reset": "Reset", "reset_password": "Reset Password", "reset_preferences": "Reset all listing preferences", - + "revisions": "Revisions", "revert": "Revert", "revert_copy": "Do you want to revert this item to how it was on {date}?", "role_count": "No Roles | One Role | {count} Roles", diff --git a/src/layouts/cards/cards.vue b/src/layouts/cards/cards.vue index b6db4a2840..094da4de46 100644 --- a/src/layouts/cards/cards.vue +++ b/src/layouts/cards/cards.vue @@ -467,6 +467,10 @@ export default defineComponent({ width: auto; margin-right: 4px; } + + .v-select { + color: var(--foreground-normal); + } } } diff --git a/src/layouts/cards/components/card.vue b/src/layouts/cards/components/card.vue index 24d1e7789d..90624e741d 100644 --- a/src/layouts/cards/components/card.vue +++ b/src/layouts/cards/components/card.vue @@ -274,12 +274,26 @@ export default defineComponent({ .title, .subtitle { + position: relative; width: 100%; height: 20px; overflow: hidden; line-height: 1.3em; white-space: nowrap; text-overflow: ellipsis; + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 12px; + background: linear-gradient( + 90deg, + rgba(var(--background-page-rgb), 0) 0%, + rgba(var(--background-page-rgb), 1) 100% + ); + content: ''; + } } .title { diff --git a/src/layouts/tabular/tabular.vue b/src/layouts/tabular/tabular.vue index 89d5707793..c97f213aeb 100644 --- a/src/layouts/tabular/tabular.vue +++ b/src/layouts/tabular/tabular.vue @@ -565,6 +565,10 @@ export default defineComponent({ width: auto; margin-right: 4px; } + + .v-select { + color: var(--foreground-normal); + } } } diff --git a/src/modules/activity/routes/browse/browse.vue b/src/modules/activity/routes/browse/browse.vue index fa12fa8ac9..265f313ec0 100644 --- a/src/modules/activity/routes/browse/browse.vue +++ b/src/modules/activity/routes/browse/browse.vue @@ -1,7 +1,7 @@