Add favorites empty state tooltip

duckduckgo · Jul 22, 2024 · 5041b5b · 5041b5b
1 parent b908108
commit 5041b5b
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 11 deletions.
diff --git a/DuckDuckGo.xcodeproj/project.pbxproj b/DuckDuckGo.xcodeproj/project.pbxproj
@@ -266,6 +266,7 @@
 		6F64AA5D2C4920D200CF4489 /* ShortcutAccessoryView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6F64AA5C2C4920D200CF4489 /* ShortcutAccessoryView.swift */; };
 		6F64AA5F2C49463C00CF4489 /* ShortcutsModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6F64AA5E2C49463C00CF4489 /* ShortcutsModel.swift */; };
 		6F655BE22BAB289E00AC3597 /* DefaultTheme.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6F655BE12BAB289E00AC3597 /* DefaultTheme.swift */; };
+		6F691CCA2C4979EC002E9553 /* FavoritesTooltip.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6F691CC92C4979EC002E9553 /* FavoritesTooltip.swift */; };
 		6F8496412BC3D8EE00ADA54E /* OnboardingButtonsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6F8496402BC3D8EE00ADA54E /* OnboardingButtonsView.swift */; };
 		6F96FF102C2B128500162692 /* NewTabPageCustomizeButtonView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6F96FF0F2C2B128500162692 /* NewTabPageCustomizeButtonView.swift */; };
 		6FA3438F2C3D3BC300470677 /* Favorite.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6FA3438E2C3D3BC300470677 /* Favorite.swift */; };
@@ -1415,6 +1416,7 @@
 		6F64AA5C2C4920D200CF4489 /* ShortcutAccessoryView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShortcutAccessoryView.swift; sourceTree = "<group>"; };
 		6F64AA5E2C49463C00CF4489 /* ShortcutsModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShortcutsModel.swift; sourceTree = "<group>"; };
 		6F655BE12BAB289E00AC3597 /* DefaultTheme.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DefaultTheme.swift; sourceTree = "<group>"; };
+		6F691CC92C4979EC002E9553 /* FavoritesTooltip.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FavoritesTooltip.swift; sourceTree = "<group>"; };
 		6F8496402BC3D8EE00ADA54E /* OnboardingButtonsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OnboardingButtonsView.swift; sourceTree = "<group>"; };
 		6F96FF0F2C2B128500162692 /* NewTabPageCustomizeButtonView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NewTabPageCustomizeButtonView.swift; sourceTree = "<group>"; };
 		6FA3438E2C3D3BC300470677 /* Favorite.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Favorite.swift; sourceTree = "<group>"; };
@@ -3486,6 +3488,14 @@
 			name = NewTabPage;
 			sourceTree = "<group>";
 		};
+		6F691CC82C4979DD002E9553 /* Tooltip */ = {
+			isa = PBXGroup;
+			children = (
+				6F691CC92C4979EC002E9553 /* FavoritesTooltip.swift */,
+			);
+			name = Tooltip;
+			sourceTree = "<group>";
+		};
 		6FA3438D2C3D3BB800470677 /* Model */ = {
 			isa = PBXGroup;
 			children = (
@@ -3564,6 +3574,7 @@
 		6FE127412C204DE900EB5724 /* Favorites */ = {
 			isa = PBXGroup;
 			children = (
+				6F691CC82C4979DD002E9553 /* Tooltip */,
 				6FA343902C3D3C2500470677 /* Item */,
 				6FA3438D2C3D3BB800470677 /* Model */,
 				6FB2A6782C2C5B9E004D20C8 /* EmptyState */,
@@ -6797,6 +6808,7 @@
 				9FE08BD62C2A60CD001D5EBC /* MetricBuilder.swift in Sources */,
 				1E1626072968413B0004127F /* ViewExtension.swift in Sources */,
 				31A42566285A0A6300049386 /* FaviconViewModel.swift in Sources */,
+				6F691CCA2C4979EC002E9553 /* FavoritesTooltip.swift in Sources */,
 				D65625952C22D382006EF297 /* TabViewController.swift in Sources */,
 				8C4838B5221C8F7F008A6739 /* GestureToolbarButton.swift in Sources */,
 				EE276BEA2A77F823009167B6 /* NetworkProtectionRootViewController.swift in Sources */,

diff --git a/DuckDuckGo/FavoritesEmptyStateView.swift b/DuckDuckGo/FavoritesEmptyStateView.swift
@@ -23,11 +23,14 @@ struct FavoritesEmptyStateView: View {
     @Environment(\.horizontalSizeClass) var horizontalSizeClass
     @Environment(\.isLandscapeOrientation) var isLandscape
 
-    @State var headerPadding: CGFloat = 10
+    @State private var headerPadding: CGFloat = 10
+
+    @Binding var isShowingTooltip: Bool
 
     var body: some View {
+        ZStack(alignment: .topTrailing) {
             VStack(spacing: 16) {
-                FavoritesSectionHeader()
+                FavoritesSectionHeader(isShowingTooltip: $isShowingTooltip)
                     .padding(.horizontal, headerPadding)
 
                 NewTabPageGridView { placeholdersCount in
@@ -49,11 +52,19 @@ struct FavoritesEmptyStateView: View {
                     self.headerPadding = spacingSize / 2
                 })
             }
+
+            if isShowingTooltip {
+                FavoritesTooltip()
+                    .offset(x: -headerPadding + 18, y: 24)
+                    .frame(maxWidth: .infinity, alignment: .bottomTrailing)
+            }
+        }
     }
 }
 
 #Preview {
-    FavoritesEmptyStateView()
+    @State var isShowingTooltip = false
+    return FavoritesEmptyStateView(isShowingTooltip: $isShowingTooltip)
 }
 
 private struct WidthKey: PreferenceKey {

diff --git a/DuckDuckGo/FavoritesSectionHeader.swift b/DuckDuckGo/FavoritesSectionHeader.swift
@@ -21,22 +21,29 @@ import SwiftUI
 import DesignResourcesKit
 
 struct FavoritesSectionHeader: View {
+
+    @Binding var isShowingTooltip: Bool
+
     var body: some View {
         HStack(spacing: 16, content: {
             Text("Favorites")
                 .font(.system(size: 15, weight: .semibold))
                 .foregroundColor(Color(designSystemColor: .textPrimary))
                 .frame(alignment: .leading)
-            
+
             Spacer()
 
-            Button(action: {}, label: {
+            Button(action: {
+                isShowingTooltip.toggle()
+            }, label: {
                 Image(.info12)
-            }).tintIfAvailable(Color(designSystemColor: .textPrimary))
+                    .foregroundStyle(Color(designSystemColor: .textPrimary))
+            })
         })
     }
 }
 
 #Preview {
-    FavoritesSectionHeader()
+    @State var isShowingTooltip = true
+    return FavoritesSectionHeader(isShowingTooltip: $isShowingTooltip)
 }
diff --git a/DuckDuckGo/FavoritesTooltip.swift b/DuckDuckGo/FavoritesTooltip.swift
@@ -0,0 +1,48 @@
+//
+//  FavoritesTooltip.swift
+//  DuckDuckGo
+//
+//  Copyright © 2024 DuckDuckGo. All rights reserved.
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//  http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+
+import SwiftUI
+import DuckUI
+
+struct FavoritesTooltip: View {
+    var body: some View {
+        Group {
+            Text(.init("\(UserText.newTabPageTooltipBody)"))
+                .daxBodyRegular()
+                .foregroundStyle(Color(designSystemColor: .textPrimary))
+                .padding(16)
+                .frame(maxWidth: 300)
+        }
+        .background(Color(designSystemColor: .surface))
+        .clipShape(RoundedRectangle(cornerRadius: 8))
+        .background(alignment: .topTrailing) {
+            Triangle()
+                .fill(Color(designSystemColor: .surface))
+                .frame(width: 16, height: 8)
+                .offset(x: -8, y: -8)
+        }
+        .shadow(color: .shade(0.1), radius: 2, y: 2)
+        .shadow(color: .shade(0.08), radius: 1.5, y: 0)
+        .padding(.horizontal, 8)
+    }
+}
+
+#Preview {
+    FavoritesTooltip()
+}
diff --git a/DuckDuckGo/NewTabPageView.swift b/DuckDuckGo/NewTabPageView.swift
@@ -28,6 +28,8 @@ struct NewTabPageView<FavoritesModelType: FavoritesModel>: View {
     @ObservedObject private var favoritesModel: FavoritesModelType
     @ObservedObject private var shortcutsModel: ShortcutsModel
 
+    @State var isShowingTooltip: Bool = false
+
     init(messagesModel: NewTabPageMessagesModel, favoritesModel: FavoritesModelType, shortcutsModel: ShortcutsModel) {
         self.messagesModel = messagesModel
         self.favoritesModel = favoritesModel
@@ -48,8 +50,8 @@ struct NewTabPageView<FavoritesModelType: FavoritesModel>: View {
                     }
 
                     // MARK: Favorites
-                    if favoritesModel.isEmpty {
-                        FavoritesEmptyStateView()
+                    if !favoritesModel.isEmpty {
+                        FavoritesEmptyStateView(isShowingTooltip: $isShowingTooltip)
                             .padding(Constant.sectionPadding)
                     } else {
                         FavoritesView(model: favoritesModel)
@@ -81,6 +83,11 @@ struct NewTabPageView<FavoritesModelType: FavoritesModel>: View {
                 .frame(minHeight: proxy.frame(in: .local).size.height)
             }
             .background(Color(designSystemColor: .background))
+            .if(isShowingTooltip, transform: {
+                $0.highPriorityGesture(DragGesture(minimumDistance: 0, coordinateSpace: .global).onEnded { _ in
+                    isShowingTooltip = false
+                })
+            })
         }
     }
 }

diff --git a/DuckDuckGo/UserText.swift b/DuckDuckGo/UserText.swift
@@ -1175,15 +1175,20 @@ But if you *do* want a peek under the hood, you can find more information about
     public static let duckPlayerPresentationModalBody = NSLocalizedString("duckplayer.presentation.modal.body", value: "Duck Player lets you watch YouTube without targeted ads in a theater-like experience in DuckDuckGo and what you watch won’t influence your recommendations.", comment: "Body text for the modal feature explanation")
     public static let duckPlayerPresentationModalDismissButton = NSLocalizedString("duckplayer.presentation.modal.dismiss-button", value: "Got it!", comment: "Button that will dismiss the modal")
 
-    // Home Tab Shortcuts
+    // MARK: - New Tab Page
+
+    // MARK: Shortcuts
     public static let newTabPageShortcutBookmarks = NSLocalizedString("new.tab.page.shortcut.bookmarks", value: "Bookmarks", comment: "Shortcut title leading to Bookmarks")
     public static let newTabPageShortcutAIChat = NSLocalizedString("new.tab.page.shortcut.ai.chat", value: "AI Chat", comment: "Shortcut title leading to AI Chat")
     public static let newTabPageShortcutPasswords = NSLocalizedString("new.tab.page.shortcut.passwords", value: "Passwords", comment: "Shortcut title leading to Passwords")
 
     public static let newTabPageShortcutDownloads = NSLocalizedString("new.tab.page.shortcut.downloads", value: "Downloads", comment: "Shortcut title leading to Downloads")
     public static let newTabPageShortcutSettings = NSLocalizedString("new.tab.page.shortcut.settings", value: "Settings", comment: "Shortcut title leading to app settings")
 
-    // MARK: -  Dax Onboarding Experiment
+    // MARK: Tooltip
+    public static let newTabPageTooltipBody = NSLocalizedString("new.tab.page.tooltip.body", value: "On any site, open the ••• menu and select **Add Favorite** to add it to your new tab page.", comment: "Text shown on the favorites info tooltip")
+
+    // MARK: - Dax Onboarding Experiment
     public enum DaxOnboardingExperiment {
         enum Intro {
             public static let title = NSLocalizedString("onboarding.intro.title", value: "Hi there.\n\nReady for a better, more private internet?", comment: "The title of the onboarding dialog popup")

diff --git a/DuckDuckGo/en.lproj/Localizable.strings b/DuckDuckGo/en.lproj/Localizable.strings
@@ -1579,6 +1579,9 @@ https://duckduckgo.com/mac";
 /* Shortcut title leading to app settings */
 "new.tab.page.shortcut.settings" = "Settings";
 
+/* Text shown on the favorites info tooltip */
+"new.tab.page.tooltip.body" = "On any site, open the ••• menu and select **Add Favorite** to add it to your new tab page.";
+
 /* Do not translate - stringsdict entry */
 "number.of.tabs" = "number.of.tabs";