#503: Allow making changes to preview URL + tailwind v3 update

estruyf · Feb 5, 2023 · 8a4b243 · 8a4b243
1 parent 4a50cf7
commit 8a4b243
Show file tree

Hide file tree

Showing 8 changed files with 2,046 additions and 697 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2198,7 +2198,7 @@
     "@popperjs/core": "^2.11.6",
     "@sentry/react": "^6.13.3",
     "@sentry/tracing": "^6.13.3",
-    "@tailwindcss/forms": "^0.3.3",
+    "@tailwindcss/forms": "^0.5.3",
     "@types/chai": "^4.3.1",
     "@types/glob": "7.1.3",
     "@types/invariant": "^2.2.35",
@@ -2224,7 +2224,7 @@
     "@webpack-cli/serve": "^1.6.0",
     "ajv": "^8.8.2",
     "array-move": "^4.0.0",
-    "autoprefixer": "10.3.3",
+    "autoprefixer": "^10.4.13",
     "chai": "^4.3.6",
     "css-loader": "5.2.7",
     "date-fns": "2.23.0",
@@ -2251,9 +2251,8 @@
     "node-json-db": "^1.3.0",
     "npm-run-all": "^4.1.5",
     "path-browserify": "^1.0.1",
-    "postcss": "^8.3.6",
-    "postcss-loader": "4.3.0",
-    "postcss-nested": "^5.0.6",
+    "postcss": "^8.4.21",
+    "postcss-loader": "^7.0.2",
     "prettier": "^2.8.3",
     "prettier-plugin-tailwindcss": "^0.2.2",
     "react": "17.0.1",
@@ -2270,8 +2269,8 @@
     "semver": "^7.3.7",
     "simple-git": "^3.10.0",
     "style-loader": "2.0.0",
-    "tailwindcss": "^2.2.7",
-    "tailwindcss-nested-groups": "^1.2.4",
+    "tailwindcss": "^3.2.4",
+    "tailwindcss-scoped-groups": "^2.0.0",
     "ts-loader": "^9.4.2",
     "typescript": "^4.6.2",
     "uniforms": "^3.7.0",

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,9 +1,10 @@
 const tailwindcss = require('tailwindcss');
 
 module.exports = {
-    plugins: [
-        require('postcss-nested'),
-        tailwindcss('./tailwind.config.js'),
-        require('autoprefixer'),
-    ],
+    plugins: {
+        'postcss-import': {},
+        'tailwindcss/nesting': {},
+        tailwindcss: {},
+        autoprefixer: {},
+    }
 };
diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts
@@ -250,8 +250,8 @@ export class Dashboard {
 
         <title>Front Matter Dashboard</title>
       </head>
-      <body style="width:100%;height:100%;margin:0;padding:0;overflow:hidden" class="bg-gray-100 text-vulcan-500 dark:bg-vulcan-500 dark:text-whisper-500">
-        <div id="app" data-isProd="${isProd}" data-environment="${
+      <body style="width:100%;height:100%;margin:0;padding:0;overflow:hidden">
+        <div id="app" class="bg-gray-100 text-vulcan-500 dark:bg-vulcan-500 dark:text-whisper-500" data-isProd="${isProd}" data-environment="${
       isBeta ? 'BETA' : 'main'
     }" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;" ${
       version.usedVersion ? '' : `data-showWelcome="true"`

diff --git a/src/dashboardWebView/components/Contents/ContentActions.tsx b/src/dashboardWebView/components/Contents/ContentActions.tsx
@@ -84,17 +84,17 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
     <>
       <div
         className={`${
-          listView ? '' : 'group-scope absolute top-6 right-0'
+          listView ? '' : 'group-scoped absolute top-6 right-0'
         } flex flex-col space-y-4`}
       >
         <div
-          className={`flex items-center border border-transparent group-scope-hover:bg-gray-200 dark:group-scope-hover:bg-vulcan-200 group-scope-hover:border-gray-100 dark:group-scope-hover:border-vulcan-50 rounded-full ${
+          className={`flex items-center border border-transparent group-scoped-hover:bg-gray-200 dark:group-scoped-hover:bg-vulcan-200 group-scoped-hover:border-gray-100 dark:group-scoped-hover:border-vulcan-50 rounded-full ${
             listView ? '' : 'p-2 -mt-4'
           }`}
         >
           <Menu as="div" className={`relative flex text-left ${listView ? '' : 'z-10'}`}>
             {!listView && (
-              <div className="hidden group-scope-hover:flex">
+              <div className="hidden group-scoped-hover:flex">
                 <QuickAction title={`View content`} onClick={onView}>
                   <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
                 </QuickAction>

diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
@@ -422,7 +422,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     <>
       <li className="group relative bg-gray-50 dark:bg-vulcan-200 shadow-md hover:shadow-xl dark:shadow-none dark:hover:bg-vulcan-100 border border-gray-200 dark:border-vulcan-50">
         <button
-          className={`group-scope relative bg-gray-200 dark:bg-vulcan-300 block w-full aspect-w-10 aspect-h-7 overflow-hidden  h-48 ${
+          className={`group-scoped relative bg-gray-200 dark:bg-vulcan-300 block w-full aspect-w-10 aspect-h-7 overflow-hidden  h-48 ${
             isImageFile ? 'cursor-pointer' : 'cursor-default'
           }`}
           onClick={hasViewData ? undefined : openLightbox}
@@ -439,7 +439,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           </div>
           {hasViewData && (
             <div
-              className={`hidden group-scope-hover:flex absolute top-0 right-0 bottom-0 left-0 items-center bg-vulcan-500 bg-opacity-70 justify-center`}
+              className={`hidden group-scoped-hover:flex absolute top-0 right-0 bottom-0 left-0 items-center bg-vulcan-500 bg-opacity-70 justify-center`}
             >
               <div
                 className={`h-full ${
@@ -472,10 +472,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           )}
         </button>
         <div className={`relative py-4 pl-4 pr-12`}>
-          <div className={`group-scope absolute top-4 right-4 flex flex-col space-y-4`}>
-            <div className="flex items-center border border-transparent group-scope-hover:bg-gray-200 dark:group-scope-hover:bg-vulcan-200 group-scope-hover:border-gray-100 dark:group-scope-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
+          <div className={`group-scoped absolute top-4 right-4 flex flex-col space-y-4`}>
+            <div className="flex items-center border border-transparent group-scoped-hover:bg-gray-200 dark:group-scoped-hover:bg-vulcan-200 group-scoped-hover:border-gray-100 dark:group-scoped-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
               <Menu as="div" className="relative z-10 flex text-left">
-                <div className="hidden group-scope-hover:flex">
+                <div className="hidden group-scoped-hover:flex">
                   <QuickAction title="View media details" onClick={viewMediaDetails}>
                     <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
                   </QuickAction>

diff --git a/src/dashboardWebView/components/Preview/Preview.tsx b/src/dashboardWebView/components/Preview/Preview.tsx
@@ -1,7 +1,7 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { ExternalLinkIcon, RefreshIcon } from '@heroicons/react/outline';
+import { ArrowRightIcon, ExternalLinkIcon, RefreshIcon } from '@heroicons/react/outline';
 import * as React from 'react';
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { PreviewCommands } from '../../../constants';
 
 export interface IPreviewProps {
@@ -12,6 +12,7 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
   url
 }: React.PropsWithChildren<IPreviewProps>) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [ crntUrl, setCrntUrl ] = useState<string | null>(null);
 
   const onRefresh = () => {
     if (iframeRef.current?.src) {
@@ -23,37 +24,54 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
     Messenger.send(PreviewCommands.toVSCode.open, url);
   };
 
+  const navigateToUrl = () => {
+    let navUrl = crntUrl || url || '';
+    if (!navUrl.startsWith('http')) {
+      navUrl = `https://${navUrl}`;
+      setCrntUrl(navUrl);
+    }
+    iframeRef.current!.src = navUrl;
+  };
+
+  useEffect(() => {
+    setCrntUrl(url);
+  }, [url]);
+
   return (
     <div className="w-full h-full bg-white">
       <div
-        className="slug fixed w-full top-0 flex items-center"
-        style={{
-          height: '30px',
-          background: 'var(--vscode-editor-background)',
-          borderBottom: '1px solid var(--vscode-focusBorder)'
-        }}
+        className="slug fixed h-[30px] w-full top-0 flex items-center bg-[var(--vscode-editor-background)] text-[color:var(--vscode-editor-background)] border-b border-b-[var(--vscode-focusBorder)]"
       >
         <input
           type="text"
-          value={url || ''}
-          className="w-full h-full border-0 bg-transparent text-xs py-1 px-2"
+          value={crntUrl || ''}
+          onChange={(e) => setCrntUrl(e.currentTarget.value || "")}
+          onKeyPress={(e) => {
+            if (e.key === 'Enter') {
+              navigateToUrl();
+            }
+          }}
+          className="w-full m-[1px] h-full border-1 border-transparent bg-transparent text-xs py-1 px-2 focus:border-color-blue-500 focus:outline-none"
           style={{
             color: 'var(--vscode-editor-foreground)'
           }}
-          disabled
         />
 
         <div
-          className="actions absolute right-0 top-0 bottom-0 flex items-center space-x-2 px-2"
+          className="actions absolute right-[1px] top-[1px] bottom-[1px] flex items-center space-x-2 px-2 text-gray-400 dark:text-whisper-900"
           style={{
             background: 'var(--vscode-editor-background)'
           }}
         >
-          <button title="Refresh" onClick={onRefresh}>
+          <button title="Navigate" onClick={navigateToUrl} className={`hover:text-vulcan-500 dark:hover:text-whisper-100`}>
+            <ArrowRightIcon className="w-4 h-4" aria-hidden="true" />
+          </button>
+
+          <button title="Refresh" onClick={onRefresh} className={`hover:text-vulcan-500 dark:hover:text-whisper-100 mr-2`}>
             <RefreshIcon className="w-4 h-4" aria-hidden="true" />
           </button>
 
-          <button title="Open" onClick={openInBrowser} className="mr-2">
+          <button title="Open" onClick={openInBrowser} className={`hover:text-vulcan-500 dark:hover:text-whisper-100 mr-2`}>
             <ExternalLinkIcon className="w-4 h-4" aria-hidden="true" />
           </button>
         </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,8 +2,8 @@ const colors = require('tailwindcss/colors');
 
 module.exports = {
   mode: 'jit',
-  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
-  darkMode: 'class', // or 'media' or 'class'
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  darkMode: ['class', '.vscode-dark'],
   theme: {
     extend: {
       animation: {
@@ -18,7 +18,7 @@ module.exports = {
       },
       colors: {
         white: colors.white,
-        gray: colors.trueGray,
+        gray: colors.neutral,
         "red": {
           "50": "#ff7c7b",
           "100": "#ff7271",
@@ -118,11 +118,8 @@ module.exports = {
       }
     },
   },
-  variants: {
-    extend: {},
-  },
   plugins: [
     require("@tailwindcss/forms"),
-    require("tailwindcss-nested-groups"),
+    require("tailwindcss-scoped-groups"),
   ],
 }