From 563d1d9f6fd455fac361851760f90f45c19707d5 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Wed, 9 Oct 2024 14:48:55 +1300 Subject: [PATCH 01/20] Use sass for styles --- plugin.php | 2 +- src/frontend/index.js | 2 +- src/frontend/{styles.css => style.scss} | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) rename src/frontend/{styles.css => style.scss} (99%) diff --git a/plugin.php b/plugin.php index c657843..85ee969 100644 --- a/plugin.php +++ b/plugin.php @@ -92,7 +92,7 @@ function register_assets() { wp_register_style( 'wporg-calendar-style', - plugin_dir_url( __FILE__ ) . 'build/calendar.css', + plugin_dir_url( __FILE__ ) . 'build/style-calendar.css', array( 'wp-components' ), $frontend_info['version'] ); diff --git a/src/frontend/index.js b/src/frontend/index.js index ad29e35..73ed56e 100644 --- a/src/frontend/index.js +++ b/src/frontend/index.js @@ -7,7 +7,7 @@ import { createElement, render } from '@wordpress/element'; * Internal dependencies */ import App from './app'; -import './styles.css'; +import './style.scss'; const getMeetings = ( calendarEl ) => { return JSON.parse( calendarEl.getAttribute( 'data-meetings' ) ); diff --git a/src/frontend/styles.css b/src/frontend/style.scss similarity index 99% rename from src/frontend/styles.css rename to src/frontend/style.scss index 40f7d55..958a34a 100644 --- a/src/frontend/styles.css +++ b/src/frontend/style.scss @@ -448,7 +448,6 @@ .wporg-meeting-calendar__filter-dropdown > div { margin-bottom: 0 !important; margin: 0 auto; - max-width: } .wporg-meeting-calendar__modal h1 { From 06c37c2b5ce04ac99890ba46f20195edb1416cbc Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Wed, 9 Oct 2024 15:12:42 +1300 Subject: [PATCH 02/20] Restyle header and mode toggle --- src/frontend/calendar/index.js | 26 +++---- src/frontend/icons/block-calendar-dark.svg | 9 +++ src/frontend/icons/block-calendar-light.svg | 9 +++ src/frontend/icons/list-type-bullet-dark.svg | 3 + src/frontend/icons/list-type-bullet-light.svg | 3 + src/frontend/style.scss | 75 ++++++++++++++++--- 6 files changed, 103 insertions(+), 22 deletions(-) create mode 100644 src/frontend/icons/block-calendar-dark.svg create mode 100644 src/frontend/icons/block-calendar-light.svg create mode 100644 src/frontend/icons/list-type-bullet-dark.svg create mode 100644 src/frontend/icons/list-type-bullet-light.svg diff --git a/src/frontend/calendar/index.js b/src/frontend/calendar/index.js index b155cbb..22ab55f 100644 --- a/src/frontend/calendar/index.js +++ b/src/frontend/calendar/index.js @@ -71,6 +71,19 @@ function Calendar() { className="components-button-group" aria-label={ __( 'View options', 'wporg-meeting-calendar' ) } > + - diff --git a/src/frontend/icons/block-calendar-dark.svg b/src/frontend/icons/block-calendar-dark.svg new file mode 100644 index 0000000..ddf60f4 --- /dev/null +++ b/src/frontend/icons/block-calendar-dark.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/frontend/icons/block-calendar-light.svg b/src/frontend/icons/block-calendar-light.svg new file mode 100644 index 0000000..b1dec91 --- /dev/null +++ b/src/frontend/icons/block-calendar-light.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/frontend/icons/list-type-bullet-dark.svg b/src/frontend/icons/list-type-bullet-dark.svg new file mode 100644 index 0000000..569d1d4 --- /dev/null +++ b/src/frontend/icons/list-type-bullet-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/frontend/icons/list-type-bullet-light.svg b/src/frontend/icons/list-type-bullet-light.svg new file mode 100644 index 0000000..9be4135 --- /dev/null +++ b/src/frontend/icons/list-type-bullet-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/frontend/style.scss b/src/frontend/style.scss index 958a34a..9fed7aa 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -12,7 +12,6 @@ .wporg-meeting-calendar__header { display: flex; align-items: center; - flex-direction: column; margin-bottom: 18px; } @@ -35,14 +34,77 @@ text-align: right; } -.wporg-meeting-calendar__header h2 { - text-align: center; +.wporg-meeting-calendar__header h2, +.wp-site-blocks .wporg-meeting-calendar__header h2:not([class*=-font-size], [style*=font-size]) { + margin: 0 0 0 var(--wp--preset--spacing--20, 20px); + font-size: var(--wp--preset--font-size--heading-4, 20px); } .wporg-meeting-calendar__header h2:before { display: none; } +.wporg-meeting-calendar__header .components-button-group { + display: flex; + + .components-button { + background-color: unset; + color: var(--wp--preset--color--white, #fff); + width: 40px; + height: 40px; + padding: unset; + position: relative; + border-radius: 2px; + margin-left: unset; + + &:not(:focus) { + box-shadow: unset; + } + + &::before { + content: ""; + position: absolute; + display: block; + width: 100%; + height: 100%; + border-radius: 2px; + background-color: var(--wp--preset--color--white, #fff); + background-repeat: no-repeat; + background-position: center; + } + + &:disabled { + display: none; + } + + &.is-primary::before { + background-color: var(--wp--preset--color--charcoal-1, #1e1e1e); + } + + // Month + &:last-child { + &::before { + background-image: url(./icons/block-calendar-dark.svg); + } + + &.is-primary::before { + background-image: url(./icons/block-calendar-light.svg); + } + } + + // List + &:first-child { + &::before { + background-image: url(./icons/list-type-bullet-dark.svg); + } + + &.is-primary::before { + background-image: url(./icons/list-type-bullet-light.svg); + } + } + } +} + .wporg-meeting-calendar__cell { padding: 4px; vertical-align: top; @@ -112,7 +174,7 @@ } .wporg-meeting-calendar__btn-group button { - margin-right: 6px; + margin-right: var(--wp--preset--spacing--10, 10px); } .wporg-meeting-calendar__btn-group button:last-child { @@ -282,10 +344,6 @@ } } -.wporg-meeting-calendar__header h2 { - font-size: 28px; -} - .wporg-block-meeting-calendar table { border-collapse: collapse; background: #fff; @@ -473,4 +531,3 @@ .meeting-cancelled .wporg-meeting-detail { text-decoration: line-through; } - From 0ea18934eb19d8e23895a64091e01c90683e6b26 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Wed, 9 Oct 2024 17:17:07 +1300 Subject: [PATCH 03/20] Update filter and feeds layout --- src/frontend/calendar/index.js | 2 ++ src/frontend/feed/index.js | 39 ++++++++++++++++++++++++++ src/frontend/filter/index.js | 51 +++------------------------------- src/frontend/style.scss | 40 ++++++++++++-------------- 4 files changed, 63 insertions(+), 69 deletions(-) create mode 100644 src/frontend/feed/index.js diff --git a/src/frontend/calendar/index.js b/src/frontend/calendar/index.js index 22ab55f..bb24df1 100644 --- a/src/frontend/calendar/index.js +++ b/src/frontend/calendar/index.js @@ -13,6 +13,7 @@ import { speak } from '@wordpress/a11y'; import CalendarGrid from './grid'; import List from '../list'; import Filter from '../filter'; +import Feed from '../feed'; import { useViews } from '../store/view-context'; function Calendar() { @@ -106,6 +107,7 @@ function Calendar() { ) } { isListView() && } + ); } diff --git a/src/frontend/feed/index.js b/src/frontend/feed/index.js new file mode 100644 index 0000000..0465116 --- /dev/null +++ b/src/frontend/feed/index.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { addQueryArgs } from '@wordpress/url'; + +/** + * Internal dependencies + */ +import { useEvents } from '../store/event-context'; + +const Feed = () => { + const { teams, team } = useEvents(); + const selected = teams.find( ( option ) => team === option.value ); + + const getCalendarUrl = () => { + const baseUrl = window.location.origin; + if ( ! selected ) { + return `${baseUrl}/meetings.ics`; + } + return `${baseUrl}/meetings-${selected.value}.ics`; + }; + + const getGoogleCalendarUrl = () => { + const calendarUrl = getCalendarUrl().replace('https://', 'webcal://'); + return addQueryArgs('https://www.google.com/calendar/render', { + cid: calendarUrl, + }); + }; + + return ( +
+

{ __( 'Events are shown in your local time zone', 'wporg-meeting-calendar' ) }

+

{ __( 'Subscribe to this calendar:', 'wporg-meeting-calendar' ) } Google Calendar ↗ · ICS

+
+ ); +}; + +export default Feed; diff --git a/src/frontend/filter/index.js b/src/frontend/filter/index.js index f5605e2..9f53456 100644 --- a/src/frontend/filter/index.js +++ b/src/frontend/filter/index.js @@ -2,8 +2,7 @@ * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { addQueryArgs } from '@wordpress/url'; -import { Button, ButtonGroup, SelectControl } from '@wordpress/components'; +import { Button, SelectControl } from '@wordpress/components'; import { speak } from '@wordpress/a11y'; import { useRef } from '@wordpress/element'; @@ -22,22 +21,6 @@ const Filter = () => { const dropdownId = 'wporg-meeting-calendar__filter-dropdown'; const selected = teams.find( ( option ) => team === option.value ); - const getCalendarUrl = () => { - const baseUrl = window.location.origin; - if ( ! selected ) { - return `${ baseUrl }/meetings.ics`; - } - - return `${ baseUrl }/meetings-${ selected.value }.ics`; - }; - - const getGoogleCalendarUrl = () => { - const calendarUrl = getCalendarUrl().replace( 'https://', 'webcal://' ); - return addQueryArgs( 'https://www.google.com/calendar/render', { - cid: calendarUrl, - } ); - }; - return (
); }; diff --git a/src/frontend/style.scss b/src/frontend/style.scss index 9fed7aa..5c14192 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -325,8 +325,7 @@ } .wporg-meeting-calendar__header, -.wporg-meeting-calendar__list, -.wporg-meeting-calendar__filter { +.wporg-meeting-calendar__list { padding: 12px; } @@ -443,30 +442,25 @@ .wporg-meeting-calendar__filter { display: flex; + flex-wrap: wrap; align-items: center; - border: 1px solid #ddd; - background: #eee; + margin: var(--wp--preset--spacing--20, 20px) 0; + + .components-base-control__field { + margin-bottom: unset; + } } .wporg-meeting-calendar__filter-dropdown { max-width: none; } -.wporg-meeting-calendar__filter-feed { - margin-left: auto; - margin-top: 0; -} - -.wporg-meeting-calendar__filter-feed .components-button { - padding-right: 12px; -} - -.wporg-meeting-calendar__filter-feed .components-button.has-icon .dashicon { - margin-right: 6px; -} +.wporg-meeting-calendar__filter-remove.components-button.is-link { + text-decoration: none; -.wporg-meeting-calendar__filter-feed .components-button:first-of-type { - margin-right: -1px; + span:not(.dashicons) { + text-decoration: underline; + } } @media ( max-width: 782px ) { @@ -481,10 +475,6 @@ .wporg-meeting-calendar__filter-dropdown { max-width: 200px; } - - .wporg-meeting-calendar__filter-feed { - margin-top: 8px; - } } .wporg-meeting-calendar__filter-label { @@ -531,3 +521,9 @@ .meeting-cancelled .wporg-meeting-detail { text-decoration: line-through; } + +.wporg-meeting-calendar__feed { + display: flex; + justify-content: space-between; + font-size: var(--wp--preset--font-size--small, 14px); +} From b2e467275614fb2306b725e7943b0a01351c01f0 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Thu, 10 Oct 2024 11:51:25 +1300 Subject: [PATCH 04/20] Replace mode toggle button CSS icons with component icons --- src/frontend/calendar/index.js | 21 +++++++--- src/frontend/icons/block-calendar-dark.svg | 9 ---- src/frontend/icons/block-calendar-light.svg | 9 ---- src/frontend/icons/calendar.js | 18 ++++++++ src/frontend/icons/list-type-bullet-dark.svg | 3 -- src/frontend/icons/list-type-bullet-light.svg | 3 -- src/frontend/icons/list.js | 12 ++++++ src/frontend/style.scss | 42 ++----------------- 8 files changed, 49 insertions(+), 68 deletions(-) delete mode 100644 src/frontend/icons/block-calendar-dark.svg delete mode 100644 src/frontend/icons/block-calendar-light.svg create mode 100644 src/frontend/icons/calendar.js delete mode 100644 src/frontend/icons/list-type-bullet-dark.svg delete mode 100644 src/frontend/icons/list-type-bullet-light.svg create mode 100644 src/frontend/icons/list.js diff --git a/src/frontend/calendar/index.js b/src/frontend/calendar/index.js index bb24df1..4248ca0 100644 --- a/src/frontend/calendar/index.js +++ b/src/frontend/calendar/index.js @@ -15,6 +15,7 @@ import List from '../list'; import Filter from '../filter'; import Feed from '../feed'; import { useViews } from '../store/view-context'; +import { list as ListIcon, calendar as CalendarIcon } from '../icons'; function Calendar() { const today = new Date(); @@ -73,8 +74,7 @@ function Calendar() { aria-label={ __( 'View options', 'wporg-meeting-calendar' ) } > diff --git a/src/frontend/icons/block-calendar-dark.svg b/src/frontend/icons/block-calendar-dark.svg deleted file mode 100644 index ddf60f4..0000000 --- a/src/frontend/icons/block-calendar-dark.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/frontend/icons/block-calendar-light.svg b/src/frontend/icons/block-calendar-light.svg deleted file mode 100644 index b1dec91..0000000 --- a/src/frontend/icons/block-calendar-light.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/frontend/icons/calendar.js b/src/frontend/icons/calendar.js new file mode 100644 index 0000000..5ae88c1 --- /dev/null +++ b/src/frontend/icons/calendar.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export default function({ fill = 'white' }) { + return ( + + + + + + + + + + ); +} diff --git a/src/frontend/icons/list-type-bullet-dark.svg b/src/frontend/icons/list-type-bullet-dark.svg deleted file mode 100644 index 569d1d4..0000000 --- a/src/frontend/icons/list-type-bullet-dark.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/frontend/icons/list-type-bullet-light.svg b/src/frontend/icons/list-type-bullet-light.svg deleted file mode 100644 index 9be4135..0000000 --- a/src/frontend/icons/list-type-bullet-light.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/frontend/icons/list.js b/src/frontend/icons/list.js new file mode 100644 index 0000000..7364685 --- /dev/null +++ b/src/frontend/icons/list.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export default function({ fill = 'white' }) { + return ( + + + + ); +} diff --git a/src/frontend/style.scss b/src/frontend/style.scss index 5c14192..58d2e5d 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -48,8 +48,10 @@ display: flex; .components-button { + display: flex; + align-items: center; + justify-content: center; background-color: unset; - color: var(--wp--preset--color--white, #fff); width: 40px; height: 40px; padding: unset; @@ -61,50 +63,14 @@ box-shadow: unset; } - &::before { - content: ""; - position: absolute; - display: block; - width: 100%; - height: 100%; - border-radius: 2px; - background-color: var(--wp--preset--color--white, #fff); - background-repeat: no-repeat; - background-position: center; - } - &:disabled { display: none; } - &.is-primary::before { + &.is-primary { background-color: var(--wp--preset--color--charcoal-1, #1e1e1e); } - // Month - &:last-child { - &::before { - background-image: url(./icons/block-calendar-dark.svg); - } - - &.is-primary::before { - background-image: url(./icons/block-calendar-light.svg); - } - } - - // List - &:first-child { - &::before { - background-image: url(./icons/list-type-bullet-dark.svg); - } - - &.is-primary::before { - background-image: url(./icons/list-type-bullet-light.svg); - } - } - } -} - .wporg-meeting-calendar__cell { padding: 4px; vertical-align: top; From 0d39f1158409cc46e7f59620a91ce1432637440b Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Thu, 10 Oct 2024 12:22:57 +1300 Subject: [PATCH 05/20] Use arrows icons for month navigation buttons --- src/frontend/calendar/index.js | 12 +++++++----- src/frontend/icons/arrow.js | 12 ++++++++++++ src/frontend/icons/index.js | 3 +++ src/frontend/style.scss | 33 ++++++++++++++++++++++++--------- 4 files changed, 46 insertions(+), 14 deletions(-) create mode 100644 src/frontend/icons/arrow.js diff --git a/src/frontend/calendar/index.js b/src/frontend/calendar/index.js index 4248ca0..f6a163a 100644 --- a/src/frontend/calendar/index.js +++ b/src/frontend/calendar/index.js @@ -15,7 +15,7 @@ import List from '../list'; import Filter from '../filter'; import Feed from '../feed'; import { useViews } from '../store/view-context'; -import { list as ListIcon, calendar as CalendarIcon } from '../icons'; +import { list as ListIcon, calendar as CalendarIcon, arrow as ArrowIcon } from '../icons'; function Calendar() { const today = new Date(); @@ -46,22 +46,24 @@ function Calendar() { aria-label={ __( 'Month navigation', 'wporg-meeting-calendar' ) } >
diff --git a/src/frontend/icons/arrow.js b/src/frontend/icons/arrow.js new file mode 100644 index 0000000..7049e23 --- /dev/null +++ b/src/frontend/icons/arrow.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +export default function({ fill = '#3858E9' }) { + return ( + + + + ); +} diff --git a/src/frontend/icons/index.js b/src/frontend/icons/index.js index a9b3840..801ea87 100644 --- a/src/frontend/icons/index.js +++ b/src/frontend/icons/index.js @@ -1,2 +1,5 @@ +export { default as arrow } from './arrow'; +export { default as calendar } from './calendar'; export { default as collapse } from './collapse'; export { default as expand } from './expand'; +export { default as list } from './list'; \ No newline at end of file diff --git a/src/frontend/style.scss b/src/frontend/style.scss index 58d2e5d..b1eb034 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -36,7 +36,7 @@ .wporg-meeting-calendar__header h2, .wp-site-blocks .wporg-meeting-calendar__header h2:not([class*=-font-size], [style*=font-size]) { - margin: 0 0 0 var(--wp--preset--spacing--20, 20px); + margin: 0 0 0 var(--wp--preset--spacing--10, 10px); font-size: var(--wp--preset--font-size--heading-4, 20px); } @@ -79,7 +79,7 @@ .wporg-meeting-calendar__cell.is-today { background: #fcf8e3; -} + } .wporg-meeting-calendar__cell strong { display: block; @@ -139,12 +139,27 @@ overflow: hidden; } -.wporg-meeting-calendar__btn-group button { - margin-right: var(--wp--preset--spacing--10, 10px); -} +.wporg-meeting-calendar__btn-group { + display: flex; + gap: 4px; + + .components-button { + width: 40px; + height: 40px; + + &:disabled { + background-color: var(--wp--preset--color--light-grey-2, #F6F6F6); + box-shadow: none !important; + + svg { + opacity: 0.5; + } + } -.wporg-meeting-calendar__btn-group button:last-child { - margin-right: 0; + &:last-child svg { + rotate: 180deg; + } + } } .wporg-meeting-calendar__list-expand { @@ -324,12 +339,12 @@ .wporg-meeting-calendar__cell { border: 1px solid #ddd; -} + } .wporg-meeting-calendar__cell:first-child, .wporg-meeting-calendar__cell:last-child { background: #f1f1f1; -} + } .wporg-meeting-calendar__cell strong { background: none; From 7e929657a776d13b26597b71f52df0e0410e2f17 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Thu, 10 Oct 2024 12:25:21 +1300 Subject: [PATCH 06/20] Update cell styles --- src/frontend/style.scss | 44 ++++++++++++++++++----------------------- 1 file changed, 19 insertions(+), 25 deletions(-) diff --git a/src/frontend/style.scss b/src/frontend/style.scss index b1eb034..102b09c 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -70,23 +70,7 @@ &.is-primary { background-color: var(--wp--preset--color--charcoal-1, #1e1e1e); } - -.wporg-meeting-calendar__cell { - padding: 4px; - vertical-align: top; - height: 180px; /* height acts as min-height on table cells */ -} - -.wporg-meeting-calendar__cell.is-today { - background: #fcf8e3; } - -.wporg-meeting-calendar__cell strong { - display: block; - margin: -4px -4px 0; - padding: 2px 4px; - font-size: 0.8em; - background: #ddd; } .wporg-meeting-calendar__cell-event.components-button { @@ -331,24 +315,34 @@ .wporg-block-meeting-calendar table th { text-align: center; - font-size: 14px; + font-weight: 400; + font-size: var(--wp--preset--font-size--normal, 16px); padding: 8px; - border: 1px solid #ddd; - border-top: none; + border: 1px solid var(--wp--preset--color--light-grey-1, #d9d9d9); } .wporg-meeting-calendar__cell { border: 1px solid #ddd; + padding: var(--wp--preset--spacing--10); + padding: 4px; + vertical-align: top; + height: 180px; /* height acts as min-height on table cells */ + + strong { + display: block; + text-align: center; + font-weight: 400; + font-size: var(--wp--preset--font-size--normal); } -.wporg-meeting-calendar__cell:first-child, -.wporg-meeting-calendar__cell:last-child { - background: #f1f1f1; + &:first-child, + &:last-child { + background-color: var(--wp--preset--color--light-grey-2, #f6f6f6); } -.wporg-meeting-calendar__cell strong { - background: none; - text-align: center; + &.is-today { + background-color: var(--wp--preset--color--acid-green-3, #e2ffed); + } } /** Colors for each team */ From ee4a3b083bf4182650b93cd368b3aa059c8afc99 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Thu, 10 Oct 2024 13:06:38 +1300 Subject: [PATCH 07/20] :lipstick: Format changed files with prettier --- src/frontend/calendar/index.js | 71 ++++++++++++++++++++++++++-------- src/frontend/feed/index.js | 26 +++++++++---- src/frontend/filter/index.js | 7 +++- src/frontend/icons/arrow.js | 17 ++++++-- src/frontend/icons/calendar.js | 29 +++++++++----- src/frontend/icons/index.js | 2 +- src/frontend/icons/list.js | 17 ++++++-- 7 files changed, 129 insertions(+), 40 deletions(-) diff --git a/src/frontend/calendar/index.js b/src/frontend/calendar/index.js index f6a163a..72ed6d0 100644 --- a/src/frontend/calendar/index.js +++ b/src/frontend/calendar/index.js @@ -15,7 +15,11 @@ import List from '../list'; import Filter from '../filter'; import Feed from '../feed'; import { useViews } from '../store/view-context'; -import { list as ListIcon, calendar as CalendarIcon, arrow as ArrowIcon } from '../icons'; +import { + list as ListIcon, + calendar as CalendarIcon, + arrow as ArrowIcon, +} from '../icons'; function Calendar() { const today = new Date(); @@ -43,27 +47,45 @@ function Calendar() {
@@ -73,21 +95,32 @@ function Calendar() {
@@ -119,11 +107,7 @@ function Calendar() { 'wporg-meeting-calendar' ) } > -
diff --git a/src/frontend/icons/arrow.js b/src/frontend/icons/arrow.js index 2b0b9cd..a65b827 100644 --- a/src/frontend/icons/arrow.js +++ b/src/frontend/icons/arrow.js @@ -3,7 +3,7 @@ */ import { SVG, Path } from '@wordpress/primitives'; -export default function ( { fill = '#3858E9' } ) { +export default function () { return ( ); diff --git a/src/frontend/icons/calendar.js b/src/frontend/icons/calendar.js index 1173d64..71aa196 100644 --- a/src/frontend/icons/calendar.js +++ b/src/frontend/icons/calendar.js @@ -3,7 +3,7 @@ */ import { SVG, Path } from '@wordpress/primitives'; -export default function ( { fill = 'white' } ) { +export default function () { return ( - - - - - - + + + + + + ); diff --git a/src/frontend/icons/list.js b/src/frontend/icons/list.js index 7700e33..9863d46 100644 --- a/src/frontend/icons/list.js +++ b/src/frontend/icons/list.js @@ -3,7 +3,7 @@ */ import { SVG, Path } from '@wordpress/primitives'; -export default function ( { fill = 'white' } ) { +export default function () { return ( ); diff --git a/src/frontend/style.scss b/src/frontend/style.scss index 102b09c..7a0065c 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -70,6 +70,10 @@ &.is-primary { background-color: var(--wp--preset--color--charcoal-1, #1e1e1e); } + + &.is-secondary { + color: var(--wp--preset--color--charcoal-1, #1e1e1e); + } } } @@ -132,8 +136,9 @@ height: 40px; &:disabled { - background-color: var(--wp--preset--color--light-grey-2, #F6F6F6); + background-color: var(--wp--preset--color--light-grey-2, #f6f6f6); box-shadow: none !important; + color: var(--wp--preset--color--charcoal-1, #1e1e1e); svg { opacity: 0.5; From 1b5564ffc2c58e2b8dad0f8684dbd272f632b53a Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Thu, 10 Oct 2024 16:31:29 +1300 Subject: [PATCH 09/20] Style calendar events and modal --- src/frontend/calendar/cell.js | 46 ++++++----- src/frontend/style.scss | 141 +++++++++++++++++++++------------- 2 files changed, 114 insertions(+), 73 deletions(-) diff --git a/src/frontend/calendar/cell.js b/src/frontend/calendar/cell.js index 36a2829..565651b 100644 --- a/src/frontend/calendar/cell.js +++ b/src/frontend/calendar/cell.js @@ -37,16 +37,18 @@ function CalendarCell( { { format( 'F j', date ) }{ ' ' } - { // translators: %d: Count of all events, ie: 4. - sprintf( - _n( - '%d event', - '%d events', - dayEvents.length, - 'wporg' - ), - dayEvents.length - ) } + { + // translators: %d: Count of all events, ie: 4. + sprintf( + _n( + '%d event', + '%d events', + dayEvents.length, + 'wporg' + ), + dayEvents.length + ) + } { day } @@ -65,7 +67,7 @@ function CalendarCell( { } >
- { format( 'g:i a: ', event.datetime ) } + { format( 'g:i a ', event.datetime ) }
{ event.title } @@ -84,16 +86,18 @@ function CalendarCell( { onClick={ onToggle } aria-expanded={ isOpen } > - { // translators: %d: Count of hidden events, ie: 4. - sprintf( - _n( - '%d more', - '%d more', - restOfEvents.length, - 'wporg' - ), - restOfEvents.length - ) } + { + // translators: %d: Count of hidden events, ie: 4. + sprintf( + _n( + '%d more', + '%d more', + restOfEvents.length, + 'wporg' + ), + restOfEvents.length + ) + } ) } renderContent={ () => ( diff --git a/src/frontend/style.scss b/src/frontend/style.scss index 7a0065c..12fba5c 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -80,13 +80,17 @@ .wporg-meeting-calendar__cell-event.components-button { display: block; position: relative; - padding: 4px; - margin: 4px 0; - font-size: 12px; - font-weight: bold; - font-weight: normal; + padding: 8px; + margin: 8px 0; + font-size: var(--wp--preset--font-size--small, 14px); border-radius: 2px; width: 100%; + + &.is-link { + border: 1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9)); + background: var(--wp--preset--color--blueberry-4, #EFF2FF); + text-decoration: none; + } } .wporg-meeting-calendar__cell-event.is-cancelled, @@ -95,16 +99,10 @@ text-decoration: line-through !important; } - /* These styles are separate for !important specificity with `wporg-meeting-calendar__team-*` styles below. */ -.wporg-meeting-calendar__cell-event { - background: #0085ba !important; - color: #fff !important; - text-decoration: none !important; -} .wporg-meeting-calendar__cell-event:focus { - text-decoration: underline !important; - box-shadow: 0 0 0 1px black, 0 0 2px 1px rgba(0, 0, 0, 0.8) !important; + text-decoration: underline; + box-shadow: 0 0 0 1px var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9)); } .wporg-meeting-calendar__dropdown .components-menu-group { @@ -117,13 +115,12 @@ } .wporg-meeting-calendar__cell-event-time { - font-weight: normal; + font-weight: 700; + margin-bottom: 4px; } .wporg-meeting-calendar__cell-event-title { - font-weight: bold; display: block; - white-space: nowrap; overflow: hidden; } @@ -327,9 +324,8 @@ } .wporg-meeting-calendar__cell { - border: 1px solid #ddd; - padding: var(--wp--preset--spacing--10); - padding: 4px; + border: 1px solid var(--wp--preset--color--light-grey-1, #d9d9d9); + padding: var(--wp--preset--spacing--10, 10px); vertical-align: top; height: 180px; /* height acts as min-height on table cells */ @@ -352,72 +348,99 @@ /** Colors for each team */ .wporg-meeting-calendar__team-core { - background: #cd0000 !important; + border-color: #cd0000 !important; + background-color: lighten(#cd0000, 55%) !important; + color: #cd0000 !important; } .wporg-meeting-calendar__team-design { - background: #eec26a !important; + border-color: #eec26a !important; + background-color: lighten(#eec26a, 30%) !important; + color: darken(#eec26a, 40%) !important; } .wporg-meeting-calendar__team-mobile { - background: #fba16c !important; + border-color: #fba16c !important; + background-color: lighten(#fba16c, 30%) !important; + color: #fba16c !important; } .wporg-meeting-calendar__team-polyglots { - background: #c32283 !important; + border-color: #c32283 !important; + background-color: lighten(#c32283, 45%) !important; + color: darken(#c32283, 10%) !important; } .wporg-meeting-calendar__team-support { - background: #33b4ce !important; + border-color: #33b4ce !important; + background-color: lighten(#33b4ce, 40%) !important; + color: darken(#33b4ce, 20%) !important; } .wporg-meeting-calendar__team-docs, .wporg-meeting-calendar__team-documentation { - background: #3b7236 !important; + border-color: #3b7236 !important; + background-color: lighten(#3b7236, 55%) !important; + color: #3b7236 !important; } .wporg-meeting-calendar__team-themes { - background: #4e3288 !important; + border-color: #4e3288 !important; + background-color: lighten(#4e3288, 55%) !important; + color: #4e3288 !important; } .wporg-meeting-calendar__team-plugins { - background: #f06723 !important; + border-color: #f06723 !important; + background-color: lighten(#f06723, 55%) !important; + color: #f06723 !important; } .wporg-meeting-calendar__team-accessibility, .wporg-meeting-calendar__team-community { - background: #11799d !important; + border-color: #11799d !important; + background-color: lighten(#11799d, 60%) !important; + color: darken(#11799d, 10%) !important; } .wporg-meeting-calendar__team-meta { - background: #aeadad !important; + border-color: #aeadad !important; + background-color: lighten(#aeadad, 30%) !important; + color: darken(#aeadad, 30%) !important; } -.wporg-meeting-calendar__team-training { - background: #e9c02d !important; +.wporg-meeting-calendar__team-training, +.wporg-meeting-calendar__team-openverse { + border-color: #e9c02d !important; + background-color: lighten(#e9c02d, 40%) !important; + color: darken(#e9c02d, 25%) !important; } .wporg-meeting-calendar__team-tv { - background: #73ad30 !important; + border-color: #73ad30 !important; + background-color: lighten(#73ad30, 45%) !important; + color: darken(#73ad30, 20%) !important; } .wporg-meeting-calendar__team-marketing { - background: #47bea7 !important; + border-color: #47bea7 !important; + background-color: lighten(#47bea7, 55%) !important; + color: #47bea7 !important; } .wporg-meeting-calendar__team-cli { - background: #424242 !important; + border-color: #424242 !important; + background-color: lighten(#424242, 55%) !important; + color: #424242 !important; } .wporg-meeting-calendar__team-hosting { - background: #5358a6 !important; + border-color: #5358a6 !important; + background-color: lighten(#5358a6, 45%) !important; + color: #5358a6 !important; } .wporg-meeting-calendar__team-tide { - background: #1526ff !important; -} -.wporg-meeting-calendar__team-bbpress { - background: #2d8e42 !important; + border-color: #1526ff !important; + background-color: lighten(#1526ff, 40%) !important; + color: #1526ff !important; } -.wporg-meeting-calendar__team-buddypress { - background: #d84800 !important; -} -.wporg-meeting-calendar__team-design, -.wporg-meeting-calendar__team-mobile, -.wporg-meeting-calendar__team-support, -.wporg-meeting-calendar__team-plugins, -.wporg-meeting-calendar__team-meta, -.wporg-meeting-calendar__team-training, -.wporg-meeting-calendar__team-tv, -.wporg-meeting-calendar__team-marketing, .wporg-meeting-calendar__team-bbpress, -.wporg-meeting-calendar__team-buddypress { - color: #000 !important; +.wporg-meeting-calendar__team-sustainability { + border-color: #2d8e42 !important; + background-color: lighten(#2d8e42, 55%) !important; + color: darken(#2d8e42, 10%) !important; +} +.wporg-meeting-calendar__team-buddypress, +.wporg-meeting-calendar__team-test { + border-color: #d84800 !important; + background-color: lighten(#d84800, 50%) !important; + color: darken(#d84800, 10%) !important; } .wporg-meeting-calendar__filter { @@ -478,6 +501,20 @@ margin: 0 auto; } +.wporg-meeting-calendar__modal { + border-radius: unset; + box-shadow: unset; + + .components-modal__content { + padding: 0 var(--wp--preset--spacing--30, 30px) var(--wp--preset--spacing--30, 30px); + } + + .components-modal__header .components-modal__header-heading { + font-family: var(--wp--preset--font-family--inter, sans-serif); + line-height: var(--wp--custom--heading--level-1--typography--line-height, 1.3); + } +} + .wporg-meeting-calendar__modal h1 { font-size: 16px !important; } From 49428e80aa60d18b9e594558653e8ecde88157a7 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Thu, 10 Oct 2024 16:35:10 +1300 Subject: [PATCH 10/20] Fix translator comment placement --- src/frontend/calendar/cell.js | 40 ++++++++++++++++------------------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/src/frontend/calendar/cell.js b/src/frontend/calendar/cell.js index 565651b..c2f090a 100644 --- a/src/frontend/calendar/cell.js +++ b/src/frontend/calendar/cell.js @@ -37,18 +37,16 @@ function CalendarCell( { { format( 'F j', date ) }{ ' ' } - { + { sprintf( // translators: %d: Count of all events, ie: 4. - sprintf( - _n( - '%d event', - '%d events', - dayEvents.length, - 'wporg' - ), - dayEvents.length - ) - } + _n( + '%d event', + '%d events', + dayEvents.length, + 'wporg' + ), + dayEvents.length + ) } { day } @@ -86,18 +84,16 @@ function CalendarCell( { onClick={ onToggle } aria-expanded={ isOpen } > - { + { sprintf( // translators: %d: Count of hidden events, ie: 4. - sprintf( - _n( - '%d more', - '%d more', - restOfEvents.length, - 'wporg' - ), - restOfEvents.length - ) - } + _n( + '%d more', + '%d more', + restOfEvents.length, + 'wporg' + ), + restOfEvents.length + ) } ) } renderContent={ () => ( From 8a54b3168f9d092777eccd0b86474b52062edae3 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Thu, 10 Oct 2024 18:00:39 +1300 Subject: [PATCH 11/20] Restyle the list view --- src/frontend/list/list-item.js | 90 +++++++++++++-------- src/frontend/style.scss | 143 ++++++++++++++------------------- 2 files changed, 117 insertions(+), 116 deletions(-) diff --git a/src/frontend/list/list-item.js b/src/frontend/list/list-item.js index 9787171..099fd85 100644 --- a/src/frontend/list/list-item.js +++ b/src/frontend/list/list-item.js @@ -31,7 +31,11 @@ function ListItem( { date, events } ) { setTeam( event.team ); speak( sprintf( - __( 'Showing meetings for %s', 'wporg-meeting-calendar' ), + // translators: %s is the team name + __( + 'Showing meetings for %s', + 'wporg-meeting-calendar' + ), event.team ) ); @@ -43,21 +47,19 @@ function ListItem( { date, events } ) { }` } key={ event.instance_id } > -
- { format( 'g:i a ', event.datetime ) } -
- { format( '(\\U\\T\\CP)', date ) } -
-
-
- { event.team && ( + { event.team && ( + + ) } +
+

+ + { event.title } + { isCancelled( event.status ) && ( + + { __( + ' Meeting is cancelled', + 'wporg' + ) } + + ) } + +

+
+ { format( 'g:i a ', event.datetime ) } + { format( '(\\U\\T\\CP)', date ) } +
+
+
+

+ { __( 'Meets: ', 'wporg-meeting-calendar' ) } + { getFrequencyLabel( event ) } +

+

+ { __( 'Location: ', 'wporg-meeting-calendar' ) } + { getSlackLink( event.location ) } +

+
+ { !! event.wptv_url && (
-

- - { event.title } - { isCancelled( event.status ) && ( - - { __( - ' Meeting is cancelled', - 'wporg' - ) } - +

+ + { __( + 'View Recording', + 'wporg-meeting-calendar' ) } -

-

- { __( 'Meets: ', 'wporg-meeting-calendar' ) } - { getFrequencyLabel( event ) } -

-

- { __( 'Location: ', 'wporg-meeting-calendar' ) } - { getSlackLink( event.location ) } -

-

- { __( 'View Recording', 'wporg-meeting-calendar' ) }

-
+ ) } ); } ) } diff --git a/src/frontend/style.scss b/src/frontend/style.scss index 12fba5c..09810b9 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -1,5 +1,6 @@ .wporg-block-meeting-calendar { margin: 0 auto 32px; + font-size: var(--wp--preset--font-size--normal, 16px); } .wporg-block-meeting-calendar table { @@ -153,10 +154,6 @@ text-align: center; } -.wporg-meeting-calendar__list-empty { - font-size: 16px; -} - .wporg-meeting-calendar__list { padding: 0; margin: 0; @@ -169,79 +166,90 @@ } .wporg-meeting-calendar__list-title { - padding: 6px 0; display: block; - background: #ddd; - font-size: 16px; - margin-top: 16px; - background: none; + font-size: var(--wp--preset--font-size--medium, 18px); + font-weight: 600; + margin: var(--wp--preset--spacing--30, 30px) 0 var(--wp--preset--spacing--20, 20px); } .wporg-meeting-calendar__list-event { position: relative; display: flex; - border-bottom: 1px solid #aaa; - background: #fff; -} + flex-direction: column; + gap: var(--wp--preset--spacing--20, 20px); + background: var(--wp--preset--color--white, #fff); + border: 1px solid var(--wp--preset--color--light-grey-1, #d9d9d9); + padding: var(--wp--preset--spacing--20, 20px); + + &:first-of-type { + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + + &:last-of-type { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + } + + & + .wporg-meeting-calendar__list-event { + border-top: unset; + } -.wporg-meeting-calendar__list-event > div { - padding: 12px; + @media (min-width: 600px) { + align-items: center; + flex-direction: row; + } } -.wporg-meeting-calendar__list-event > div:first-child { - min-width: 90px; - font-size: 16px; +.wporg-meeting-calendar__list-event-time { + font-size: var(--wp--preset--font-size--small, 14px); + color: var(--wp--preset--color--charcoal-4, #656A71); } -.wporg-meeting-calendar__list-event-tz { - font-size: 12px; - color: #999; +.wporg-meeting-calendar__list-event-team-wrapper { + flex-basis: 15%; } .wporg-meeting-calendar__list-event-team { - font-size: 14px; - padding: 2px 6px; - margin-bottom: 8px; - border-radius: 4px; - text-decoration: none !important; - background: #0085ba; - color: #fff !important; display: inline-block; - font-family: sans-serif; - width: 90px; + font-size: var(--wp--preset--font-size--small, 14px); text-align: center; + padding: 7px 12px; + margin-bottom: 8px; + border-radius: 2px; + text-decoration: none !important; + background: var(--wp--preset--color--blueberry-4, #EFF2FF); + color: var(--wp--preset--color--blueberry-1, #3858e9) !important; + line-height: var(--wp--custom--heading--level-1--typography--line-height, 1.3); } .wporg-meeting-calendar__list-event-team:hover, .wporg-meeting-calendar__list-event-team:active, .wporg-meeting-calendar__list-event-team:focus { - color: #fff; text-decoration: underline !important; } .wporg-meeting-calendar__list-event-title { - font-size: 24px; - margin: 0 0 8px 0 !important; - padding: 0 !important; -} + font-size: var(--wp--preset--font-size--normal, 16px); + font-weight: 400; + margin: unset !important; -.wporg-meeting-calendar__list-event-copy { - margin-top: 0 !important; - font-size: 16px; -} + a { + color: var(--wp--preset--color--charcoal-1, #1e1e1e); + text-decoration: none !important; -.wporg-meeting-calendar__list-event-details { - display: flex; - align-items: flex-start; + &:hover { + text-decoration: underline !important; + } + } } -@media (min-width: 600px) { - .wporg-meeting-calendar__list-event-details div:first-child { - padding-left: 32px; - } +.wporg-meeting-calendar__list-event-copy { + margin-top: 0 !important; + margin-bottom: 4px; - .wporg-meeting-calendar__list-event-team { - margin: 0 16px; + &:last-child { + margin-bottom: 0; } } @@ -258,49 +266,20 @@ } .wporg-meeting-calendar__modal-overlay { - font-size: 14px; -} - -.wporg-meeting-calendar__list-event { - margin: 12px 0; - border: 1px solid rgba(100, 100, 100, 0.3); - border-radius: 2px; -} - -.wporg-meeting-calendar__list-event-title { - margin-top: 0 !important; -} - -.wporg-meeting-calendar__list-event-title a { - color: #333; - font-size: 20px; -} - -.wporg-meeting-calendar__list-event-title a:hover { - text-decoration: underline; + font-size: var(--wp--preset--font-size--small, 14px); } -.wporg-meeting-calendar__list-event-copy { - color: #555D66; - font-weight: 200; - font-size: 14px !important; +.wporg-meeting-calendar__list-event-header { + flex: 1; } -.wporg-meeting-calendar__list-event, .wporg-meeting-calendar__list-event-details { - flex-direction: column; + flex-basis: 35%; } .wporg-meeting-calendar__header, .wporg-meeting-calendar__list { - padding: 12px; -} - -@media (min-width: 600px) { - .wporg-meeting-calendar__list-event, - .wporg-meeting-calendar__list-event-details { - flex-direction: row; - } + padding: 12px 0; } @media (min-width: 960px) { @@ -396,7 +375,7 @@ } .wporg-meeting-calendar__team-meta { border-color: #aeadad !important; - background-color: lighten(#aeadad, 30%) !important; + background-color: lighten(#aeadad, 25%) !important; color: darken(#aeadad, 30%) !important; } .wporg-meeting-calendar__team-training, From 0a5b9d9152e1cf81eb0d59ebc54dc21f07516360 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Thu, 10 Oct 2024 21:02:06 +1300 Subject: [PATCH 12/20] Add RSS feed link --- src/frontend/feed/index.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/frontend/feed/index.js b/src/frontend/feed/index.js index caa6a20..992ce14 100644 --- a/src/frontend/feed/index.js +++ b/src/frontend/feed/index.js @@ -28,11 +28,17 @@ const Feed = () => { } ); }; + const getRSSUrl = () => { + const baseUrl = window.location.origin; + + return `${ baseUrl }/feed/?post_type=meeting`; + }; + return (

{ __( - 'Events are shown in your local time zone', + 'Events are shown in your local time zone.', 'wporg-meeting-calendar' ) }

@@ -41,8 +47,17 @@ const Feed = () => { 'Subscribe to this calendar:', 'wporg-meeting-calendar' ) }{ ' ' } - Google Calendar ↗ ·{ ' ' } - ICS + + { __( 'Google Calendar ↗', 'wporg-meeting-calendar' ) } + { ' ' } + ·{ ' ' } + + { __( 'ICS', 'wporg-meeting-calendar' ) } + { ' ' } + ·{ ' ' } + + { __( 'RSS', 'wporg-meeting-calendar' ) } +

); From a28bede31ed25eaa3b95b4e1727f8803d00dec84 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Thu, 10 Oct 2024 21:05:11 +1300 Subject: [PATCH 13/20] Increase specificity of list event title styles Override global h3 styles --- src/frontend/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/style.scss b/src/frontend/style.scss index 09810b9..e964137 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -229,7 +229,7 @@ text-decoration: underline !important; } -.wporg-meeting-calendar__list-event-title { +h3.wporg-meeting-calendar__list-event-title { font-size: var(--wp--preset--font-size--normal, 16px); font-weight: 400; margin: unset !important; From b64ae0a60849e8623fdaa04701b62f1943b1b121 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Fri, 11 Oct 2024 10:29:14 +1300 Subject: [PATCH 14/20] Adjust spacing around list expand button --- src/frontend/style.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/frontend/style.scss b/src/frontend/style.scss index e964137..9403511 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -150,7 +150,7 @@ } .wporg-meeting-calendar__list-expand { - margin-top: 16px; + margin: var(--wp--preset--spacing--20, 20px) 0 0; text-align: center; } @@ -163,6 +163,10 @@ .wporg-meeting-calendar__list li { list-style: none; margin: 0; + + &:first-child .wporg-meeting-calendar__list-title { + margin-top: 0; + } } .wporg-meeting-calendar__list-title { From 84a4a09a19b46017873b4dfcd49b5293c005e060 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Mon, 14 Oct 2024 11:48:51 +1300 Subject: [PATCH 15/20] Migrate from sass lighten and darken to sass:color --- src/frontend/style.scss | 56 +++++++++++++++++++++-------------------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/src/frontend/style.scss b/src/frontend/style.scss index 9403511..7f8aa31 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + .wporg-block-meeting-calendar { margin: 0 auto 32px; font-size: var(--wp--preset--font-size--normal, 16px); @@ -332,98 +334,98 @@ h3.wporg-meeting-calendar__list-event-title { /** Colors for each team */ .wporg-meeting-calendar__team-core { border-color: #cd0000 !important; - background-color: lighten(#cd0000, 55%) !important; + background-color: color.adjust(#cd0000, $lightness: 55%) !important; color: #cd0000 !important; } .wporg-meeting-calendar__team-design { border-color: #eec26a !important; - background-color: lighten(#eec26a, 30%) !important; - color: darken(#eec26a, 40%) !important; + background-color: color.adjust(#eec26a, $lightness: 30%) !important; + color: color.adjust(#eec26a, $lightness: -40%) !important; } .wporg-meeting-calendar__team-mobile { border-color: #fba16c !important; - background-color: lighten(#fba16c, 30%) !important; + background-color: color.adjust(#fba16c, $lightness: 30%) !important; color: #fba16c !important; } .wporg-meeting-calendar__team-polyglots { border-color: #c32283 !important; - background-color: lighten(#c32283, 45%) !important; - color: darken(#c32283, 10%) !important; + background-color: color.adjust(#c32283, $lightness: 45%) !important; + color: color.adjust(#c32283, $lightness: -10%) !important; } .wporg-meeting-calendar__team-support { border-color: #33b4ce !important; - background-color: lighten(#33b4ce, 40%) !important; - color: darken(#33b4ce, 20%) !important; + background-color: color.adjust(#33b4ce, $lightness: 40%) !important; + color: color.adjust(#33b4ce, $lightness: -20%) !important; } .wporg-meeting-calendar__team-docs, .wporg-meeting-calendar__team-documentation { border-color: #3b7236 !important; - background-color: lighten(#3b7236, 55%) !important; + background-color: color.adjust(#3b7236, $lightness: 55%) !important; color: #3b7236 !important; } .wporg-meeting-calendar__team-themes { border-color: #4e3288 !important; - background-color: lighten(#4e3288, 55%) !important; + background-color: color.adjust(#4e3288, $lightness: 55%) !important; color: #4e3288 !important; } .wporg-meeting-calendar__team-plugins { border-color: #f06723 !important; - background-color: lighten(#f06723, 55%) !important; + background-color: color.adjust(#f06723, $lightness: 55%) !important; color: #f06723 !important; } .wporg-meeting-calendar__team-accessibility, .wporg-meeting-calendar__team-community { border-color: #11799d !important; - background-color: lighten(#11799d, 60%) !important; - color: darken(#11799d, 10%) !important; + background-color: color.adjust(#11799d, $lightness: 60%) !important; + color: color.adjust(#11799d, $lightness: -10%) !important; } .wporg-meeting-calendar__team-meta { border-color: #aeadad !important; - background-color: lighten(#aeadad, 25%) !important; - color: darken(#aeadad, 30%) !important; + background-color: color.adjust(#aeadad, $lightness: 25%) !important; + color: color.adjust(#aeadad, $lightness: -30%) !important; } .wporg-meeting-calendar__team-training, .wporg-meeting-calendar__team-openverse { border-color: #e9c02d !important; - background-color: lighten(#e9c02d, 40%) !important; - color: darken(#e9c02d, 25%) !important; + background-color: color.adjust(#e9c02d, $lightness: 40%) !important; + color: color.adjust(#e9c02d, $lightness: -25%) !important; } .wporg-meeting-calendar__team-tv { border-color: #73ad30 !important; - background-color: lighten(#73ad30, 45%) !important; - color: darken(#73ad30, 20%) !important; + background-color: color.adjust(#73ad30, $lightness: 45%) !important; + color: color.adjust(#73ad30, $lightness: -20%) !important; } .wporg-meeting-calendar__team-marketing { border-color: #47bea7 !important; - background-color: lighten(#47bea7, 55%) !important; + background-color: color.adjust(#47bea7, $lightness: 55%) !important; color: #47bea7 !important; } .wporg-meeting-calendar__team-cli { border-color: #424242 !important; - background-color: lighten(#424242, 55%) !important; + background-color: color.adjust(#424242, $lightness: 55%) !important; color: #424242 !important; } .wporg-meeting-calendar__team-hosting { border-color: #5358a6 !important; - background-color: lighten(#5358a6, 45%) !important; + background-color: color.adjust(#5358a6, $lightness: 45%) !important; color: #5358a6 !important; } .wporg-meeting-calendar__team-tide { border-color: #1526ff !important; - background-color: lighten(#1526ff, 40%) !important; + background-color: color.adjust(#1526ff, $lightness: 40%) !important; color: #1526ff !important; } .wporg-meeting-calendar__team-bbpress, .wporg-meeting-calendar__team-sustainability { border-color: #2d8e42 !important; - background-color: lighten(#2d8e42, 55%) !important; - color: darken(#2d8e42, 10%) !important; + background-color: color.adjust(#2d8e42, $lightness: 55%) !important; + color: color.adjust(#2d8e42, $lightness: -10%) !important; } .wporg-meeting-calendar__team-buddypress, .wporg-meeting-calendar__team-test { border-color: #d84800 !important; - background-color: lighten(#d84800, 50%) !important; - color: darken(#d84800, 10%) !important; + background-color: color.adjust(#d84800, $lightness: 50%) !important; + color: color.adjust(#d84800, $lightness: -10%) !important; } .wporg-meeting-calendar__filter { From 1a462b49883ca5e0f89f338fe0ea33c7d01e2230 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Mon, 14 Oct 2024 12:37:27 +1300 Subject: [PATCH 16/20] Add css lint config and GitHub action, fix issues --- .github/workflows/lint-frontend.yml | 30 ++++ package-lock.json | 29 +++- package.json | 3 +- src/frontend/style.scss | 240 +++++++++++++++------------- style.css | 1 + 5 files changed, 188 insertions(+), 115 deletions(-) create mode 100644 .github/workflows/lint-frontend.yml diff --git a/.github/workflows/lint-frontend.yml b/.github/workflows/lint-frontend.yml new file mode 100644 index 0000000..c44c799 --- /dev/null +++ b/.github/workflows/lint-frontend.yml @@ -0,0 +1,30 @@ +name: Static Analysis (Linting) + +# This workflow is triggered on pushes to trunk, and any PRs. +on: + push: + branches: [master] + pull_request: + workflow_dispatch: + +jobs: + check: + name: Lint + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Install NodeJS + uses: actions/setup-node@v4 + with: + node-version-file: '.nvmrc' + cache: 'npm' + + - name: npm install and build + run: | + npm ci + npm run build + + - name: Lint Styles + run: | + npm run lint:css diff --git a/package-lock.json b/package-lock.json index c3f5af6..6dbea53 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "license": "GPL-2.0-or-later", "devDependencies": { "@wordpress/env": "9.7.0", - "@wordpress/scripts": "27.9.0" + "@wordpress/scripts": "27.9.0", + "@wordpress/stylelint-config": "21.34.0" } }, "node_modules/@ampproject/remapping": { @@ -4857,6 +4858,22 @@ "integrity": "sha512-X4UlrxDTH8oom9qXlcjnydsjAOD2BmB6yFmvS4Z2zdTzqqpRWb+fbqrH412+l+OUXmbzJlSXjlMFYPgYG12IAA==", "dev": true }, + "node_modules/@wordpress/stylelint-config": { + "version": "21.34.0", + "resolved": "https://registry.npmjs.org/@wordpress/stylelint-config/-/stylelint-config-21.34.0.tgz", + "integrity": "sha512-Zou/Y6vdMWnAMzcPNH4yZoKkd8h22DyYO4jyC58ChPEF3O7csvmjpbnDloAr5/MOgCz91hnSkZmiKG0zp8VE6w==", + "dev": true, + "dependencies": { + "stylelint-config-recommended": "^6.0.0", + "stylelint-config-recommended-scss": "^5.0.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "stylelint": "^14.2" + } + }, "node_modules/@wordpress/url": { "version": "3.59.0", "resolved": "https://registry.npmjs.org/@wordpress/url/-/url-3.59.0.tgz", @@ -23320,6 +23337,16 @@ } } }, + "@wordpress/stylelint-config": { + "version": "21.34.0", + "resolved": "https://registry.npmjs.org/@wordpress/stylelint-config/-/stylelint-config-21.34.0.tgz", + "integrity": "sha512-Zou/Y6vdMWnAMzcPNH4yZoKkd8h22DyYO4jyC58ChPEF3O7csvmjpbnDloAr5/MOgCz91hnSkZmiKG0zp8VE6w==", + "dev": true, + "requires": { + "stylelint-config-recommended": "^6.0.0", + "stylelint-config-recommended-scss": "^5.0.2" + } + }, "@wordpress/url": { "version": "3.59.0", "resolved": "https://registry.npmjs.org/@wordpress/url/-/url-3.59.0.tgz", diff --git a/package.json b/package.json index f207628..47fd18a 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "homepage": "https://github.com/Automattic/meeting-calendar#readme", "devDependencies": { "@wordpress/env": "9.7.0", - "@wordpress/scripts": "27.9.0" + "@wordpress/scripts": "27.9.0", + "@wordpress/stylelint-config": "21.34.0" } } diff --git a/src/frontend/style.scss b/src/frontend/style.scss index 7f8aa31..0c94e07 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -1,3 +1,4 @@ +/* stylelint-disable selector-class-pattern */ @use "sass:color"; .wporg-block-meeting-calendar { @@ -5,11 +6,62 @@ font-size: var(--wp--preset--font-size--normal, 16px); } -.wporg-block-meeting-calendar table { - table-layout: fixed; - margin-top: 0; /* There is a global style that is adding a bottom margin to tables */ - margin-bottom: 0; /* There is a global style that is adding a bottom margin to tables */ - width: 100%; +.wporg-meeting-calendar__filter { + display: flex; + flex-wrap: wrap; + align-items: center; + margin: var(--wp--preset--spacing--20, 20px) 0; + + .components-base-control__field { + margin-bottom: unset; + } +} + +.wporg-meeting-calendar__filter-dropdown { + max-width: none; + + /** Overwriting a default rule on the dropdown container */ + > div { + margin: 0 auto 0 !important; + } +} + +.wporg-meeting-calendar__filter-remove.components-button.is-link { + text-decoration: none; + + span:not(.dashicons) { + text-decoration: underline; + } +} + +@media ( max-width: 782px ) { + + .wporg-meeting-calendar__filter { + display: block; + } + + .wporg-meeting-calendar__filter p { + margin: 1em 0 0.5em; + } + + .wporg-meeting-calendar__filter-dropdown { + max-width: 200px; + } +} + +.wporg-meeting-calendar__filter-label { + padding-right: 6px; + margin-bottom: 0; +} + +.wporg-meeting-calendar__filter-applied { + font-size: var(--wp--preset--font-size--normal, 16px); + margin: 0 1em; +} + +.wporg-meeting-calendar__filter-label, +.wporg-meeting-calendar__filter-applied { + font-size: var(--wp--preset--font-size--small, 14px); } .wporg-meeting-calendar__header { @@ -24,6 +76,7 @@ } @media ( min-width: 550px ) { + .wporg-meeting-calendar__header { flex-direction: row; } @@ -38,15 +91,39 @@ } .wporg-meeting-calendar__header h2, -.wp-site-blocks .wporg-meeting-calendar__header h2:not([class*=-font-size], [style*=font-size]) { +.wp-site-blocks .wporg-meeting-calendar__header h2:not([class*="-font-size"], [style*="font-size"]) { margin: 0 0 0 var(--wp--preset--spacing--10, 10px); font-size: var(--wp--preset--font-size--heading-4, 20px); } -.wporg-meeting-calendar__header h2:before { +.wporg-meeting-calendar__header h2::before { display: none; } +.wporg-meeting-calendar__btn-group { + display: flex; + gap: 4px; + + .components-button { + width: 40px; + height: 40px; + + &:disabled { + background-color: var(--wp--preset--color--light-grey-2, #f6f6f6); + box-shadow: none !important; + color: var(--wp--preset--color--charcoal-1, #1e1e1e); + + svg { + opacity: 0.5; + } + } + + &:last-child svg { + rotate: 180deg; + } + } +} + .wporg-meeting-calendar__header .components-button-group { display: flex; @@ -90,28 +167,33 @@ width: 100%; &.is-link { - border: 1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9)); - background: var(--wp--preset--color--blueberry-4, #EFF2FF); + border: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); + background: var(--wp--preset--color--blueberry-4, #eff2ff); text-decoration: none; } } +.wporg-meeting-calendar__cell-event-title { + display: block; + overflow: hidden; +} + .wporg-meeting-calendar__cell-event.is-cancelled, .wporg-meeting-calendar__cell-event.is-cancelled .wporg-meeting-calendar__cell-event-title, .wporg-meeting-calendar__dropdown.is-cancelled { text-decoration: line-through !important; } -/* These styles are separate for !important specificity with `wporg-meeting-calendar__team-*` styles below. */ .wporg-meeting-calendar__cell-event:focus { text-decoration: underline; - box-shadow: 0 0 0 1px var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9)); + box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); } .wporg-meeting-calendar__dropdown .components-menu-group { padding: 7px; box-sizing: border-box; } + .wporg-meeting-calendar__dropdown .components-menu-item__button { white-space: nowrap; overflow: hidden; @@ -122,35 +204,6 @@ margin-bottom: 4px; } -.wporg-meeting-calendar__cell-event-title { - display: block; - overflow: hidden; -} - -.wporg-meeting-calendar__btn-group { - display: flex; - gap: 4px; - - .components-button { - width: 40px; - height: 40px; - - &:disabled { - background-color: var(--wp--preset--color--light-grey-2, #f6f6f6); - box-shadow: none !important; - color: var(--wp--preset--color--charcoal-1, #1e1e1e); - - svg { - opacity: 0.5; - } - } - - &:last-child svg { - rotate: 180deg; - } - } -} - .wporg-meeting-calendar__list-expand { margin: var(--wp--preset--spacing--20, 20px) 0 0; text-align: center; @@ -162,6 +215,13 @@ list-style: none; } +.wporg-meeting-calendar__list-title { + display: block; + font-size: var(--wp--preset--font-size--medium, 18px); + font-weight: 600; + margin: var(--wp--preset--spacing--30, 30px) 0 var(--wp--preset--spacing--20, 20px); +} + .wporg-meeting-calendar__list li { list-style: none; margin: 0; @@ -171,13 +231,6 @@ } } -.wporg-meeting-calendar__list-title { - display: block; - font-size: var(--wp--preset--font-size--medium, 18px); - font-weight: 600; - margin: var(--wp--preset--spacing--30, 30px) 0 var(--wp--preset--spacing--20, 20px); -} - .wporg-meeting-calendar__list-event { position: relative; display: flex; @@ -197,7 +250,7 @@ border-bottom-right-radius: 2px; } - & + .wporg-meeting-calendar__list-event { + + .wporg-meeting-calendar__list-event { border-top: unset; } @@ -209,7 +262,7 @@ .wporg-meeting-calendar__list-event-time { font-size: var(--wp--preset--font-size--small, 14px); - color: var(--wp--preset--color--charcoal-4, #656A71); + color: var(--wp--preset--color--charcoal-4, #656a71); } .wporg-meeting-calendar__list-event-team-wrapper { @@ -224,7 +277,7 @@ margin-bottom: 8px; border-radius: 2px; text-decoration: none !important; - background: var(--wp--preset--color--blueberry-4, #EFF2FF); + background: var(--wp--preset--color--blueberry-4, #eff2ff); color: var(--wp--preset--color--blueberry-1, #3858e9) !important; line-height: var(--wp--custom--heading--level-1--typography--line-height, 1.3); } @@ -267,14 +320,10 @@ h3.wporg-meeting-calendar__list-event-title { .wporg-meeting-calendar__list-event.is-cancelled .wporg-meeting-calendar__list-event-title a > span:last-child { padding-left: 8px; font-size: 16px; - font-weight: normal; + font-weight: 400; vertical-align: bottom; } -.wporg-meeting-calendar__modal-overlay { - font-size: var(--wp--preset--font-size--small, 14px); -} - .wporg-meeting-calendar__list-event-header { flex: 1; } @@ -289,6 +338,7 @@ h3.wporg-meeting-calendar__list-event-title { } @media (min-width: 960px) { + .wporg-meeting-calendar__header, .wporg-meeting-calendar__list { padding: 0; @@ -296,6 +346,10 @@ h3.wporg-meeting-calendar__list-event-title { } .wporg-block-meeting-calendar table { + table-layout: fixed; + margin-top: 0; /* There is a global style that is adding a bottom margin to tables */ + margin-bottom: 0; /* There is a global style that is adding a bottom margin to tables */ + width: 100%; border-collapse: collapse; background: #fff; } @@ -337,90 +391,107 @@ h3.wporg-meeting-calendar__list-event-title { background-color: color.adjust(#cd0000, $lightness: 55%) !important; color: #cd0000 !important; } + .wporg-meeting-calendar__team-design { border-color: #eec26a !important; background-color: color.adjust(#eec26a, $lightness: 30%) !important; color: color.adjust(#eec26a, $lightness: -40%) !important; } + .wporg-meeting-calendar__team-mobile { border-color: #fba16c !important; background-color: color.adjust(#fba16c, $lightness: 30%) !important; color: #fba16c !important; } + .wporg-meeting-calendar__team-polyglots { border-color: #c32283 !important; background-color: color.adjust(#c32283, $lightness: 45%) !important; color: color.adjust(#c32283, $lightness: -10%) !important; } + .wporg-meeting-calendar__team-support { border-color: #33b4ce !important; background-color: color.adjust(#33b4ce, $lightness: 40%) !important; color: color.adjust(#33b4ce, $lightness: -20%) !important; } + .wporg-meeting-calendar__team-docs, .wporg-meeting-calendar__team-documentation { border-color: #3b7236 !important; background-color: color.adjust(#3b7236, $lightness: 55%) !important; color: #3b7236 !important; } + .wporg-meeting-calendar__team-themes { border-color: #4e3288 !important; background-color: color.adjust(#4e3288, $lightness: 55%) !important; color: #4e3288 !important; } + .wporg-meeting-calendar__team-plugins { border-color: #f06723 !important; background-color: color.adjust(#f06723, $lightness: 55%) !important; color: #f06723 !important; } + .wporg-meeting-calendar__team-accessibility, .wporg-meeting-calendar__team-community { border-color: #11799d !important; background-color: color.adjust(#11799d, $lightness: 60%) !important; color: color.adjust(#11799d, $lightness: -10%) !important; } + .wporg-meeting-calendar__team-meta { border-color: #aeadad !important; background-color: color.adjust(#aeadad, $lightness: 25%) !important; color: color.adjust(#aeadad, $lightness: -30%) !important; } + .wporg-meeting-calendar__team-training, .wporg-meeting-calendar__team-openverse { border-color: #e9c02d !important; background-color: color.adjust(#e9c02d, $lightness: 40%) !important; color: color.adjust(#e9c02d, $lightness: -25%) !important; } + .wporg-meeting-calendar__team-tv { border-color: #73ad30 !important; background-color: color.adjust(#73ad30, $lightness: 45%) !important; color: color.adjust(#73ad30, $lightness: -20%) !important; } + .wporg-meeting-calendar__team-marketing { border-color: #47bea7 !important; background-color: color.adjust(#47bea7, $lightness: 55%) !important; color: #47bea7 !important; } + .wporg-meeting-calendar__team-cli { border-color: #424242 !important; background-color: color.adjust(#424242, $lightness: 55%) !important; color: #424242 !important; } + .wporg-meeting-calendar__team-hosting { border-color: #5358a6 !important; background-color: color.adjust(#5358a6, $lightness: 45%) !important; color: #5358a6 !important; } + .wporg-meeting-calendar__team-tide { border-color: #1526ff !important; background-color: color.adjust(#1526ff, $lightness: 40%) !important; color: #1526ff !important; } + .wporg-meeting-calendar__team-bbpress, .wporg-meeting-calendar__team-sustainability { border-color: #2d8e42 !important; background-color: color.adjust(#2d8e42, $lightness: 55%) !important; color: color.adjust(#2d8e42, $lightness: -10%) !important; } + .wporg-meeting-calendar__team-buddypress, .wporg-meeting-calendar__team-test { border-color: #d84800 !important; @@ -428,64 +499,6 @@ h3.wporg-meeting-calendar__list-event-title { color: color.adjust(#d84800, $lightness: -10%) !important; } -.wporg-meeting-calendar__filter { - display: flex; - flex-wrap: wrap; - align-items: center; - margin: var(--wp--preset--spacing--20, 20px) 0; - - .components-base-control__field { - margin-bottom: unset; - } -} - -.wporg-meeting-calendar__filter-dropdown { - max-width: none; -} - -.wporg-meeting-calendar__filter-remove.components-button.is-link { - text-decoration: none; - - span:not(.dashicons) { - text-decoration: underline; - } -} - -@media ( max-width: 782px ) { - .wporg-meeting-calendar__filter { - display: block; - } - - .wporg-meeting-calendar__filter p { - margin: 1em 0 0.5em; - } - - .wporg-meeting-calendar__filter-dropdown { - max-width: 200px; - } -} - -.wporg-meeting-calendar__filter-label { - padding-right: 6px; - margin-bottom: 0; -} - -.wporg-meeting-calendar__filter-applied { - font-size: 16px; - margin: 0 1em; -} - -.wporg-meeting-calendar__filter-label, -.wporg-meeting-calendar__filter-applied { - font-size: 14px; -} - -/** Overwriting a default rule on the dropdown container */ -.wporg-meeting-calendar__filter-dropdown > div { - margin-bottom: 0 !important; - margin: 0 auto; -} - .wporg-meeting-calendar__modal { border-radius: unset; box-shadow: unset; @@ -509,6 +522,7 @@ h3.wporg-meeting-calendar__list-event-title { } .wporg-meeting-calendar__modal-overlay { + font-size: var(--wp--preset--font-size--small, 14px); z-index: 1000001; /* popover z-index + 1 */ } diff --git a/style.css b/style.css index e69de29..ff71124 100644 --- a/style.css +++ b/style.css @@ -0,0 +1 @@ +/* stylelint-disable no-empty-source */ From 1e2bae1bf9c4390dd29a3208d8b8a32cb8191b4e Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Mon, 14 Oct 2024 17:02:06 +1300 Subject: [PATCH 17/20] Use headings for list view days --- src/frontend/list/list-item.js | 8 ++++---- src/frontend/style.scss | 4 +++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/frontend/list/list-item.js b/src/frontend/list/list-item.js index 099fd85..bf1d75f 100644 --- a/src/frontend/list/list-item.js +++ b/src/frontend/list/list-item.js @@ -21,9 +21,9 @@ function ListItem( { date, events } ) { return (
  • - +

    { format( 'l - F j, Y', date ) } - +

    { events.map( ( event ) => { const onTeamClick = ( clickEvent ) => { @@ -70,7 +70,7 @@ function ListItem( { date, events } ) {
    • ) }
    -

    +

    { event.title } { isCancelled( event.status ) && ( @@ -82,7 +82,7 @@ function ListItem( { date, events } ) { ) } -

    +
    { format( 'g:i a ', event.datetime ) } { format( '(\\U\\T\\CP)', date ) } diff --git a/src/frontend/style.scss b/src/frontend/style.scss index 0c94e07..2a8ceb7 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -288,10 +288,12 @@ text-decoration: underline !important; } -h3.wporg-meeting-calendar__list-event-title { +.wporg-meeting-calendar__list-event-title { font-size: var(--wp--preset--font-size--normal, 16px); font-weight: 400; margin: unset !important; + padding-bottom: unset; + border-bottom: unset; a { color: var(--wp--preset--color--charcoal-1, #1e1e1e); From e25bce0c02a1453fcf115c57cbab69d8d91b6933 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Tue, 15 Oct 2024 10:42:16 +1300 Subject: [PATCH 18/20] Stop linking event titles when link is empty --- src/frontend/list/list-item.js | 93 ++++++++++++++++++---------------- 1 file changed, 50 insertions(+), 43 deletions(-) diff --git a/src/frontend/list/list-item.js b/src/frontend/list/list-item.js index bf1d75f..a301429 100644 --- a/src/frontend/list/list-item.js +++ b/src/frontend/list/list-item.js @@ -16,19 +16,19 @@ import { } from '../calendar/utils'; import { useEvents } from '../store/event-context'; -function ListItem( { date, events } ) { +function ListItem({ date, events }) { const { setTeam } = useEvents(); return ( -
  • +

  • - { format( 'l - F j, Y', date ) } + {format('l - F j, Y', date)}

    - { events.map( ( event ) => { - const onTeamClick = ( clickEvent ) => { + {events.map((event) => { + const onTeamClick = (clickEvent) => { clickEvent.preventDefault(); - setTeam( event.team ); + setTeam(event.team); speak( sprintf( // translators: %s is the team name @@ -42,85 +42,92 @@ function ListItem( { date, events } ) { }; return (
    - { event.team && ( + {event.team && ( - ) } + )}

    - - { event.title } - { isCancelled( event.status ) && ( - - { __( - ' Meeting is cancelled', - 'wporg' - ) } - - ) } - + {!!event.link ? ( + + + + ) : ( + + )}

    - { format( 'g:i a ', event.datetime ) } - { format( '(\\U\\T\\CP)', date ) } + {format('g:i a ', event.datetime)} + {format('(\\U\\T\\CP)', date)}

    - { __( 'Meets: ', 'wporg-meeting-calendar' ) } - { getFrequencyLabel( event ) } + {__('Meets: ', 'wporg-meeting-calendar')} + {getFrequencyLabel(event)}

    - { __( 'Location: ', 'wporg-meeting-calendar' ) } - { getSlackLink( event.location ) } + {__('Location: ', 'wporg-meeting-calendar')} + {getSlackLink(event.location)}

    - { !! event.wptv_url && ( + {!!event.wptv_url && ( - ) } + )}
    ); - } ) } + })}
    • ); } +function EventTitle({ event }) { + return ( + <> + {event.title} + {isCancelled(event.status) && ( + {__(' Meeting is cancelled', 'wporg')} + )} + + ); +} + export default ListItem; From 8b7a2e0680ba68e3062bb5f15197bd4d7a347343 Mon Sep 17 00:00:00 2001 From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com> Date: Tue, 15 Oct 2024 10:50:15 +1300 Subject: [PATCH 19/20] :lipstick: Update formatting in touched files for new @wordpress/scripts eslint config --- src/frontend/calendar/cell.js | 93 +++++++++++++++------------------- src/frontend/calendar/index.js | 69 ++++++++++--------------- src/frontend/feed/index.js | 45 ++++++++-------- src/frontend/filter/index.js | 52 +++++++++---------- src/frontend/icons/collapse.js | 2 +- src/frontend/icons/expand.js | 2 +- 6 files changed, 117 insertions(+), 146 deletions(-) diff --git a/src/frontend/calendar/cell.js b/src/frontend/calendar/cell.js index c2f090a..16ac245 100644 --- a/src/frontend/calendar/cell.js +++ b/src/frontend/calendar/cell.js @@ -10,81 +10,74 @@ import { format } from '@wordpress/date'; */ import { getTeamClass, isToday, isCancelled } from './utils'; -function CalendarCell( { +function CalendarCell({ blank = false, year, month, day, events, onEventClick, -} ) { +}) { const MAX_EVENTS = 7; - if ( blank ) { + if (blank) { return ; } - const date = new Date( year, month, day ); - const key = format( 'Y-m-d', date ); - const dayEvents = events[ key ] || []; - const restOfEvents = dayEvents.slice( MAX_EVENTS ); + const date = new Date(year, month, day); + const key = format('Y-m-d', date); + const dayEvents = events[key] || []; + const restOfEvents = dayEvents.slice(MAX_EVENTS); return ( - { format( 'F j', date ) }{ ' ' } - { sprintf( + {format('F j', date)}{' '} + {sprintf( // translators: %d: Count of all events, ie: 4. - _n( - '%d event', - '%d events', - dayEvents.length, - 'wporg' - ), + _n('%d event', '%d events', dayEvents.length, 'wporg'), dayEvents.length - ) } + )} - { day } + {day} - { dayEvents.slice( 0, MAX_EVENTS ).map( ( event ) => { + {dayEvents.slice(0, MAX_EVENTS).map((event) => { return ( ); - } ) } + })} - { !! restOfEvents.length && ( + {!!restOfEvents.length && ( ( + renderToggle={({ isOpen, onToggle }) => ( - ) } - renderContent={ () => ( + )} + renderContent={() => ( - { restOfEvents.map( ( event ) => { + {restOfEvents.map((event) => { return ( - void onEventClick( event ) - } + onClick={() => void onEventClick(event)} className={ 'wporg-meeting-calendar__cell-event ' + - getTeamClass( event.team ) + - ( isCancelled( event.status ) + getTeamClass(event.team) + + (isCancelled(event.status) ? ' is-cancelled' - : '' ) + : '') } > - { format( 'g:i a: ', event.datetime ) } - { event.title } + {format('g:i a: ', event.datetime)} + {event.title} ); - } ) } + })} - ) } + )} /> - ) } + )} ); } diff --git a/src/frontend/calendar/index.js b/src/frontend/calendar/index.js index 6d15e6b..c72ccc2 100644 --- a/src/frontend/calendar/index.js +++ b/src/frontend/calendar/index.js @@ -29,7 +29,7 @@ function Calendar() { month: currentMonth, year: currentYear, }; - const [ { month, year }, setDate ] = useState( currentMonthYear ); + const [{ month, year }, setDate] = useState(currentMonthYear); const { isCalendarView, isListView, @@ -38,7 +38,7 @@ function Calendar() { shouldForceListView, } = useViews(); - if ( shouldForceListView && ! isListView() ) { + if (shouldForceListView && !isListView()) { setListView(); } @@ -47,51 +47,41 @@ function Calendar() {

    - { date( 'F Y', new Date( year, month, 2 ) ) } + {date('F Y', new Date(year, month, 2))}

    - { isCalendarView() && ( - - ) } - { isListView() && } + {isCalendarView() && } + {isListView() && } ); diff --git a/src/frontend/feed/index.js b/src/frontend/feed/index.js index 992ce14..2f3da50 100644 --- a/src/frontend/feed/index.js +++ b/src/frontend/feed/index.js @@ -11,53 +11,48 @@ import { useEvents } from '../store/event-context'; const Feed = () => { const { teams, team } = useEvents(); - const selected = teams.find( ( option ) => team === option.value ); + const selected = teams.find((option) => team === option.value); const getCalendarUrl = () => { const baseUrl = window.location.origin; - if ( ! selected ) { - return `${ baseUrl }/meetings.ics`; + if (!selected) { + return `${baseUrl}/meetings.ics`; } - return `${ baseUrl }/meetings-${ selected.value }.ics`; + return `${baseUrl}/meetings-${selected.value}.ics`; }; const getGoogleCalendarUrl = () => { - const calendarUrl = getCalendarUrl().replace( 'https://', 'webcal://' ); - return addQueryArgs( 'https://www.google.com/calendar/render', { + const calendarUrl = getCalendarUrl().replace('https://', 'webcal://'); + return addQueryArgs('https://www.google.com/calendar/render', { cid: calendarUrl, - } ); + }); }; const getRSSUrl = () => { const baseUrl = window.location.origin; - return `${ baseUrl }/feed/?post_type=meeting`; + return `${baseUrl}/feed/?post_type=meeting`; }; return (

    - { __( + {__( 'Events are shown in your local time zone.', 'wporg-meeting-calendar' - ) } + )}

    - { __( - 'Subscribe to this calendar:', - 'wporg-meeting-calendar' - ) }{ ' ' } - - { __( 'Google Calendar ↗', 'wporg-meeting-calendar' ) } - { ' ' } - ·{ ' ' } - - { __( 'ICS', 'wporg-meeting-calendar' ) } - { ' ' } - ·{ ' ' } - - { __( 'RSS', 'wporg-meeting-calendar' ) } - + {__('Subscribe to this calendar:', 'wporg-meeting-calendar')}{' '} + + {__('Google Calendar ↗', 'wporg-meeting-calendar')} + {' '} + ·{' '} + + {__('ICS', 'wporg-meeting-calendar')} + {' '} + ·{' '} + {__('RSS', 'wporg-meeting-calendar')}

    ); diff --git a/src/frontend/filter/index.js b/src/frontend/filter/index.js index ac4a5b6..60d2238 100644 --- a/src/frontend/filter/index.js +++ b/src/frontend/filter/index.js @@ -13,41 +13,43 @@ import { useEvents } from '../store/event-context'; const Filter = () => { const { teams, team, setTeam } = useEvents(); - if ( teams.length < 2 ) { + const filterLabel = useRef(null); + + if (teams.length < 2) { return null; } - const filterLabel = useRef( null ); const dropdownId = 'wporg-meeting-calendar__filter-dropdown'; - const selected = teams.find( ( option ) => team === option.value ); + const selected = teams.find((option) => team === option.value); return (
    { - setTeam( value ); + ]} + onChange={(value) => { + setTeam(value); const newSelected = teams.find( - ( option ) => value === option.value + (option) => value === option.value ); speak( sprintf( + // translators: %s is the team name __( 'Showing meetings for %s', 'wporg-meeting-calendar' @@ -56,25 +58,26 @@ const Filter = () => { ), 'assertive' ); - } } + }} /> - { '' !== team && ( + {'' !== team && ( <>

    - { sprintf( + {sprintf( + // translators: %s is the team name __( 'Showing meetings for %s', 'wporg-meeting-calendar' ), selected.label - ) } + )}

    - ) } + )}
    ); }; diff --git a/src/frontend/icons/collapse.js b/src/frontend/icons/collapse.js index a482687..4c02d2d 100644 --- a/src/frontend/icons/collapse.js +++ b/src/frontend/icons/collapse.js @@ -3,7 +3,7 @@ */ import { SVG, Path } from '@wordpress/primitives'; -export default function() { +export default function () { return ( Date: Tue, 15 Oct 2024 10:55:23 +1300 Subject: [PATCH 20/20] Fix incorrect text domain usages --- src/frontend/calendar/cell.js | 9 +++-- src/frontend/list/index.js | 63 +++++++++++++++------------------- src/frontend/list/list-item.js | 4 ++- 3 files changed, 37 insertions(+), 39 deletions(-) diff --git a/src/frontend/calendar/cell.js b/src/frontend/calendar/cell.js index 16ac245..fc429ae 100644 --- a/src/frontend/calendar/cell.js +++ b/src/frontend/calendar/cell.js @@ -39,7 +39,12 @@ function CalendarCell({ {format('F j', date)}{' '} {sprintf( // translators: %d: Count of all events, ie: 4. - _n('%d event', '%d events', dayEvents.length, 'wporg'), + _n( + '%d event', + '%d events', + dayEvents.length, + 'wporg-meeting-calendar' + ), dayEvents.length )} @@ -83,7 +88,7 @@ function CalendarCell({ '%d more', '%d more', restOfEvents.length, - 'wporg' + 'wporg-meeting-calendar' ), restOfEvents.length )} diff --git a/src/frontend/list/index.js b/src/frontend/list/index.js index 9f0c978..95d316a 100644 --- a/src/frontend/list/index.js +++ b/src/frontend/list/index.js @@ -19,72 +19,63 @@ import { getRows } from '../calendar/utils'; import { useEvents } from '../store/event-context'; import ListItem from './list-item'; -function List( { month, year } ) { - const [ showPast, setShowPast ] = useState( false ); - const rows = getRows( year, month ); +function List({ month, year }) { + const [showPast, setShowPast] = useState(false); + const rows = getRows(year, month); const { events } = useEvents(); - const allDays = flatten( rows ).filter( ( i ) => ! i.blank ); + const allDays = flatten(rows).filter((i) => !i.blank); const cutoffDate = new Date(); // Reset the time to 11:59pm the night before, so that we show all meetings today. - cutoffDate.setHours( -1, 59, 0, 0 ); + cutoffDate.setHours(-1, 59, 0, 0); // If today is later than the 1st of the month, there will be past meetings. - const hasPast = new Date( year, month ) < cutoffDate; + const hasPast = new Date(year, month) < cutoffDate; const days = allDays - .map( ( row, i ) => { - const date = new Date( row.year, row.month, row.day ); - const key = format( 'Y-m-d', date ); - const dayEvents = events[ key ] || []; + .map((row, i) => { + const date = new Date(row.year, row.month, row.day); + const key = format('Y-m-d', date); + const dayEvents = events[key] || []; // If we want to hide past events, skip over things before yesterday. - if ( ! showPast && ! ( date > cutoffDate ) ) { + if (!showPast && !(date > cutoffDate)) { return null; } - if ( ! dayEvents.length ) { + if (!dayEvents.length) { return null; } - return ( - - ); - } ) - .filter( ( i ) => !! i ); + return ; + }) + .filter((i) => !!i); return ( <> - { hasPast && - ( ! showPast ? ( + {hasPast && + (!showPast ? (

    -

    ) : (

    - ) ) } + ))} - { ! days.length ? ( + {!days.length ? (

    - { __( 'No Events Scheduled', 'wporg-meeting-calendar' ) } + {__('No Events Scheduled', 'wporg-meeting-calendar')}

    ) : ( -
      { days }
    - ) } +
      {days}
    + )} ); } diff --git a/src/frontend/list/list-item.js b/src/frontend/list/list-item.js index a301429..3d906c6 100644 --- a/src/frontend/list/list-item.js +++ b/src/frontend/list/list-item.js @@ -124,7 +124,9 @@ function EventTitle({ event }) { <> {event.title} {isCancelled(event.status) && ( - {__(' Meeting is cancelled', 'wporg')} + + {__(' Meeting is cancelled', 'wporg-meeting-calendar')} + )} );