Skip to content

[4.x] More UI Improvements#7589

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackmcdade merged 37 commits into from
Mar 13, 2023
Merged

[4.x] More UI Improvements #7589

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
ed2a137
Better Markdown fieldtype in small containers
jackmcdade Feb 22, 2023
ba7cfd8
Let parent/global components handle body overflow
jackmcdade Feb 22, 2023
e35463c
Better contrast on a few icons
jackmcdade Feb 22, 2023
a12bd44
Fix weird visual glitching on User fieldtype drag interaction
jackmcdade Feb 22, 2023
6eac16d
Use proper data type
jackmcdade Feb 22, 2023
4c58471
Merge branch 'master' into more-ui-improvements
jackmcdade Mar 2, 2023
5540af1
Redesign the List Fieldtype
jackmcdade Mar 2, 2023
574cc9c
Merge branch 'master' into more-ui-improvements
jackmcdade Mar 2, 2023
dcc538a
[4.x] Redesign the Entry Listing UI/UX (#7668)
jackmcdade Mar 7, 2023
41c85f8
Ensure you can delete a select option
jackmcdade Mar 7, 2023
5314bfb
[4.x] Way Better Listings (DataTables) (#7676)
jackmcdade Mar 9, 2023
a55b289
Merge branch 'master' into more-ui-improvements
jackmcdade Mar 9, 2023
7674fd7
Show (F) shortcut on Show Filter Controls tooltip
jackmcdade Mar 9, 2023
3369f8a
Refresh Green with Tailwind Green
jackmcdade Mar 11, 2023
77e744a
temp color move from red to rose (actually tailwind red)
jackmcdade Mar 13, 2023
3e58048
Rename rose back to red
jackmcdade Mar 13, 2023
5c10c4d
Apply fixes from StyleCI
StyleCIBot Mar 13, 2023
1faadaa
Give buttons ever slightly more depth
jackmcdade Mar 13, 2023
4a69824
Merge branch 'more-ui-improvements' of github.com:statamic/cms into m…
jackmcdade Mar 13, 2023
b27bf79
Add config option to always show Listing Filters
jackmcdade Mar 13, 2023
bec0f24
Set it to false
jackmcdade Mar 13, 2023
a1a7fa5
Horizontal scroll for asset listing, fix overflow issue w/ selected rows
jackmcdade Mar 13, 2023
1e8e968
Differentiate between new btn-sm and btn-xs (old btn-sm)
jackmcdade Mar 13, 2023
147e2d8
Better h1-h6 icons (new from Streamline)
jackmcdade Mar 13, 2023
0d62ff7
Add prop to disable Popover Clickaway behavior
jackmcdade Mar 13, 2023
5235735
Refactor Bard Link to Popover, improve UX, and remove Sticky Toolbars
jackmcdade Mar 13, 2023
8f76669
Set new h1-h6 icons to currentColor
jackmcdade Mar 13, 2023
966341a
reindent to remove unnecessary outdenting of entire file
jasonvarga Mar 13, 2023
fc7f0d5
the html too
jasonvarga Mar 13, 2023
0e88a0f
teeny tiny unnecessary diff change
jasonvarga Mar 13, 2023
5985892
Merge branch 'master' into more-ui-improvements
jasonvarga Mar 13, 2023
ecf079c
Better date fields in tight quarters
jackmcdade Mar 13, 2023
708a892
Fix Bard typography in Fullscreen Mode
jackmcdade Mar 13, 2023
1c30de2
Fix some fullscreen editor issues
jackmcdade Mar 13, 2023
4087931
Better replicator toolbar
jackmcdade Mar 13, 2023
c2a2f6c
Only show asset folders on the first page of results
jackmcdade Mar 13, 2023
bac9d48
Make Markdown keyboard shortcuts work on windows.
jackmcdade Mar 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions config/cp.php
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,6 +27,18 @@

'start_page' => 'dashboard',

/*
|--------------------------------------------------------------------------
| Listing Filters
|--------------------------------------------------------------------------
|
| Whether to always show the filters on listing pages or hide them behind
| a toggle button to keep things more simple.
|
*/

'always_show_filters' => false,

/*
|--------------------------------------------------------------------------
| Dashboard Widgets
Expand Down
10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -90,6 +90,7 @@
"@babel/preset-env": "^7.20.2",
"@rollup/plugin-inject": "^5.0.3",
"@tailwindcss/container-queries": "^0.1.0",
"@tailwindcss/line-clamp": "^0.4.2",
"@tailwindcss/typography": "^0.5.9",
"@vitejs/plugin-vue2": "^2.2.0",
"autoprefixer": "^10.4.0",
Expand Down
11 changes: 2 additions & 9 deletions resources/css/components/column-picker.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,17 +3,10 @@
}

.column-picker-item {
@apply bg-white text-sm outline-none flex items-center rounded select-none;
padding: 4px 8px;
margin: -1px 0;
@apply text-sm outline-none flex items-center select-none h-full;

&.sortable {
cursor: grab;

label {
cursor: grab;
}

@apply rounded bg-white border;
&:hover {
@apply bg-gray-200;
}
Expand Down
36 changes: 16 additions & 20 deletions resources/css/components/fieldtypes/bard.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -18,7 +18,7 @@
}

.bard-editor .bard-invalid {
@apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
@apply p-2 @lg:px-4 bg-red-100 text-red-500 text-xs whitespace-nowrap;
}

/* Modes */
Expand All@@ -40,17 +40,12 @@
}

.bard-fixed-toolbar {
@apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
position: sticky;
padding: 4px 8px;
z-index: 5;
top: 0;
@apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between px-1 py-2 z-5 top-0;
/* position: sticky; */


.bard-toolbar-button {
@apply text-gray-800 rounded px-1 flex text-center justify-center items-center text-base text-center;
height: 32px;
width: 32px;
margin: 0;
@apply text-gray-800 rounded px-1 flex text-center justify-center items-center text-base h-8 w-8 m-0;
svg {
@apply w-auto h-4;
}
Expand DownExpand Up@@ -84,11 +79,7 @@
@apply bg-black rounded-full shadow-lg px-4;

button {
@apply text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent;
height: 32px;
width: 32px;
margin: 0 2px;
outline: none;
@apply text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent h-8 w-8 my-0 mx-0.5 outline-none;
svg {
@apply w-auto h-4;
}
Expand DownExpand Up@@ -187,7 +178,7 @@
}

.bard-set.has-error > .replicator-set-header label {
@apply text-red;
@apply text-red-500;
}

/* The set selection options for each text block
Expand DownExpand Up@@ -216,7 +207,7 @@
}

.bard-fixed-toolbar {
@apply shadow h-12 justify-center;
@apply shadow h-12;
padding: 7px 8px;
top: 0;
z-index: 999;
Expand All@@ -238,6 +229,10 @@
* > .ProseMirror {
min-height: auto;
}

&:focus {
@apply ring-0;
}
}

.bard-set-selector {
Expand DownExpand Up@@ -500,19 +495,20 @@
========================================================================== */

.bard-link-toolbar {
@apply bg-white rounded absolute leading-none shadow mt-2;
/* @apply bg-white rounded absolute leading-none shadow mt-2;
z-index: 100;
width: 300px;
top: 100%;
right: 0; */

&:before {
/* &:before {
content: '';
border: 6px solid transparent;
border-bottom-color: white;
position: absolute;
bottom: 100%;
left: 10px;
}
} */

.input {
@apply p-0 text-xs h-8 bg-transparent shadow-none border-none;
Expand Down
106 changes: 0 additions & 106 deletions resources/css/components/fieldtypes/list.css
View file
Open in desktop

This file was deleted.

11 changes: 5 additions & 6 deletions resources/css/components/fieldtypes/markdown.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,7 @@
@apply border rounded overflow-hidden relative;

.markdown-toolbar {
@apply bg-white shadow-none rounded-t border-b text-sm flex items-center justify-between;
@apply bg-white shadow-none rounded-t border-b text-sm flex flex-wrap items-center justify-between;
padding: 4px 8px;
}

Expand DownExpand Up@@ -50,7 +50,7 @@
}

.CodeMirror {
@apply bg-gray-100 shadow-inner h-auto font-mono leading-normal p-3 text-xs;
@apply bg-gray-100 shadow-inner h-auto font-mono leading-normal px-0 py-1 @md/markdown:p-3 text-xs;
border-radius: 0 0 3px 3px;

&:focus-within {
Expand DownExpand Up@@ -108,7 +108,7 @@
.markdown-modes button {
@apply text-gray-700;
&.active {
@apply text-white;
@apply text-white bg-black;
}
}

Expand DownExpand Up@@ -181,10 +181,9 @@
========================================================================== */

.markdown-preview {
@apply mx-auto;
@apply mx-auto px-3 py-2 @md/markdown:py-4 @md/markdown:px-5;

padding: 16px 20px;
min-height: 167px; /* @TODO Refactor to avoid a magic number. */
min-height: 167px;

ol {
@apply list-decimal;
Expand Down
8 changes: 4 additions & 4 deletions resources/css/components/fieldtypes/replicator.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -44,9 +44,9 @@

&.invalid {
.replicator-set-header-inner {
@apply bg-red-lighter;
@apply bg-red-100;
label {
@apply text-red;
@apply text-red-500;
}
}
}
Expand DownExpand Up@@ -79,11 +79,11 @@
}

.replicator-set.has-error > .replicator-set-header label {
@apply text-red;
@apply text-red-500;
}

.replicator-set-body > .has-error > label {
@apply text-red;
@apply text-red-500;
}

.replicator-fullscreen {
Expand Down
2 changes: 1 addition & 1 deletion resources/css/components/filters.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,7 @@
}

a.active:after {
@apply bg-red block;
@apply bg-red-500 block;
content: "";
width: 4px;
height: 4px;
Expand Down
4 changes: 2 additions & 2 deletions resources/css/components/global-header.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -124,12 +124,12 @@


.session-expiry-stripe {
@apply px-4 py-2 text-xs top-0 text-center bg-red text-white cursor-pointer w-full outline-none fixed;
@apply px-4 py-2 text-xs top-0 text-center bg-red-500 text-white cursor-pointer w-full outline-none fixed;
z-index: 999;
height: 48px;

&:hover {
@apply bg-red-dark;
@apply bg-red-700;
}

&:active, &:focus {
Expand Down
2 changes: 1 addition & 1 deletion resources/css/components/items.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,7 @@

&.invalid {
.item-inner {
@apply border-red bg-red-lighter text-red;
@apply border-red-300 bg-red-100 text-red-500;
}
}

Expand Down
4 changes: 2 additions & 2 deletions resources/css/components/metrics.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -26,8 +26,8 @@
}
&.dark { }
&.blue { @apply bg-blue; }
&.green { @apply bg-green; }
&.red { @apply bg-red; }
&.green { @apply bg-green-600; }
&.red { @apply bg-red-500; }
}

.metric.simple {
Expand Down
4 changes: 2 additions & 2 deletions resources/css/components/notifications.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,11 +21,11 @@
}

&.success i {
@apply bg-green-light;
@apply bg-green-400 text-green-700;
}

&.error i {
@apply bg-red;
@apply bg-red-500;
}

&.default i {
Expand Down
Loading