hyperzlib
/
isekai-mediawiki-skins-Timeless
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add icons to desktop cactions and overhaul icon alignment and usage

Browse Source 
throughout

* Still need to redo how we're using mixins, but whatever.
* Cleans up a bit from the edit/view source etc changes too, since now
  we have a little more context (oops)...
* Just hide 'view' in general because a, how much does it really add,
  and b, it doesn't fit in a lot of cases when we have the extra width
  from these icons regardless.
* Rename view and add section tabs to make more sense with icons/in
  context/whatever ('view' is now only targeted at screen readers, and
  we use a + for the new section icon, so saying 'add' is kinda...
  redundant)

Bug: T197520
Change-Id: I1ab12ccda60e51035c4adec43c42508ac297c00a
isekai
Isarra 5 years ago
parent 5c2c302430
commit 9d76730e96
22 changed files with 99 additions and 236 deletions
Show Stats Download Patch File Download Diff File

3
i18n/en.json
Unescape Escape View File

@ -14,7 +14,8 @@
"timeless-sitetools": "Wiki tools",
"timeless-pageactions": "Page tools",
"timeless-userpagetools": "Userpage tools",
"timeless-action-addsection": "Add topic",
"timeless-action-addsection": "New topic",
"timeless-view-view": "Read",
"timeless-pagemisc": "More",
"timeless-namespaces": "Namespaces",
"timeless-pagetools": "Page actions",

1
i18n/qqq.json
Unescape Escape View File

@ -22,6 +22,7 @@
"timeless-pageactions": "Label for some page actions",
"timeless-userpagetools": "Label for actions associated with a userpage",
"timeless-action-addsection": "Label for newsection link on talkpages",
"timeless-view-view": "Label for the 'view' link action tab",
"timeless-pagemisc": "Label for more tools\n{{Identical|More}}",
"timeless-namespaces": "Label for page namespaces and watch tools\n{{Identical|Namespace}}",
"timeless-pagetools": "Label for other page tools",

14
resources/extensions/VisualEditor.article.less
Unescape Escape View File

@ -6,15 +6,17 @@
display: none;
}
@media ( max-width: @mobile-width ) {
#ca-edit a {
.ca-icon( '../images/pencil-source-grey' );
}
#ca-ve-edit a {
.ca-icon();
.background-image-svg( '../images/pencil-grey.svg', '../images/pencil-grey.png' );
.ca-icon( '../images/pencil-grey' );
}
#ca-edit a {
.ca-icon();
.background-image-svg( '../images/pencil-source-grey.svg', '../images/pencil-source-grey.png' );
@media ( max-width: @mobile-width ) {
#ca-ve-edit a {
.ca-icon-only();
}
}
}

12
resources/extensions/WikiLove.icon.less
Unescape Escape View File

@ -1,18 +1,20 @@
@import '../variables.less';
@media screen {
// Only apply icon if setting enabled
#ca-wikilove a {
.ca-icon ( '../images/heart-grey' );
}
@media ( min-width: @desktop-small-floor ) {
// per setting icon-only
#ca-wikilove.icon a {
.ca-icon();
.background-image-svg( '../images/heart-grey.svg', '../images/heart-grey.png' );
.ca-icon-only();
}
}
@media ( max-width: @mobile-width ) {
#ca-wikilove a {
.ca-icon();
.background-image-svg( '../images/heart-grey.svg', '../images/heart-grey.png' );
.ca-icon-only();
}
}
}

BIN
resources/images/brackets-grey.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 193 B

After

Width:  |  Height:  |  Size: 206 B

10
resources/images/brackets-grey.svg
Unescape Escape View File

@ -1,9 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<g fill="#aaa" stroke="none">
<path d="M2 3h3v1h-1v12h1v1h-3z"/>
<path d="M18 3v14h-3v-1h1v-12h-1v-1z"/>
<path d="M6 3h3v1h-1v12h1v1h-3z"/>
<path d="M14 3v14h-3v-1h1v-12h-1v-1z"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="M3 4h3v1H5v11h1v1H3zM17 4v13h-3v-1h1V5h-1V4zM6.5 4H9v1H8v11h1v1H6.5zM13.5 4v13H11v-1h1V5h-1V4z" fill="#aaa"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 325 B

After

Width:  |  Height:  |  Size: 187 B

BIN
resources/images/eyeball-grey.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 589 B

1
resources/images/eyeball-grey.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="M3.222 10.414c4-6 9.4-6 13.4 0-4 6-9.4 6-13.4 0z" fill="none" stroke="#aaa" stroke-width="2"/><circle r="3.344" cy="9.156" cx="9.844" fill="none" stroke="#aaa" stroke-linecap="square"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 263 B

55
resources/images/heart-grey.svg
Unescape Escape View File

@ -1,54 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg12"
version="1.1"
viewBox="0 0 20 20"
height="20"
width="20">
<metadata
id="metadata18">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs16">
<linearGradient
gradientTransform="matrix(1,0,0,-1,-88,-92)"
y2="-105.4655"
x2="102.5057"
y1="-94.708504"
x1="93.4795"
gradientUnits="userSpaceOnUse"
id="SVGID_1_">
<stop
id="stop2"
style="stop-color:#F39C9C"
offset="0" />
<stop
id="stop4"
style="stop-color:#E97F7F"
offset="0.5757" />
<stop
id="stop6"
style="stop-color:#E36666"
offset="0.8252" />
</linearGradient>
</defs>
<path
id="path22"
d="m 9.46,15.201246 c -4.747,-3.767 -5.05,-4.051 -5.105,-4.109 -1.351,-1.449 -1.351,-3.801 0,-5.245 0.636,-0.681 1.545,-1.07 2.493,-1.07 0.948,0 1.855,0.389 2.493,1.069 l 0.659,0.596 0.702,-0.637 c 0.629,-0.676 1.509,-1.06 2.452,-1.06 0.941,0 1.825,0.392 2.491,1.101 1.351,1.445 1.351,3.798 0,5.244 -0.06,0.062 -0.356,0.341 -5.106,4.11 l -0.539,0.43 z"
stroke-miterlimit="10"
style="fill:none;stroke:#aaaaaa;stroke-width:2.25;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="M9.46 15.201c-4.747-3.767-5.05-4.05-5.105-4.109-1.351-1.449-1.351-3.8 0-5.245a3.416 3.416 0 0 1 2.493-1.07c.948 0 1.855.39 2.493 1.07l.659.595.702-.637a3.332 3.332 0 0 1 2.452-1.06c.941 0 1.825.392 2.491 1.101 1.351 1.445 1.351 3.798 0 5.244-.06.062-.356.341-5.106 4.11l-.539.43z" stroke-miterlimit="10" fill="none" stroke="#aaa" stroke-width="2.25"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 429 B

BIN
resources/images/page-grey.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 251 B

After

Width:  |  Height:  |  Size: 244 B

5
resources/images/page-grey.svg
Unescape Escape View File

@ -1,4 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path fill="#aaa" stroke="none" d="M3 2v16h13v-10.99l-5-5.01zm2 2h4.994v4H14v8H5z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="M4 2v16h12V7.01L11 2zm2 2h3.994v4H14v8H6z" fill="#aaa"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 216 B

After

Width:  |  Height:  |  Size: 134 B

BIN
resources/images/page-misc-grey.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 447 B

1
resources/images/page-misc-grey.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M4 2v16h4v-2H6V4h3.994v4H14v1h2V7.01L11 2z" fill="#aaa" fill-rule="evenodd"/><path d="M13.339 10a.641.641 0 0 0-.643.643v.418a3.536 3.536 0 0 0-1.064.44l-.291-.291a.64.64 0 0 0-.91 0l-.226.228a.641.641 0 0 0 0 .909l.293.293a3.536 3.536 0 0 0-.437 1.056h-.418A.641.641 0 0 0 9 14.34v.322c0 .356.286.643.643.643h.418a3.536 3.536 0 0 0 .44 1.064l-.296.297a.641.641 0 0 0 0 .91l.227.227a.642.642 0 0 0 .909 0l.3-.3a3.536 3.536 0 0 0 1.055.437v.418c0 .357.287.643.643.643h.322a.641.641 0 0 0 .643-.643v-.418a3.536 3.536 0 0 0 1.056-.436l.3.299a.642.642 0 0 0 .908 0l.228-.228a.641.641 0 0 0 0-.909l-.298-.299a3.536 3.536 0 0 0 .441-1.062h.418A.641.641 0 0 0 18 14.66v-.322a.641.641 0 0 0-.643-.643h-.418a3.536 3.536 0 0 0-.436-1.056l.293-.293a.641.641 0 0 0 0-.91l-.228-.227a.642.642 0 0 0-.909 0l-.292.292a3.536 3.536 0 0 0-1.063-.441v-.418A.641.641 0 0 0 13.66 10zm.161 2.5a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2z" fill="#aaa" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
resources/images/pencil-grey.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 469 B

After

Width:  |  Height:  |  Size: 471 B

8
resources/images/pencil-grey.svg
Unescape Escape View File

@ -1,7 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<g fill="#aaa" stroke="none">
<path d="M12.314 2.736l-8.9 8.9 4.95 4.95 8.9-8.9zm0 2.829l2.121 2.121-6.071 6.072-2.121-2.122z"/>
<path d="M6.95 18H2v-4.95z"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><g fill="#aaa"><path d="M12.879 2.165l-9.465 9.471 4.95 4.95 9.465-9.471zm0 2.829L15 7.115l-6.636 6.643-2.121-2.122zM6.95 18H2v-4.95z"/></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 300 B

After

Width:  |  Height:  |  Size: 209 B

BIN
resources/images/pencil-source-grey.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 558 B

After

Width:  |  Height:  |  Size: 485 B

87
resources/images/pencil-source-grey.svg
Unescape Escape View File

@ -1,86 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="20"
height="20"
viewBox="0 0 20 20"
version="1.1"
id="svg8"
sodipodi:docname="pencil-source-grey.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14">
<metadata
id="metadata14">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs12" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1338"
inkscape:window-height="1032"
id="namedview10"
showgrid="true"
inkscape:zoom="32"
inkscape:cx="13.880951"
inkscape:cy="1.7618881"
inkscape:window-x="503"
inkscape:window-y="4"
inkscape:window-maximized="0"
inkscape:current-layer="svg8">
<inkscape:grid
type="xygrid"
id="grid821" />
</sodipodi:namedview>
<g
transform="matrix(0.5,0,0,0.5,10,9.5)"
style="fill:#aaaaaa;stroke:none"
id="g10">
<path
style="stroke-width:0.5"
d="m 14.65625,11 -1,1 H 14 v 5 h -0.5 v 1 H 16 V 11 Z M 16.5,11 v 1 H 17 v 5 h -0.5 v 1 H 19 v -7 z m -4.5,2.65625 -2,2 V 18 h 2.5 V 17 H 12 Z"
transform="matrix(2,0,0,2,-20,-19)"
id="path4-6"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccccccc" />
</g>
<g
style="fill:#aaaaaa;stroke:#ffffff"
id="g6-5">
<path
inkscape:connector-curvature="0"
d="M 6.95,18 H 2 v -4.95 z"
id="path4-2"
style="stroke:#ffffff" />
</g>
<g
fill="#aaa"
stroke="none"
id="g6">
<path
d="M12.314 2.736l-8.9 8.9 4.95 4.95 8.9-8.9zm0 2.829l2.121 2.121-6.071 6.072-2.121-2.122z"
id="path2" />
<path
d="M6.95 18H2v-4.95z"
id="path4" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="M15.656 10l-1 1H15v5h-.5v1H17v-7zM13 12.656l-2 2V17h2.5v-1H13z" fill="#aaa"/><g fill="#aaa"><path d="M12.879 2.165l-9.465 9.471 4.95 4.95 9.465-9.471zm0 2.829L15 7.115l-6.636 6.643-2.121-2.122zM6.95 18H2v-4.95z"/></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 295 B

BIN
resources/images/talk-grey.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 724 B

After

Width:  |  Height:  |  Size: 702 B

10
resources/images/talk-grey.svg
Unescape Escape View File

@ -1,9 +1 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<g fill="none" stroke="none">
<path stroke="#aaa" stroke-width="2.25" d="M12.094 11.185h.031c3.2 0 5.793-1.64 5.793-3.664s-2.594-3.665-5.793-3.664c-3.2 0-5.793 1.64-5.793 3.664"/>
<ellipse cx="7.125" cy="11.7" stroke="#aaa" stroke-width="2.25" rx="5" ry="3.426"/>
<path fill="#aaa" d="M4.625 15.575c.587 1.556-.104 2.537-1 3.425 3.462-.731 3.441-2.134 4-3.425z"/>
<path fill="#aaa" d="M15.625 11.642c-.587 1.557.104 2.538 1 3.426-3.462-.732-3.441-2.134-4-3.426z"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><g transform="matrix(.94234 0 0 1 1.033 0)" fill="none"><path d="M12.094 11.185h.031c3.2 0 5.793-1.64 5.793-3.664s-2.594-3.665-5.793-3.664c-3.2 0-5.793 1.64-5.793 3.664" stroke="#aaa" stroke-width="2.25"/><ellipse ry="3.426" rx="5" cy="11.7" cx="7.125" stroke="#aaa" stroke-width="2.25"/><path d="M4.625 15.575c.587 1.556-.104 2.537-1 3.425 3.462-.731 3.441-2.134 4-3.425zM15.625 11.642c-.587 1.557.104 2.538 1 3.426-3.462-.732-3.441-2.134-4-3.426z" fill="#aaa"/></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 610 B

After

Width:  |  Height:  |  Size: 536 B

33
resources/mixins.less
Unescape Escape View File

@ -18,6 +18,27 @@
background-repeat: no-repeat;
}
// Icons for the page actions menus
.ca-icon( @icon: '' ) {
.background-image-svg( '@{icon}.svg', '@{icon}.png' );
border: 0;
background-color: transparent;
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
margin-bottom: -0.35em;
padding: 0 2px 0 20px;
}
// For use after .ca-icon() ...
.ca-icon-only() {
text-indent: -99999px;
width: 20px;
overflow: hidden; // T174314
box-sizing: border-box;
padding: 0;
}
.box() {
background: @base90;
border: solid @base80;
@ -33,18 +54,6 @@
box-shadow: none;
}
// Icons for the page actions menus
.ca-icon() {
.icon;
display: inline-block;
width: 20px;
box-sizing: border-box;
margin-bottom: -0.5em;
overflow: hidden;
}
// Navigation column blocks
.nav-block() {
.box();
padding: 1.5em 1.5em 0;

50
resources/screen-common.less
Unescape Escape View File

@ -229,6 +229,10 @@ body {
color: @text;
}
}
a {
.ca-icon( 'images/page-misc-grey' );
}
}
#p-namespaces {
@ -249,13 +253,50 @@ body {
}
#ca-watch a {
.ca-icon();
.background-image-svg( 'images/star.svg', 'images/star.png' );
.ca-icon( 'images/star' );
.ca-icon-only();
}
#ca-unwatch a {
.ca-icon();
.background-image-svg( 'images/star-filled.svg', 'images/star-filled.png' );
.ca-icon( 'images/star-filled' );
.ca-icon-only();
}
#ca-edit a {
.ca-icon( 'images/pencil-grey' );
}
#ca-history a {
.ca-icon( 'images/clock-grey' );
}
#ca-talk a {
.ca-icon( 'images/talk-grey' );
}
#t-contributions a {
.ca-icon( 'images/puzzle-grey' );
}
#ca-addsection a {
.ca-icon( 'images/plus-grey' );
}
#ca-viewsource a {
.ca-icon( 'images/brackets-grey' );
}
#ca-view {
.hidden();
// Let's give anyone who forcibly brings it back a creepy eyeball
a {
.ca-icon( 'images/eyeball-grey' );
}
}
.tools-inline li[ id^='ca-nstab-' ] a {
.ca-icon( 'images/page-grey' );
}
#ca-languages {
@ -264,6 +305,7 @@ body {
h2 {
.dropdown-header();
.ca-icon( 'images/languages-grey' );
font-size: 1em;
font-family: @fonts;
border-bottom: transparent;

43
resources/screen-mobile.less
Unescape Escape View File

@ -175,39 +175,8 @@ h1.firstHeading {
}
}
#ca-edit a {
.ca-icon();
.background-image-svg( 'images/pencil-grey.svg', 'images/pencil-grey.png' );
}
#ca-history a {
.ca-icon();
.background-image-svg( 'images/clock-grey.svg', 'images/clock-grey.png' );
}
#ca-talk a {
.ca-icon();
.background-image-svg( 'images/talk-grey.svg', 'images/talk-grey.png' );
}
#t-contributions a {
.ca-icon();
.background-image-svg( 'images/puzzle-grey.svg', 'images/puzzle-grey.png' );
}
#ca-addsection a {
.ca-icon();
.background-image-svg( 'images/plus-grey.svg', 'images/plus-grey.png' );
}
#ca-viewsource a {
.ca-icon();
.background-image-svg( 'images/brackets-grey.svg', 'images/brackets-grey.png' );
}
*[ id^='ca-nstab-' ] a {
.ca-icon();
.background-image-svg( 'images/page-grey.svg', 'images/page-grey.png' );
.tools-inline li a {
.ca-icon-only();
}
#ca-more,
@ -219,7 +188,9 @@ h1.firstHeading {
#ca-more span,
#ca-languages h2 span {
.ca-icon();
.ca-icon-only();
display: inline-block;
overflow: visible;
}
#ca-more span {
@ -237,10 +208,6 @@ h1.firstHeading {
border-bottom-color: @base70;
}
span {
.background-image-svg( 'images/languages-grey.svg', 'images/languages-grey.png' );
}
&:after {
width: 16px;
}

Write Preview
Loading…
Cancel
Save