diff --git a/np.Shared/CHANGELOG.md b/np.Shared/CHANGELOG.md index 68e820df9..8db7c839b 100644 --- a/np.Shared/CHANGELOG.md +++ b/np.Shared/CHANGELOG.md @@ -2,6 +2,10 @@ See [Shared Plugin's README](https://github.com/NotePlan/plugins/blob/main/np.Shared/README.md) for details on this plugin. +## [0.4.6] - 2023-10-16 @dwertheimer + +- update to remove CSS from React Windows if wanted + ## [0.4.5] - 2023-10-16 @dwertheimer - updates to React tooling using ShowHTMLV2 etc. diff --git a/np.Shared/plugin.json b/np.Shared/plugin.json index e9663d35a..19589a341 100644 --- a/np.Shared/plugin.json +++ b/np.Shared/plugin.json @@ -3,7 +3,7 @@ "noteplan.minAppVersion": "3.8.0", "plugin.id": "np.Shared", "plugin.name": "🤝 Shared Resources", - "plugin.version": "0.4.5", + "plugin.version": "0.4.6", "plugin.description": "Shared resources for NotePlan plugins. (There are no commands for users to run directly.)", "plugin.author": "jgclark + dwertheimer", "plugin.dependencies": [], diff --git a/np.Shared/src/NPReactLocal.js b/np.Shared/src/NPReactLocal.js index 635e82af2..5b6a41934 100644 --- a/np.Shared/src/NPReactLocal.js +++ b/np.Shared/src/NPReactLocal.js @@ -165,7 +165,7 @@ export function openReactWindow(globalData: any = null, windowOptions?: HtmlWind const reactRootComponent = `` const generatedOptions = { - includeCSSAsJS: true, + includeCSSAsJS: windowOptions.includeCSSAsJS === false ? false : true, headerTags: `${[cssTags].join('\n')}${windowOptions.headerTags || ''}` /* needs to be a string */, preBodyScript: addStringOrArrayItems( [pluginToHTMLCommsBridge, ENV_MODE === 'development' ? ReactDevToolsImport : '', ENV_MODE === 'production' ? reactJSmin : reactJSDev, globalSharedDataScriptStr], diff --git a/np.plugin-test/plugin.json b/np.plugin-test/plugin.json index 31f853733..170dd56c6 100644 --- a/np.plugin-test/plugin.json +++ b/np.plugin-test/plugin.json @@ -6,7 +6,7 @@ "plugin.name": "🔌 Plugin Information & Tester", "plugin.description": "View Plugin Commands and Test that Plugins are working.", "plugin.author": "@dwertheimer", - "plugin.version": "1.4.0-beta5", + "plugin.version": "1.4.0-beta6", "plugin.lastUpdateInfo": "1.4.0-betaX: The beginning of a searchable plugin repository", "plugin.dependencies": [], "plugin.requiredFiles": [ diff --git a/np.plugin-test/requiredFiles/css.plugin.css b/np.plugin-test/requiredFiles/css.plugin.css index 7823b63a2..bcdf9b650 100644 --- a/np.plugin-test/requiredFiles/css.plugin.css +++ b/np.plugin-test/requiredFiles/css.plugin.css @@ -1,168 +1,200 @@ -/* Plugin-specific CSS */ -/* This file is loaded last to override any other CSS */ -/* It's a file rather than baked into the plugin to make fast editing/visual changes easier */ -body { } - -element.style { - margin-top: 0px; -} -h1, h2, h3, h4, h5, h6 { - margin-top: 0px; - font-weight: 500; - line-height: 1.2; -} -h3 { - background-color: beige; - font-size: 1.4rem; - margin-left: -10px; - padding-left: 10px; - padding-top: 5px; - padding-bottom: 5px; -} -.monospace { font-family: 'ui-monospace'; } -.monospaceData { font-family: 'ui-monospace'; font-size: 10px; white-space: pre-wrap } -/* loading spinner */ -.loading { - -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; - animation: sk-scaleout 1.0s infinite ease-in-out; - border-radius: 100%; - height: 6em; - width: 6em; - background-color: black; - } - .loading-text { - padding-left: 20px; - } - html, body { - max-width: 100vw; - overscroll-behavior-y: none; - } +body { + font-family: 'Arial', sans-serif; + line-height: 1.5; + color: #333; + background: linear-gradient(to right, #ffffff, #f2f2f2); + overscroll-behavior-y: none; /* remove spring effect */ + /* background-color: #f4f4f4; */ +} - .container { - padding: 1rem; - display: flex; - flex-wrap: wrap; - height: 100vh; - width: 100vw; - max-width: 100vw; - padding-left: 0px; /* edge to edge */ - padding-right: 0px; - /* align-items: center; */ /* vertical */ - justify-content: center; /* horizontal */ - } +.sticky { + background: linear-gradient(to bottom, #f0b785,#ffffff); + /* background-color: #f0b785; */ + border-bottom: 2px solid #e0e0e0; /* increase border thickness for distinction */ + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); /* add a subtle shadow for depth */ + padding: 15px 20px; /* increase padding for a better look */ + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 100; + display: flex; + justify-content: flex-start; + align-items: center; + margin-top: 0; +} - @keyframes sk-scaleout { - 0% { - -webkit-transform: scale(0); - transform: scale(0); - } - 100% { - -webkit-transform: scale(1.0); - opacity: 0; - transform: scale(1.0); - } - } +select, input[type="text"] { + height: 30px; + padding: 5px 10px; + background-color: #fff; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 14px; + margin-right: 10px; + box-sizing: border-box; + transition: border-color 0.3s ease; /* added transition for a smooth hover effect */ +} - @font-face { - font-family: "noteplanstate"; - src: url('../np.Shared/noteplanstate-edited.otf') format('truetype'); - } +select { + padding-right: 10px; /* To ensure the text doesn't overlap the dropdown arrow */ + background-repeat: no-repeat; + background-position: right center; + background-image: url(data:image/png;base64,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); +} - .noteplanstate { - font-family: "noteplanstate"; - } +select:hover, input[type="text"]:hover { + border-color: #666; + transform: scale(1.02); /* scales the element slightly on hover */ + transition: transform 0.3s ease; +} - .fa-icon { - font-family: "FontAwesome6Pro-Regular"; - } +select:focus, input[type="text"]:focus { + border-color: #007BFF; + box-shadow: 0 0 5px rgba(0,123,255,0.5); +} - .PluginListingPage { - padding-top: 25px; - } +.sticky:hover { + transition: transform 0.3s ease; +} - .plugin-section { - padding: 10px; - padding-top: 0px; - } +/* Modify select arrow styles for better visibility */ +select:after { + content: "▼"; + position: absolute; + top: -83%; + right: 6%; + bottom: 0; + font-size: 60%; + line-height: 30px; + padding: 0 10px; + background: #03498A; + color: rgb(255, 255, 255); + height: 40px; + pointer-events: none; + border-radius: 0 6px 6px 0; +} - .pluginName { - } +.PluginListingPage { + max-width: 1200px; + /* margin: 20px auto; */ + background-color: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + padding: 20px; +} - .pluginVersion, .pluginBy, .install, .installed { - margin-left: 5px; - font-size: 12px; - } +.plugin-section { + margin-bottom: 25px; + padding-top: 5px; + padding-left: 20px; + padding-bottom: 10px; /* Increased padding for top and bottom */ + border-radius: 5px; + transition: background-color 0.3s; + border-top: 1px solid #e4e4e4; /* Top border */ + border-bottom: 1px solid #e4e4e4; /* Bottom border */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* subtle shadow for depth */ +} - .pluginAuthor { - margin-left: 2px; - font-size: 12px; - } +.plugin-section:hover { + background-color: #f9f9f9; +} - .installed { - color: green; - } - .install { - color: blue; - } +.pluginName { + font-size: 1.5rem; + font-weight: bold; + color: #444; +} - .updateIsAvailable { - color: orange; - } +.pluginVersion, .pluginBy, .install, .installed { + margin-left: 15px; + font-size: 0.9rem; + color: #777; +} + +.updateIsAvailable { + color: #e74c3c; + font-weight: bold; +} + +.pluginAuthor { + font-size: 1.0rem; + font-style: italic; + color: #555; +} + +table.w3-table { + width: 100%; + border-collapse: collapse; + margin-top: 15px; +} + +table.w3-table th, table.w3-table td { + border: 1px solid #e0e0e0; + padding: 8px 12px; +} + +table.w3-table thead { + background-color: #f2f2f2; +} - .lastUpdate { +.noPluginsFound { + text-align: center; + padding: 30px 0; + color: #999; +} + +.noPluginsFound h3 { + font-size: 1.6rem; +} + +.noPluginsFound a { + color: #3498db; + text-decoration: none; +} + +.noPluginsFound a:hover { + text-decoration: underline; +} + +/* Making the sticky header responsive */ + +@media (max-width: 768px) { + .sticky select, .sticky input[type="text"], .plugin-title, .plugin-description { + color: #333; /* Making text darker */ + font-weight: bold; /* Adding boldness for better visibility */ } - .aboutPlugin { + .PluginListingPage .command, .PluginListingPage .description { + padding: 5px 10px; /* Reducing the padding to decrease the gray box size */ + background-color: #f6f6f6; /* Slightly lighter gray for better contrast */ + } + .PluginListingPage .plugin-title, .PluginListingPage .plugin-description { + margin-top: 5px; /* Adjusting margin for better spacing */ + margin-bottom: 5px; /* Adjusting margin for better spacing */ } .sticky { - width: 100vw; - position: fixed; - top: 0; - z-index: 100; /* optional: to ensure the div stays on top of other elements */ - display: flex; - justify-content: flex-start; - padding-right: '20px; - flex-wrap: wrap; /* allow to wrap on phone */ + flex-direction: column; + align-items: flex-start; + padding-top: 10px; + padding-bottom: 5px; +} + + select, input[type="text"] { + width: 90%; + max-width: 90%; + margin-bottom: 5px; } + .PluginListingPage { + margin-top: 5px; /* Increased margin to ensure space for the extended sticky header */ + } - /** - * Responsive - * for phones - */ - - @media only screen and (min-width: 375px) - and (max-width: 767px) { - .container { - padding-left: 0px; /* edge to edge */ - padding-right: 0px; } - - h1 { - font-size: 1.5rem; - } - - .button { - padding: 0.5rem 1rem; - font-size: 0.875rem; - } - - .sticky { - position: fixed; - top: 0; - z-index: 100; - justify-content: flex-end; - padding-top: 5px; - padding-right: 40px; /* make room for X */ - flex-wrap: wrap; /* allow to wrap on phone */ - } - - .PluginListingPage { - margin-top: 75px; - } - } \ No newline at end of file +} \ No newline at end of file diff --git a/np.plugin-test/src/pluginCommandsPopup.js b/np.plugin-test/src/pluginCommandsPopup.js index abd17faf8..7c32d018b 100644 --- a/np.plugin-test/src/pluginCommandsPopup.js +++ b/np.plugin-test/src/pluginCommandsPopup.js @@ -119,6 +119,8 @@ export async function openReactPluginCommandsWindow() { savedFilename: `../../${pluginJson['plugin.id']}/savedOutput.html` /* for saving a debug version of the html file */, headerTags: cssTagsString, windowTitle: `Plugin Commands`, + includeCSSAsJS: false /* don't want CSS because we are doing this page non-themed */, + generalCSSIn: ' ' /* don't want CSS because we are doing this page non-themed, needs to be non '' */, } logDebug(`===== testReactWindow Calling React after ${timer(data.startTime || new Date())} =====`) logDebug(pluginJson, `testReactWindow invoking window. testReactWindow stopping here. It's all React from this point forward`) diff --git a/np.plugin-test/src/react/PluginListingPage.jsx b/np.plugin-test/src/react/PluginListingPage.jsx index 69cee3b48..0af52d267 100644 --- a/np.plugin-test/src/react/PluginListingPage.jsx +++ b/np.plugin-test/src/react/PluginListingPage.jsx @@ -8,7 +8,7 @@ declare var NP_THEME: { } import React, { useState } from 'react' -import { howDifferentAreTheseColors, getAltColor } from '../../../helpers/colors' +// import { howDifferentAreTheseColors, getAltColor } from '../../../helpers/colors' import { filterCommands } from './support/filterFunctions.jsx' /**************************************************************************************************************************** @@ -51,10 +51,10 @@ const Dropdown = ({ options, selectedValue, onValueChange }: DropdownProps) => { const categoryFilterOptions = [ { label: 'Show Plugins which contain...', value: '' }, { label: 'Tools for Events', value: 'event' }, - { label: 'Tools for Timeblocks and planning your day', value: 'time blocks,timeblocks' }, + { label: 'Tools for Timeblocks / Day Planning', value: 'time blocks,timeblocks,planning' }, { label: 'Tools for Projects', value: 'projects' }, - { label: 'Tools for tracking Habits', value: 'habits' }, - { label: 'Getting stats', value: 'stats,statistics' }, + { label: 'Tools for Tracking Habits', value: 'habits' }, + { label: 'Getting Stats', value: 'stats,statistics' }, ] const installationOptions = [ @@ -70,9 +70,10 @@ const viewOptions = [ { label: 'Commands Only', value: 'commandsOnly' }, ] -const colorDiff = howDifferentAreTheseColors(NP_THEME.editor.backgroundColor, NP_THEME.editor.altBackgroundColor) -logDebug(`PluginSection: howDifferentAreTheseColors background vs altBackground:${howDifferentAreTheseColors(NP_THEME.editor.backgroundColor, NP_THEME.editor.altBackgroundColor)}`) -const altColor = !colorDiff || colorDiff < 5 ? getAltColor(NP_THEME.editor.backgroundColor) : NP_THEME.editor.altBackgroundColor +// commenting out for now because I think we will make it static styling +// const colorDiff = howDifferentAreTheseColors(NP_THEME.editor.backgroundColor, NP_THEME.editor.altBackgroundColor) +// logDebug(`PluginSection: howDifferentAreTheseColors background vs altBackground:${howDifferentAreTheseColors(NP_THEME.editor.backgroundColor, NP_THEME.editor.altBackgroundColor)}`) +// const altColor = !colorDiff || colorDiff < 5 ? getAltColor(NP_THEME.editor.backgroundColor) : NP_THEME.editor.altBackgroundColor /** * HTML OUTPUT FOR EACH COMMAND @@ -120,7 +121,7 @@ function PluginSection({ plugin, viewOption, index }: PluginSectionProps): React const updateIsAvailableString = plugin.updateIsAvailable ? '(update available)' : '' const pluginSectionStyle = { - backgroundColor: index % 2 === 0 ? altColor : 'inherit', + /* backgroundColor: index % 2 === 0 ? altColor : 'inherit', */ } return (
@@ -199,7 +200,9 @@ function PluginListingPage(props: Props): React$Node { } }) const filteredPluginsAndCommands = filterCommands({ pluginList: filteredPlugins ?? [], filter: filter, categoryFilter: categoryFilter, returnOnlyMatchingCommands: true }) - const filterDivStyle = { backgroundColor: NP_THEME.editor.backgroundColor } + const filterDivStyle = { + /* backgroundColor: NP_THEME.editor.backgroundColor */ + } return ( <>