From a9dbf062652151aeb3125d0e61c95785b21f7c62 Mon Sep 17 00:00:00 2001 From: Austin Condiff Date: Thu, 26 Sep 2024 23:21:44 -0500 Subject: [PATCH] Added bold and italic to themes --- .../Models/TextEditingSettings.swift | 2 +- .../Pages/ThemeSettings/Models/Theme.swift | 32 ++++++++++++++- .../ThemeSettingsThemeDetails.swift | 40 ++++++++++++++----- .../ThemeSettingsThemeToken.swift | 34 ++++++++++++++-- DefaultThemes/Basic.cetheme | 3 +- DefaultThemes/Civic.cetheme | 3 +- DefaultThemes/Classic (Dark).cetheme | 3 +- DefaultThemes/Classic (Light).cetheme | 3 +- DefaultThemes/Default (Dark).cetheme | 3 +- DefaultThemes/Default (Light).cetheme | 3 +- DefaultThemes/Dusk.cetheme | 3 +- DefaultThemes/GitHub (Dark).cetheme | 3 +- DefaultThemes/GitHub (Light).cetheme | 3 +- DefaultThemes/High Contrast (Dark).cetheme | 3 +- DefaultThemes/High Contrast (Light).cetheme | 3 +- DefaultThemes/Low Key.cetheme | 3 +- DefaultThemes/Midnight.cetheme | 3 +- DefaultThemes/Presentation (Dark).cetheme | 3 +- DefaultThemes/Presentation (Light).cetheme | 3 +- DefaultThemes/Solarized (Dark).cetheme | 3 +- DefaultThemes/Solarized (Light).cetheme | 3 +- DefaultThemes/Sunset.cetheme | 3 +- 22 files changed, 129 insertions(+), 33 deletions(-) diff --git a/CodeEdit/Features/Settings/Pages/TextEditingSettings/Models/TextEditingSettings.swift b/CodeEdit/Features/Settings/Pages/TextEditingSettings/Models/TextEditingSettings.swift index bf74a1491..2dd23cdfc 100644 --- a/CodeEdit/Features/Settings/Pages/TextEditingSettings/Models/TextEditingSettings.swift +++ b/CodeEdit/Features/Settings/Pages/TextEditingSettings/Models/TextEditingSettings.swift @@ -158,7 +158,7 @@ extension SettingsData { var highlightType: HighlightType = .flash var useCustomColor: Bool = false /// The color to use for the highlight. - var color: Theme.Attributes = Theme.Attributes(color: "FFFFFF") + var color: Theme.Attributes = Theme.Attributes(color: "FFFFFF", bold: false, italic: false) enum HighlightType: String, Codable { case disabled diff --git a/CodeEdit/Features/Settings/Pages/ThemeSettings/Models/Theme.swift b/CodeEdit/Features/Settings/Pages/ThemeSettings/Models/Theme.swift index a71492015..01f50ad9c 100644 --- a/CodeEdit/Features/Settings/Pages/ThemeSettings/Models/Theme.swift +++ b/CodeEdit/Features/Settings/Pages/ThemeSettings/Models/Theme.swift @@ -112,9 +112,39 @@ extension Theme { /// The 24-bit hex string of the color (e.g. #123456) var color: String + var bold: Bool + var italic: Bool - init(color: String) { + init(color: String, bold: Bool = false, italic: Bool = false) { self.color = color + self.bold = bold + self.italic = italic + } + + init(from decoder: Decoder) throws { + let container = try decoder.container(keyedBy: CodingKeys.self) + self.color = try container.decode(String.self, forKey: .color) + self.bold = try container.decodeIfPresent(Bool.self, forKey: .bold) ?? false + self.italic = try container.decodeIfPresent(Bool.self, forKey: .italic) ?? false + } + + func encode(to encoder: Encoder) throws { + var container = encoder.container(keyedBy: CodingKeys.self) + try container.encode(color, forKey: .color) + + if bold { + try container.encode(bold, forKey: .bold) + } + + if italic { + try container.encode(italic, forKey: .italic) + } + } + + enum CodingKeys: String, CodingKey { + case color + case bold + case italic } /// The `SwiftUI` of ``color`` diff --git a/CodeEdit/Features/Settings/Pages/ThemeSettings/ThemeSettingsThemeDetails.swift b/CodeEdit/Features/Settings/Pages/ThemeSettings/ThemeSettingsThemeDetails.swift index 9ec3bb5f4..cd51bb756 100644 --- a/CodeEdit/Features/Settings/Pages/ThemeSettings/ThemeSettingsThemeDetails.swift +++ b/CodeEdit/Features/Settings/Pages/ThemeSettings/ThemeSettingsThemeDetails.swift @@ -71,52 +71,72 @@ struct ThemeSettingsThemeDetails: View { VStack(spacing: 0) { ThemeSettingsThemeToken( "Keywords", - color: $theme.editor.keywords.swiftColor + color: $theme.editor.keywords.swiftColor, + bold: $theme.editor.keywords.bold, + italic: $theme.editor.keywords.italic ) Divider().padding(.horizontal, 10) ThemeSettingsThemeToken( "Commands", - color: $theme.editor.commands.swiftColor + color: $theme.editor.commands.swiftColor, + bold: $theme.editor.commands.bold, + italic: $theme.editor.commands.italic ) Divider().padding(.horizontal, 10) ThemeSettingsThemeToken( "Types", - color: $theme.editor.types.swiftColor + color: $theme.editor.types.swiftColor, + bold: $theme.editor.types.bold, + italic: $theme.editor.types.italic ) Divider().padding(.horizontal, 10) ThemeSettingsThemeToken( "Attributes", - color: $theme.editor.attributes.swiftColor + color: $theme.editor.attributes.swiftColor, + bold: $theme.editor.attributes.bold, + italic: $theme.editor.attributes.italic ) Divider().padding(.horizontal, 10) ThemeSettingsThemeToken( "Variables", - color: $theme.editor.variables.swiftColor + color: $theme.editor.variables.swiftColor, + bold: $theme.editor.variables.bold, + italic: $theme.editor.variables.italic ) Divider().padding(.horizontal, 10) ThemeSettingsThemeToken( "Values", - color: $theme.editor.values.swiftColor + color: $theme.editor.values.swiftColor, + bold: $theme.editor.values.bold, + italic: $theme.editor.values.italic ) Divider().padding(.horizontal, 10) ThemeSettingsThemeToken( "Numbers", - color: $theme.editor.numbers.swiftColor + color: $theme.editor.numbers.swiftColor, + bold: $theme.editor.numbers.bold, + italic: $theme.editor.numbers.italic ) Divider().padding(.horizontal, 10) ThemeSettingsThemeToken( "Strings", - color: $theme.editor.strings.swiftColor + color: $theme.editor.strings.swiftColor, + bold: $theme.editor.strings.bold, + italic: $theme.editor.strings.italic ) Divider().padding(.horizontal, 10) ThemeSettingsThemeToken( "Characters", - color: $theme.editor.characters.swiftColor + color: $theme.editor.characters.swiftColor, + bold: $theme.editor.characters.bold, + italic: $theme.editor.characters.italic ) Divider().padding(.horizontal, 10) ThemeSettingsThemeToken( "Comments", - color: $theme.editor.comments.swiftColor + color: $theme.editor.comments.swiftColor, + bold: $theme.editor.comments.bold, + italic: $theme.editor.comments.italic ) } .background(theme.editor.background.swiftColor) diff --git a/CodeEdit/Features/Settings/Pages/ThemeSettings/ThemeSettingsThemeToken.swift b/CodeEdit/Features/Settings/Pages/ThemeSettings/ThemeSettingsThemeToken.swift index 06564fc7b..bc708c9c3 100644 --- a/CodeEdit/Features/Settings/Pages/ThemeSettings/ThemeSettingsThemeToken.swift +++ b/CodeEdit/Features/Settings/Pages/ThemeSettings/ThemeSettingsThemeToken.swift @@ -11,25 +11,53 @@ struct ThemeSettingsThemeToken: View { var label: String @Binding var color: Color + @Binding var bold: Bool + @Binding var italic: Bool @State private var selectedColor: Color + @State private var isHovering = false - init(_ label: String, color: Binding) { + init(_ label: String, color: Binding, bold: Binding, italic: Binding) { self.label = label self._color = color + self._bold = bold + self._italic = italic self._selectedColor = State(initialValue: color.wrappedValue) } var body: some View { LabeledContent { - ColorPicker(selection: $selectedColor, supportsOpacity: false) { } - .labelsHidden() + HStack(spacing: 20) { + HStack(spacing: 8) { + Toggle(isOn: $bold) { + Image(systemName: "bold") + } + .toggleStyle(.icon) + .help("Bold") + Divider() + .fixedSize() + Toggle(isOn: $italic) { + Image(systemName: "italic") + } + .toggleStyle(.icon) + .help("Italic") + } + .opacity(isHovering || bold || italic ? 1 : 0) + + ColorPicker(selection: $selectedColor, supportsOpacity: false) { } + .labelsHidden() + } } label: { Text(label) .font(.system(.body, design: .monospaced)) + .bold(bold) + .italic(italic) .foregroundStyle(color) } .padding(10) + .onHover { hovering in + isHovering = hovering + } .onChange(of: selectedColor) { newValue in color = newValue } diff --git a/DefaultThemes/Basic.cetheme b/DefaultThemes/Basic.cetheme index 7d93dcc8e..192e332e8 100644 --- a/DefaultThemes/Basic.cetheme +++ b/DefaultThemes/Basic.cetheme @@ -39,7 +39,8 @@ "color": "#000000" }, "keywords": { - "color": "#0433FF" + "color": "#0433FF", + "bold": true }, "attributes": { "color": "#000000" diff --git a/DefaultThemes/Civic.cetheme b/DefaultThemes/Civic.cetheme index d2d9fecf6..fbdc41a22 100644 --- a/DefaultThemes/Civic.cetheme +++ b/DefaultThemes/Civic.cetheme @@ -39,7 +39,8 @@ "color": "#00AAA3" }, "keywords": { - "color": "#E12DA0" + "color": "#E12DA0", + "bold": true }, "attributes": { "color": "#68878F" diff --git a/DefaultThemes/Classic (Dark).cetheme b/DefaultThemes/Classic (Dark).cetheme index 88bc68060..65cddb2ad 100644 --- a/DefaultThemes/Classic (Dark).cetheme +++ b/DefaultThemes/Classic (Dark).cetheme @@ -39,7 +39,8 @@ "color": "#D9C97C" }, "keywords": { - "color": "#FF7AB2" + "color": "#FF7AB2", + "bold": true }, "attributes": { "color": "#CC9768" diff --git a/DefaultThemes/Classic (Light).cetheme b/DefaultThemes/Classic (Light).cetheme index d07bb02c3..7c142b14e 100644 --- a/DefaultThemes/Classic (Light).cetheme +++ b/DefaultThemes/Classic (Light).cetheme @@ -39,7 +39,8 @@ "color": "#272AD8" }, "keywords": { - "color": "#AD3DA4" + "color": "#AD3DA4", + "bold": true }, "attributes": { "color": "#947100" diff --git a/DefaultThemes/Default (Dark).cetheme b/DefaultThemes/Default (Dark).cetheme index a765d581d..83da5f8df 100644 --- a/DefaultThemes/Default (Dark).cetheme +++ b/DefaultThemes/Default (Dark).cetheme @@ -39,7 +39,8 @@ "color": "#D9C97C" }, "keywords": { - "color": "#FF7AB2" + "color": "#FF7AB2", + "bold": true }, "attributes": { "color": "#CC9768" diff --git a/DefaultThemes/Default (Light).cetheme b/DefaultThemes/Default (Light).cetheme index 9151ec372..65ee6c326 100644 --- a/DefaultThemes/Default (Light).cetheme +++ b/DefaultThemes/Default (Light).cetheme @@ -39,7 +39,8 @@ "color": "#272AD8" }, "keywords": { - "color": "#AD3DA4" + "color": "#AD3DA4", + "bold": true }, "attributes": { "color": "#947100" diff --git a/DefaultThemes/Dusk.cetheme b/DefaultThemes/Dusk.cetheme index 3f5a00372..d227ab3ee 100644 --- a/DefaultThemes/Dusk.cetheme +++ b/DefaultThemes/Dusk.cetheme @@ -39,7 +39,8 @@ "color": "#8B84CF" }, "keywords": { - "color": "#C2349B" + "color": "#C2349B", + "bold": true }, "attributes": { "color": "#67878F" diff --git a/DefaultThemes/GitHub (Dark).cetheme b/DefaultThemes/GitHub (Dark).cetheme index c44cbd066..7ddd4cbad 100644 --- a/DefaultThemes/GitHub (Dark).cetheme +++ b/DefaultThemes/GitHub (Dark).cetheme @@ -39,7 +39,8 @@ "color": "#79C0FF" }, "keywords": { - "color": "#FF7B72" + "color": "#FF7B72", + "bold": true }, "attributes": { "color": "#79C0FF" diff --git a/DefaultThemes/GitHub (Light).cetheme b/DefaultThemes/GitHub (Light).cetheme index 284af3120..e7a99f7ed 100644 --- a/DefaultThemes/GitHub (Light).cetheme +++ b/DefaultThemes/GitHub (Light).cetheme @@ -39,7 +39,8 @@ "color": "#0550AE" }, "keywords": { - "color": "#CF222E" + "color": "#CF222E", + "bold": true }, "attributes": { "color": "#0550AE" diff --git a/DefaultThemes/High Contrast (Dark).cetheme b/DefaultThemes/High Contrast (Dark).cetheme index 19900df14..1befcd6a3 100644 --- a/DefaultThemes/High Contrast (Dark).cetheme +++ b/DefaultThemes/High Contrast (Dark).cetheme @@ -39,7 +39,8 @@ "color": "#D9C668" }, "keywords": { - "color": "#FF85B8" + "color": "#FF85B8", + "bold": true }, "attributes": { "color": "#E8B68B" diff --git a/DefaultThemes/High Contrast (Light).cetheme b/DefaultThemes/High Contrast (Light).cetheme index 0aa1ab96b..11c42988e 100644 --- a/DefaultThemes/High Contrast (Light).cetheme +++ b/DefaultThemes/High Contrast (Light).cetheme @@ -39,7 +39,8 @@ "color": "#272AD8" }, "keywords": { - "color": "#9C2191" + "color": "#9C2191", + "bold": true }, "attributes": { "color": "#6E5400" diff --git a/DefaultThemes/Low Key.cetheme b/DefaultThemes/Low Key.cetheme index 8e2b239af..c5c129b00 100644 --- a/DefaultThemes/Low Key.cetheme +++ b/DefaultThemes/Low Key.cetheme @@ -39,7 +39,8 @@ "color": "#323E7D" }, "keywords": { - "color": "#323E7D" + "color": "#323E7D", + "bold": true }, "attributes": { "color": "#255E22" diff --git a/DefaultThemes/Midnight.cetheme b/DefaultThemes/Midnight.cetheme index 52547fe47..fc42b0696 100644 --- a/DefaultThemes/Midnight.cetheme +++ b/DefaultThemes/Midnight.cetheme @@ -39,7 +39,8 @@ "color": "#8B87FF" }, "keywords": { - "color": "#DE38A6" + "color": "#DE38A6", + "bold": true }, "attributes": { "color": "#3B5AAB" diff --git a/DefaultThemes/Presentation (Dark).cetheme b/DefaultThemes/Presentation (Dark).cetheme index 6bb8ef222..0a704dc6c 100644 --- a/DefaultThemes/Presentation (Dark).cetheme +++ b/DefaultThemes/Presentation (Dark).cetheme @@ -39,7 +39,8 @@ "color": "#FFEA80" }, "keywords": { - "color": "#F7439D" + "color": "#F7439D", + "bold": true }, "attributes": { "color": "#E7AD78" diff --git a/DefaultThemes/Presentation (Light).cetheme b/DefaultThemes/Presentation (Light).cetheme index 7cf3a4f06..b9b4446f6 100644 --- a/DefaultThemes/Presentation (Light).cetheme +++ b/DefaultThemes/Presentation (Light).cetheme @@ -39,7 +39,8 @@ "color": "#0435FF" }, "keywords": { - "color": "#C32275" + "color": "#C32275", + "bold": true }, "attributes": { "color": "#967E34" diff --git a/DefaultThemes/Solarized (Dark).cetheme b/DefaultThemes/Solarized (Dark).cetheme index ac3d7afd4..549b20b93 100644 --- a/DefaultThemes/Solarized (Dark).cetheme +++ b/DefaultThemes/Solarized (Dark).cetheme @@ -39,7 +39,8 @@ "color": "#DC322F" }, "keywords": { - "color": "#859900" + "color": "#859900", + "bold": true }, "attributes": { "color": "#6C71C4" diff --git a/DefaultThemes/Solarized (Light).cetheme b/DefaultThemes/Solarized (Light).cetheme index 0ef0d1912..69ec38c23 100644 --- a/DefaultThemes/Solarized (Light).cetheme +++ b/DefaultThemes/Solarized (Light).cetheme @@ -39,7 +39,8 @@ "color": "#DC322F" }, "keywords": { - "color": "#859900" + "color": "#859900", + "bold": true }, "attributes": { "color": "#6C71C4" diff --git a/DefaultThemes/Sunset.cetheme b/DefaultThemes/Sunset.cetheme index 8ef9b7402..af765aae2 100644 --- a/DefaultThemes/Sunset.cetheme +++ b/DefaultThemes/Sunset.cetheme @@ -39,7 +39,8 @@ "color": "#35568A" }, "keywords": { - "color": "#35568A" + "color": "#35568A", + "bold": true }, "attributes": { "color": "#3A48AD"