From ce988c280f5ca6dfc202d209e66d7cfce257c43b Mon Sep 17 00:00:00 2001
From: Bennett <hello@vantezzen.io>
Date: Wed, 26 Feb 2020 12:12:02 +0100
Subject: Implement user.css and user.js (#401)

* #83 Implement user.css and user.js

* Fix button layout in settings

* Fix user script not loading

Co-authored-by: Amine <amine@mouafik.fr>
---
 .../settings/services/EditServiceForm.js           | 65 ++++++++++++++--------
 1 file changed, 43 insertions(+), 22 deletions(-)

(limited to 'src/components/settings/services')

diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 89c82c7f8..98051d78f 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -33,6 +33,18 @@ const messages = defineMessages({
     id: 'settings.service.form.openDarkmodeCss',
     defaultMessage: '!!!Open darkmode.css',
   },
+  openUserCss: {
+    id: 'settings.service.form.openUserCss',
+    defaultMessage: '!!!Open user.css',
+  },
+  openUserJs: {
+    id: 'settings.service.form.openUserJs',
+    defaultMessage: '!!!Open user.js',
+  },
+  recipeFileInfo: {
+    id: 'settings.service.form.recipeFileInfo',
+    defaultMessage: '!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.',
+  },
   availableServices: {
     id: 'settings.service.form.availableServices',
     defaultMessage: '!!!Available services',
@@ -131,8 +143,7 @@ export default @observer class EditServiceForm extends Component {
     form: PropTypes.instanceOf(Form).isRequired,
     onSubmit: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
-    openDarkmodeCss: PropTypes.func.isRequired,
-    isOpeningDarkModeCss: PropTypes.bool.isRequired,
+    openRecipeFile: PropTypes.func.isRequired,
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
@@ -199,8 +210,7 @@ export default @observer class EditServiceForm extends Component {
       isSaving,
       isDeleting,
       onDelete,
-      openDarkmodeCss,
-      isOpeningDarkModeCss,
+      openRecipeFile,
       isProxyFeatureEnabled,
       isServiceProxyIncludedInCurrentPlan,
       isSpellcheckerIncludedInCurrentPlan,
@@ -226,23 +236,6 @@ export default @observer class EditServiceForm extends Component {
       />
     );
 
-    const openDarkmodeCssButton = isOpeningDarkModeCss ? (
-      <Button
-        label={intl.formatMessage(messages.openDarkmodeCss)}
-        loaded={false}
-        buttonType="secondary"
-        className="settings__open-dark-mode-button"
-        disabled
-      />
-    ) : (
-      <Button
-        buttonType="secondary"
-        label={intl.formatMessage(messages.openDarkmodeCss)}
-        className="settings__open-dark-mode-button"
-        onClick={openDarkmodeCss}
-      />
-    );
-
     let activeTabIndex = 0;
     if (recipe.hasHostedOption && service.team) {
       activeTabIndex = 1;
@@ -430,11 +423,39 @@ export default @observer class EditServiceForm extends Component {
               </PremiumFeatureContainer>
             )}
           </form>
+
+          {action === 'edit' && (
+            <>
+              <div className="settings__open-recipe-file-container">
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.openDarkmodeCss)}
+                  className="settings__open-recipe-file-button"
+                  onClick={() => openRecipeFile('darkmode.css')}
+                />
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.openUserCss)}
+                  className="settings__open-recipe-file-button"
+                  onClick={() => openRecipeFile('user.css')}
+                />
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.openUserJs)}
+                  className="settings__open-recipe-file-button"
+                  onClick={() => openRecipeFile('user.js')}
+                />
+              </div>
+              <p style={{ marginTop: 10 }}>
+                <span className="mdi mdi-information" />
+                {intl.formatMessage(messages.recipeFileInfo)}
+              </p>
+            </>
+          )}
         </div>
         <div className="settings__controls">
           {/* Delete Button */}
           {action === 'edit' && deleteButton}
-          {action === 'edit' && openDarkmodeCssButton}
 
           {/* Save Button */}
           {isSaving || isValidatingCustomUrl ? (
-- 
cgit v1.2.3-70-g09d2