Add single-selection mode to tags dropdown (mac)

Author: AndrewVebster

src/ui/osx/TogglDesktop/Features/AutoComplete/GenericAutoComplete/DataSource/TagDataSource.swift

@@ -35,6 +35,17 @@ final class TagDataSource: AutoCompleteViewDataSource {
         }
     }
 
+    enum Mode {
+        case multiSelection
+        case singleSelection
+    }
+
+    var mode: Mode = .multiSelection {
+        didSet {
+            tableView.reloadData()
+        }
+    }
+
     // MARK: Override
 
     override func render(with items: [Any]) {
@@ -113,7 +124,8 @@ final class TagDataSource: AutoCompleteViewDataSource {
         let view = tableView.makeView(withIdentifier: Constants.CellID, owner: self) as! TagCellView
         let isSelected = selectedTags.contains(where: { $0.name == item.name })
         view.delegate = self
-        view.render(item, isSelected: isSelected)
+        let cellStyle: TagCellView.Style = mode == .multiSelection ? .checkbox : .label
+        view.render(item, isSelected: isSelected, style: cellStyle)
         return view
     }
 

src/ui/osx/TogglDesktop/Features/AutoComplete/GenericAutoComplete/Views/TagCell/TagCellView.swift

@@ -17,28 +17,30 @@ final class TagCellView: NSTableCellView {
 
     static let cellHeight: CGFloat = 34.0
 
+    enum Style {
+        case checkbox
+        case label
+    }
+
     // MARK: Variables
 
     weak var delegate: TagCellViewDelegate?
     private var tagItem: Tag?
     private var isSelected = false
+    private var style: Style = .checkbox
+
     private lazy var backgroundColor: NSColor = {
         if #available(OSX 10.13, *) {
             return NSColor(named: NSColor.Name("tag-selection-background-color"))!
         } else {
             return ConvertHexColor.hexCode(toNSColor: "#e5f9e8")
         }
     }()
-    private lazy var attributeDict: [NSAttributedString.Key: Any] = {
-        let font = checkButton.font ?? NSFont.systemFont(ofSize: 14.0)
-        let color = NSColor.togglGreen
-        return [NSAttributedString.Key.foregroundColor: color,
-                NSAttributedString.Key.font: font]
-    }()
 
     // MARK: OUTLET
 
     @IBOutlet weak var checkButton: NSButton!
+    @IBOutlet weak var nameLabel: NSTextField!
     @IBOutlet weak var backgroundView: NSBox!
     @IBOutlet weak var hoverView: NSBox!
 
@@ -58,17 +60,30 @@ final class TagCellView: NSTableCellView {
         hoverView.alphaValue = 0.0
     }
 
-    func render(_ tag: Tag, isSelected: Bool) {
+    func render(_ tag: Tag, isSelected: Bool, style: Style = .checkbox) {
         self.tagItem = tag
         self.isSelected = isSelected
-        checkButton.state = isSelected ? .on : .off
-        backgroundView.fillColor = isSelected ? backgroundColor : .clear
-        if isSelected {
-            checkButton.attributedTitle = NSAttributedString(string: tag.name, attributes: attributeDict)
-        } else {
-            checkButton.title = tag.name
+
+        switch style {
+        case .checkbox:
+            nameLabel.isHidden = true
+            checkButton.isHidden = false
+        case .label:
+            checkButton.isHidden = true
+            nameLabel.isHidden = false
         }
+
+        backgroundView.fillColor = isSelected ? backgroundColor : .clear
+        checkButton.state = isSelected ? .on : .off
+
+        checkButton.title = tag.name
+        nameLabel.stringValue = tag.name
+
         checkButton.toolTip = tag.name
+        nameLabel.toolTip = tag.name
+
+        checkButton.setTextColor(isSelected ? NSColor.togglGreen : NSColor.textColor)
+        nameLabel.textColor = isSelected ? NSColor.togglGreen : NSColor.textColor
     }
 
     func selectCheckBox() {

src/ui/osx/TogglDesktop/Features/AutoComplete/GenericAutoComplete/Views/TagCell/TagCellView.xib

@@ -1,16 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="16097" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
+<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="17156" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
     <dependencies>
         <deployment identifier="macosx"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="16097"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="17156"/>
         <capability name="Named colors" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
         <customObject id="-2" userLabel="File's Owner"/>
         <customObject id="-1" userLabel="First Responder" customClass="FirstResponder"/>
         <customObject id="-3" userLabel="Application" customClass="NSObject"/>
-        <tableCellView identifier="TagCellView" id="kdV-QX-CmW" customClass="TagCellView" customModule="TogglDesktop" customModuleProvider="target">
+        <tableCellView identifier="TagCellView" id="kdV-QX-CmW" customClass="TagCellView" customModule="Toggl_Track" customModuleProvider="target">
             <rect key="frame" x="0.0" y="0.0" width="319" height="38"/>
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>
@@ -30,9 +30,17 @@
                     </view>
                     <color key="fillColor" name="auto-complete-cell-hover"/>
                 </box>
+                <textField hidden="YES" horizontalHuggingPriority="251" verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="sPh-Yd-c5J">
+                    <rect key="frame" x="14" y="11" width="95" height="16"/>
+                    <textFieldCell key="cell" lineBreakMode="truncatingTail" title="Tag name label" id="tpQ-Jz-xSI">
+                        <font key="font" metaFont="system"/>
+                        <color key="textColor" name="labelColor" catalog="System" colorSpace="catalog"/>
+                        <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
+                    </textFieldCell>
+                </textField>
                 <button verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="ZvV-w8-dCM">
-                    <rect key="frame" x="13" y="10" width="64" height="18"/>
-                    <buttonCell key="cell" type="check" title="Check" bezelStyle="regularSquare" imagePosition="left" state="on" inset="2" id="cwN-gd-eAk">
+                    <rect key="frame" x="14" y="10" width="64" height="18"/>
+                    <buttonCell key="cell" type="check" title="Check" bezelStyle="regularSquare" imagePosition="left" lineBreakMode="truncatingTail" state="on" inset="2" id="cwN-gd-eAk">
                         <behavior key="behavior" changeContents="YES" doesNotDimImage="YES" lightByContents="YES"/>
                         <font key="font" metaFont="menu" size="14"/>
                     </buttonCell>
@@ -60,24 +68,29 @@
                 <constraint firstItem="P4q-6R-6o7" firstAttribute="bottom" secondItem="Ws3-BI-x3S" secondAttribute="bottom" id="PKF-6h-dTu"/>
                 <constraint firstAttribute="trailing" secondItem="Ws3-BI-x3S" secondAttribute="trailing" constant="5" id="Pbh-rC-b5o"/>
                 <constraint firstAttribute="bottom" secondItem="8iR-5i-Bzq" secondAttribute="bottom" id="Tpr-G9-DAF"/>
+                <constraint firstAttribute="trailing" relation="greaterThanOrEqual" secondItem="sPh-Yd-c5J" secondAttribute="trailing" constant="16" id="Vnj-Ay-xhe"/>
                 <constraint firstItem="P4q-6R-6o7" firstAttribute="leading" secondItem="Ws3-BI-x3S" secondAttribute="leading" id="bvN-Gi-jcg"/>
                 <constraint firstItem="Ws3-BI-x3S" firstAttribute="top" secondItem="kdV-QX-CmW" secondAttribute="top" constant="2" id="dKj-KO-ZfI"/>
                 <constraint firstAttribute="bottom" secondItem="Ws3-BI-x3S" secondAttribute="bottom" constant="2" id="fu0-8h-Pbb"/>
+                <constraint firstAttribute="trailing" relation="greaterThanOrEqual" secondItem="ZvV-w8-dCM" secondAttribute="trailing" constant="16" id="jmC-iv-2ha"/>
+                <constraint firstItem="sPh-Yd-c5J" firstAttribute="leading" secondItem="kdV-QX-CmW" secondAttribute="leading" constant="16" id="lAA-kp-MAn"/>
                 <constraint firstAttribute="trailing" secondItem="8iR-5i-Bzq" secondAttribute="trailing" id="pwT-4j-Zl8"/>
+                <constraint firstItem="sPh-Yd-c5J" firstAttribute="centerY" secondItem="kdV-QX-CmW" secondAttribute="centerY" id="snq-Zb-h19"/>
                 <constraint firstItem="Ws3-BI-x3S" firstAttribute="leading" secondItem="kdV-QX-CmW" secondAttribute="leading" constant="5" id="vbw-jh-shF"/>
-                <constraint firstItem="ZvV-w8-dCM" firstAttribute="leading" secondItem="kdV-QX-CmW" secondAttribute="leading" constant="15" id="zEd-Vw-1OT"/>
+                <constraint firstItem="ZvV-w8-dCM" firstAttribute="leading" secondItem="kdV-QX-CmW" secondAttribute="leading" constant="16" id="zEd-Vw-1OT"/>
             </constraints>
             <connections>
                 <outlet property="backgroundView" destination="Ws3-BI-x3S" id="hSq-eI-9Q4"/>
                 <outlet property="checkButton" destination="ZvV-w8-dCM" id="Rqp-WW-NUb"/>
                 <outlet property="hoverView" destination="P4q-6R-6o7" id="FqS-op-lgT"/>
+                <outlet property="nameLabel" destination="sPh-Yd-c5J" id="Hfq-ji-viJ"/>
             </connections>
             <point key="canvasLocation" x="244.5" y="-9"/>
         </tableCellView>
     </objects>
     <resources>
         <namedColor name="auto-complete-cell-hover">
-            <color red="0.6940000057220459" green="0.6940000057220459" blue="0.6940000057220459" alpha="0.20000000298023224" colorSpace="custom" customColorSpace="sRGB"/>
+            <color red="0.69019607843137254" green="0.69019607843137254" blue="0.69019607843137254" alpha="0.20000000298023224" colorSpace="custom" customColorSpace="sRGB"/>
         </namedColor>
     </resources>
 </document>

src/ui/osx/TogglDesktop/Features/Timer/TimerViewController/TimerViewController.swift

@@ -101,6 +101,11 @@ class TimerViewController: NSViewController {
         viewModel.projectDataSource.setup(with: projectAutoCompleteView)
         viewModel.tagsDataSource.setup(with: tagsAutoCompleteView)
 
+        viewModel.tagsDataSource.mode = .multiSelection
+
+        // !!!: uncomment to test simplified single-selection mode for tags dropdown
+        // viewModel.tagsDataSource.mode = .singleSelection
+
         viewModel.prepareData()
 
         configureHideAutoCompleteWhenLostFocus()
@@ -142,6 +147,10 @@ class TimerViewController: NSViewController {
         }
 
         viewModel.onTagSelected = { [unowned self] isSelected in
+            if case .singleSelection = self.viewModel.tagsDataSource.mode {
+                self.closeTagsAutoComplete()
+            }
+
             self.tagsButton.isSelected = isSelected
             self.tagsButton.toolTip = isSelected ? nil : Constants.emptyTagsButtonTooltip
         }
@@ -248,6 +257,16 @@ class TimerViewController: NSViewController {
         let wasNotClosedJustNow = (Date().timeIntervalSince1970 - tagsAutocompleteResignTime) > 0.5
 
         if wasNotClosedJustNow {
+
+            // !!!: this is here only for testing. We'll remove this once tags shortcut are implemented
+            switch viewModel.tagsDataSource.mode {
+            case .singleSelection:
+                tagsAutoCompleteView.isSearchFieldHidden = true
+            case .multiSelection:
+                tagsAutoCompleteView.isSearchFieldHidden = false
+            }
+
+            tagsAutoCompleteView.filter(with: "")
             presentTagsAutoComplete(from: .button(tagsButton))
         } else {
             // returning state back to normal if click is not handled