jenkins-bot has submitted this change and it was merged.
Change subject: SelectFileWidget: Improve thumbnail appearance
......................................................................
SelectFileWidget: Improve thumbnail appearance
Improving appearance by adding `margin` to thumbnail and
setting `background-image` to `contain` instead of `cover` to make smaller
images easier handlable.
Also:
* breaking line on overlong filenames instead of using ellipsis,
* decreasing `-dropTarget` height when not supported in browser and
* removing selector nesting where applicable and cleaning up unnecessary
property overwrites widely across rules.
Bug: T133245
Change-Id: I32b81a69dbf9f08add252e5a6240d56e8e4f44cb
---
M src/styles/widgets/SelectFileWidget.less
M src/themes/apex/common.less
M src/themes/apex/widgets.less
M src/themes/mediawiki/common.less
M src/themes/mediawiki/widgets.less
5 files changed, 186 insertions(+), 205 deletions(-)
Approvals:
Jforrester: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/styles/widgets/SelectFileWidget.less
b/src/styles/widgets/SelectFileWidget.less
index 86ad41a..ebf8b13 100644
--- a/src/styles/widgets/SelectFileWidget.less
+++ b/src/styles/widgets/SelectFileWidget.less
@@ -44,22 +44,8 @@
overflow: hidden;
.oo-ui-box-sizing( border-box );
- > .oo-ui-selectFileWidget-label {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- text-overflow: ellipsis;
- }
-
- .oo-ui-selectFileWidget-fileType {
- float: right;
- }
-
> .oo-ui-indicatorElement-indicator,
- > .oo-ui-iconElement-icon,
- > .oo-ui-selectFileWidget-clearButton {
+ > .oo-ui-iconElement-icon {
position: absolute;
}
@@ -69,72 +55,83 @@
}
}
- .oo-ui-selectFileWidget-clearButton {
+ &-label {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ text-overflow: ellipsis;
+ }
+
+ &-fileType {
+ display: none;
+ }
+
+ &-clearButton {
+ position: absolute;
z-index: 2;
}
- &.oo-ui-selectFileWidget-dropTarget {
+ &-dropTarget {
+ position: relative;
cursor: default;
- height: 5.5em;
- padding: 0;
+ height: 8.815em;
.oo-ui-selectFileWidget-dropLabel,
- .oo-ui-selectFileWidget-selectButton {
+ .oo-ui-selectFileWidget-selectButton,
+ .oo-ui-iconElement-icon {
display: none;
}
.oo-ui-selectFileWidget-thumbnail {
- height: 5.5em;
- width: 5.5em;
+ width: 7.815em;
position: absolute;
- background-size: cover;
+ top: 0.5em;
+ bottom: 0.5em;
+ left: 0.5em;
background-position: center center;
+ background-repeat: no-repeat;
+ background-size: contain;
&.oo-ui-pendingElement-pending {
+ background-repeat: repeat;
background-size: auto;
}
> .oo-ui-selectFileWidget-noThumbnail-icon {
opacity: 0.4;
- background-color: #ccc;
- height: 5.5em;
- width: 5.5em;
+ height: 7.815em;
+ width: 7.815em;
}
}
.oo-ui-selectFileWidget-info {
- border: 0;
- background: none;
display: block;
height: 100%;
width: auto;
- margin-left: 5.5em;
+ margin-left: 8.815em;
+ border: 0;
+ }
- > .oo-ui-selectFileWidget-label {
- position: relative;
- }
+ .oo-ui-selectFileWidget-label {
+ display: block;
+ position: relative;
+ top: inherit;
+ }
- .oo-ui-selectFileWidget-fileName {
- display: block;
- padding-right: @size-icon + 0.5em;
- overflow: hidden;
- text-overflow: ellipsis;
- }
+ .oo-ui-selectFileWidget-fileName {
+ display: block;
+ padding-top: 0.5em;
+ padding-right: @size-icon + 0.5em;
+ }
- .oo-ui-selectFileWidget-fileType {
- display: block;
- float: none;
- }
-
- > .oo-ui-selectFileWidget-clearButton {
- position: absolute;
- right: 0.5em;
- }
+ .oo-ui-selectFileWidget-clearButton {
+ right: 0.5em;
}
}
&-empty.oo-ui-selectFileWidget-dropTarget {
-
.oo-ui-selectFileWidget-thumbnail,
.oo-ui-selectFileWidget-info {
display: none;
@@ -142,7 +139,7 @@
.oo-ui-selectFileWidget-selectButton {
display: block;
- margin: 0.7em;
+ margin: 2.2em 1em 1em; // `2.2em` for vertical-align
middle
}
}
@@ -155,6 +152,7 @@
margin: 0;
}
}
+
.oo-ui-selectFileWidget-clearButton {
display: none;
}
@@ -178,5 +176,15 @@
}
}
+ &-notsupported {
+ &.oo-ui-selectFileWidget-dropTarget {
+ height: auto;
+
+ .oo-ui-selectFileWidget-label {
+ padding: 1em;
+ }
+ }
+ }
+
.theme-oo-ui-selectFileWidget();
}
diff --git a/src/themes/apex/common.less b/src/themes/apex/common.less
index 76f77ea..9c7df87 100644
--- a/src/themes/apex/common.less
+++ b/src/themes/apex/common.less
@@ -27,6 +27,8 @@
@border-radius-default: 0.25em;
+@line-height-default: 1.4;
+
// Theme animation variables
// Some of these values are duplicated in OO.ui.ApexTheme
@quick-ease: 100ms ease;
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 0b4d73d..baef495 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -159,8 +159,7 @@
.theme-oo-ui-selectFileWidget () {
width: 100%;
max-width: @max-width-input-default;
-
- .oo-ui-inline-spacing(0.5em);
+ .oo-ui-inline-spacing( 0.5em );
&-selectButton {
> .oo-ui-buttonElement-button {
@@ -175,13 +174,6 @@
border-radius: @border-radius-default 0 0
@border-radius-default;
border-width: 1px 0 1px 1px;
- > .oo-ui-indicatorElement-indicator {
- top: 0;
- right: 0;
- height: 2.3em;
- margin-right: 0.775em;
- }
-
> .oo-ui-iconElement-icon {
top: 0;
left: 0;
@@ -189,42 +181,39 @@
margin-left: 0.3em;
}
- > .oo-ui-selectFileWidget-label {
- line-height: 2.3em;
- margin: 0;
- overflow: hidden;
- white-space: nowrap;
- .oo-ui-box-sizing( border-box );
- text-overflow: ellipsis;
- left: 0.5em;
- right: 0.5em;
-
- > .oo-ui-selectFileWidget-fileType {
- color: #888;
- }
- }
-
- > .oo-ui-selectFileWidget-clearButton {
+ > .oo-ui-indicatorElement-indicator {
top: 0;
- width: @size-icon;
- margin-right: 0;
- .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
- height: 2.3em;
- }
+ right: 0;
+ height: 2.3em;
+ margin-right: 0.775em;
}
}
- &.oo-ui-widget-disabled {
- .oo-ui-selectFileWidget-info {
- color: #ccc;
- text-shadow: 0 1px 1px #fff;
- border-color: #ddd;
- background-color: #f3f3f3;
+ &-label {
+ .oo-ui-box-sizing( border-box );
+ left: 0.5em;
+ right: @size-icon + 0.3em; // With close, no indicator
+ line-height: 2.3em;
+ margin: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
- > .oo-ui-iconElement-icon,
- > .oo-ui-indicatorElement-indicator {
- opacity: 0.2;
- }
+ &-fileType {
+ color: #888;
+ display: block;
+ margin-top: 0.25em;
+ }
+
+ &-clearButton {
+ top: 0;
+ right: 0; // With close, no indicator
+ width: @size-icon;
+ margin-right: 0;
+
+ .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
+ height: 2.3em;
}
}
@@ -234,25 +223,14 @@
}
}
- &.oo-ui-iconElement .oo-ui-selectFileWidget-info {
+ &.oo-ui-iconElement {
.oo-ui-selectFileWidget-label {
left: @size-icon + 0.6em;
}
}
- // With close, no indicator:
- & .oo-ui-selectFileWidget-info {
- .oo-ui-selectFileWidget-label {
- right: @size-icon + 0.3em;
- }
-
- .oo-ui-selectFileWidget-clearButton {
- right: 0;
- }
- }
-
// With close, with indicator:
- &.oo-ui-indicatorElement .oo-ui-selectFileWidget-info {
+ &.oo-ui-indicatorElement {
.oo-ui-selectFileWidget-label {
right: @size-indicator + 1.55em - 0.4em + @size-icon +
0.3em;
}
@@ -262,20 +240,16 @@
}
}
- // No close, no indicator:
&-empty,
&-notsupported {
- .oo-ui-selectFileWidget-info {
- .oo-ui-selectFileWidget-label {
- right: 0.5em;
- }
+ // No close, no indicator:
+ .oo-ui-selectFileWidget-label {
+ right: 0.5em;
}
- }
- // No close, with indicator:
- &-empty.oo-ui-indicatorElement,
- &-notsupported.oo-ui-indicatorElement {
- .oo-ui-selectFileWidget-info {
+ // No close, with indicator:
+ &.oo-ui-indicatorElement,
+ &.oo-ui-indicatorElement {
.oo-ui-selectFileWidget-label {
right: 2em;
}
@@ -288,20 +262,9 @@
}
}
- &-empty.oo-ui-widget-disabled,
- &-notsupported {
- &.oo-ui-selectFileWidget-dropTarget {
- color: #ccc;
- text-shadow: 0 1px 1px #fff;
- border-color: #ddd;
- background-color: #f3f3f3;
- }
- }
-
- &.oo-ui-selectFileWidget-dropTarget {
+ &-dropTarget {
background-color: @background-color-main;
border: 1px solid #aaa;
- margin-bottom: 0.5em;
vertical-align: middle;
border-radius: @border-radius-default;
@@ -310,11 +273,40 @@
border-radius: @border-radius-default;
}
}
+
+ .oo-ui-selectFileWidget-label {
+ line-height: @line-height-default;
+ overflow: inherit;
+ white-space: normal;
+ }
}
&-empty.oo-ui-selectFileWidget-dropTarget {
border-style: dashed;
}
+
+ &.oo-ui-widget-disabled,
+ &-empty.oo-ui-widget-disabled,
+ &-notsupported {
+ &.oo-ui-selectFileWidget-dropTarget {
+ background-color: #f3f3f3;
+ color: #ccc;
+ border-color: #ddd;
+ text-shadow: 0 1px 1px #fff;
+ }
+
+ .oo-ui-selectFileWidget-info {
+ background-color: #f3f3f3;
+ color: #ccc;
+ border-color: #ddd;
+ text-shadow: 0 1px 1px #fff;
+
+ > .oo-ui-iconElement-icon,
+ > .oo-ui-indicatorElement-indicator {
+ opacity: 0.2;
+ }
+ }
+ }
}
.theme-oo-ui-inputWidget () {
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 36d4196..7a746f8 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -70,6 +70,8 @@
@box-shadow-focus-default: inset 0 0 0 1px @color-progressive;
@box-shadow-focus-inset: inset 0 0 0 1px @color-progressive, inset 0 0 0 2px
@color-default-light;
+@line-height-default: 1.4;
+
@text-shadow-default: 0 1px 1px #fff; // 'coined' effect
@text-shadow-disabled: @text-shadow-default;
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index d2b1fe1..afdefcf 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -196,55 +196,41 @@
margin-left: 0.5em;
}
- > .oo-ui-selectFileWidget-label {
- .oo-ui-box-sizing( border-box );
- display: block;
- line-height: 2.3;
- margin: 0;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- left: 0;
- right: 0;
- padding-left: 0.5em;
-
- > .oo-ui-selectFileWidget-fileType {
- color: #888;
- }
- }
-
> .oo-ui-indicatorElement-indicator {
top: 0;
right: 0;
height: 2.3em;
margin-right: 0.775em;
}
-
- > .oo-ui-selectFileWidget-clearButton {
- top: 0;
- min-width: @size-icon-min;
- width: @size-icon;
- margin-right: 0;
-
- .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
- height: 2.3em;
- }
- }
}
- &-notsupported,
- &.oo-ui-widget-disabled {
- .oo-ui-selectFileWidget-info {
- background-color: @background-color-disabled;
- color: @color-disabled;
- text-shadow: @text-shadow-disabled;
- border-color: @border-color-disabled;
- cursor: default;
+ &-label {
+ .oo-ui-box-sizing( border-box );
+ display: block;
+ right: @size-icon + 0.5em; // With close, no indicator
+ line-height: 2.3;
+ margin: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding-left: 0.5em;
+ }
- > .oo-ui-iconElement-icon,
- > .oo-ui-indicatorElement-indicator {
- opacity: @opacity-disabled;
- }
+ &-fileType {
+ color: #888;
+ display: block;
+ margin-top: 0.25em;
+ }
+
+ &-clearButton {
+ top: 0;
+ right: 0; // With close, no indicator
+ min-width: @size-icon-min;
+ width: @size-icon;
+ margin-right: 0;
+
+ .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
+ height: 2.3em;
}
}
@@ -254,25 +240,14 @@
}
}
- &.oo-ui-iconElement .oo-ui-selectFileWidget-info {
+ &.oo-ui-iconElement {
.oo-ui-selectFileWidget-label {
left: @size-icon + 1em;
}
}
- // With close, no indicator:
- & .oo-ui-selectFileWidget-info {
- .oo-ui-selectFileWidget-label {
- right: @size-icon + 0.5em;
- }
-
- .oo-ui-selectFileWidget-clearButton {
- right: 0;
- }
- }
-
// With close, with indicator:
- &.oo-ui-indicatorElement .oo-ui-selectFileWidget-info {
+ &.oo-ui-indicatorElement {
.oo-ui-selectFileWidget-label {
right: @size-indicator + 1.55em - 0.4em + @size-icon +
0.5em;
padding-left: 0;
@@ -285,20 +260,10 @@
&-empty,
&-notsupported {
- // No close, no indicator:
- .oo-ui-selectFileWidget-info {
- .oo-ui-selectFileWidget-label {
- right: 0.5em;
- }
- }
-
// No close, with indicator:
&.oo-ui-indicatorElement {
- .oo-ui-selectFileWidget-info {
- .oo-ui-selectFileWidget-label {
- right: 2em;
- padding-left: 0;
- }
+ .oo-ui-selectFileWidget-label {
+ right: 2em;
}
}
}
@@ -309,24 +274,9 @@
}
}
- &-empty.oo-ui-widget-disabled,
- &-notsupported {
- &.oo-ui-selectFileWidget-dropTarget {
- border-color: @border-color-disabled;
- background-color: @background-color-disabled;
-
- .oo-ui-selectFileWidget-info,
- .oo-ui-selectFileWidget-dropLabel {
- color: @color-disabled;
- text-shadow: @text-shadow-disabled;
- }
- }
- }
-
- &.oo-ui-selectFileWidget-dropTarget {
+ &-dropTarget {
background-color: @background-color-default;
border: @border-default;
- margin-bottom: 0.5em;
vertical-align: middle;
overflow: hidden;
border-radius: @border-radius-default;
@@ -336,6 +286,12 @@
border-radius: @border-radius-default;
}
}
+
+ .oo-ui-selectFileWidget-label {
+ line-height: @line-height-default;
+ overflow: inherit;
+ white-space: normal;
+ }
}
&-empty.oo-ui-selectFileWidget-dropTarget {
@@ -343,6 +299,27 @@
border-style: dashed;
}
+ &.oo-ui-widget-disabled,
+ &-empty.oo-ui-widget-disabled,
+ &-notsupported {
+ &.oo-ui-selectFileWidget-dropTarget {
+ background-color: @background-color-disabled;
+ border-color: @border-color-disabled;
+ }
+
+ .oo-ui-selectFileWidget-info {
+ background-color: @background-color-disabled;
+ color: @color-disabled;
+ border-color: @border-color-disabled;
+ text-shadow: @text-shadow-disabled;
+
+ > .oo-ui-iconElement-icon,
+ > .oo-ui-indicatorElement-indicator {
+ opacity: @opacity-disabled;
+ }
+ }
+ }
+
.oo-ui-widget-disabled &-dropLabel {
display: none;
}
--
To view, visit https://gerrit.wikimedia.org/r/284642
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I32b81a69dbf9f08add252e5a6240d56e8e4f44cb
Gerrit-PatchSet: 11
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Pginer <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
