Merge pull request #4732 from wikimedia/native-editor-design-review

Native Editor - Design review feedback
wikimedia · Feb 1, 2024 · 695548b · 695548b
2 parents cb72e62 + e858457
commit 695548b
Show file tree

Hide file tree

Showing 20 changed files with 185 additions and 167 deletions.
diff --git a/Components/Sources/Components/Assets.xcassets/separator.imageset/Contents.json b/Components/Sources/Components/Assets.xcassets/separator.imageset/Contents.json
diff --git a/Components/Sources/Components/Assets.xcassets/separator.imageset/separator.pdf b/Components/Sources/Components/Assets.xcassets/separator.imageset/separator.pdf
diff --git a/...nents/Sources/Components/Components/Editors/Common Views/Base/WKEditorToolbarButton.swift b/...nents/Sources/Components/Components/Editors/Common Views/Base/WKEditorToolbarButton.swift
@@ -113,7 +113,7 @@ class WKEditorToolbarButton: WKComponentView {
     private func createButtonConfig(image: UIImage? = nil) -> UIButton.Configuration {
         var buttonConfig = UIButton.Configuration.plain()
 
-        buttonConfig.baseForegroundColor = (button?.isSelected ?? false) ? theme.inputAccessoryButtonSelectedTint : theme.inputAccessoryButtonTint
+        buttonConfig.baseForegroundColor = theme.text
         buttonConfig.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
         buttonConfig.background.cornerRadius = 0
         if let image {
@@ -125,8 +125,7 @@ class WKEditorToolbarButton: WKComponentView {
 
     private func buttonConfigurationUpdateHandler(button: UIButton) {
         var buttonConfig = button.configuration
-        buttonConfig?.baseForegroundColor = button.isSelected ? theme.inputAccessoryButtonSelectedTint : theme.inputAccessoryButtonTint
-        buttonConfig?.background.backgroundColor = button.isSelected ? theme.inputAccessoryButtonSelectedBackgroundColor : theme.accessoryBackground
+        buttonConfig?.background.backgroundColor = button.isSelected ? self.theme.editorButtonSelectedBackground : theme.paperBackground
         button.configuration = buttonConfig
     }
 

diff --git a/Components/Sources/Components/Components/Editors/Common Views/Base/WKEditorToolbarView.swift b/Components/Sources/Components/Components/Editors/Common Views/Base/WKEditorToolbarView.swift
@@ -5,14 +5,27 @@ class WKEditorToolbarView: WKComponentView {
 
     // MARK: - Properties
 
-    @IBOutlet var separatorViews: [UIView] = []
+    @IBOutlet var separatorImageViews: [UIImageView] = []
+    @IBOutlet var separatorImageWidthConstraints: [NSLayoutConstraint] = []
     @IBOutlet var buttons: [WKEditorToolbarButton] = []
 
     // MARK: - Lifecycle
 
     override func awakeFromNib() {
         super.awakeFromNib()
         accessibilityElements = buttons
+
+        let width = (1.0 / UIScreen.main.scale) * 2
+        for separatorImageView in self.separatorImageViews {
+
+            let image = UIImage.roundedRectImage(with: .black, cornerRadius: 0, width: width, height: 32)
+            separatorImageView.image = image?.withRenderingMode(.alwaysTemplate)
+        }
+
+        for separatorWidthConstraint in separatorImageWidthConstraints {
+            separatorWidthConstraint.constant = width
+        }
+
         updateColors()
         maximumContentSizeCategory = .accessibilityMedium
     }
@@ -31,12 +44,15 @@ class WKEditorToolbarView: WKComponentView {
     // MARK: - Private Helpers
 
     private func updateColors() {
-        tintColor = WKAppEnvironment.current.theme.link
-        backgroundColor = WKAppEnvironment.current.theme.accessoryBackground
+        backgroundColor = WKAppEnvironment.current.theme.paperBackground
 
         layer.shadowOffset = CGSize(width: 0, height: -2)
         layer.shadowRadius = 10
         layer.shadowOpacity = 1.0
         layer.shadowColor = theme.editorKeyboardShadow.cgColor
+
+        for separatorImageView in separatorImageViews {
+            separatorImageView.tintColor = theme.newBorder
+        }
     }
 }
diff --git a/...s/Editors/Common Views/Input Accessory Views/Expanding/WKEditorToolbarExpandingView.swift b/...s/Editors/Common Views/Input Accessory Views/Expanding/WKEditorToolbarExpandingView.swift
@@ -73,6 +73,7 @@ class WKEditorToolbarExpandingView: WKEditorToolbarView {
 
     override func awakeFromNib() {
         super.awakeFromNib()
+
         stackView.isLayoutMarginsRelativeArrangement = true
         stackView.layoutMargins = UIEdgeInsets(top: 5, left: 0, bottom: 5, right: 0)
 

diff --git a/...nts/Editors/Common Views/Input Accessory Views/Expanding/WKEditorToolbarExpandingView.xib b/...nts/Editors/Common Views/Input Accessory Views/Expanding/WKEditorToolbarExpandingView.xib
diff --git a/...nts/Editors/Common Views/Input Accessory Views/Highlight/WKEditorToolbarHighlightView.xib b/...nts/Editors/Common Views/Input Accessory Views/Highlight/WKEditorToolbarHighlightView.xib
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="22155" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="22505" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22131"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22504"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
@@ -32,10 +32,12 @@
                                             <rect key="frame" x="53" y="0.0" width="30" height="44"/>
                                             <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                                         </view>
-                                        <view contentMode="scaleToFill" placeholderIntrinsicWidth="1" placeholderIntrinsicHeight="32" translatesAutoresizingMaskIntoConstraints="NO" id="y41-nM-tJB" customClass="WKToolbarSeparatorView" customModule="Components">
-                                            <rect key="frame" x="106" y="6" width="1" height="32"/>
-                                            <color key="backgroundColor" white="0.33333333333333331" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
-                                        </view>
+                                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="h3G-Dl-aAp">
+                                            <rect key="frame" x="106" y="0.0" width="1" height="44"/>
+                                            <constraints>
+                                                <constraint firstAttribute="width" constant="1" id="YSt-fM-wLM"/>
+                                            </constraints>
+                                        </imageView>
                                         <view contentMode="scaleToFill" placeholderIntrinsicWidth="30" placeholderIntrinsicHeight="44" translatesAutoresizingMaskIntoConstraints="NO" id="ZgG-w8-2QU" userLabel="Citation Button" customClass="WKEditorToolbarButton" customModule="Components">
                                             <rect key="frame" x="130" y="0.0" width="30" height="44"/>
                                             <color key="backgroundColor" systemColor="systemBackgroundColor"/>
@@ -44,10 +46,12 @@
                                             <rect key="frame" x="183" y="0.0" width="30" height="44"/>
                                             <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                                         </view>
-                                        <view contentMode="scaleToFill" placeholderIntrinsicWidth="1" placeholderIntrinsicHeight="32" translatesAutoresizingMaskIntoConstraints="NO" id="a6D-ps-pge" customClass="WKToolbarSeparatorView" customModule="Components">
-                                            <rect key="frame" x="236" y="6" width="1" height="32"/>
-                                            <color key="backgroundColor" white="0.33333333333333331" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
-                                        </view>
+                                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="RT3-lY-GZU">
+                                            <rect key="frame" x="236" y="0.0" width="1" height="44"/>
+                                            <constraints>
+                                                <constraint firstAttribute="width" constant="1" id="CJV-5f-7aS"/>
+                                            </constraints>
+                                        </imageView>
                                         <view contentMode="scaleToFill" placeholderIntrinsicWidth="30" placeholderIntrinsicHeight="44" translatesAutoresizingMaskIntoConstraints="NO" id="AZa-84-Qdg" userLabel="Template Button" customClass="WKEditorToolbarButton" customModule="Components">
                                             <rect key="frame" x="260" y="0.0" width="30" height="44"/>
                                             <color key="backgroundColor" systemColor="systemBackgroundColor"/>
@@ -96,20 +100,20 @@
                 <outlet property="showMoreButton" destination="S8f-CE-8I8" id="QMl-95-ws9"/>
                 <outlet property="stackView" destination="cO2-kj-WCI" id="qel-pE-Y96"/>
                 <outlet property="templateButton" destination="AZa-84-Qdg" id="1Qq-oT-Pfn"/>
-                <outletCollection property="separatorViews" destination="y41-nM-tJB" collectionClass="NSMutableArray" id="HEd-6s-3qe"/>
-                <outletCollection property="separatorViews" destination="a6D-ps-pge" collectionClass="NSMutableArray" id="E2n-Gk-ymt"/>
                 <outletCollection property="buttons" destination="r0e-89-g0a" collectionClass="NSMutableArray" id="7De-sX-Wwd"/>
                 <outletCollection property="buttons" destination="P53-Fl-mVx" collectionClass="NSMutableArray" id="cj2-b3-El6"/>
                 <outletCollection property="buttons" destination="ZgG-w8-2QU" collectionClass="NSMutableArray" id="0dO-4E-fo5"/>
                 <outletCollection property="buttons" destination="ebk-UU-rSu" collectionClass="NSMutableArray" id="POs-mq-Lqk"/>
                 <outletCollection property="buttons" destination="AZa-84-Qdg" collectionClass="NSMutableArray" id="fKl-Bi-tcc"/>
-                <outletCollection property="separatorViews" destination="y41-nM-tJB" collectionClass="NSMutableArray" id="WIb-dE-Qlk"/>
-                <outletCollection property="separatorViews" destination="a6D-ps-pge" collectionClass="NSMutableArray" id="qMX-mH-gT2"/>
                 <outletCollection property="buttons" destination="AZa-84-Qdg" collectionClass="NSMutableArray" id="hAS-Gd-KOs"/>
                 <outletCollection property="buttons" destination="ebk-UU-rSu" collectionClass="NSMutableArray" id="apx-DA-SOG"/>
                 <outletCollection property="buttons" destination="ZgG-w8-2QU" collectionClass="NSMutableArray" id="Z2z-4e-82a"/>
                 <outletCollection property="buttons" destination="P53-Fl-mVx" collectionClass="NSMutableArray" id="ZGF-JN-m0N"/>
                 <outletCollection property="buttons" destination="r0e-89-g0a" collectionClass="NSMutableArray" id="hSD-z5-WpX"/>
+                <outletCollection property="separatorImageViews" destination="RT3-lY-GZU" collectionClass="NSMutableArray" id="Rhh-Sd-avs"/>
+                <outletCollection property="separatorImageViews" destination="h3G-Dl-aAp" collectionClass="NSMutableArray" id="6xr-Dz-vA6"/>
+                <outletCollection property="separatorImageWidthConstraints" destination="YSt-fM-wLM" collectionClass="NSMutableArray" id="hAs-Cm-iot"/>
+                <outletCollection property="separatorImageWidthConstraints" destination="CJV-5f-7aS" collectionClass="NSMutableArray" id="Ecs-Fh-C2X"/>
             </connections>
             <point key="canvasLocation" x="34.5" y="-156"/>
         </view>

diff --git a/.../Sources/Components/Components/Editors/Common Views/Input Views/WKEditorMultiButton.swift b/.../Sources/Components/Components/Editors/Common Views/Input Views/WKEditorMultiButton.swift
@@ -126,7 +126,7 @@ final class WKEditorMultiButton: WKComponentView {
     private func buttonConfigurationUpdateHandler(button: UIButton) {
         var buttonConfig = button.configuration
 
-        buttonConfig?.background.backgroundColor = button.isSelected ? self.theme.editorMultiButtonSelectedBackground : self.theme.midBackground
+        buttonConfig?.background.backgroundColor = button.isSelected ? self.theme.editorButtonSelectedBackground : self.theme.midBackground
 
         button.configuration = buttonConfig
     }

diff --git a/Components/Sources/Components/Components/Editors/Common Views/WKToolbarSeparatorView.swift b/Components/Sources/Components/Components/Editors/Common Views/WKToolbarSeparatorView.swift
diff --git a/Components/Sources/Components/Extensions/UIImage+Extensions.swift b/Components/Sources/Components/Extensions/UIImage+Extensions.swift
@@ -0,0 +1,21 @@
+import Foundation
+import UIKit
+
+public extension UIImage {
+    static func roundedRectImage(with color: UIColor, cornerRadius: CGFloat, width: CGFloat? = nil, height: CGFloat? = nil) -> UIImage? {
+        let minDimension = 2 * cornerRadius + 1
+        let rect = CGRect(x: 0, y: 0, width: width ?? minDimension, height: height ?? minDimension)
+        let scale = UIScreen.main.scale
+        UIGraphicsBeginImageContextWithOptions(rect.size, false, scale)
+        guard let context = UIGraphicsGetCurrentContext() else {
+            return nil
+        }
+        context.setFillColor(color.cgColor)
+        let path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius)
+        path.fill()
+        let capInsets = UIEdgeInsets(top: cornerRadius, left: cornerRadius, bottom: cornerRadius, right: cornerRadius)
+        let image = UIGraphicsGetImageFromCurrentImageContext()?.resizableImage(withCapInsets: capInsets)
+        UIGraphicsEndImageContext()
+        return image
+    }
+}
diff --git a/Components/Sources/Components/Style/WKFont.swift b/Components/Sources/Components/Style/WKFont.swift
@@ -81,7 +81,7 @@ public enum WKFont {
             }
             return UIFont(descriptor: descriptor, size: 0)
         case .editorHeading:
-            return UIFontMetrics(forTextStyle: .headline).scaledFont(for: UIFont.systemFont(ofSize: 28, weight: .semibold), maximumPointSize: 32, compatibleWith: traitCollection)
+            return UIFontMetrics(forTextStyle: .headline).scaledFont(for: UIFont.systemFont(ofSize: 28, weight: .semibold), compatibleWith: traitCollection)
         case .editorSubheading1:
             return UIFontMetrics(forTextStyle: .headline).scaledFont(for: UIFont.systemFont(ofSize: 26, weight: .semibold), compatibleWith: traitCollection)
         case .editorSubheading2:

diff --git a/Components/Sources/Components/Style/WKIcon.swift b/Components/Sources/Components/Style/WKIcon.swift
@@ -19,9 +19,6 @@ public enum WKIcon {
     static let thank = UIImage(named: "thank", in: .module, with: nil)
     static let userContributions = UIImage(named: "user-contributions", in: .module, with: nil)
 
-    // Editor-specific icons
-    public static let separator = UIImage(named: "separator", in: .module, with: nil)
-
     // Project icons
     static let commons = UIImage(named: "project-icons/commons", in: .module, with: nil)
     static let wikidata = UIImage(named: "project-icons/wikidata", in: .module, with: nil)
@@ -71,7 +68,7 @@ public enum WKSFSymbolIcon {
     case textFormatSize
     case textFormat
 
-    public static func `for`(symbol: WKSFSymbolIcon, font: WKFont = .subheadline, compatibleWith traitCollection: UITraitCollection = WKAppEnvironment.current.traitCollection, renderingMode: UIImage.RenderingMode = .alwaysTemplate, paletteColors: [UIColor]? = nil) -> UIImage? {
+    public static func `for`(symbol: WKSFSymbolIcon, font: WKFont = .subheadline, compatibleWith traitCollection: UITraitCollection = WKAppEnvironment.current.traitCollection, paletteColors: [UIColor]? = nil) -> UIImage? {
         let font = WKFont.for(font)
         let configuration = UIImage.SymbolConfiguration(font: font)
 

diff --git a/Components/Sources/Components/Style/WKTheme.swift b/Components/Sources/Components/Style/WKTheme.swift
@@ -13,6 +13,7 @@ public struct WKTheme: Equatable {
     public let accent: UIColor
     public let destructive: UIColor
     public let border: UIColor
+    public let newBorder: UIColor
     public let paperBackground: UIColor
     public let midBackground: UIColor
     public let baseBackground: UIColor
@@ -33,7 +34,7 @@ public struct WKTheme: Equatable {
     public let editorMatchBackground: UIColor
     public let editorSelectedMatchBackground: UIColor
     public let editorReplacedMatchBackground: UIColor
-    public let editorMultiButtonSelectedBackground: UIColor
+    public let editorButtonSelectedBackground: UIColor
     public let editorKeyboardShadow: UIColor
 
 	public static let light = WKTheme(
@@ -47,6 +48,7 @@ public struct WKTheme: Equatable {
         accent: WKColor.green600,
         destructive: WKColor.red600,
         border: WKColor.gray400,
+        newBorder: WKColor.gray300,
         paperBackground: WKColor.white,
         midBackground: WKColor.gray100,
         baseBackground: WKColor.gray200,
@@ -67,7 +69,7 @@ public struct WKTheme: Equatable {
         editorMatchBackground: WKColor.lightMatchBackground,
         editorSelectedMatchBackground: WKColor.yellow600,
         editorReplacedMatchBackground: WKColor.matchReplacedBackground,
-        editorMultiButtonSelectedBackground: WKColor.gray200,
+        editorButtonSelectedBackground: WKColor.gray200,
         editorKeyboardShadow: WKColor.gray200
 	)
 
@@ -82,6 +84,7 @@ public struct WKTheme: Equatable {
         accent: WKColor.green600,
         destructive: WKColor.red700,
         border: WKColor.taupe200,
+        newBorder: WKColor.taupe200,
         paperBackground: WKColor.beige100,
         midBackground: WKColor.beige300,
         baseBackground: WKColor.beige400,
@@ -102,7 +105,7 @@ public struct WKTheme: Equatable {
         editorMatchBackground: WKColor.lightMatchBackground,
         editorSelectedMatchBackground: WKColor.yellow600,
         editorReplacedMatchBackground: WKColor.matchReplacedBackground,
-        editorMultiButtonSelectedBackground: WKColor.beige400,
+        editorButtonSelectedBackground: WKColor.beige400,
         editorKeyboardShadow: WKColor.taupe200
     )
 
@@ -117,6 +120,7 @@ public struct WKTheme: Equatable {
         accent: WKColor.green600,
         destructive: WKColor.red600,
         border: WKColor.gray650,
+        newBorder: WKColor.gray500,
         paperBackground: WKColor.gray675,
         midBackground: WKColor.gray700,
         baseBackground: WKColor.gray800,
@@ -137,7 +141,7 @@ public struct WKTheme: Equatable {
         editorMatchBackground: WKColor.darkMatchBackground,
         editorSelectedMatchBackground: WKColor.yellow600,
         editorReplacedMatchBackground: WKColor.matchReplacedBackground,
-        editorMultiButtonSelectedBackground: WKColor.gray600,
+        editorButtonSelectedBackground: WKColor.gray600,
         editorKeyboardShadow: WKColor.gray800
 	)
 
@@ -152,6 +156,7 @@ public struct WKTheme: Equatable {
         accent: WKColor.green600,
         destructive: WKColor.red600,
         border: WKColor.gray675,
+        newBorder: WKColor.gray500,
         paperBackground: WKColor.black,
         midBackground: WKColor.gray700,
         baseBackground: WKColor.gray800,
@@ -172,7 +177,7 @@ public struct WKTheme: Equatable {
         editorMatchBackground: WKColor.darkMatchBackground,
         editorSelectedMatchBackground: WKColor.yellow600,
         editorReplacedMatchBackground: WKColor.matchReplacedBackground,
-        editorMultiButtonSelectedBackground: WKColor.gray600,
+        editorButtonSelectedBackground: WKColor.gray600,
         editorKeyboardShadow: WKColor.gray700
 	)