vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-04-09 23:24:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Media: Update admin image editor design.

Browse Source 
Significant restructure of the admin image editor interface, but no new functionality. Reorganize editing buttons into a common region at the top of the editor. Move image rotation tools into a pop-out menu. Add 180 degree rotation option. Add scale button to control group. Move sidebar tools next to the editing canvas to improve visual proximity between action and result. Enlarge editing canvas and crop handles. Separate activating crop functions from applying crop. Add numeric inputs for crop & scale values. 

A long term goal is to move undo/redo and cancel/save into the modal title bar, but that is not feasible without significant updates to the modal framework.

Props afercia, karmatosed, nrqsnchz, antpb, chaion07, costdev, peterwilsoncc, antpb, sabernhardt, prashantbhivsane, joedolson.
Fixes #50523.

git-svn-id: https://develop.svn.wordpress.org/trunk@55919 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson
2023-06-14 20:40:42 +00:00
parent 8b9691ab24
commit 3a9893b7cc
7 changed files with 554 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/wp-admin/css/common.css
View File

@@ -191,7 +191,6 @@ p.popular-tags,
.wp-editor-container,
.popular-tags,
.feature-filter,
.imgedit-group,
.comment-ays {
border: 1px solid #c3c4c7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
@@ -204,7 +203,6 @@ p.popular-tags,
.widgets-holder-wrap,
.popular-tags,
.feature-filter,
.imgedit-group,
.comment-ays {
background: #fff;
}

145
src/wp-admin/css/media.css
View File

@@ -877,16 +877,16 @@ border color while dragging a file over the uploader drop area */
padding-top: 10px;
}
.imgedit-settings p,
.imgedit-settings fieldset {
.image-editor p,
.image-editor fieldset {
margin: 8px 0;
}
.imgedit-settings legend {
.image-editor legend {
margin-bottom: 5px;
}
.describe .imgedit-wrap .imgedit-settings {
.describe .imgedit-wrap .image-editor {
padding: 0 5px;
}
@@ -898,19 +898,36 @@ border color while dragging a file over the uploader drop area */
height: auto;
}
.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
float: left;
padding: 3px 16px 0 0;
min-width: 400px;
max-width: calc( 100% - 266px );
.imgedit-panel-content {
display: grid;
grid-template-columns: 640px 1fr;
gap: 20px;
}
.wp_attachment_holder .imgedit-wrap .imgedit-settings {
@media screen and (max-width: 1120px) {
.imgedit-panel-content {
grid-template-columns: 1fr;
}
}
.imgedit-settings {
max-width: 400px; /* Prevent reflow when help info is expanded. */
}
.imgedit-group-controls > * {
display: none;
}
.imgedit-panel-active .imgedit-group-controls > * {
display: block;
}
.wp_attachment_holder .imgedit-wrap .image-editor {
float: right;
width: 250px;
}
.imgedit-settings input {
.image-editor input {
margin-top: 0;
vertical-align: middle;
}
@@ -945,7 +962,7 @@ border color while dragging a file over the uploader drop area */
}
.media-disabled,
.imgedit-settings .disabled {
.image-editor .disabled {
/* WCAG 1.4.3 Text or images of text that are part of an inactive user
interface component ... have no contrast requirement. */
color: #a7aaad;
@@ -969,10 +986,6 @@ border color while dragging a file over the uploader drop area */
float: left;
}
.imgedit-menu {
margin: 0 0 12px;
}
.imgedit-menu .note-no-rotate {
clear: both;
margin: 0;
@@ -985,7 +998,6 @@ border color while dragging a file over the uploader drop area */
min-height: 28px;
font-size: 13px;
line-height: 2;
margin: 0 8px 8px 0;
padding: 0 10px;
}
@@ -1014,22 +1026,14 @@ border color while dragging a file over the uploader drop area */
content: "\f165";
}
.imgedit-rleft:before {
content: "\f166";
.imgedit-scale:before {
content: "\f211";
}
.imgedit-rright:before {
.imgedit-rotate:before {
content: "\f167";
}
.imgedit-flipv:before {
content: "\f168";
}
.imgedit-fliph:before {
content: "\f169";
}
.imgedit-undo:before {
content: "\f171";
}
@@ -1048,23 +1052,19 @@ border color while dragging a file over the uploader drop area */
background-size: 20px 20px;
}
.imgedit-crop-wrap {
padding: 20px;
background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
.imgedit-crop {
margin: 0 8px 0 0;
}
.imgedit-rleft {
margin: 0 3px;
}
.imgedit-rright {
margin: 0 8px 0 3px;
}
.imgedit-flipv {
margin: 0 3px;
}
.imgedit-fliph {
.imgedit-rotate {
margin: 0 8px 0 3px;
}
@@ -1076,6 +1076,12 @@ border color while dragging a file over the uploader drop area */
margin: 0 8px 0 3px;
}
.imgedit-thumbnail-preview-group {
display: flex;
flex-wrap: wrap;
column-gap: 10px;
}
.imgedit-thumbnail-preview {
margin: 10px 8px 0 0;
}
@@ -1102,11 +1108,35 @@ border color while dragging a file over the uploader drop area */
padding: .5em 0 0;
}
.imgedit-popup-menu,
.imgedit-help {
display: none;
padding-bottom: 8px;
}
.imgedit-panel-tools > .imgedit-menu {
display: flex;
column-gap: 4px;
align-items: start;
}
.imgedit-popup-menu {
width: fit-content;
position: absolute;
left: calc( 100% + 4px );
top: -3px;
}
.image-editor .imgedit-menu .imgedit-popup-menu button {
display: block;
margin: 2px 0;
width: 100%;
}
.imgedit-rotate-menu-container {
position: relative;
}
.imgedit-help.imgedit-restore {
padding-bottom: 0;
}
@@ -1139,10 +1169,6 @@ border color while dragging a file over the uploader drop area */
padding: 0;
}
.imgedit-submit {
margin: 8px 0 0;
}
.imgedit-submit-btn {
margin-left: 20px;
}
@@ -1173,17 +1199,16 @@ span.imgedit-scale-warn {
}
.imgedit-group {
margin-bottom: 8px;
padding: 10px;
margin-bottom: 20px;
}
.imgedit-settings .imgedit-original-dimensions {
.image-editor .imgedit-original-dimensions {
display: inline-block;
}
.imgedit-settings .imgedit-scale input[type="text"],
.imgedit-settings .imgedit-crop-ratio input[type="text"],
.imgedit-settings .imgedit-crop-sel input[type="text"] {
.image-editor .imgedit-scale-controls input[type="text"],
.image-editor .imgedit-crop-ratio input[type="text"],
.image-editor .imgedit-crop-sel input[type="text"] {
width: 80px;
font-size: 14px;
padding: 0 8px;
@@ -1197,12 +1222,12 @@ span.imgedit-scale-warn {
color: #3c434a;
}
.imgedit-settings .imgedit-scale-button-wrapper {
.image-editor .imgedit-scale-button-wrapper {
margin-top: 0.3077em;
display: block;
}
.imgedit-settings .imgedit-scale .button {
.image-editor .imgedit-scale-controls .button {
margin-bottom: 0;
}
@@ -1271,15 +1296,15 @@ audio, video {
padding: 10px 0 10px 12px;
}
.imgedit-settings .imgedit-scale input[type="text"],
.imgedit-settings .imgedit-crop-ratio input[type="text"],
.imgedit-settings .imgedit-crop-sel input[type="text"] {
.image-editor .imgedit-scale input[type="text"],
.image-editor .imgedit-crop-ratio input[type="text"],
.image-editor .imgedit-crop-sel input[type="text"] {
font-size: 16px;
padding: 6px 10px;
}
.wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
.wp_attachment_holder .imgedit-wrap .imgedit-settings {
.wp_attachment_holder .imgedit-wrap .image-editor {
float: none;
width: auto;
max-width: none;
@@ -1296,16 +1321,16 @@ audio, video {
}
.media-modal .imgedit-wrap .imgedit-panel-content,
.media-modal .imgedit-wrap .imgedit-settings {
.media-modal .imgedit-wrap .image-editor {
position: initial !important;
}
.media-modal .imgedit-wrap .imgedit-settings {
.media-modal .imgedit-wrap .image-editor {
box-sizing: border-box;
width: 100% !important;
}
.imgedit-settings .imgedit-scale-button-wrapper {
.image-editor .imgedit-scale-button-wrapper {
display: inline-block;
}
}