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

44
src/wp-includes/css/media-views.css
View File

@@ -1957,32 +1957,7 @@
.media-modal .imgedit-wrap .imgedit-panel-content {
padding: 16px 16px 0;
position: absolute;
top: 0;
right: 282px;
bottom: 0;
left: 0;
overflow: auto;
}
/*
* Implementation of bottom padding in overflow content differs across browsers.
* We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
*/
.media-modal .imgedit-wrap .imgedit-submit {
margin-bottom: 16px;
}
.media-modal .imgedit-wrap .imgedit-settings {
background: #f6f7f7;
border-left: 1px solid #dcdcde;
padding: 20px 16px 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 250px;
overflow: auto;
overflow: visible;
}
/*
@@ -1996,19 +1971,15 @@
.media-modal .imgedit-group {
background: none;
border: none;
border-bottom: 1px solid #dcdcde;
box-shadow: none;
margin: 0;
margin-bottom: 16px;
padding: 0;
padding-bottom: 16px;
position: relative; /* RTL fix, #WP29352 */
}
.media-modal .imgedit-group:last-of-type {
border: none;
margin: 0;
padding: 0;
.media-modal .imgedit-group.imgedit-panel-active {
margin-bottom: 16px;
padding-bottom: 16px;
}
.media-modal .imgedit-group-top {
@@ -2077,8 +2048,7 @@
.media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
.media-modal .imgedit-wrap .notice {
margin: 0;
margin-bottom: 16px;
margin: 0 16px;
}
/**
@@ -2827,6 +2797,10 @@
}
@media screen and (max-width: 782px) {
.imgedit-panel-content {
grid-template-columns: auto;
}
.media-frame-toolbar .media-toolbar {
bottom: -54px;
}