maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mod tools trigger (#15400)

Browse source 
* init

* init

* test

* test
This commit is contained in:
ludwiczakpawel 2021-11-22 08:22:26 +01:00 • committed by GitHub
parent 5a5a0a723a
commit 50f8cb21fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 20 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/assets/stylesheets/views/article.scss
View file

@ -117,7 +117,7 @@
@media (min-width: $breakpoint-m) {
display: grid;
gap: var(--su-6);
gap: var(--su-4);
justify-content: stretch;
}
}
@ -155,11 +155,14 @@
&__count {
color: var(--base-70);
font-size: var(--fs-s);
display: block;
min-width: var(--su-7);
display: inline-flex;
margin-left: var(--su-1);
min-width: var(--su-6);
@media (min-width: $breakpoint-m) {
min-width: auto;
margin-left: 0;
display: block;
}
}

4
app/assets/stylesheets/views/mod-actions.scss
View file

@ -4,9 +4,9 @@
.mod-actions-menu {
position: fixed;
top: var(--header-height);
top: 0;
right: 0;
height: calc(100vh - var(--header-height));
height: 100vh;
z-index: var(--z-drawer);
transform: translateX(360px);
transition: var(--transition-props);

6
app/javascript/actionsPanel/__tests__/actionsPanel.test.js
View file

@ -16,7 +16,7 @@ describe('addCloseListener()', () => {
</button>
</div>
<div id="mod-actions-menu-btn-area">
<div class="mod-actions-menu-btn crayons-btn crayons-btn--icon-rounded crayons-btn--s hidden">
<div class="mod-actions-menu-btn crayons-btn crayons-btn--icon-rounded crayons-btn--s">
</div>
</div>
</body>
@ -29,11 +29,7 @@ describe('addCloseListener()', () => {
closeButton.click();
// eslint-disable-next-line no-restricted-globals
const modPanel = top.document.getElementsByClassName('mod-actions-menu')[0];
const modPanelBtn = top.document.getElementsByClassName(
'mod-actions-menu-btn',
)[0];
expect(modPanel.classList).not.toContain('showing');
expect(modPanelBtn.classList).not.toContain('hidden');
});
});

6
app/javascript/actionsPanel/__tests__/initializeActionsPanelToggle.test.js
View file

@ -31,9 +31,8 @@ describe('toggling the actions panel', () => {
`<html><body><button class="close-actions-panel hidden"></body></html>`,
);
const modActionsMenu = document.getElementsByClassName(
'mod-actions-menu',
)[0];
const modActionsMenu =
document.getElementsByClassName('mod-actions-menu')[0];
const modActionsMenuBtn = document.getElementsByClassName(
'mod-actions-menu-btn',
)[0];
@ -41,7 +40,6 @@ describe('toggling the actions panel', () => {
modActionsMenuBtn.click();
expect(modActionsMenu.classList.contains('showing')).toBeTruthy();
expect(modActionsMenuBtn.classList.contains('hidden')).toBeTruthy();
const panelDocument = modContainer.contentDocument;

3
app/javascript/actionsPanel/actionsPanel.js
View file

@ -11,9 +11,6 @@ export function addCloseListener() {
articleDocument
.getElementsByClassName('mod-actions-menu')[0]
.classList.toggle('showing');
articleDocument
.getElementsByClassName('mod-actions-menu-btn')[0]
.classList.toggle('hidden');
});
}

15
app/javascript/actionsPanel/initializeActionsPanelToggle.js
View file

@ -8,8 +8,8 @@ export function initializeActionsPanel(user, path) {
`;
const modActionsMenuIconHTML = `
<button class="mod-actions-menu-btn p-4 fixed right-3 bottom-9 m:bottom-7 m:right-7 z-elevate crayons-btn crayons-btn--icon-rounded">
<svg width="32" height="32" class="crayons-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-labelledby="d6cd43ffbad3fe639e2e95c901ee88c8">
<button class="crayons-btn crayons-btn--ghost crayons-btn--icon-rounded mod-actions-menu-btn">
<svg width="24" height="24" class="crayons-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-labelledby="d6cd43ffbad3fe639e2e95c901ee88c8">
<title id="d6cd43ffbad3fe639e2e95c901ee88c8">Moderation</title>
<path d="M3.783 2.826L12 1l8.217 1.826a1 1 0 01.783.976v9.987a6 6 0 01-2.672 4.992L12 23l-6.328-4.219A6 6 0 013 13.79V3.802a1 1 0 01.783-.976zM5 4.604v9.185a4 4 0 001.781 3.328L12 20.597l5.219-3.48A4 4 0 0019 13.79V4.604L12 3.05 5 4.604zM13 10h3l-5 7v-5H8l5-7v5z"/>
</svg>
@ -17,12 +17,10 @@ export function initializeActionsPanel(user, path) {
`;
function toggleModActionsMenu() {
document.getElementById('mod-actions-menu-btn-area').classList.remove('hidden');
document
.getElementsByClassName('mod-actions-menu')[0]
.classList.toggle('showing');
document
.getElementsByClassName('mod-actions-menu-btn')[0]
.classList.toggle('hidden');
// showing close icon in the mod panel if it is opened by clicking the button
const modContainer = document.getElementById('mod-container');
@ -37,11 +35,14 @@ export function initializeActionsPanel(user, path) {
document.getElementsByClassName('mod-actions-menu')[0].innerHTML =
modActionsMenuHTML;
document
.getElementById('mod-actions-menu-btn-area')
.classList.remove('hidden');
// eslint-disable-next-line no-restricted-globals
if (!isModerationPage()) {
// don't show mod button in mod center page
document.getElementById('mod-actions-menu-btn-area').innerHTML =
modActionsMenuIconHTML;
document.getElementById('mod-actions-menu-btn-area')
.innerHTML = modActionsMenuIconHTML
document
.getElementsByClassName('mod-actions-menu-btn')[0]
.addEventListener('click', toggleModActionsMenu);

2
app/views/articles/_actions.html.erb
View file

@ -27,7 +27,7 @@
aria_label: t("views.reactions.readingList.aria_label")
} %>
<% end %>
<div id="mod-actions-menu-btn-area" class="print-hidden hidden align-center"></div>
<div class="align-center m:relative">
<button id="article-show-more-button" aria-controls="article-show-more-dropdown" aria-expanded="false" aria-haspopup="true" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="<%= t("views.actions.more.aria_label") %>">
<%= inline_svg_tag("overflow-horizontal.svg", aria_hidden: true, class: "dropdown-icon crayons-icon", title: t("views.actions.more.title")) %>

1
app/views/articles/show.html.erb
View file

@ -212,7 +212,6 @@
<% end %>
<div class="mod-actions-menu print-hidden"></div>
<div id="mod-actions-menu-btn-area" class="print-hidden"></div>
<div data-testid="flag-user-modal-container" class="flag-user-modal-container hidden"></div>
<div class="fullscreen-code js-fullscreen-code"></div>