Update filter and feeds layout

WordPress · Oct 9, 2024 · 844a945 · 844a945
1 parent ea68e05
commit 844a945
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 69 deletions.
diff --git 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() {
 				<CalendarGrid month={ month } year={ year } />
 			) }
 			{ isListView() && <List month={ month } year={ year } /> }
+			<Feed />
 		</Fragment>
 	);
 }

diff --git a/src/frontend/feed/index.js b/src/frontend/feed/index.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+import { Button, ButtonGroup } from '@wordpress/components';
+
+/**
+ * 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 (
+		<div className="wporg-meeting-calendar__feed">
+			<span>{ __( 'Subscribe to this calendar:', 'wporg-meeting-calendar' ) }</span> <a href={ getGoogleCalendarUrl() }>Google Calendar ↗</a> · <a href={ getCalendarUrl() }>ICS</a>
+		</div>
+	);
+};
+
+export default Feed;
diff --git 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 (
 		<div className="wporg-meeting-calendar__filter">
 			<label
@@ -88,7 +71,7 @@ const Filter = () => {
 					</p>
 					<Button
 						icon="no-alt"
-						isLink
+						variant="link"
 						isDestructive
 						onClick={ () => {
 							setTeam( '' );
@@ -101,38 +84,12 @@ const Filter = () => {
 							);
 							filterLabel.current.focus();
 						} }
+						className="wporg-meeting-calendar__filter-remove"
 					>
-						{ __( 'Remove team filter', 'wporg-meeting-calendar' ) }
+						<span>{ __( 'Remove team filter', 'wporg-meeting-calendar' ) }</span>
 					</Button>
 				</>
 			) }
-			<div className="wporg-meeting-calendar__filter-feed">
-				<ButtonGroup label={ __( 'Export', 'wporg-meeting-calendar' ) }>
-					<Button
-						icon="calendar-alt"
-						href={ getCalendarUrl() }
-						isSecondary
-						style={ {
-							marginLeft: 'auto',
-						} }
-						download
-					>
-						{ __( 'iCal', 'wporg-meeting-calendar' ) }
-						{ '' !== team && ` - ${ selected.label }` }
-					</Button>
-					<Button
-						icon="plus"
-						href={ getGoogleCalendarUrl() }
-						isSecondary
-						style={ {
-							marginLeft: 'auto',
-						} }
-						download
-					>
-						{ __( 'Google Calendar', 'wporg-meeting-calendar' ) }
-					</Button>
-				</ButtonGroup>
-			</div>
 		</div>
 	);
 };

diff --git 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 {
+	margin-top: 8px;
+	text-align: right;
+	font-size: var(--wp--preset--font-size--small, 14px);
+}