Kaldari has uploaded a new change for review.
https://gerrit.wikimedia.org/r/141092
Change subject: WIP: Change editor switcher to cog icon and move to right side
......................................................................
WIP: Change editor switcher to cog icon and move to right side
Also add a drop-down indicator and a line next to the close button.
Change-Id: I938b7fe673ef68378529711848c0931262fbf352
---
M less/common/icons.less
A less/common/images/cog.png
A less/common/images/cog.svg
M less/modules/editor/editor.less
M templates/modules/editor/EditorOverlayHeader.html
M templates/modules/editor/VisualEditorOverlayHeader.html
6 files changed, 33 insertions(+), 17 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/92/141092/1
diff --git a/less/common/icons.less b/less/common/icons.less
index 5c81a27..379af5c 100644
--- a/less/common/icons.less
+++ b/less/common/icons.less
@@ -258,6 +258,13 @@
.background-image('images/close-button-beta.png');
}
+.icon-settings {
+ .background-image-svg-quick( 'images/cog' );
+
+ &.selected {
+ // @todo: add blue icon
+ }
+}
.icon-photo {
.background-image('images/camera.png') !important;
diff --git a/less/common/images/cog.png b/less/common/images/cog.png
new file mode 100644
index 0000000..9cfd057
--- /dev/null
+++ b/less/common/images/cog.png
Binary files differ
diff --git a/less/common/images/cog.svg b/less/common/images/cog.svg
new file mode 100644
index 0000000..a3616f2
--- /dev/null
+++ b/less/common/images/cog.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version:
6.00 Build 14948) -->
+<!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="606.667px" height="606.667px" viewBox="2.5 791.5 606.667
606.667" enable-background="new 2.5 791.5 606.667 606.667"
+ xml:space="preserve">
+<path fill="#555555"
d="M513.5,1135.041v-76.082l-46.687-7.782c-3.46-12.536-8.646-24.64-14.699-35.447l27.235-38.474
+
l-53.604-54.037l-38.475,27.235c-11.238-6.053-22.911-11.24-35.447-14.699l-7.782-46.255h-76.082l-7.782,46.688
+
c-12.536,3.458-24.64,8.646-35.447,14.698l-38.474-27.234l-54.037,53.604l27.235,38.474c-6.053,11.239-11.24,22.911-14.699,35.88
+
l-46.255,7.35v76.082l46.255,7.782c3.458,12.536,8.646,24.64,14.699,35.88l-27.235,38.474l53.604,53.605l38.474-27.235
+
c11.24,6.052,22.911,11.239,35.88,14.697l7.782,46.256h76.082l7.782-46.687c12.536-3.46,24.64-8.646,35.447-14.699l38.475,27.235
+
l53.604-53.604l-27.235-38.475c6.053-11.238,11.239-22.911,14.699-35.88L513.5,1135.041z
M306,1176.541
+
c-44.094,0-79.541-35.879-79.541-79.541c0-44.094,35.879-79.541,79.541-79.541s79.541,35.447,79.541,79.541
+ C385.541,1141.095,350.095,1176.541,306,1176.541z"/>
+</svg>
diff --git a/less/modules/editor/editor.less b/less/modules/editor/editor.less
index 767abe1..bda0e70 100644
--- a/less/modules/editor/editor.less
+++ b/less/modules/editor/editor.less
@@ -42,13 +42,13 @@
.overlay-header {
.switcher-container {
// Have to set an explicit width since we're using
display:table-cell
- width: 4em;
+ width: @headerHeight;
vertical-align: middle;
position: relative;
}
.icon.editor-switcher {
- margin: 0 0 0 1em;
+ margin: 0;
}
.icon.editor-switcher:focus {
@@ -59,23 +59,19 @@
display: none;
position: absolute;
top: @headerHeight;
+ right: -1px;
// Needs to float above any elements in the toolbar
z-index: 1;
box-shadow: 0 .1em .2em rgba(0, 0, 0, .2);
- // We have to use margin-left instead of left due to a
rendering bug in
- // Firefox. Firefox sets the wrong horizontal
positioning frame for
- // children of elements with position:relative and
display:table-cell.
- margin-left: -1px;
border: 1px solid @grayLight;
white-space: nowrap;
// FIXME: change class when mediawiki.ui has proper
tabs/toggle buttons
> .mw-ui-button {
- display: inline-block;
+ display: block;
border: none;
- border-right: 1px solid @grayLight;
border-radius: 0;
- padding: 0 2em 0 1em;
+ padding: 0 1.5em 0 .5em;
.icon {
display: inline-block;
diff --git a/templates/modules/editor/EditorOverlayHeader.html
b/templates/modules/editor/EditorOverlayHeader.html
index f84720d..bc2c00a 100644
--- a/templates/modules/editor/EditorOverlayHeader.html
+++ b/templates/modules/editor/EditorOverlayHeader.html
@@ -2,18 +2,18 @@
<ul class="bottom-border">
<li><button class="cancel icon
icon-cancel">{{closeMsg}}</button></li>
</ul>
+ <div class="overlay-title bottom-border">
+ <h2>{{{editingMsg}}}</h2>
+ </div>
{{#editSwitcher}}
<div class="switcher-container bottom-border">
- <button class="editor-switcher icon icon-edit-source
icon-32px">{{switchMsg}}</button>
+ <button class="editor-switcher icon icon-settings
icon-32px">{{switchMsg}}</button>
<div class="switcher-drop-down">
<div class="mw-ui-button visual-editor"><span
class="icon icon-32px icon-edit-ve"></span>{{visualEditorMsg}}</div><!--
--><div class="mw-ui-button mw-ui-progressive
source-editor"><span class="icon icon-32px icon-edit-source
selected"></span>{{sourceEditorMsg}}</div>
</div>
</div>
{{/editSwitcher}}
- <div class="overlay-title bottom-border">
- <h2>{{{editingMsg}}}</h2>
- </div>
{{^readOnly}}
<ul>
<li><button class="continue icon icon-continue"
disabled>{{continueMsg}}</button></li>
diff --git a/templates/modules/editor/VisualEditorOverlayHeader.html
b/templates/modules/editor/VisualEditorOverlayHeader.html
index 157a241..361f4af 100644
--- a/templates/modules/editor/VisualEditorOverlayHeader.html
+++ b/templates/modules/editor/VisualEditorOverlayHeader.html
@@ -2,17 +2,15 @@
<ul class="bottom-border">
<li><button class="cancel icon
icon-cancel">{{closeMsg}}</button></li>
</ul>
-
+ <div class="toolbar bottom-border"></div>
<div class="switcher-container bottom-border">
- <button class="editor-switcher icon icon-edit-ve
icon-32px">{{switchMsg}}</button>
+ <button class="editor-switcher icon icon-settings
icon-32px">{{switchMsg}}</button>
<div class="switcher-drop-down">
<div class="mw-ui-button mw-ui-progressive
visual-editor"><span
class="icon icon-32px icon-edit-ve
selected"></span>{{visualEditorMsg}}</div><!--
--><div class="mw-ui-button source-editor"><span
class="icon icon-32px icon-edit-source"></span>{{sourceEditorMsg}}</div>
</div>
</div>
-
- <div class="toolbar bottom-border"></div>
{{^readOnly}}
<ul>
<li><button class="continue icon icon-continue"
disabled>{{continueMsg}}</button></li>
--
To view, visit https://gerrit.wikimedia.org/r/141092
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I938b7fe673ef68378529711848c0931262fbf352
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Kaldari <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
