From 5e0aaf52225e63429a1f4ab423b93f5884b6594e Mon Sep 17 00:00:00 2001 From: Matt Wiebe Date: Thu, 10 Aug 2023 21:39:05 -0500 Subject: [PATCH] button colors are working --- src/follow-me/button-style.js | 70 +++++++++++++++++++++++++++++++++++ src/follow-me/edit.js | 60 ++++++++++++------------------ src/follow-me/style.scss | 1 + 3 files changed, 94 insertions(+), 37 deletions(-) create mode 100644 src/follow-me/button-style.js diff --git a/src/follow-me/button-style.js b/src/follow-me/button-style.js new file mode 100644 index 0000000..0b8325f --- /dev/null +++ b/src/follow-me/button-style.js @@ -0,0 +1,70 @@ +function presetVarColorCss( color ) { + return `var(--wp--preset--color--${ color })`; +} + +function getBackgroundColor( color ) { + // if color is a string, it's a var like this. + if ( typeof color === 'string' ) { + return presetVarColorCss( color ); + } + + return color?.color?.background || null; +} + +function getLinkColor( text ) { + // if it starts with a hash, leave it be + if ( typeof text === 'string' && text.match( /^#/ ) ) { + return text; + } + // var:preset|color|luminous-vivid-amber + // var(--wp--preset--color--luminous-vivid-amber) + // we will receive the top format, we need to output the bottom format + const [ , , color ] = text.split( '|' ); + return presetVarColorCss( color ); +} + +function generateSelector( selector, prop, value = null, pseudo = '' ) { + if ( ! value ) { + return ''; + } + return `${ selector }${ pseudo } { ${ prop }: ${ value }; }\n`; +} + +export const BODY_CLASS = 'activitypub-follow-modal-active'; + +function getBlockStyles( id, style, backgroundColor ) { + const selector = `#${ id } .components-button`; + // we grab the background color if set as a good color for our button text + const buttonTextColor = getBackgroundColor( backgroundColor ) + // bg might be in this form. + || style?.color?.background; + // we misuse the link color for the button background + const buttonColor = getLinkColor( style?.elements?.link?.color?.text ); + // hover! + const buttonHoverColor = getLinkColor( style?.elements?.link?.[':hover']?.color?.text ); + + return generateSelector( selector, 'color', buttonTextColor ) + + generateSelector( selector, 'background-color', buttonColor ) + + generateSelector( selector, 'background-color', buttonHoverColor, ':hover' ) +} + +export function getPopupStyles( style ) { + const base = `.${ BODY_CLASS } .components-modal__content .components-button`; + const primary = `${ base }.is-primary`; + const secondary = `${ base }.is-tertiary`; + // we misuse the link color for the button background + const buttonColor = getLinkColor( style?.elements?.link?.color?.text ); + // hover! + const buttonHoverColor = getLinkColor( style?.elements?.link?.[':hover']?.color?.text ); + + return generateSelector( primary, 'background-color', buttonColor ) + + generateSelector( primary, 'background-color', buttonHoverColor, ':hover' ) + + generateSelector( secondary, 'color', buttonColor ) +} + +export function ButtonStyle( { id, style, backgroundColor } ) { + const css = getBlockStyles( id, style, backgroundColor ); + return ( + + ); +} \ No newline at end of file diff --git a/src/follow-me/edit.js b/src/follow-me/edit.js index 1ec952e..3944e6f 100644 --- a/src/follow-me/edit.js +++ b/src/follow-me/edit.js @@ -7,6 +7,7 @@ import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components'; import { useUserOptions } from '../shared/use-user-options'; +import { ButtonStyle, BODY_CLASS, getPopupStyles } from './button-style'; import apiFetch from '@wordpress/api-fetch'; import { useEffect, useState } from '@wordpress/element'; const { namespace } = window._activityPubOptions; @@ -40,36 +41,14 @@ function getNormalizedProfile( profile ) { function generateHandle( profile ) { try { - const urlObject = new URL( profile.url ); - const { host, pathname } = urlObject; - const first = pathname.replace( /^\//, '' ); - return `${ first}@${ host }`; + const { host, pathname } = new URL( profile.url ) + const first = profile.preferredUsername ?? pathname.replace( /^\//, '' ); + return `${ first }@${ host }`; } catch ( e ) { return '@error@error'; } } -function styleToVar( text ) { - // if it starts with a hash, leave it be - if ( text.match( /^#/ ) ) { - return text; - } - // var:preset|color|luminous-vivid-amber - // var(--wp--preset--color--luminous-vivid-amber) - // we will receive the top format, we need to output the bottom format - const [ , , color ] = text.split( '|' ); - return `var(--wp--preset--color--${ color })`; -} - -function styleToButtonStyle( style ) { - if ( ! style ) { - return {}; - } - return { - backgroundColor: styleToVar( style.color.text ) - } -} - export default function Edit( { attributes, setAttributes } ) { const [ profile, setProfile ] = useState( getNormalizedProfile() ); const { selectedUser } = attributes; @@ -83,7 +62,7 @@ export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const usersOptions = useUserOptions(); - const style = styleToButtonStyle( attributes?.style?.elements?.link ); + const popupStyles = getPopupStyles( attributes.style ); return (
@@ -97,40 +76,47 @@ export default function Edit( { attributes, setAttributes } ) { /> - + +
); } -function Profile( profile ) { - const { handle, avatar, name, style } = profile; +function Profile( { profile, popupStyles } ) { + const { handle, avatar, name } = profile; return (
-
{ name }
+
{ name }
{ handle }
- +
); } -function Follow( { profile, style } ) { +function Follow( { profile, popupStyles } ) { const [ isOpen, setIsOpen ] = useState( false ); + // a function that adds/removes the activitypub-follow-modal-active class to the body + function setModalIsOpen( value ) { + const method = value ? 'add' : 'remove'; + document.body.classList[ method ]( BODY_CLASS ); + setIsOpen( value ); + } return ( <> - setIsOpen( false ) } - onCancel={ () => setIsOpen( false ) } + onConfirm={ () => setModalIsOpen( false ) } + onCancel={ () => setModalIsOpen( false ) } > - Todo: put the follow layout in here. - +

Howdy let's put some dialogs here

+ ); diff --git a/src/follow-me/style.scss b/src/follow-me/style.scss index 8a51696..2c90f63 100644 --- a/src/follow-me/style.scss +++ b/src/follow-me/style.scss @@ -12,6 +12,7 @@ .activitypub-profile__name { margin: 0; line-height: 1; + font-size: var( --wp--preset--font-size--large ); } .activitypub-profile__follow { margin-left: auto;