jenkins-bot has submitted this change and it was merged. ( https://gerrit.wikimedia.org/r/349535 )
Change subject: Improve illustration on disable popup ...................................................................... Improve illustration on disable popup The updated illustration makes it easier to find the footer link to enable Previews. Bug: T154330 Change-Id: I8b6cbe9e2f002eaff06a293643dc0f4aa1d5a641 --- M resources/ext.popups/images/footer-ltr.png M resources/ext.popups/images/footer-ltr.svg M resources/ext.popups/images/footer-rtl.png M resources/ext.popups/images/footer-rtl.svg M resources/ext.popups/styles/ext.popups.settings.less M resources/ext.popups/templates/settings.mustache 6 files changed, 16 insertions(+), 52 deletions(-) Approvals: jenkins-bot: Verified Phuedx: Looks good to me, approved diff --git a/resources/ext.popups/images/footer-ltr.png b/resources/ext.popups/images/footer-ltr.png index 5ebacfd..75873c1 100644 --- a/resources/ext.popups/images/footer-ltr.png +++ b/resources/ext.popups/images/footer-ltr.png Binary files differ diff --git a/resources/ext.popups/images/footer-ltr.svg b/resources/ext.popups/images/footer-ltr.svg index 839c0fe..7907bbf 100644 --- a/resources/ext.popups/images/footer-ltr.svg +++ b/resources/ext.popups/images/footer-ltr.svg @@ -1,14 +1 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> -<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" - width="405px" height="38px" viewBox="0 0 405 38" enable-background="new 0 0 405 38" xml:space="preserve"> -<g> - <rect y="13" opacity="0.5" fill="#3366BB" width="73" height="12"/> - <rect x="84" y="13" opacity="0.5" fill="#3366BB" width="43" height="12"/> - <rect x="214" y="13" opacity="0.5" fill="#3366BB" width="43" height="12"/> - <rect x="138" y="13" opacity="0.5" fill="#3366BB" width="63" height="12"/> - <rect x="270" fill="#FFFFFF" width="135" height="38"/> - <rect x="282" y="13" fill="#3366BB" width="111" height="12"/> -</g> -</svg> +<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; width="230" height="179" viewBox="0 0 230 179"><defs><rect id="a" width="201" height="13" rx="2"/><rect id="b" width="201" height="169" y="10" rx="2"/><rect id="c" width="30" height="2" x="135" y="158" rx="1"/></defs><g fill="none" fill-rule="evenodd"><g transform="matrix(1 0 0 -1 0 13)"><use fill="#F2F4F7" xlink:href="#a"/><rect width="199" height="11" x="1" y="1" stroke="#9AA0A7" stroke-width="2" rx="2"/></g><use fill="#FFF" xlink:href="#b"/><rect width="199" height="167" x="1" y="11" stroke="#9AA0A7" stroke-width="2" rx="2"/><g opacity=".4" transform="translate(67 35)"><rect width="73" height="2" y="7" fill="#C8CCD1" rx="1"/><rect width="81" height="2" y="31" fill="#72777D" rx="1"/><rect width="32" height="2" y="85" fill="#72777D" rx="1"/><rect width="73" height="2" x="35" y="85" fill="#72777D" rx="1"/><rect width="17" height="2" y="45" fill="#72777D" rx="1"/><rect width="17" height="2" x="91" y="45" fill="#72777D" rx="1"/><rect width="68" height="2" x="20" y="45" fill="#72777D" rx="1"/><rect width="17" height="2" y="78" fill="#72777D" rx="1"/><rect width="37" height="2" x="72" y="78" fill="#72777D" rx="1"/><rect width="49" height="2" x="20" y="78" fill="#72777D" rx="1"/><rect width="24" height="2" x="84" y="31" fill="#72777D" rx="1" transform="matrix(-1 0 0 1 192 0)"/><rect width="81" height="2" y="66" fill="#72777D" rx="1"/><rect width="14" height="2" x="54" y="24" fill="#72777D" rx="1"/><rect width="37" height="2" x="71" y="24" fill="#72777D" rx="1"/><rect width="51" height="2" y="24" fill="#72777D" rx="1"/><rect width="108" height="2" y="59" fill="#72777D" rx="1"/><rect width="108" height="2" y="52" fill="#72777D" rx="1"/><rect width="108" height="2" y="92" fill="#72777D" rx="1"/><rect width="108" height="2" y="38" fill="#72777D" rx="1"/><rect width="51" height="2" fill="#72777D" rx="1"/></g><rect width="30" height="2" x="67" y="158" fill="#72777D" opacity=".4" rx="1"/><rect width="30" height="2" x="99" y="158" fill="#72777D" opacity=".4" rx="1"/><use fill="#36C" xlink:href="#c"/><rect width="33" height="5" x="133.5" y="156.5" stroke="#FFC057" stroke-opacity=".447" stroke-width="3" rx="2.5"/><circle cx="34" cy="49" r="19" fill="#EAECF0"/><g fill="#9AA0A7" transform="translate(5 5)"><circle cx="1.5" cy="1.5" r="1.5"/><circle cx="6" cy="1.5" r="1.5"/><circle cx="10.5" cy="1.5" r="1.5"/></g><path stroke="#FF00AF" stroke-linecap="square" d="M174.5 159.5h54.01"/></g></svg> diff --git a/resources/ext.popups/images/footer-rtl.png b/resources/ext.popups/images/footer-rtl.png index 784ea55..bd41b4b 100644 --- a/resources/ext.popups/images/footer-rtl.png +++ b/resources/ext.popups/images/footer-rtl.png Binary files differ diff --git a/resources/ext.popups/images/footer-rtl.svg b/resources/ext.popups/images/footer-rtl.svg index c7af95a..ab299bd 100644 --- a/resources/ext.popups/images/footer-rtl.svg +++ b/resources/ext.popups/images/footer-rtl.svg @@ -1,14 +1 @@ -<?xml version="1.0" encoding="utf-8"?> -<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";> -<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" - width="405px" height="38px" viewBox="0 0 405 38" enable-background="new 0 0 405 38" xml:space="preserve"> -<g> - <rect x="332" y="13" opacity="0.5" fill="#3366BB" width="73" height="12"/> - <rect x="278" y="13" opacity="0.5" fill="#3366BB" width="43" height="12"/> - <rect x="148" y="13" opacity="0.5" fill="#3366BB" width="43" height="12"/> - <rect x="204" y="13" opacity="0.5" fill="#3366BB" width="63" height="12"/> - <rect x="0" y="0" fill="#FFFFFF" width="135" height="38"/> - <rect x="12" y="13" fill="#3366BB" width="111" height="12"/> -</g> -</svg> +<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; width="235" height="179" viewBox="0 0 235 179"><defs><rect id="a" width="201" height="13" rx="2"/><rect id="b" width="201" height="169" y="10" rx="2"/><rect id="c" width="30" height="2" x="34" y="158" rx="1"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(34)"><g transform="matrix(1 0 0 -1 0 13)"><use fill="#F2F4F7" xlink:href="#a"/><rect width="199" height="11" x="1" y="1" stroke="#9AA0A7" stroke-width="2" rx="2"/></g><use fill="#FFF" xlink:href="#b"/><rect width="199" height="167" x="1" y="11" stroke="#9AA0A7" stroke-width="2" rx="2"/><g opacity=".4" transform="matrix(-1 0 0 1 132 35)"><rect width="73" height="2" y="7" fill="#C8CCD1" rx="1"/><rect width="81" height="2" y="31" fill="#72777D" rx="1"/><rect width="32" height="2" y="85" fill="#72777D" rx="1"/><rect width="73" height="2" x="35" y="85" fill="#72777D" rx="1"/><rect width="17" height="2" y="45" fill="#72777D" rx="1"/><rect width="17" height="2" x="91" y="45" fill="#72777D" rx="1"/><rect width="68" height="2" x="20" y="45" fill="#72777D" rx="1"/><rect width="17" height="2" y="78" fill="#72777D" rx="1"/><rect width="37" height="2" x="72" y="78" fill="#72777D" rx="1"/><rect width="49" height="2" x="20" y="78" fill="#72777D" rx="1"/><rect width="24" height="2" x="84" y="31" fill="#72777D" rx="1" transform="matrix(-1 0 0 1 192 0)"/><rect width="81" height="2" y="66" fill="#72777D" rx="1"/><rect width="14" height="2" x="54" y="24" fill="#72777D" rx="1"/><rect width="37" height="2" x="71" y="24" fill="#72777D" rx="1"/><rect width="51" height="2" y="24" fill="#72777D" rx="1"/><rect width="108" height="2" y="59" fill="#72777D" rx="1"/><rect width="108" height="2" y="52" fill="#72777D" rx="1"/><rect width="108" height="2" y="92" fill="#72777D" rx="1"/><rect width="108" height="2" y="38" fill="#72777D" rx="1"/><rect width="51" height="2" fill="#72777D" rx="1"/></g><rect width="30" height="2" x="69" y="158" fill="#72777D" opacity=".4" rx="1"/><rect width="30" height="2" x="101" y="158" fill="#72777D" opacity=".4" rx="1"/><use fill="#36C" xlink:href="#c"/><rect width="33" height="5" x="32.5" y="156.5" stroke="#FFC057" stroke-opacity=".447" stroke-width="3" rx="2.5"/><circle cx="168" cy="49" r="19" fill="#EAECF0"/><g fill="#9AA0A7" transform="translate(183 5)"><circle cx="1.5" cy="1.5" r="1.5"/><circle cx="6" cy="1.5" r="1.5"/><circle cx="10.5" cy="1.5" r="1.5"/></g></g><path stroke="#FF00AF" stroke-linecap="square" d="M.5 159.5h54.01"/></g></svg> diff --git a/resources/ext.popups/styles/ext.popups.settings.less b/resources/ext.popups/styles/ext.popups.settings.less index 2f56475..6da67f8 100644 --- a/resources/ext.popups/styles/ext.popups.settings.less +++ b/resources/ext.popups/styles/ext.popups.settings.less @@ -1,8 +1,6 @@ @import 'mediawiki.mixins.less'; @import 'mediawiki.ui/variables'; -@dialog-margin: 50px; - #mwe-popups-settings { position: fixed; z-index: 1000; @@ -85,31 +83,24 @@ } .mwe-popups-settings-help { - font-size: 18px; + @imageWidth: 180px; + @imageHeight: 140px; + + .background-image-svg( '../images/footer-ltr.svg', '../images/footer-ltr.png' ); + background-position: top left; + background-repeat: no-repeat; + background-size: @imageWidth @imageHeight; + font-size: 13px; font-weight: 800; - margin: @dialog-margin; - margin-bottom: 20px; - margin-right: 0; + height: @imageHeight; + margin: 40px; + position: relative; p { - margin-right: 150px; + left: @imageWidth; + bottom: 20px; + position: absolute; } - - div.mwe-popups-settings-help-image { - margin-left: -@dialog-margin; - margin-top: 20px; - margin-bottom: 50px; - background: #eee; - height: 65px; - width: 450px; - .background-image-svg( '../images/footer-ltr.svg', '../images/footer-ltr.png' ); - background-position: center; - background-repeat: no-repeat; - } -} - -.rtl .mwe-popups-settings-help div.mwe-popups-settings-help-image { - .background-image-svg( '../images/footer-rtl.svg', '../images/footer-rtl.png' ); } .mwe-popups-overlay { diff --git a/resources/ext.popups/templates/settings.mustache b/resources/ext.popups/templates/settings.mustache index 5b01f78..ff33a3c 100644 --- a/resources/ext.popups/templates/settings.mustache +++ b/resources/ext.popups/templates/settings.mustache @@ -24,6 +24,5 @@ </main> <div class="mwe-popups-settings-help" style="display:none;"> <p>{{helpText}}</p> - <div class="mwe-popups-settings-help-image"></div> </div> </section> -- To view, visit https://gerrit.wikimedia.org/r/349535 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I8b6cbe9e2f002eaff06a293643dc0f4aa1d5a641 Gerrit-PatchSet: 5 Gerrit-Project: mediawiki/extensions/Popups Gerrit-Branch: master Gerrit-Owner: Bmansurov <[email protected]> Gerrit-Reviewer: Bmansurov <[email protected]> Gerrit-Reviewer: Phuedx <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
