From fc9c8599e96f3bae6131c2c6aa53b6cee225dee6 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Wed, 1 May 2024 16:46:07 +0200 Subject: [PATCH 01/13] Add close button as html and add new styling from design --- .gitignore | 1 + i18n/en.json | 5 +- .../styles/ext.networknotice.Notice.less | 73 +++++++++++++++++++ src/NoticeHtml.php | 51 ++++++++++++- 4 files changed, 124 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index f4bae1c..d75bba6 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ /node_modules/ composer.lock package-lock.json +.idea/ diff --git a/i18n/en.json b/i18n/en.json index 8bda416..f4e2a0c 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -17,6 +17,7 @@ "networknotice-delete-network-notice-heading": "Delete network notice", "networknotice-preview-heading": "Preview", "networknotice-delete-network-notice-deletion-heading": "Confirm deletion", + "networknotice-close-button": "Close notification", "networknotice-create-notice-desc": "Creates network notices (site notices) that can be displayed network wide, with more features than standard site notices.", "networknotice-create-notice-label-label": "Label:", @@ -56,9 +57,9 @@ "networknotice-button-delete-label": "delete", "networknotice-text-false-label": "false", "networknotice-text-true-label": "true", - + "networknotice-success-updated": "Network notice successfully updated!", "networknotice-success-created": "Network notice successfully created!", "lpextmenu-networknotice": "Network Notice" -} \ No newline at end of file +} diff --git a/resources/styles/ext.networknotice.Notice.less b/resources/styles/ext.networknotice.Notice.less index 2059eac..d0477e1 100644 --- a/resources/styles/ext.networknotice.Notice.less +++ b/resources/styles/ext.networknotice.Notice.less @@ -1,3 +1,76 @@ +.network-notice { + min-height: 3rem; + display: grid; + grid-template-columns: auto 3rem; + box-shadow: 0 0.0625rem 0.25rem 0 rgba( 0, 0, 0, 0.12 ); + border-radius: 0.5rem; + position: relative; + padding: 0 0 0 1.5rem; + font-size: 0.875rem; + align-items: center; + background-color: #FFFFFF; // default for Bruinen & LakesideView light theme + margin-bottom: 0.5rem; + + @media (min-width: 768px) { + grid-template-columns: auto 3.75rem; + } + + .theme--dark & { + background-color: #26292D; + } + + &::before { + content: ''; + width: 0.5rem; + top: 0; + bottom: 0; + left: 0; + position: absolute; + background-color: var( --clr-wiki-primary ); + border-radius: 0.5rem 0 0 0.5rem; + } + + &__content { + border-right: 0.0625rem solid rgba(0, 0, 0, 0.16); + margin: 0.5rem 0; + padding-right: 1rem; + display: flex; + align-items: center; + grid-column: 1; + + .theme--dark & { + border-right-color: rgba(255, 255, 255, 0.16); + } + + &-icon { + display: inline-flex; + width: 1.5rem; + height: 1.5rem; + align-items: center; + justify-content: center; + margin-right: 0.75rem; + font-size: 1.125rem; + opacity: 0.7; + } + } + + &__close-button { + width: 2.75rem; + height: 2.75rem; + display: flex; + align-items: center; + justify-content: center; + margin: 0 0.625rem 0 0.375rem; + grid-column: 2; + + @media (min-width: 768px) { + width: 2rem; + height: 2rem; + margin: 0 1rem 0 0.75rem; + } + } +} + .networknotice { margin-top: 0.1875rem; display: block; diff --git a/src/NoticeHtml.php b/src/NoticeHtml.php index 83c05ff..5ecac68 100644 --- a/src/NoticeHtml.php +++ b/src/NoticeHtml.php @@ -16,19 +16,62 @@ class NoticeHtml { */ public static function getNoticeHTML( $outputPage, $style, $text, $id = '0' ) { $classes = [ - 'networknotice', - 'networknotice-' . $style, + 'network-notice', + 'network-notice-' . $style, ]; $attributes = [ - 'id' => 'networknotice-' . $id, + 'id' => 'network-notice-' . $id, 'data-id' => $id, 'class' => implode( ' ', $classes ), ]; + $iconElement = Html::rawElement( + 'i', + [ + 'class' => 'fa fa-info-circle', + ] + ); + + $iconWrapper = Html::rawElement( + 'div', + [ + 'class' => 'network-notice__content-icon', + ], + $iconElement + ); + + $closeButtonText = wfMessage( 'networknotice-close-button' )->text(); + + $closeButtonIcon = Html::rawElement( + 'i', + [ + 'class' => 'fa fa-times', + ] + ); + + $closeButton = Html::rawElement( + 'div', + [ + 'class' => 'network-notice__close-button', + 'aria-label' => $closeButtonText, + 'data-component' => 'network-notice-close-button', + 'title' => $closeButtonText, + ], + $closeButtonIcon + ); + + $contentDiv = Html::rawElement( + 'div', + [ + 'class' => 'network-notice__content', + ], + $iconWrapper . $outputPage->parseInlineAsInterface( $text, false ) + ); + $element = Html::rawElement( 'div', $attributes, - $outputPage->parseInlineAsInterface( $text, false ) + $contentDiv . $closeButton // Include the content div and the close button in the content of the network-notice div ); return $element; } From d373b04784dc4eecb15c3c517659da61a44c3672 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Wed, 1 May 2024 20:41:00 +0200 Subject: [PATCH 02/13] remove colors select --- .../styles/ext.networknotice.Notice.less | 190 +----------------- src/Colors.php | 28 --- src/NoticeHtml.php | 8 +- src/SpecialPage/SpecialNetworkNotice.php | 17 -- 4 files changed, 14 insertions(+), 229 deletions(-) delete mode 100644 src/Colors.php diff --git a/resources/styles/ext.networknotice.Notice.less b/resources/styles/ext.networknotice.Notice.less index d0477e1..d61ddda 100644 --- a/resources/styles/ext.networknotice.Notice.less +++ b/resources/styles/ext.networknotice.Notice.less @@ -8,18 +8,18 @@ padding: 0 0 0 1.5rem; font-size: 0.875rem; align-items: center; - background-color: #FFFFFF; // default for Bruinen & LakesideView light theme + background-color: #ffffff; // default for Bruinen & LakesideView light theme margin-bottom: 0.5rem; - @media (min-width: 768px) { + @media ( min-width: 768px ) { grid-template-columns: auto 3.75rem; } .theme--dark & { - background-color: #26292D; + background-color: #26292d; } - &::before { + &:before { content: ''; width: 0.5rem; top: 0; @@ -31,7 +31,7 @@ } &__content { - border-right: 0.0625rem solid rgba(0, 0, 0, 0.16); + border-right: 0.0625rem solid rgba( 0, 0, 0, 0.16 ); margin: 0.5rem 0; padding-right: 1rem; display: flex; @@ -39,7 +39,7 @@ grid-column: 1; .theme--dark & { - border-right-color: rgba(255, 255, 255, 0.16); + border-right-color: rgba( 255, 255, 255, 0.16 ); } &-icon { @@ -51,6 +51,10 @@ margin-right: 0.75rem; font-size: 1.125rem; opacity: 0.7; + + @media ( max-width: 768px ) { + display: none; + } } } @@ -63,182 +67,10 @@ margin: 0 0.625rem 0 0.375rem; grid-column: 2; - @media (min-width: 768px) { + @media ( min-width: 768px ) { width: 2rem; height: 2rem; margin: 0 1rem 0 0.75rem; } } } - -.networknotice { - margin-top: 0.1875rem; - display: block; - text-align: center; - padding: 0.3125rem 1.5rem 0.3125rem 0.3125rem; - margin-bottom: 0.4375rem; - border-left-width: 0.3125rem; - border-left-style: solid; - position: relative; - - a, - a:visited, - a:hover, - a:visited:hover { - color: inherit; - font-weight: bold; - text-decoration: underline; - } - - .make-networknotice-skin( - ~'default', - var( --network-notice-default-color, #444444 ), - var( --network-notice-default-background-color, #ccccff ), - var( --network-notice-default-border-color, #0000ff ) - ); - - .make-networknotice-skin( - ~'inverse', - var( --network-notice-inverse-color, #ffffff ), - var( --network-notice-inverse-background-color, #333333 ), - var( --network-notice-inverse-border-color, #000000 ) - ); - - .make-networknotice( - ~'red', - var( --network-notice-red-color, #444444 ), - var( --network-notice-red-background-color, #ffcccc ), - var( --network-notice-red-border-color, #ff0000 ) - ); - - .make-networknotice( - ~'green', - var( --network-notice-green-color, #444444 ), - var( --network-notice-green-background-color, #ccffcc ), - var( --network-notice-green-border-color, #00ff00 ) - ); - - .make-networknotice( - ~'blue', - var( --network-notice-blue-color, #444444 ), - var( --network-notice-blue-background-color, #ccccff ), - var( --network-notice-blue-border-color, #0000ff ) - ); - - .make-networknotice( - ~'lightgrey', - var( --network-notice-lightgrey-color, #444444 ), - var( --network-notice-lightgrey-background-color, #eeeeee ), - var( --network-notice-lightgrey-border-color, #000000 ) - ); - - .make-networknotice( - ~'darkgrey', - var( --network-notice-darkgrey-color, #444444 ), - var( --network-notice-darkgrey-background-color, #cccccc ), - var( --network-notice-darkgrey-border-color, #333333 ) - ); - - .make-networknotice( - ~'yellow', - var( --network-notice-yellow-color, #444444 ), - var( --network-notice-yellow-background-color, #ffffcc ), - var( --network-notice-yellow-border-color, #ffff00 ) - ); - - .make-networknotice( - ~'purple', - var( --network-notice-purple-color, #444444 ), - var( --network-notice-purple-background-color, #ffccff ), - var( --network-notice-purple-border-color, #ff00ff ) - ); - - .make-networknotice( - ~'turquoise', - var( --network-notice-turquoise-color, #444444 ), - var( --network-notice-turquoise-background-color, #ccffff ), - var( --network-notice-turquoise-border-color, #00ffff ) - ); -} - -html.theme--light .networknotice { - --network-notice-default-color: var( --clr-wiki-on-primary-container ); - --network-notice-default-background-color: var( --clr-wiki-primary-container ); - --network-notice-default-border-color: var( --clr-wiki-on-primary-container ); - --network-notice-inverse-color: var( --clr-wiki-on-primary ); - --network-notice-inverse-background-color: var( --clr-wiki-primary ); - --network-notice-inverse-border-color: var( --clr-wiki-on-primary-container ); - --network-notice-red-color: var( --clr-semantic-negative-10 ); - --network-notice-red-background-color: var( --clr-semantic-negative-90 ); - --network-notice-red-border-color: var( --clr-semantic-negative-40 ); - --network-notice-green-color: var( --clr-semantic-positive-10 ); - --network-notice-green-background-color: var( --clr-semantic-positive-90 ); - --network-notice-green-border-color: var( --clr-semantic-positive-40 ); - --network-notice-blue-color: var( --clr-sapphire-90 ); - --network-notice-blue-background-color: var( --clr-sapphire-10 ); - --network-notice-blue-border-color: var( --clr-sapphire-90 ); - --network-notice-lightgrey-color: var( --clr-on-surface-variant ); - --network-notice-lightgrey-background-color: var( --clr-surface-variant ); - --network-notice-lightgrey-border-color: var( --clr-on-surface-variant ); - --network-notice-darkgrey-color: var( --clr-surface-variant ); - --network-notice-darkgrey-background-color: var( --clr-on-surface-variant ); - --network-notice-darkgrey-border-color: var( --clr-surface-variant ); - --network-notice-yellow-color: var( --clr-sun-10 ); - --network-notice-yellow-background-color: var( --clr-sun-90 ); - --network-notice-yellow-border-color: var( --clr-sun-40 ); - --network-notice-purple-color: var( --clr-redviolet-10 ); - --network-notice-purple-background-color: var( --clr-redviolet-90 ); - --network-notice-purple-border-color: var( --clr-redviolet-40 ); - --network-notice-turquoise-color: var( --clr-elm-10 ); - --network-notice-turquoise-background-color: var( --clr-elm-80 ); - --network-notice-turquoise-border-color: var( --clr-elm-40 ); -} - -html.theme--dark .networknotice { - --network-notice-default-color: #ffffff; - --network-notice-default-background-color: var( --clr-primary-30 ); - --network-notice-default-border-color: var( --clr-primary-30 ); - --network-notice-inverse-color: var( --clr-primary-10 ); - --network-notice-inverse-background-color: var( --clr-primary-80 ); - --network-notice-inverse-border-color: var( --clr-primary-80 ); - --network-notice-red-color: #ffffff; - --network-notice-red-background-color: var( --clr-semantic-negative-20 ); - --network-notice-red-border-color: var( --clr-semantic-negative-20 ); - --network-notice-green-color: #ffffff; - --network-notice-green-background-color: var( --clr-semantic-positive-20 ); - --network-notice-green-border-color: var( --clr-semantic-positive-20 ); - --network-notice-blue-color: #ffffff; - --network-notice-blue-background-color: var( --clr-sapphire-20 ); - --network-notice-blue-border-color: var( --clr-sapphire-20 ); - --network-notice-lightgrey-color: var( --clr-moon-20 ); - --network-notice-lightgrey-background-color: var( --clr-moon-90 ); - --network-notice-lightgrey-border-color: var( --clr-moon-90 ); - --network-notice-darkgrey-color: #ffffff; - --network-notice-darkgrey-background-color: var( --clr-moon-20 ); - --network-notice-darkgrey-border-color: var( --clr-moon-20 ); - --network-notice-yellow-color: var( --clr-sun-90 ); - --network-notice-yellow-background-color: var( --clr-sun-10 ); - --network-notice-yellow-border-color: var( --clr-sun-10 ); - --network-notice-purple-color: var( --clr-redviolet-90 ); - --network-notice-purple-background-color: var( --clr-redviolet-10 ); - --network-notice-purple-border-color: var( --clr-redviolet-10 ); - --network-notice-turquoise-color: var( --clr-elm-80 ); - --network-notice-turquoise-background-color: var( --clr-elm-10 ); - --network-notice-turquoise-border-color: var( --clr-elm-10 ); -} - -.make-networknotice-skin( @theme, @color, @background, @border ) { - &.networknotice-@{theme} { - color: @color; - background-color: @background; - border-left-color: @border; - } -} - -.make-networknotice( @theme, @color, @background, @border ) { - &.networknotice-@{theme} { - color: @color; - background-color: @background; - border-left-color: @border; - } -} diff --git a/src/Colors.php b/src/Colors.php deleted file mode 100644 index a526f22..0000000 --- a/src/Colors.php +++ /dev/null @@ -1,28 +0,0 @@ - 'network-notice-' . $id, @@ -71,7 +69,7 @@ public static function getNoticeHTML( $outputPage, $style, $text, $id = '0' ) { $element = Html::rawElement( 'div', $attributes, - $contentDiv . $closeButton // Include the content div and the close button in the content of the network-notice div + $contentDiv . $closeButton ); return $element; } diff --git a/src/SpecialPage/SpecialNetworkNotice.php b/src/SpecialPage/SpecialNetworkNotice.php index 401ed27..04fc941 100644 --- a/src/SpecialPage/SpecialNetworkNotice.php +++ b/src/SpecialPage/SpecialNetworkNotice.php @@ -62,7 +62,6 @@ public function execute( $par ) { $formDefaults[ 'NoticeId' ] = $row->notice_id; $formDefaults[ 'NoticeLabel' ] = $row->label; $formDefaults[ 'NoticeText' ] = $row->notice_text; - $formDefaults[ 'NoticeStyle' ] = $row->style; $formDefaults[ 'NoticeNamespace' ] = $row->namespace; $formDefaults[ 'NoticeWiki' ] = $row->wiki; $formDefaults[ 'NoticeCategory' ] = $row->category; @@ -105,20 +104,6 @@ public function execute( $par ) { 'required' => true, 'default' => ( $isEdit ? $formDefaults[ 'NoticeText' ] : '' ) ]; - $formDescriptor[ 'NoticeStyle' ] = [ - 'type' => 'select', - 'label-message' => 'networknotice-create-notice-style-label', - 'help-message' => 'networknotice-create-notice-style-helper', - 'required' => true, - 'options' => ( static function ( $colors ) { - $dropDown = []; - foreach ( $colors as $color ) { - $dropDown[ $color ] = $color; - } - return $dropDown; - } )( Colors::getNoticeColors() ), - 'default' => $isEdit ? $formDefaults[ 'NoticeStyle' ] : '' - ]; $formDescriptor[ 'NoticeNamespace' ] = [ 'type' => 'text', 'label-message' => 'networknotice-create-notice-namespace-label', @@ -315,7 +300,6 @@ public function createNetworkNoticeCB( $formData ) { $output->addHTML( NoticeHtml::getNoticeHTML( $output, - $formData[ 'NoticeStyle' ], $formData[ 'NoticeText' ] ) ); @@ -323,7 +307,6 @@ public function createNetworkNoticeCB( $formData ) { $vars = [ 'label' => $formData[ 'NoticeLabel' ], 'notice_text' => $formData[ 'NoticeText' ], - 'style' => $formData[ 'NoticeStyle' ], 'namespace' => $formData[ 'NoticeNamespace' ], 'wiki' => $formData[ 'NoticeWiki' ], 'category' => $formData[ 'NoticeCategory' ], From 7876dc27649559a0553a0cf822a6127df2b97c9a Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Wed, 1 May 2024 21:14:08 +0200 Subject: [PATCH 03/13] remove style references --- src/Hooks/MainHookHandler.php | 3 --- src/SpecialPage/SpecialNetworkNotice.php | 4 ---- 2 files changed, 7 deletions(-) diff --git a/src/Hooks/MainHookHandler.php b/src/Hooks/MainHookHandler.php index 7470b26..e9f23fc 100644 --- a/src/Hooks/MainHookHandler.php +++ b/src/Hooks/MainHookHandler.php @@ -57,7 +57,6 @@ public function onSiteNoticeAfter( &$siteNotice, $skin ) { 'networknotice', [ 'notice_text', - 'style', 'category', 'prefix', 'notice_id' @@ -75,7 +74,6 @@ public function onSiteNoticeAfter( &$siteNotice, $skin ) { if ( empty( $row->category ) ) { $siteNotice .= NoticeHtml::getNoticeHTML( $out, - $row->style, $row->notice_text, $row->notice_id ); @@ -84,7 +82,6 @@ public function onSiteNoticeAfter( &$siteNotice, $skin ) { if ( $category === $row->category ) { $siteNotice .= NoticeHtml::getNoticeHTML( $out, - $row->style, $row->notice_text, $row->notice_id ); diff --git a/src/SpecialPage/SpecialNetworkNotice.php b/src/SpecialPage/SpecialNetworkNotice.php index 04fc941..4bc0a23 100644 --- a/src/SpecialPage/SpecialNetworkNotice.php +++ b/src/SpecialPage/SpecialNetworkNotice.php @@ -214,8 +214,6 @@ public function execute( $par ) { foreach ( $currentnotices as $row ) { $preContent = $this->msg( 'networknotice-create-notice-text-label' )->text() . ' ' . $row->notice_text . "\n"; - $preContent .= $this->msg( 'networknotice-create-notice-style-label' )->text() - . ' ' . $row->style . "\n"; if ( $row->wiki ) { $preContent .= $this->msg( 'networknotice-create-notice-wiki-label' )->text() . ' ' . $row->wiki . "\n"; @@ -363,7 +361,6 @@ private function getNetworkNotices() { 'notice_id', 'label', 'notice_text', - 'style', 'wiki', 'category', 'prefix', @@ -386,7 +383,6 @@ private function getNetworkNoticeById( $id ) { 'notice_id', 'label', 'notice_text', - 'style', 'wiki', 'category', 'prefix', From 2b35848b61378af1d48e48a7b87a4c83c9878275 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Wed, 1 May 2024 22:24:51 +0200 Subject: [PATCH 04/13] styling --- .../styles/ext.networknotice.Notice.less | 33 +++++++--- src/NoticeHtml.php | 60 ++++++++++--------- 2 files changed, 57 insertions(+), 36 deletions(-) diff --git a/resources/styles/ext.networknotice.Notice.less b/resources/styles/ext.networknotice.Notice.less index d61ddda..c38c8c1 100644 --- a/resources/styles/ext.networknotice.Notice.less +++ b/resources/styles/ext.networknotice.Notice.less @@ -31,15 +31,19 @@ } &__content { - border-right: 0.0625rem solid rgba( 0, 0, 0, 0.16 ); - margin: 0.5rem 0; - padding-right: 1rem; - display: flex; - align-items: center; - grid-column: 1; + word-break: break-word; - .theme--dark & { - border-right-color: rgba( 255, 255, 255, 0.16 ); + &-wrapper { + border-right: 0.0625rem solid rgba( 0, 0, 0, 0.16 ); + margin: 0.5rem 0; + padding-right: 1rem; + display: flex; + align-items: center; + grid-column: 1; + + .theme--dark & { + border-right-color: rgba( 255, 255, 255, 0.16 ); + } } &-icon { @@ -66,11 +70,24 @@ justify-content: center; margin: 0 0.625rem 0 0.375rem; grid-column: 2; + cursor: pointer; + border-radius: 0.25rem; + transition: background-color 0.2s ease-in-out; @media ( min-width: 768px ) { width: 2rem; height: 2rem; margin: 0 1rem 0 0.75rem; } + + @media ( hover: hover ) { + &:hover { + background-color: rgba( 0, 0, 0, 0.16 ); + + .theme--dark & { + background-color: rgba( 255, 255, 255, 0.16 ); + } + } + } } } diff --git a/src/NoticeHtml.php b/src/NoticeHtml.php index d78da74..3a1fb44 100644 --- a/src/NoticeHtml.php +++ b/src/NoticeHtml.php @@ -14,48 +14,40 @@ class NoticeHtml { * @return string Html for our notice */ public static function getNoticeHTML( $outputPage, $text, $id = '0' ) { - $classes = [ - 'network-notice' - ]; - $attributes = [ - 'id' => 'network-notice-' . $id, - 'data-id' => $id, - 'class' => implode( ' ', $classes ), - ]; + $closeButtonText = wfMessage( 'networknotice-close-button' )->text(); - $iconElement = Html::rawElement( + $closeButtonIcon = Html::rawElement( 'i', [ - 'class' => 'fa fa-info-circle', + 'class' => 'fa fa-times', ] ); - $iconWrapper = Html::rawElement( + $closeButton = Html::rawElement( 'div', [ - 'class' => 'network-notice__content-icon', + 'class' => 'network-notice__close-button', + 'aria-label' => $closeButtonText, + 'data-component' => 'network-notice-close-button', + 'title' => $closeButtonText, + 'tabindex' => '0', ], - $iconElement + $closeButtonIcon ); - $closeButtonText = wfMessage( 'networknotice-close-button' )->text(); - - $closeButtonIcon = Html::rawElement( + $contentIconElement = Html::rawElement( 'i', [ - 'class' => 'fa fa-times', + 'class' => 'fa fa-info-circle', ] ); - $closeButton = Html::rawElement( + $contentIconWrapper = Html::rawElement( 'div', [ - 'class' => 'network-notice__close-button', - 'aria-label' => $closeButtonText, - 'data-component' => 'network-notice-close-button', - 'title' => $closeButtonText, + 'class' => 'network-notice__content-icon', ], - $closeButtonIcon + $contentIconElement ); $contentDiv = Html::rawElement( @@ -63,15 +55,27 @@ public static function getNoticeHTML( $outputPage, $text, $id = '0' ) { [ 'class' => 'network-notice__content', ], - $iconWrapper . $outputPage->parseInlineAsInterface( $text, false ) + $outputPage->parseInlineAsInterface( $text, false ) + ); + + $contentWrapper = Html::rawElement( + 'div', + [ + 'class' => 'network-notice__content-wrapper', + ], + $contentIconWrapper . $contentDiv ); - $element = Html::rawElement( + return Html::rawElement( 'div', - $attributes, - $contentDiv . $closeButton + [ + 'id' => 'network-notice-' . $id, + 'data-id' => $id, + 'class' => 'network-notice', + 'data-component' => 'network-notice' + ], + $contentWrapper . $closeButton ); - return $element; } } From 59c2bcde66bb8a16f347272a18bfffe8f0c77cfe Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Wed, 1 May 2024 22:26:41 +0200 Subject: [PATCH 05/13] pipeline --- resources/styles/ext.networknotice.Notice.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/styles/ext.networknotice.Notice.less b/resources/styles/ext.networknotice.Notice.less index c38c8c1..5d28365 100644 --- a/resources/styles/ext.networknotice.Notice.less +++ b/resources/styles/ext.networknotice.Notice.less @@ -19,7 +19,7 @@ background-color: #26292d; } - &:before { + &::before { content: ''; width: 0.5rem; top: 0; From dcb56725e5d14b03360b29a79dc9dc71fd2a5bc8 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Thu, 2 May 2024 13:53:21 +0200 Subject: [PATCH 06/13] add script --- extension.json | 3 + resources/scripts/ext.networknotice.Notice.js | 56 +++++++++++++++++++ src/Hooks/MainHookHandler.php | 1 + 3 files changed, 60 insertions(+) create mode 100644 resources/scripts/ext.networknotice.Notice.js diff --git a/extension.json b/extension.json index 930158a..39f5805 100644 --- a/extension.json +++ b/extension.json @@ -48,6 +48,9 @@ "styles": [ "styles/ext.networknotice.Notice.less" ], + "scripts": [ + "scripts/ext.networknotice.Notice.js" + ], "position": "bottom" } }, diff --git a/resources/scripts/ext.networknotice.Notice.js b/resources/scripts/ext.networknotice.Notice.js new file mode 100644 index 0000000..fccb94c --- /dev/null +++ b/resources/scripts/ext.networknotice.Notice.js @@ -0,0 +1,56 @@ +( function ( window, document ) { + 'use strict'; + + const LOCAL_STORAGE_KEY = 'networknotice'; + + function init() { + if ( 'localStorage' in window ) { + document.querySelectorAll( '[data-component="network-notice"]' ).forEach( function( notice ) { + const key = notice.dataset.id; + if ( isInStorage( key ) ) { + notice.classList.add( 'd-none' ); + } else { + const closeButton = notice.querySelector( + '[data-component="network-notice-close-button"]' + ); + closeButton.onclick = function() { + notice.classList.add( 'd-none' ); + putIntoStorage( key ); + }; + } + } ); + } + } + + function getItemsFromStorage() { + const items = localStorage.getItem( LOCAL_STORAGE_KEY ); + return items ? JSON.parse( items ) : [ ]; + } + + function putIntoStorage( key ) { + const items = getItemsFromStorage(); + if ( !items.includes( key ) ) { + items.push( key ); + localStorage.setItem( LOCAL_STORAGE_KEY, JSON.stringify( items ) ); + } + } + + function isInStorage( key ) { + const items = getItemsFromStorage(); + return items.includes( key ); + } + + /** + * Check on document readyState + */ + if ( document.readyState === 'complete' ) { + init(); + } else { + document.addEventListener( 'readystatechange', () => { + if ( document.readyState === 'complete' ) { + init(); + } + } ); + } + +} ( window, document ) ); diff --git a/src/Hooks/MainHookHandler.php b/src/Hooks/MainHookHandler.php index e9f23fc..ad61fea 100644 --- a/src/Hooks/MainHookHandler.php +++ b/src/Hooks/MainHookHandler.php @@ -22,6 +22,7 @@ class MainHookHandler implements */ public function onBeforePageDisplay( $out, $skin ): void { $out->addModuleStyles( 'ext.networknotice.Notice' ); + $out->addModules( 'ext.networknotice.Notice' ); } /** From 53f3a13d6a52825ade07efd48737b2d733311b82 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Thu, 2 May 2024 14:29:24 +0200 Subject: [PATCH 07/13] add config to composer.json --- composer.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/composer.json b/composer.json index 3695c41..c8a9f05 100644 --- a/composer.json +++ b/composer.json @@ -29,5 +29,10 @@ "minus-x fix .", "phpcbf" ] + }, + "config": { + "allow-plugins": { + "dealerdirect/phpcodesniffer-composer-installer": true + } } } From b807da4e97dc63b0aa7bf70ff971b418314f2cc2 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Thu, 2 May 2024 14:33:01 +0200 Subject: [PATCH 08/13] remove unused use statement --- src/SpecialPage/SpecialNetworkNotice.php | 1 - 1 file changed, 1 deletion(-) diff --git a/src/SpecialPage/SpecialNetworkNotice.php b/src/SpecialPage/SpecialNetworkNotice.php index 4bc0a23..382d062 100644 --- a/src/SpecialPage/SpecialNetworkNotice.php +++ b/src/SpecialPage/SpecialNetworkNotice.php @@ -4,7 +4,6 @@ use Html; use HTMLForm; -use Liquipedia\Extension\NetworkNotice\Colors; use Liquipedia\Extension\NetworkNotice\NoticeHtml; use Status; use Wikimedia\Rdbms\ILoadBalancer; From 288e9633d502c1f7cf1a3049e97df485c8231ce2 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Thu, 2 May 2024 15:13:08 +0200 Subject: [PATCH 09/13] add eslint --- .eslintrc.json | 33 +++++++++++++++++++ package.json | 1 + resources/scripts/ext.networknotice.Notice.js | 3 +- 3 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 .eslintrc.json diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..b6eb35d --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,33 @@ +{ + "extends": [ + "wikimedia/client", + "wikimedia/jquery", + "wikimedia/mediawiki", + "wikimedia/client-es6" + ], + "globals": { + "require": "readonly", + "module": "readonly", + "OO": "readonly", + "jQuery": "readonly" + }, + "rules": { + "space-before-function-paren": "off", + "no-jquery/no-global-selector": "off", + "vars-on-top": "off", + "one-var": "off", + "no-use-before-define": "off", + "mediawiki/class-doc": "off", + "mediawiki/no-nodelist-unsupported-methods": "off", + "jsdoc/require-param-type": "off", + "es-x/no-classes": "off", + "es-x/no-block-scoped-variables": "off", + "es-x/no-spread-elements": "off", + "es-x/no-default-parameters": "off", + "es-x/no-array-prototype-includes": "off", + "es-x/no-string-prototype-includes": "off", + "es-x/no-array-from": "off", + "es-x/no-template-literals": "off", + "es-x/no-for-of-loops": "off" + } +} diff --git a/package.json b/package.json index f03a704..1450360 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "license": "MIT", "private": true, "devDependencies": { + "eslint-config-wikimedia": "*", "stylelint-config-wikimedia": "*" }, "scripts": { diff --git a/resources/scripts/ext.networknotice.Notice.js b/resources/scripts/ext.networknotice.Notice.js index fccb94c..7f6812e 100644 --- a/resources/scripts/ext.networknotice.Notice.js +++ b/resources/scripts/ext.networknotice.Notice.js @@ -52,5 +52,4 @@ } } ); } - -} ( window, document ) ); +}( window, document ) ); From 9e0b66a6858f4623a7d2e612422bbc3951b15423 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Thu, 2 May 2024 16:10:20 +0200 Subject: [PATCH 10/13] Feedback imarbot --- .eslintrc.json | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index b6eb35d..060f495 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,15 +1,13 @@ { "extends": [ - "wikimedia/client", - "wikimedia/jquery", "wikimedia/mediawiki", - "wikimedia/client-es6" + "wikimedia/client/common", + "wikimedia/language/es2020" ], "globals": { "require": "readonly", "module": "readonly", - "OO": "readonly", - "jQuery": "readonly" + "OO": "readonly" }, "rules": { "space-before-function-paren": "off", @@ -19,15 +17,6 @@ "no-use-before-define": "off", "mediawiki/class-doc": "off", "mediawiki/no-nodelist-unsupported-methods": "off", - "jsdoc/require-param-type": "off", - "es-x/no-classes": "off", - "es-x/no-block-scoped-variables": "off", - "es-x/no-spread-elements": "off", - "es-x/no-default-parameters": "off", - "es-x/no-array-prototype-includes": "off", - "es-x/no-string-prototype-includes": "off", - "es-x/no-array-from": "off", - "es-x/no-template-literals": "off", - "es-x/no-for-of-loops": "off" + "jsdoc/require-param-type": "off" } } From a82a11dc7a1787a3a45bc791f61a7e521f1f40c7 Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Thu, 2 May 2024 20:22:19 +0200 Subject: [PATCH 11/13] Remove obsolete addModuleStyles --- src/Hooks/MainHookHandler.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Hooks/MainHookHandler.php b/src/Hooks/MainHookHandler.php index ad61fea..5f37f6e 100644 --- a/src/Hooks/MainHookHandler.php +++ b/src/Hooks/MainHookHandler.php @@ -16,12 +16,11 @@ class MainHookHandler implements { /** - * Add our CSS files to the page + * Add our JS and CSS files to the page * @param OutputPage $out * @param Skin $skin */ public function onBeforePageDisplay( $out, $skin ): void { - $out->addModuleStyles( 'ext.networknotice.Notice' ); $out->addModules( 'ext.networknotice.Notice' ); } From ef5d8582b1fb2b7536cc0aaeb16f7b42b1bf276e Mon Sep 17 00:00:00 2001 From: Laura van Helvoort Date: Fri, 3 May 2024 16:39:46 +0200 Subject: [PATCH 12/13] check if string is parsable --- resources/scripts/ext.networknotice.Notice.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/resources/scripts/ext.networknotice.Notice.js b/resources/scripts/ext.networknotice.Notice.js index 7f6812e..6459b36 100644 --- a/resources/scripts/ext.networknotice.Notice.js +++ b/resources/scripts/ext.networknotice.Notice.js @@ -24,7 +24,11 @@ function getItemsFromStorage() { const items = localStorage.getItem( LOCAL_STORAGE_KEY ); - return items ? JSON.parse( items ) : [ ]; + try { + return items ? JSON.parse( items ) : []; + } catch( e ) { + return [ ]; + } } function putIntoStorage( key ) { From d64d7773c737958ca0470c041894f42599b6ed73 Mon Sep 17 00:00:00 2001 From: Alex Winkler Date: Tue, 7 May 2024 14:37:40 +0200 Subject: [PATCH 13/13] add DB migration to drop style column --- extension.json | 6 ++++- resources/scripts/ext.networknotice.Notice.js | 2 +- sql/3_3_0.sql | 1 + networknotice.sql => sql/networknotice.sql | 11 -------- src/Hooks/SchemaHookHandler.php | 25 +++++++++++++++++++ 5 files changed, 32 insertions(+), 13 deletions(-) create mode 100644 sql/3_3_0.sql rename networknotice.sql => sql/networknotice.sql (66%) create mode 100644 src/Hooks/SchemaHookHandler.php diff --git a/extension.json b/extension.json index 39f5805..c722dd3 100644 --- a/extension.json +++ b/extension.json @@ -1,6 +1,6 @@ { "name": "NetworkNotice", - "version": "3.2.1", + "version": "3.3.0", "author": [ "Tephus", "[https://fo-nttax.de Alex Winkler]" @@ -26,10 +26,14 @@ "HookHandlers": { "Main": { "class": "\\Liquipedia\\Extension\\NetworkNotice\\Hooks\\MainHookHandler" + }, + "Schema": { + "class": "\\Liquipedia\\Extension\\NetworkNotice\\Hooks\\SchemaHookHandler" } }, "Hooks": { "BeforePageDisplay": "Main", + "LoadExtensionSchemaUpdates": "Schema", "LPExtensionMenu": [ "Liquipedia\\Extension\\NetworkNotice\\Hooks\\LegacyHooks::onLPExtensionMenu" ], diff --git a/resources/scripts/ext.networknotice.Notice.js b/resources/scripts/ext.networknotice.Notice.js index 6459b36..d1c2be5 100644 --- a/resources/scripts/ext.networknotice.Notice.js +++ b/resources/scripts/ext.networknotice.Notice.js @@ -26,7 +26,7 @@ const items = localStorage.getItem( LOCAL_STORAGE_KEY ); try { return items ? JSON.parse( items ) : []; - } catch( e ) { + } catch ( e ) { return [ ]; } } diff --git a/sql/3_3_0.sql b/sql/3_3_0.sql new file mode 100644 index 0000000..1b2ea69 --- /dev/null +++ b/sql/3_3_0.sql @@ -0,0 +1 @@ +ALTER TABLE `networknotice` DROP `style`; diff --git a/networknotice.sql b/sql/networknotice.sql similarity index 66% rename from networknotice.sql rename to sql/networknotice.sql index 3cb3c33..8e08a08 100644 --- a/networknotice.sql +++ b/sql/networknotice.sql @@ -1,23 +1,12 @@ -SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; -SET time_zone = "+00:00"; - - --- -------------------------------------------------------- --- Table structure for table `networknotice` --- - CREATE TABLE IF NOT EXISTS `networknotice` ( `notice_id` int(11) NOT NULL AUTO_INCREMENT, `label` tinyblob NOT NULL, `wiki` blob NOT NULL, `namespace` tinyblob NOT NULL, `notice_text` blob NOT NULL, - `style` tinyblob NOT NULL, `category` blob NOT NULL, `prefix` blob NOT NULL, `action` blob NOT NULL, `disabled` tinyint(1) NOT NULL DEFAULT '0', PRIMARY KEY (`notice_id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=binary; - - diff --git a/src/Hooks/SchemaHookHandler.php b/src/Hooks/SchemaHookHandler.php new file mode 100644 index 0000000..71198c8 --- /dev/null +++ b/src/Hooks/SchemaHookHandler.php @@ -0,0 +1,25 @@ +getMainConfig(); + $db = $updater->getDB(); + if ( !$db->tableExists( $config->get( 'DBname' ) . '.networknotice', __METHOD__ ) ) { + $updater->addExtensionTable( 'networknotice', __DIR__ . '/../../sql/networknotice.sql' ); + } + if ( $db->fieldExists( $config->get( 'DBname' ) . '.networknotice', 'style' ) ) { + $updater->dropExtensionField( 'networknotice', 'style', __DIR__ . '/../../sql/3_3_0.sql' ); + } + } + +}