Skip to content
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

Jump to bottom

[Mobile] Gallery - Media editing #24088

Merged
merged 13 commits into from
Aug 14, 2020
Merged

[Mobile] Gallery - Media editing #24088

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c3c6ade
Mobile - Gallery - Media editing
Jul 21, 2020
305781e
Mobile - Update changelog
Jul 22, 2020
3a6bda3
Mobile - Gallery - Remove extra separator
Jul 22, 2020
f29f0c8
Merge branch 'master' into rnmobile/gallery-media-editing
Aug 4, 2020
d6d6a14
Mobile - Media Editing - Allow disabling the replace option
Aug 5, 2020
dc50f26
Mobile - Gallery block - Disable replace option for media editing and…
Aug 5, 2020
2c65acc
Merge branch 'master' into rnmobile/gallery-media-editing
Aug 5, 2020
96d5472
Mobile - Gallery block - Caption styles improvements
Aug 6, 2020
72917c5
Mobile - Gallery - Styles improvements for caption
Aug 6, 2020
30e5ea9
Mobile - Gallery - Remove option to replace image
Aug 6, 2020
3bfeb0b
Mobile - Gallery - Update styles to use border variable
Aug 6, 2020
9b344a4
Mobile - Gallery - Use grid unit for styles and code improvements
Aug 13, 2020
cb8b4a8
Merge branch 'master' into rnmobile/gallery-media-editing
Aug 13, 2020
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
60 changes: 17 additions & 43 deletions packages/block-library/src/gallery/gallery-image-style.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
$gallery-image-container-height: 150px;
$overlay-border-width: 3px;
$overlay-border-width: 2px;
$caption-background-color: rgba(0, 0, 0, 0.4);
$caption-padding-vertical: 8px;

.galleryImageContainer {
flex: 1;
height: $gallery-image-container-height;
overflow: hidden;
background-color: $gray-lighten-30;
}

Expand All @@ -14,30 +14,7 @@ $caption-padding-vertical: 8px;
}

.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
}

.imageUploading {
opacity: 0.3;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-width: $overlay-border-width;
border-color: #0000;
}

.overlaySelected {
border-color: $blue-wordpress;
height: 100%;
}

.button {
Expand Down Expand Up @@ -67,14 +44,12 @@ $caption-padding-vertical: 8px;

.separator {
border-right-color: $gray-30;
// border-right-width: StyleSheet.hairlineWidth;
border-right-width: 1px;
height: 20px;
}

.removeButton {
width: 30px;
border-radius: 30px;
.toolbarContainer {
position: absolute;
}

.toolbar {
Expand Down Expand Up @@ -115,6 +90,11 @@ $caption-padding-vertical: 8px;
flex: 1;
flex-direction: row;
align-items: flex-end;
position: absolute;
bottom: $overlay-border-width;
left: $overlay-border-width;
right: $overlay-border-width;
top: 45;
}

@mixin caption-shared {
Expand All @@ -128,30 +108,24 @@ $caption-padding-vertical: 8px;
.caption {
@include caption-shared;
background-color: $caption-background-color;
padding-top: $caption-padding-vertical;
padding-bottom: $caption-padding-vertical;
padding-top: $grid-unit;
padding-bottom: $grid-unit;
}

.captionPlaceholder {
color: #ccc;
}

/*
.captionDark {
background-color: #0007;
}
*/

// expand caption container to compensate for overlay border
.captionExpandedContainer {
// constrain height to gallery image height for caption scroll
max-height: $gallery-image-container-height;
position: absolute;
bottom: - $overlay-border-width;
left: - $overlay-border-width;
right: - $overlay-border-width;
padding-top: $caption-padding-vertical;
padding-bottom: $overlay-border-width + $caption-padding-vertical;
bottom: 0;
left: 0;
right: 0;
padding-top: $grid-unit;
padding-bottom: $overlay-border-width + $grid-unit;
padding-left: $overlay-border-width;
padding-right: $overlay-border-width;
// use caption background color on container when expanded
Expand Down
Loading