Skip to content

Commit

Permalink
Move mute icon to the left of the title
Browse files Browse the repository at this point in the history 
WIP: When tabs are getting smaller, there is a constraint that is failing.
  • Loading branch information
@jotaemepereira
jotaemepereira committed Feb 13, 2024
1 parent 4571791 commit 294d859
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 14 deletions.
38 changes: 38 additions & 0 deletions DuckDuckGo/Assets.xcassets/Colors/MutedTabIconColor.colorset/Contents.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x00",
"green" : "0x00",
"red" : "0x00"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xFF",
"green" : "0xFF",
"red" : "0xFE"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
38 changes: 38 additions & 0 deletions DuckDuckGo/Assets.xcassets/Colors/PinnedTabMuteStateCircleColor.colorset/Contents.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xFF",
"green" : "0xFF",
"red" : "0xFE"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x00",
"green" : "0x00",
"red" : "0x00"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
2 changes: 1 addition & 1 deletion DuckDuckGo/PinnedTabs/View/PinnedTabView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ struct PinnedTabInnerView: View {
ZStack {
Circle()
.stroke(Color.gray.opacity(0.5), lineWidth: 0.5)
.background(Circle().foregroundColor(colorScheme == .dark ? Color.black : Color.white))
.background(Circle().foregroundColor(Color("PinnedTabMuteStateCircleColor")))
.frame(width: 14, height: 14)
Image("Audio-Mute")
.resizable()
Expand Down
25 changes: 19 additions & 6 deletions DuckDuckGo/TabBar/View/TabBarViewItem.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,7 @@ final class TabBarViewItem: NSCollectionViewItem {
enum Constants {
static let textFieldPadding: CGFloat = 32
static let textFieldPaddingNoFavicon: CGFloat = 12
static let textFieldTrailingNoMuteIcon: CGFloat = 8
static let textFieldTrailingMuteIconPresent: CGFloat = 32
static let textFieldPaddingMuteIconPresent: CGFloat = 56
}

var widthStage: WidthStage {
Expand Down Expand Up @@ -98,7 +97,6 @@ final class TabBarViewItem: NSCollectionViewItem {

@IBOutlet weak var titleTextField: NSTextField!
@IBOutlet weak var titleTextFieldLeadingConstraint: NSLayoutConstraint!
@IBOutlet weak var titleTextFieldTrailingConstraint: NSLayoutConstraint!
@IBOutlet weak var closeButton: MouseOverButton!
@IBOutlet weak var rightSeparatorView: ColorView!
@IBOutlet weak var mouseOverView: MouseOverView!
Expand Down Expand Up @@ -127,15 +125,13 @@ final class TabBarViewItem: NSCollectionViewItem {
setupMenu()
updateTitleTextFieldMask()
closeButton.isHidden = true
setupMuteOrUnmutedIcon()
}

override func viewDidLayout() {
super.viewDidLayout()

updateSubviews()
updateTitleTextFieldMask()
setupMuteOrUnmutedIcon()
}

override func viewWillDisappear() {
Expand Down Expand Up @@ -349,6 +345,7 @@ final class TabBarViewItem: NSCollectionViewItem {
mouseOverView.mouseOverColor = isSelected || isDragged ? NSColor.clear : NSColor.tabMouseOverColor
}

setupMuteOrUnmutedIcon()
let showCloseButton = (isMouseOver && !widthStage.isCloseButtonHidden) || isSelected
closeButton.isHidden = !showCloseButton
updateSeparatorView()
Expand Down Expand Up @@ -432,16 +429,32 @@ final class TabBarViewItem: NSCollectionViewItem {
}

private func setupMuteOrUnmutedIcon() {
setupMutedTabIconVisibility()
setupMutedTabIconColor()
setupMutedTabIconPosition()
}

private func setupMutedTabIconVisibility() {
switch delegate?.tabBarViewItemAudioState(self) {
case .muted:
mutedTabIcon.isHidden = false
default:
mutedTabIcon.isHidden = true
}
}

titleTextFieldTrailingConstraint.constant = mutedTabIcon.isHidden ? Constants.textFieldTrailingNoMuteIcon : Constants.textFieldTrailingMuteIconPresent
private func setupMutedTabIconColor() {
mutedTabIcon.image?.isTemplate = true
mutedTabIcon.contentTintColor = NSColor(named: "MutedTabIconColor")
}

private func setupMutedTabIconPosition() {
if !mutedTabIcon.isHidden {
titleTextFieldLeadingConstraint.constant = Constants.textFieldPaddingMuteIconPresent
} else {
titleTextFieldLeadingConstraint.constant = faviconWrapperView.isHidden ? Constants.textFieldPaddingNoFavicon : Constants.textFieldPadding
}
}
}

extension TabBarViewItem: NSMenuDelegate {
Expand Down
12 changes: 5 additions & 7 deletions DuckDuckGo/TabBar/View/TabBarViewItem.xib
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
<subviews>
<imageView hidden="YES" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="Dwg-SU-uiu" userLabel="Muted Tab Icon">
<rect key="frame" x="255" y="3" width="16.5" height="27"/>
<rect key="frame" x="36" y="9" width="16" height="16"/>
<constraints>
<constraint firstAttribute="height" constant="16" id="ILs-aB-D7E"/>
<constraint firstAttribute="width" constant="16" id="Qyf-Aw-VnE"/>
</constraints>
<imageCell key="cell" refusesFirstResponder="YES" alignment="left" imageScaling="proportionallyDown" image="NSTouchBarAudioOutputMuteTemplate" id="nSg-1b-1pf"/>
<imageCell key="cell" refusesFirstResponder="YES" alignment="left" imageScaling="proportionallyDown" image="Audio-Mute" id="nSg-1b-1pf"/>
</imageView>
<customView translatesAutoresizingMaskIntoConstraints="NO" id="jlg-2n-tzm" customClass="MouseOverView" customModule="DuckDuckGo_Privacy_Browser" customModuleProvider="target">
<rect key="frame" x="0.0" y="1" width="300" height="33"/>
Expand All @@ -29,7 +29,7 @@
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</customView>
<textField wantsLayer="YES" horizontalHuggingPriority="251" verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="DFD-8r-YGx" userLabel="Title Text Field">
<textField wantsLayer="YES" focusRingType="none" horizontalHuggingPriority="251" verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="DFD-8r-YGx" userLabel="Title Text Field">
<rect key="frame" x="30" y="9" width="264" height="16"/>
<constraints>
<constraint firstAttribute="height" constant="16" id="vWW-sG-CAf"/>
Expand Down Expand Up @@ -133,7 +133,6 @@
<constraints>
<constraint firstAttribute="trailing" secondItem="jlg-2n-tzm" secondAttribute="trailing" id="0eL-gX-odc"/>
<constraint firstItem="DFD-8r-YGx" firstAttribute="leading" secondItem="Hz6-mo-xeY" secondAttribute="leading" constant="32" id="4P8-mH-XGb"/>
<constraint firstItem="Dwg-SU-uiu" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="A6g-eG-dOW" secondAttribute="leading" constant="4" id="6RL-TB-P8q"/>
<constraint firstItem="XdB-Qn-iD9" firstAttribute="centerY" secondItem="Hz6-mo-xeY" secondAttribute="centerY" id="6wl-2B-Woa"/>
<constraint firstAttribute="trailing" secondItem="XdB-Qn-iD9" secondAttribute="trailing" priority="900" constant="8" id="BAO-r4-OkC"/>
<constraint firstItem="jlg-2n-tzm" firstAttribute="leading" secondItem="Hz6-mo-xeY" secondAttribute="leading" id="DOd-Y3-APh"/>
Expand All @@ -147,9 +146,9 @@
<constraint firstAttribute="bottom" secondItem="vuD-rY-Vzl" secondAttribute="bottom" constant="8" id="Pgs-Ex-Cp9"/>
<constraint firstItem="A6g-eG-dOW" firstAttribute="leading" secondItem="Hz6-mo-xeY" secondAttribute="leading" constant="8" id="TSx-41-S2A"/>
<constraint firstAttribute="trailing" secondItem="opQ-Od-dCO" secondAttribute="trailing" id="WPC-fb-K22"/>
<constraint firstItem="vuD-rY-Vzl" firstAttribute="leading" secondItem="Dwg-SU-uiu" secondAttribute="trailing" constant="4" id="XaB-33-dqa"/>
<constraint firstItem="A6g-eG-dOW" firstAttribute="centerY" secondItem="Hz6-mo-xeY" secondAttribute="centerY" id="aQg-CK-diJ"/>
<constraint firstItem="890-3t-v5O" firstAttribute="top" secondItem="Hz6-mo-xeY" secondAttribute="top" id="giH-0s-4s4"/>
<constraint firstItem="Dwg-SU-uiu" firstAttribute="leading" secondItem="A6g-eG-dOW" secondAttribute="trailing" constant="4" id="h0G-ek-exQ"/>
<constraint firstItem="vuD-rY-Vzl" firstAttribute="leading" secondItem="XdB-Qn-iD9" secondAttribute="trailing" constant="4" id="lqC-R5-KOi"/>
<constraint firstItem="DFD-8r-YGx" firstAttribute="centerY" secondItem="Hz6-mo-xeY" secondAttribute="centerY" id="oUc-dt-omj"/>
<constraint firstAttribute="trailing" secondItem="890-3t-v5O" secondAttribute="trailing" id="pJ6-DF-7Q7"/>
Expand All @@ -176,15 +175,14 @@
<outlet property="tabLoadingPermissionLeadingConstraint" destination="uNR-JN-6RT" id="r7F-38-4Nx"/>
<outlet property="titleTextField" destination="DFD-8r-YGx" id="6mj-b0-Oq3"/>
<outlet property="titleTextFieldLeadingConstraint" destination="4P8-mH-XGb" id="mKz-Wl-mQJ"/>
<outlet property="titleTextFieldTrailingConstraint" destination="L7J-mr-jLh" id="EfM-60-PKT"/>
<outlet property="view" destination="Hz6-mo-xeY" id="DwG-v1-cn3"/>
</connections>
</collectionViewItem>
</objects>
<resources>
<image name="Audio-Mute" width="12" height="12"/>
<image name="Camera-Tab-Active" width="16" height="12"/>
<image name="Close" width="16" height="16"/>
<image name="NSTouchBarAudioOutputMuteTemplate" width="17" height="20"/>
<namedColor name="ButtonColor">
<color red="0.28627450980392155" green="0.28627450980392155" blue="0.28627450980392155" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</namedColor>
Expand Down

0 comments on commit 294d859

Please sign in to comment.