Switch to controlled preferences tabs; create version button

Author: davepagurek

client/constants.js

@@ -10,6 +10,7 @@ export const STOP_ACCESSIBLE_OUTPUT = 'STOP_ACCESSIBLE_OUTPUT';
 
 export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
 export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
+export const SET_PREFERENCES_TAB = 'SET_PREFERENCES_TAB';
 export const SET_FONT_SIZE = 'SET_FONT_SIZE';
 export const SET_LINE_NUMBERS = 'SET_LINE_NUMBERS';
 

client/modules/IDE/actions/preferences.js

@@ -14,6 +14,13 @@ function updatePreferences(formParams, dispatch) {
     });
 }
 
+export function setPreferencesTab(value) {
+  return {
+    type: ActionTypes.SET_PREFERENCES_TAB,
+    value
+  };
+}
+
 export function setFontSize(value) {
   return (dispatch, getState) => {
     // eslint-disable-line

client/modules/IDE/components/Editor/index.jsx

@@ -72,6 +72,7 @@ import UnsavedChangesIndicator from '../UnsavedChangesIndicator';
 import { EditorContainer, EditorHolder } from './MobileEditor';
 import { FolderIcon } from '../../../../common/icons';
 import IconButton from '../../../../common/IconButton';
+import VersionIndicator from '../VersionIndicator';
 
 emmet(CodeMirror);
 
@@ -565,6 +566,9 @@ class Editor extends React.Component {
                   </span>
                   <Timer />
                 </div>
+                <div className="editor__library-version">
+                  <VersionIndicator />
+                </div>
               </div>
               <article
                 ref={(element) => {

client/modules/IDE/components/Preferences/index.jsx

@@ -16,7 +16,8 @@ import {
   setLintWarning,
   setAutocloseBracketsQuotes,
   setAutocompleteHinter,
-  setLinewrap
+  setLinewrap,
+  setPreferencesTab
 } from '../../actions/preferences';
 
 export default function Preferences() {
@@ -25,6 +26,7 @@ export default function Preferences() {
   const dispatch = useDispatch();
 
   const {
+    tabIndex,
     fontSize,
     autosave,
     linewrap,
@@ -78,14 +80,18 @@ export default function Preferences() {
     handleFontSize(newValue);
   }
 
+  function changeTab(index) {
+    dispatch(setPreferencesTab(index));
+  }
+
   const fontSizeInputRef = useRef(null);
 
   return (
     <section className="preferences">
       <Helmet>
         <title>p5.js Web Editor | Preferences</title>
       </Helmet>
-      <Tabs>
+      <Tabs selectedIndex={tabIndex} onSelect={changeTab}>
         <TabList>
           <div className="tabs__titles">
             <Tab>
@@ -96,6 +102,11 @@ export default function Preferences() {
             <Tab>
               <h4 className="tabs__title">{t('Preferences.Accessibility')}</h4>
             </Tab>
+            <Tab>
+              <h4 className="tabs__title">
+                {t('Preferences.LibraryManagement')}
+              </h4>
+            </Tab>
           </div>
         </TabList>
         <TabPanel>
@@ -455,6 +466,7 @@ export default function Preferences() {
             </div>
           </div>
         </TabPanel>
+        <TabPanel>TODO</TabPanel>
       </Tabs>
     </section>
   );

client/modules/IDE/components/VersionIndicator.jsx

@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { openPreferences } from '../actions/ide';
+import { setPreferencesTab } from '../actions/preferences';
+
+import { useP5Version } from '../hooks/useP5Version';
+
+const VersionIndicator = () => {
+  const { versionInfo } = useP5Version();
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const openVersionSettings = useCallback(() => {
+    dispatch(openPreferences());
+    dispatch(setPreferencesTab(2));
+  }, []);
+
+  return (
+    <button onClick={openVersionSettings}>
+      {t('Toolbar.LibraryVersion')}
+      &nbsp;
+      {versionInfo?.version || t('Toolbar.CustomLibraryVersion')}
+    </button>
+  );
+};
+
+VersionIndicator.propTypes = {};
+
+export default VersionIndicator;

client/modules/IDE/components/VersionPicker.jsx

@@ -8,7 +8,6 @@ import { updateFileContent } from '../actions/files';
 
 const VersionPicker = () => {
   const { indexID, versionInfo } = useP5Version();
-  console.log(versionInfo);
   const dispatch = useDispatch();
   const dispatchReplaceVersion = useCallback(
     (version) => {
@@ -33,6 +32,6 @@ const VersionPicker = () => {
   );
 };
 
-VersionPicker.popTypes = {};
+VersionPicker.propTypes = {};
 
 export default VersionPicker;

client/modules/IDE/reducers/preferences.js

@@ -1,6 +1,7 @@
 import * as ActionTypes from '../../../constants';
 
 export const initialState = {
+  tabIndex: 0,
   fontSize: 18,
   autosave: true,
   linewrap: true,
@@ -17,6 +18,10 @@ export const initialState = {
 
 const preferences = (state = initialState, action) => {
   switch (action.type) {
+    case ActionTypes.OPEN_PREFERENCES:
+      return Object.assign({}, state, { tabIndex: 0 });
+    case ActionTypes.SET_PREFERENCES_TAB:
+      return Object.assign({}, state, { tabIndex: action.value });
     case ActionTypes.SET_FONT_SIZE:
       return Object.assign({}, state, { fontSize: action.value });
     case ActionTypes.SET_AUTOSAVE:

client/styles/components/_editor.scss

@@ -398,11 +398,25 @@ pre.CodeMirror-line {
   height: #{math.div(29, $base-font-size)}rem;
   padding-top: #{math.div(7, $base-font-size)}rem;
   padding-left: #{math.div(56, $base-font-size)}rem;
+  padding-right: #{math.div(168, $base-font-size)}rem;
   font-size: #{math.div(12, $base-font-size)}rem;
   display: flex;
   justify-content: space-between;
 }
 
+.editor__library-version {
+  @include themify() {
+    color: getThemifyVariable("primary-text-color");
+  }
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  justify-content: flex-end;
+  height: #{math.div(29, $base-font-size)}rem;
+  width: #{math.div(168, $base-font-size)}rem;
+}
+
 .editor__unsaved-changes {
   margin-left: #{math.div(2, $base-font-size)}rem;
 }

translations/locales/en-US/translations.json

@@ -153,7 +153,9 @@
     "StopSketchARIA": "Stop sketch",
     "EditSketchARIA": "Edit sketch name",
     "NewSketchNameARIA": "New sketch name",
-    "By": " by "
+    "By": " by ",
+    "LibraryVersion": "p5.js Version:",
+    "CustomLibraryVersion": "Custom"
   },
   "Console": {
     "Title": "Console",
@@ -168,6 +170,7 @@
     "Settings": "Settings",
     "GeneralSettings": "General settings",
     "Accessibility": "Accessibility",
+    "LibraryManagement": "Library Management",
     "Theme": "Theme",
     "LightTheme": "Light",
     "LightThemeARIA": "light theme on",