Merge pull request #141 from appwrite/fix-platforms-inputs

feat: platform input tooltips
appwrite · Nov 14, 2022 · f29cf17 · f29cf17 · vercel · Nov 14, 2022
2 parents 133c9dd + 358a5a6
commit f29cf17
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 7 deletions.
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { tooltip as tooltipAction } from '$lib/actions/tooltip';
     import { onMount } from 'svelte';
     import { FormItem, Helper } from '.';
 
@@ -13,6 +14,7 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
+    export let tooltip: string = null;
 
     let element: HTMLInputElement;
     let error: string;
@@ -40,7 +42,17 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <label class:u-hide={!showLabel} class="label" for={id}
+        >{label}
+        {#if tooltip}
+            <span
+                class="icon-info"
+                aria-hidden="true"
+                use:tooltipAction={{
+                    content: tooltip
+                }} />
+        {/if}
+    </label>
     <div class="input-text-wrapper">
         <input
             {id}

diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte
@@ -53,6 +53,7 @@
             id="hostname"
             label="Package Name"
             placeholder="com.company.appname"
+            tooltip="Your package name is generally the applicationId in your app-level build.gradle file."
             required
             bind:value={$createPlatform.hostname} />
     </FormList>

diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte
@@ -93,6 +93,7 @@
             id="hostname"
             label="Bundle ID"
             placeholder="com.company.appname"
+            tooltip="You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
             required
             bind:value={$createPlatform.hostname} />
     </FormList>

diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
@@ -31,31 +31,42 @@
         {
             name: string;
             hostname: string;
+            tooltip: string;
         }
     > = {
         [Platform.Android]: {
             name: 'My Android App',
-            hostname: 'com.company.appname'
+            hostname: 'com.company.appname',
+            tooltip:
+                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
         },
         [Platform.Ios]: {
             name: 'My iOS App',
-            hostname: 'com.company.appname'
+            hostname: 'com.company.appname',
+            tooltip:
+                'Your package name is generally the applicationId in your app-level build.gradle file.'
         },
         [Platform.Linux]: {
             name: 'My Linux App',
-            hostname: 'appname'
+            hostname: 'appname',
+            tooltip: 'Your application name'
         },
         [Platform.Macos]: {
             name: 'My mac OS App',
-            hostname: 'com.company.appname'
+            hostname: 'com.company.appname',
+            tooltip:
+                "You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."
         },
         [Platform.Web]: {
             name: 'My Web App',
-            hostname: 'com.company.appname'
+            hostname: 'com.company.appname',
+            tooltip:
+                'The hostname that your website will use to interact with the Appwrite APIs in production or development environments. No protocol or port number required.'
         },
         [Platform.Windows]: {
             name: 'My Windows App',
-            hostname: 'appname'
+            hostname: 'appname',
+            tooltip: 'Your application name'
         }
     };
 
@@ -154,6 +165,7 @@
                 id="hostname"
                 label={hostname[platform]}
                 placeholder={placeholder[platform].hostname}
+                tooltip={placeholder[platform].tooltip}
                 required
                 bind:value={$createPlatform.hostname} />
             {#if platform === Platform.Web}

diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte
@@ -55,6 +55,7 @@
                 id="hostname"
                 label="Hostname"
                 placeholder="localhost"
+                tooltip="The hostname that your website will use to interact with the Appwrite APIs in production or development environments. No protocol or port number required."
                 required
                 bind:value={$createPlatform.hostname} />
             <div class="u-flex u-gap-16 u-margin-block-start-8">