diff --git a/.storybook/mocks/custom.less b/.storybook/mocks/custom.less index 261909ddc..81017e355 100644 --- a/.storybook/mocks/custom.less +++ b/.storybook/mocks/custom.less @@ -2,7 +2,6 @@ * These are custom styles designed to supplement styles produced * by ResourceLoad or MediaWiki-core. **/ -@import './mediawiki.ui.icon/icons.less'; @import './production-icons.less'; html, diff --git a/.storybook/storybook-resources.sh b/.storybook/storybook-resources.sh index 994909471..7445feebe 100755 --- a/.storybook/storybook-resources.sh +++ b/.storybook/storybook-resources.sh @@ -11,8 +11,5 @@ sed "s/..\/..\/lib\/codex/@wikimedia\/codex/g" .storybook/mocks/mediawiki.skin.d # MediaWiki LESS mixins curl https://raw.githubusercontent.com/wikimedia/mediawiki/master/resources/src/mediawiki.less/mediawiki.mixins.less -o .storybook/mocks/mediawiki.mixins.less -# mediawiki.ui.icon icons.less -curl https://raw.githubusercontent.com/wikimedia/mediawiki/master/resources/src/mediawiki.ui.icon/icons-2.less -o .storybook/mocks/mediawiki.ui.icon/icons.less - # OOUI/WikimediaUI theme icons curl "https://en.wikipedia.org/w/load.php?modules=ext.popups.icons|ext.popups.images&only=styles&debug=true" -o .storybook/mocks/production-icons.less diff --git a/extension.json b/extension.json index bc14cc35c..992222252 100644 --- a/extension.json +++ b/extension.json @@ -125,13 +125,14 @@ "ResourceModules": { "ext.popups.icons": { "class": "ResourceLoaderOOUIIconPackModule", + "selectorWithoutVariant": ".mw-ui-icon-{name}", "icons": [ "infoFilled", "settings" ] }, "ext.popups.images": { - "selector": ".mw-ui-icon-{name}:before", + "selector": ".mw-ui-icon-{name}", "class": "ResourceLoaderImageModule", "images": { "popups-close": "resources/ext.popups.images/close.svg", @@ -231,7 +232,6 @@ "mediawiki.storage", "mediawiki.Title", "mediawiki.ui.checkbox", - "mediawiki.ui.icon", "mediawiki.Uri", "mediawiki.user", "mediawiki.util", diff --git a/resources/dist/index.js b/resources/dist/index.js index 921bffa66..18219c818 100644 Binary files a/resources/dist/index.js and b/resources/dist/index.js differ diff --git a/resources/dist/index.js.map.json b/resources/dist/index.js.map.json index 161f77bce..033e545c0 100644 Binary files a/resources/dist/index.js.map.json and b/resources/dist/index.js.map.json differ diff --git a/src/ui/index.less b/src/ui/index.less index 56f052cbc..0508d4641 100644 --- a/src/ui/index.less +++ b/src/ui/index.less @@ -10,6 +10,17 @@ top: -1000px; } +.popups-icon { + .cdx-mixin-css-icon-background(); + .cdx-mixin-css-icon-size(); + .cdx-mixin-css-icon-alignment(); +} + +.popups-icon--size-small { + .cdx-mixin-css-icon-background( @size-icon-small ); + .cdx-mixin-css-icon-size( @size-icon-small ); +} + // FIXME: Upstream this to Codex with T342910 .mwe-popups-overlay .cdx-button.cdx-button--icon-only, .mwe-popups .cdx-button.cdx-button--icon-only { diff --git a/src/ui/renderer.js b/src/ui/renderer.js index 1631f7439..fc6ded1cd 100644 --- a/src/ui/renderer.js +++ b/src/ui/renderer.js @@ -203,12 +203,11 @@ export function createPagePreview( model ) { * @return {ext.popups.Preview} */ export function createEmptyPreview( model ) { - const showTitle = false, - extractMsg = mw.msg( 'popups-preview-no-preview' ), - linkMsg = mw.msg( 'popups-preview-footer-read' ); + model.title = mw.msg( 'popups-preview-no-preview' ); + const linkMsg = mw.msg( 'popups-preview-footer-read' ); return { - el: renderPreview( model, showTitle, extractMsg, linkMsg ), + el: renderPreview( model, null, linkMsg ), hasThumbnail: false, isTall: false }; @@ -221,12 +220,11 @@ export function createEmptyPreview( model ) { * @return {ext.popups.Preview} */ export function createDisambiguationPreview( model ) { - const showTitle = true, - extractMsg = mw.msg( 'popups-preview-disambiguation' ), - linkMsg = mw.msg( 'popups-preview-disambiguation-link' ); + const extractMsg = mw.msg( 'popups-preview-disambiguation' ); + const linkMsg = mw.msg( 'popups-preview-disambiguation-link' ); return { - el: renderPreview( model, showTitle, extractMsg, linkMsg ), + el: renderPreview( model, extractMsg, linkMsg ), hasThumbnail: false, isTall: false }; diff --git a/src/ui/templates/pagePreview/pagePreview.js b/src/ui/templates/pagePreview/pagePreview.js index 5527ce564..b182120ee 100644 --- a/src/ui/templates/pagePreview/pagePreview.js +++ b/src/ui/templates/pagePreview/pagePreview.js @@ -12,7 +12,7 @@ const templateHTML = ` diff --git a/src/ui/templates/popup/popup.less b/src/ui/templates/popup/popup.less index f1daaca34..0e1614c1d 100644 --- a/src/ui/templates/popup/popup.less +++ b/src/ui/templates/popup/popup.less @@ -21,6 +21,7 @@ // Same as the --pointer-height in popup.less @previewPointerHeight: 8px; +@minHeight: @previewFooterHeight + @previewPointerHeight; .mwe-popups { background: #fff; @@ -168,7 +169,6 @@ width: @popupWidth; .mwe-popups-extract { - @minHeight: @previewFooterHeight + @previewPointerHeight; // On short summaries, we want to avoid an overlap with the gradient. min-height: @minHeight; max-height: 202px - @previewFooterHeight - @popupPadding; @@ -198,29 +198,6 @@ margin-bottom: @popupPadding + @previewPointerHeight; } - &.mwe-popups-type-generic, - &.mwe-popups-type-disambiguation { - .mwe-popups-extract { - min-height: auto; - padding-top: 4px; - margin-top: 0; - margin-bottom: var( --margin-bottom ); - --margin-bottom: 60px; - } - - .mwe-popups-read-link { - font-weight: bold; - font-size: 12px; - } - - // When the user dwells on the 'There was an issue displaying this preview' - // text, which is a link to the page, then highlight the 'Go to this page' - // link too. - .mwe-popups-extract:hover + footer .mwe-popups-read-link { - text-decoration: underline; - } - } - /* Triangles/Pointers */ &.mwe-popups-no-image-pointer { &::before { @@ -494,18 +471,14 @@ // clip-path cutting off the .mwe-popups-extract's margin. We don't want // this to apply to elements with the .mwe-popups-image-pointer class // because the pokey is on the image. - &:not( .flipped-y ):not( .flipped-x-y ):not( .mwe-popups-image-pointer ):not( .mwe-popups-type-disambiguation ) .mwe-popups-extract { + &:not( .flipped-y ):not( .flipped-x-y ):not( .mwe-popups-image-pointer ) .mwe-popups-extract { padding-top: var( --pointer-height ); } &.mwe-popups-type-generic:not( .flipped-y ):not( .flipped-x-y ), &.mwe-popups-type-disambiguation:not( .flipped-y ):not( .flipped-x-y ) { - .mwe-popups-container { - padding-top: var( --pointer-height ); - - .mwe-popups-extract { - margin-bottom: ~'calc( var( --margin-bottom ) - var( --pointer-height ) )'; - } + .mwe-popups-extract { + margin-bottom: ~'calc( @{minHeight} - var( --pointer-height ) )'; } } } diff --git a/src/ui/templates/preview/preview.js b/src/ui/templates/preview/preview.js index 8d75b9a43..c71ba75d2 100644 --- a/src/ui/templates/preview/preview.js +++ b/src/ui/templates/preview/preview.js @@ -7,10 +7,13 @@ import { createNodeFromTemplate, escapeHTML } from '../templateUtil'; const templateHTML = `
-
- - +
+ + + +
+