From 898ee0fdc18463bf7fb5940d15fda0f15d91c7c8 Mon Sep 17 00:00:00 2001 From: Isarra Date: Wed, 21 Aug 2019 16:09:23 +0000 Subject: [PATCH] Better icons/handling for view source, VE edit links * New icon for edit source as variant of normal edit icon * Use old brackets icon for view source instead * Put icon for editsection links outside the links themselves and only use one for VE when there's two links Bug: T173531 Bug: T229184 Change-Id: Ia178c487c8e6c175944868646d36064ebde8182c --- .../extensions/VisualEditor.article.less | 11 +-- resources/images/editing icons.svg | 35 ------- resources/images/pencil-source-grey.png | Bin 0 -> 558 bytes resources/images/pencil-source-grey.svg | 86 ++++++++++++++++++ resources/screen-common.less | 10 +- resources/screen-mobile.less | 5 + 6 files changed, 98 insertions(+), 49 deletions(-) delete mode 100644 resources/images/editing icons.svg create mode 100644 resources/images/pencil-source-grey.png create mode 100644 resources/images/pencil-source-grey.svg diff --git a/resources/extensions/VisualEditor.article.less b/resources/extensions/VisualEditor.article.less index 4a34d96..69ec0d5 100644 --- a/resources/extensions/VisualEditor.article.less +++ b/resources/extensions/VisualEditor.article.less @@ -2,15 +2,6 @@ @media screen { .client-js { - .mw-editsection a { - .background-image-svg( '../images/brackets-grey.svg', '../images/brackets-grey.png' ); - margin-right: 1.25em; - } - - .mw-editsection a.mw-editsection-visualeditor { - .background-image-svg( '../images/pencil-grey.svg', '../images/pencil-grey.png' ); - } - .mw-editsection-divider { display: none; } @@ -23,7 +14,7 @@ #ca-edit a { .ca-icon(); - .background-image-svg( '../images/brackets-grey.svg', '../images/brackets-grey.png' ); + .background-image-svg( '../images/pencil-source-grey.svg', '../images/pencil-source-grey.png' ); } } } diff --git a/resources/images/editing icons.svg b/resources/images/editing icons.svg deleted file mode 100644 index 45d8cda..0000000 --- a/resources/images/editing icons.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - A - - - あ - - - - - - - diff --git a/resources/images/pencil-source-grey.png b/resources/images/pencil-source-grey.png new file mode 100644 index 0000000000000000000000000000000000000000..d05d056ddb20fe7b02a89b5a3a8ee24f3e3e503e GIT binary patch literal 558 zcmV+}0@3}6P)buI;j_=f zzVP3j5WH4K8ic6hN=i^@`^xof0SOI(hPGwp4CWJ6C zG8jTw5s?i*RdoqC4{QUcft}y$H&%`@-cZ#|pitFC=iGCEZnt~1-EO}Jrhw1Dgtc}L zV636$a>7(qmr4wv)oNVJbt79%GzS)fcJCePhg>It;i4Tn469^`3~_1+dmi`IoP&>IGHZ2DZ{iu7wcJ z)g`mmJ^-cxoO5f{ge7=vI2`U8W6l5;cm*5>UdI^MtI6tW)`9f<{jtGd@GhbADd|a7 zy`A2zr<#rDm&MNWd_19NQ_?K}5m^Oh%bEuUE9lz_I+tqx5rcgeJJ0iR5!p4yTojR) w)tUExt?6E_%?vP8V}AuUMdaH-(*2Y31M17fjOl^ne*gdg07*qoM6N<$g1V#ai2wiq literal 0 HcmV?d00001 diff --git a/resources/images/pencil-source-grey.svg b/resources/images/pencil-source-grey.svg new file mode 100644 index 0000000..8454695 --- /dev/null +++ b/resources/images/pencil-source-grey.svg @@ -0,0 +1,86 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/resources/screen-common.less b/resources/screen-common.less index e94d75c..84ab1f1 100644 --- a/resources/screen-common.less +++ b/resources/screen-common.less @@ -327,13 +327,15 @@ a.mw-selflink { .mw-editsection { font-family: @fonts; + .background-image-svg( 'images/pencil-grey.svg', 'images/pencil-grey.png' ); + background-repeat: no-repeat; + background-position: left bottom; + padding-left: 20px; a { - .background-image-svg( 'images/pencil-grey.svg', 'images/pencil-grey.png' ); - background-repeat: no-repeat; - background-position: left bottom; display: inline-block; - padding: 0.5em 0 0.25em 1.75em; + padding: 0.5em 0 0.25em; + margin-right: 1em; } } diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less index 927f0b5..290316d 100644 --- a/resources/screen-mobile.less +++ b/resources/screen-mobile.less @@ -200,6 +200,11 @@ h1.firstHeading { .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' );