yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Media picker 3 preview with checkered background (#10939)

Browse Source 
* Set property editor limit width on parent like other property editors

* Use checkered background in media picker 3 preview like the legacy media picker
This commit is contained in:
Bjarne Fyrstenborg
2021-09-14 07:58:59 +02:00
committed by GitHub
parent 5b62516114
commit aa48cdbbfd
2 changed files with 34 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.less
View File

@@ -1,4 +1,4 @@
.umb-media-card,
.umb-media-card,
umb-media-card {
position: relative;
display: inline-block;
@@ -7,11 +7,8 @@ umb-media-card {
border-radius: @baseBorderRadius;
//box-shadow: 0 1px 2px rgba(0,0,0,.2);
overflow: hidden;
transition: box-shadow 120ms;
cursor: pointer;
.umb-outline();
&:hover {
@@ -24,7 +21,7 @@ umb-media-card {
position: absolute;
border: 2px solid @ui-active-border;
border-radius: @baseBorderRadius;
top:0;
top: 0;
bottom: 0;
left: 0;
right: 0;
@@ -36,28 +33,34 @@ umb-media-card {
}
&.--sortable-placeholder {
box-shadow: none;
&::after {
content: "";
position: absolute;
background-color:rgba(@ui-drop-area-color, .05);
background-color: rgba(@ui-drop-area-color, .05);
border: 2px solid rgba(@ui-drop-area-color, .1);
border-radius: @baseBorderRadius;
box-shadow: 0 0 4px rgba(@ui-drop-area-color, 0.05);
top:0;
top: 0;
bottom: 0;
left: 0;
right: 0;
animation: umb-block-card--sortable-placeholder 400ms ease-in-out alternate infinite;
@keyframes umb-block-card--sortable-placeholder {
0% { opacity: 1; }
100% { opacity: 0.5; }
0% {
opacity: 1;
}
100% {
opacity: 0.5;
}
}
}
box-shadow: none;
}
.__status {
position: absolute;
top: 0;
left: 0;
@@ -72,22 +75,26 @@ umb-media-card {
.__showcase {
position: relative;
display: flex;
max-width: 100%;
min-height: 120px;
max-height: 240px;
text-align: center;
//padding-bottom: 10/16*100%;
//background-color: @gray-12;
align-items: center;
justify-content: center;
.checkeredBackground();
img {
object-fit: contain;
max-height: 240px;
}
umb-file-icon {
width: 100%;
padding-bottom: 100%;
display: block;
.umb-file-icon {
position: absolute;
top: 0;
@@ -100,7 +107,7 @@ umb-media-card {
}
}
}
.__info {
position: absolute;
text-align: left;
@@ -108,15 +115,17 @@ umb-media-card {
width: 100%;
background-color: #fff;
padding-top: 6px;
padding-bottom: 7px;// 7 + 1 to compentiate for the -1 substraction in margin-bottom.
padding-bottom: 7px; // 7 + 1 to compentiate for the -1 substraction in margin-bottom.
opacity: 0;
transition: opacity 120ms;
&.--error {
opacity: 1;
background-color: @errorBackground;
.__name, .__subname {
.__name,
.__subname {
color: @errorText;
}
}
@@ -127,11 +136,11 @@ umb-media-card {
color: @ui-action-type;
margin-left: 16px;
margin-bottom: -1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.__subname {
color: @gray-4;
font-size: 12px;
@@ -146,6 +155,7 @@ umb-media-card {
.__info {
opacity: 1;
}
.__info:not(.--error) {
.__name {
color: @ui-action-type-hover;
@@ -162,25 +172,25 @@ umb-media-card {
border-radius: 16px;
padding-left: 5px;
padding-right: 5px;
opacity: 0;
transition: opacity 120ms;
.__action {
position: relative;
display: inline-block;
padding: 5px;
font-size: 18px;
color: @ui-action-discreet-type;
&:hover {
color: @ui-action-discreet-type-hover;
}
}
}
&:hover, &:focus, &:focus-within {
.__actions {
opacity: 1;
}
}
}

4
src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.less
View File

@@ -1,10 +1,10 @@
.umb-mediapicker3 {
.umb-property-editor--limit-width();
.umb-media-card-grid {
padding: 20px;
border: 1px solid @inputBorder;
box-sizing: border-box;
.umb-property-editor--limit-width();
&.--singleMode {
max-width: 202px;