refactor(core): ♻️ handle VE merged edit buttons better

This commit is contained in:
alistair3149 2022-11-07 18:22:15 -05:00
parent 95a9b4566c
commit 68c199d1e9
No known key found for this signature in database
3 changed files with 29 additions and 15 deletions

View file

@ -261,8 +261,12 @@ class SkinHooks implements
'addsection' => 'speechBubbleAdd' 'addsection' => 'speechBubbleAdd'
]; ];
// If a VE edit button is present, use wikiText icon for source edit // If both visual edit and source edit buttons are present
if ( isset( $links['views']['ve-edit'] ) ) { if ( isset( $links['views']['ve-edit'] ) && isset( $links['views']['edit'] ) ) {
// Add a class so that we can make a merged button through CSS
$links['views']['ve-edit']['class'] = 'citizen-ve-edit-merged';
$links['views']['edit']['class'] = 'citizen-ve-edit-merged';
// Use wikiText icon instead of edit icon for source edit
$iconMap['edit'] = 'wikiText'; $iconMap['edit'] = 'wikiText';
} }

View file

@ -202,14 +202,10 @@
} }
// VE styles shouldn't be core but it is just a few lines :/ // VE styles shouldn't be core but it is just a few lines :/
#ca-ve-edit:not( .selected ) { #ca-ve-edit {
order: 98; // Before source edit order: 98; // Before source edit
> a { > a {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
/* Non-WMUI icons */
// See SkinHooks.php for why VE is here // See SkinHooks.php for why VE is here
&:before { &:before {
width: var( --size-icon ); width: var( --size-icon );
@ -218,13 +214,25 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: var( --size-icon ); background-size: var( --size-icon );
content: ''; content: '';
opacity: var( --opacity-icon-base );
transition: @transition-opacity; transition: @transition-opacity;
} }
} }
}
#ca-edit {
order: 99; // Align to last
}
// Merge two buttons together // Merge two buttons together
+ #ca-edit { .citizen-ve-edit-merged {
&#ca-ve-edit {
> a {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}
&#ca-edit {
border-left: 1px solid var( --color-primary--hover ); border-left: 1px solid var( --color-primary--hover );
margin-left: ~'calc( var( --space-xxs ) * -1 )'; margin-left: ~'calc( var( --space-xxs ) * -1 )';
@ -238,10 +246,6 @@
} }
} }
#ca-edit {
order: 99; // Align to last
}
.skin-citizen-dark { .skin-citizen-dark {
#ca-ve-edit > a:before { #ca-ve-edit > a:before {
filter: invert( 1 ); filter: invert( 1 );

View file

@ -16,6 +16,12 @@
pointer-events: auto; pointer-events: auto;
} }
// Hide edit buttons since it is handled by the editing mode dropdown in the toolbar
#ca-ve-edit,
#ca-edit {
display: none;
}
.mw-body-header { .mw-body-header {
z-index: 0; // Reset z-index so toolbar won't clip z-index: 0; // Reset z-index so toolbar won't clip
// Reset VE disabled style to allow page action buttons to work // Reset VE disabled style to allow page action buttons to work
@ -28,7 +34,7 @@
opacity: 0.5; opacity: 0.5;
} }
.toc { .citizen-toc {
display: none; // Hide ToC display: none; // Hide ToC
} }
} }