mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups
synced 2024-11-23 23:24:39 +00:00
Hovercards: Improve layout of settings dialog to design spec
Improving Hovercards' settings dialog to fulfill design specification. Also fixing HTML structure by removing invalid `radiogroup` element and adding missing `</div>` element, fixing related QUnit test. Changes: * Add close icon instead of using text * Style header as a table for alignment * Remove redundant "OK" button and have it replace "Save" instead * Update text of "OK" button to "Done" * Fix description for translation of "Done" button * Fix qunit and selenium tests * Remove unnecessary markup and less * Add mediawiki-ui-button and mediawiki-ui-icon dependencies * Shrink dialog width some per design spec * Fix dialog horizontal position calculation to remove hard-coded value Bug: T138612 Change-Id: I7395e3438836149becdd576942bdaf6f21b4163f
This commit is contained in:
Volker E
jhobs
parent
b7962f1c6a
commit
0282b9648f
|
|
@ -59,9 +59,12 @@ class PopupsHooks {
|
|||
public static function onResourceLoaderRegisterModules( ResourceLoader $rl ) {
|
||||
$moduleDependencies = array(
|
||||
'mediawiki.jqueryMsg',
|
||||
'mediawiki.ui.button',
|
||||
'mediawiki.ui.icon',
|
||||
'moment',
|
||||
'jquery.hidpi',
|
||||
'ext.popups.targets.desktopTarget',
|
||||
'ext.popups.images',
|
||||
);
|
||||
|
||||
// Create a schema module and add it as a dependency of `ext.popups.desktop`.
|
||||
|
|
|
|||
|
|
@ -90,6 +90,14 @@
|
|||
],
|
||||
"targets": [ "desktop" ]
|
||||
},
|
||||
"ext.popups.images": {
|
||||
"selector": ".mw-ui-icon-{name}:before",
|
||||
"class": "ResourceLoaderImageModule",
|
||||
"prefix": "mw-ui",
|
||||
"images": {
|
||||
"popups-close": "resources/ext.popups.images/close.svg"
|
||||
}
|
||||
},
|
||||
"ext.popups.renderer.desktopRenderer": {
|
||||
"scripts": [
|
||||
"resources/ext.popups.renderer/desktopRenderer.js"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
"popups-settings-option-advanced-description": "See link previews and access editing function menus. This is used by many editors.",
|
||||
"popups-settings-option-off": "Disable",
|
||||
"popups-settings-save": "Save",
|
||||
"popups-settings-help-ok": "OK",
|
||||
"popups-settings-help-ok": "Done",
|
||||
"popups-settings-cancel": "Cancel",
|
||||
"popups-settings-help": "You can turn previews back on using a link in the footer of the page.",
|
||||
"popups-settings-enable": "Enable previews",
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
"popups-settings-option-advanced-description": "Description for the editor or navigation popups option",
|
||||
"popups-settings-option-off": "Title to turn off hovercards option.\n\nSee also:\n* {{msg-mw|Popups-settings-enable}}\n{{Identical|Disable}}",
|
||||
"popups-settings-save": "Save buttton for the setting's dialoag\n{{Identical|Save}}",
|
||||
"popups-settings-help-ok": "Label of a button",
|
||||
"popups-settings-help-ok": "Confirmation button after showing how to re-enable hovercards.",
|
||||
"popups-settings-cancel": "Cancel button for the setting's dialog\n{{Identical|Cancel}}",
|
||||
"popups-settings-help": "Help text explaining how to re-enable previews",
|
||||
"popups-settings-enable": "Link on the footer to enable hovercards if its disabled.\n\nSee also:\n* {{msg-mw|Popups-settings-option-off}}",
|
||||
|
|
|
|||
1
resources/ext.popups.images/close.svg
Normal file
1
resources/ext.popups.images/close.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.983 1.606l17.465 17.466-2.97 2.97L2.014 4.575z"/><path d="M19.407 1.605l2.97 2.97L4.914 22.042l-2.97-2.97z"/></svg>
|
||||
|
After Width: | Height: | Size: 188 B |
|
|
@ -83,8 +83,8 @@
|
|||
settings.close();
|
||||
} else {
|
||||
mw.popups.saveEnabledState( false );
|
||||
$( '#mwe-popups-settings-form' ).hide();
|
||||
$( '#mwe-popups-settings-help' ).show();
|
||||
$( '#mwe-popups-settings-form, #mwe-popups-settings .save' ).hide();
|
||||
$( '#mwe-popups-settings-help, #mwe-popups-settings .okay' ).show();
|
||||
mw.track( 'ext.popups.schemaPopups', $.extend( {}, currentLinkLogData, {
|
||||
action: 'disabled'
|
||||
} ) );
|
||||
|
|
@ -110,9 +110,10 @@
|
|||
settings.render();
|
||||
}
|
||||
|
||||
// FIXME: Should recalc on browser resize
|
||||
settings.$element
|
||||
.show()
|
||||
.css( 'left', ( w - 600 ) / 2 )
|
||||
.css( 'left', ( w - settings.$element.outerWidth( true ) ) / 2 )
|
||||
.css( 'top', ( h - settings.$element.outerHeight( true ) ) / 2 );
|
||||
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -1,63 +1,55 @@
|
|||
@import "mediawiki.mixins.less";
|
||||
|
||||
@dialog-margin: 50px;
|
||||
|
||||
#mwe-popups-settings {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
background: #fff;
|
||||
border: 1px solid rgba( 0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 3px 3px 0px 0px rgba( 0, 0, 0, 0.30 );
|
||||
box-shadow: 3px 3px 0px 0px rgba( 0, 0, 0, 0.30 );
|
||||
width: 600px;
|
||||
padding: 5px;
|
||||
width: 450px;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
|
||||
border-radius: 2px;
|
||||
|
||||
header {
|
||||
height: 50px;
|
||||
border-bottom: 1px solid #c8c8c8;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #c8ccd1;
|
||||
position: relative;
|
||||
display: table;
|
||||
width: 100%;
|
||||
padding: 5px 7px 5px 0;
|
||||
|
||||
a {
|
||||
font: 40px sans-serif;
|
||||
font-weight: bold;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-right: 1px solid #c8c8c8;
|
||||
float: left;
|
||||
> div {
|
||||
display: table-cell;
|
||||
width: 3.35em;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-left: 10px;
|
||||
font: 20px sans-serif;
|
||||
font-weight: bold;
|
||||
line-height: 58px;
|
||||
border: none;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
font-family: sans-serif;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 15px;
|
||||
margin-left: 50px;
|
||||
width: 350px;
|
||||
padding: 50px 0 40px;
|
||||
margin: 0 auto;
|
||||
|
||||
p {
|
||||
color: #999;
|
||||
font-size: 17px;
|
||||
margin: 0;
|
||||
padding: 17px 0 17px 10px;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-left: -48px;
|
||||
|
||||
img, input, label {
|
||||
img,
|
||||
input,
|
||||
label {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
|
@ -67,32 +59,23 @@
|
|||
|
||||
input {
|
||||
display: inline-block;
|
||||
margin: 0 20px;
|
||||
margin: 0 10px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
margin-right: 110px;
|
||||
line-height: 18px;
|
||||
width: 185px;
|
||||
line-height: 16px;
|
||||
width: 300px;
|
||||
|
||||
> span {
|
||||
color: #000;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
|
||||
> small {
|
||||
display: block;
|
||||
padding: 2px 4px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid #BFEBE1;
|
||||
background: #00af89;
|
||||
font-weight: 100;
|
||||
margin-bottom: 5px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -102,7 +85,7 @@
|
|||
#mwe-popups-settings-help {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
margin: 50px;
|
||||
margin: @dialog-margin;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 0;
|
||||
|
||||
|
|
@ -111,7 +94,7 @@
|
|||
}
|
||||
|
||||
div.mwe-popups-settings-help-image {
|
||||
margin-left: -55px;
|
||||
margin-left: -@dialog-margin;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 50px;
|
||||
background: #eee;
|
||||
|
|
@ -127,15 +110,8 @@
|
|||
.background-image-svg( "images/footer-rtl.svg", "images/footer-rtl.png" );
|
||||
}
|
||||
|
||||
.mwe-popups-settings-actions {
|
||||
clear: both;
|
||||
text-align: right;
|
||||
margin: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mwe-popups-overlay {
|
||||
background: rgba( 0, 0, 0, 0.3 );
|
||||
background-color: rgba( 255, 255, 255, 0.9 );
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,33 +1,29 @@
|
|||
<section id="mwe-popups-settings" style="display:none;">
|
||||
<header>
|
||||
<a class="close">×</a>
|
||||
<div>
|
||||
<div class="mw-ui-icon mw-ui-icon-element mw-ui-icon-popups-close close">Close</div>
|
||||
</div>
|
||||
<h1>{{heading}}</h1>
|
||||
<div>
|
||||
<button class="save mw-ui-button mw-ui-constructive">{{saveLabel}}</button>
|
||||
<button class="okay mw-ui-button mw-ui-constructive" style="display:none;">{{okLabel}}</button>
|
||||
</div>
|
||||
</header>
|
||||
<main id="mwe-popups-settings-form">
|
||||
<p>{{descriptionText}}</p>
|
||||
<form>
|
||||
<radiogroup>
|
||||
{{#choices}}
|
||||
<p>
|
||||
<input name="mwe-popups-setting"
|
||||
{{#isChecked}}checked{{/isChecked}}
|
||||
value="{{id}}" type="radio" id="mwe-popups-settings-{{id}}">
|
||||
<label for="mwe-popups-settings-{{id}}"><span>{{name}}</span>
|
||||
{{description}}</label>
|
||||
{{#image}}<img src="{{image}}">{{/image}}
|
||||
</p>
|
||||
{{/choices}}
|
||||
</radiogroup>
|
||||
<div class="mwe-popups-settings-actions">
|
||||
<button type="button" class="mw-ui-button mw-ui-quiet close">{{closeLabel}}</button>
|
||||
<button type="button" class="save mw-ui-button mw-ui-constructive">{{saveLabel}}</button>
|
||||
</div>
|
||||
{{#choices}}
|
||||
<p>
|
||||
<input name="mwe-popups-setting"
|
||||
{{#isChecked}}checked{{/isChecked}}
|
||||
value="{{id}}" type="radio" id="mwe-popups-settings-{{id}}">
|
||||
<label for="mwe-popups-settings-{{id}}"><span>{{name}}</span>
|
||||
{{description}}</label>
|
||||
</p>
|
||||
{{/choices}}
|
||||
</form>
|
||||
</main>
|
||||
<div id="mwe-popups-settings-help" style="display:none;">
|
||||
<div id="mwe-popups-settings-help" style="display:none;">
|
||||
<p>{{helpText}}</p>
|
||||
<div class="mwe-popups-settings-help-image"></div>
|
||||
<div class="mwe-popups-settings-actions">
|
||||
<button type="button" class="okay mw-ui-button mw-ui-constructive">{{okLabel}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -11,8 +11,8 @@ class ArticlePage
|
|||
a(:settings_icon, css: '.mwe-popups-settings-icon')
|
||||
radio(:enable_previews_radio, id: 'mwe-popups-settings-simple')
|
||||
radio(:disable_previews_radio, id: 'mwe-popups-settings-off')
|
||||
button(:cancel_settings_button, css: '#mwe-popups-settings-form button', index: 0)
|
||||
button(:save_settings_button, css: '#mwe-popups-settings-form button', index: 1)
|
||||
button(:settings_help_ok_button, css: '#mwe-popups-settings-help button', index: 0)
|
||||
div(:cancel_settings_button, css: '#mwe-popups-settings .close', index: 0)
|
||||
button(:save_settings_button, css: '#mwe-popups-settings .save')
|
||||
button(:settings_help_ok_button, css: '#mwe-popups-settings .okay', index: 0)
|
||||
a(:last_link_in_the_footer, css: '#footer-places a', index: -1)
|
||||
end
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@
|
|||
return radioButtonValue;
|
||||
}
|
||||
} );
|
||||
jQueryInit.withArgs( '#mwe-popups-settings-form' )
|
||||
jQueryInit.withArgs( '#mwe-popups-settings-form, #mwe-popups-settings .save' )
|
||||
.returns( {
|
||||
hide: $.noop
|
||||
} );
|
||||
jQueryInit.withArgs( '#mwe-popups-settings-help' )
|
||||
jQueryInit.withArgs( '#mwe-popups-settings-help, #mwe-popups-settings .okay' )
|
||||
.returns( {
|
||||
show: $.noop
|
||||
} );
|
||||
|
|
@ -52,8 +52,7 @@
|
|||
|
||||
mw.popups.settings.open();
|
||||
assert.equal(
|
||||
// 600 is defined in styles
|
||||
( $( window ).width() - 600 ) / 2 + 'px',
|
||||
( $( window ).width() - mw.popups.settings.$element.outerWidth( true ) ) / 2 + 'px',
|
||||
mw.popups.settings.$element.css( 'left' ),
|
||||
'Settings dialog is horizontally aligned in the middle.'
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue