Fix chart range slider theming

2025-06-16 05:55:20 +00:00 · 2020-03-23 16:17:34 +04:00 · 2020-03-23 16:17:34 +04:00 · bd1d7f58d4
commit bd1d7f58d4
parent 66f5d741db
7 changed files with 47 additions and 193 deletions
--- a/submodules/GraphCore/Sources/Models/ColorMode.swift
+++ b/submodules/GraphCore/Sources/Models/ColorMode.swift
@ -41,8 +41,9 @@ public class ChartTheme {
    public let rangeViewTintColor: GColor
    public let rangeViewFrameColor: GColor
    public let rangeViewMarkerColor: GColor
+    public let rangeCropImage: GImage?
    
-    public init(chartTitleColor: GColor, actionButtonColor: GColor, chartBackgroundColor: GColor, chartLabelsColor: GColor, chartHelperLinesColor: GColor, chartStrongLinesColor: GColor, barChartStrongLinesColor: GColor, chartDetailsTextColor: GColor, chartDetailsArrowColor: GColor, chartDetailsViewColor: GColor, rangeViewFrameColor: GColor, rangeViewTintColor: GColor, rangeViewMarkerColor: GColor) {
+    public init(chartTitleColor: GColor, actionButtonColor: GColor, chartBackgroundColor: GColor, chartLabelsColor: GColor, chartHelperLinesColor: GColor, chartStrongLinesColor: GColor, barChartStrongLinesColor: GColor, chartDetailsTextColor: GColor, chartDetailsArrowColor: GColor, chartDetailsViewColor: GColor, rangeViewFrameColor: GColor, rangeViewTintColor: GColor, rangeViewMarkerColor: GColor, rangeCropImage: GImage?) {
        self.chartTitleColor = chartTitleColor
        self.actionButtonColor = actionButtonColor
        self.chartBackgroundColor = chartBackgroundColor
@ -56,27 +57,11 @@ public class ChartTheme {
        self.rangeViewFrameColor = rangeViewFrameColor
        self.rangeViewTintColor = rangeViewTintColor
        self.rangeViewMarkerColor = rangeViewMarkerColor
+        self.rangeCropImage = rangeCropImage
    }
    
-    public static var defaultDayTheme = ChartTheme(chartTitleColor: GColor.black, actionButtonColor: GColor(red: 53/255.0, green: 120/255.0, blue: 246/255.0, alpha: 1.0), chartBackgroundColor: GColor(red: 254/255.0, green: 254/255.0, blue: 254/255.0, alpha: 1.0), chartLabelsColor: GColor(red: 37/255.0, green: 37/255.0, blue: 41/255.0, alpha: 0.5), chartHelperLinesColor: GColor(red: 24/255.0, green: 45/255.0, blue: 59/255.0, alpha: 0.1), chartStrongLinesColor: GColor(red: 24/255.0, green: 45/255.0, blue: 59/255.0, alpha: 0.35), barChartStrongLinesColor: GColor(red: 37/255.0, green: 37/255.0, blue: 41/255.0, alpha: 0.2), chartDetailsTextColor: GColor(red: 109/255.0, green: 109/255.0, blue: 114/255.0, alpha: 1.0), chartDetailsArrowColor: GColor(red: 197/255.0, green: 199/255.0, blue: 205/255.0, alpha: 1.0), chartDetailsViewColor: GColor(red: 245/255.0, green: 245/255.0, blue: 251/255.0, alpha: 1.0), rangeViewFrameColor: GColor(red: 202/255.0, green: 212/255.0, blue: 222/255.0, alpha: 1.0), rangeViewTintColor: GColor(red: 239/255.0, green: 239/255.0, blue: 244/255.0, alpha: 0.5), rangeViewMarkerColor: GColor.white)
+    public static var defaultDayTheme = ChartTheme(chartTitleColor: GColor.black, actionButtonColor: GColor(red: 53/255.0, green: 120/255.0, blue: 246/255.0, alpha: 1.0), chartBackgroundColor: GColor(red: 254/255.0, green: 254/255.0, blue: 254/255.0, alpha: 1.0), chartLabelsColor: GColor(red: 37/255.0, green: 37/255.0, blue: 41/255.0, alpha: 0.5), chartHelperLinesColor: GColor(red: 24/255.0, green: 45/255.0, blue: 59/255.0, alpha: 0.1), chartStrongLinesColor: GColor(red: 24/255.0, green: 45/255.0, blue: 59/255.0, alpha: 0.35), barChartStrongLinesColor: GColor(red: 37/255.0, green: 37/255.0, blue: 41/255.0, alpha: 0.2), chartDetailsTextColor: GColor(red: 109/255.0, green: 109/255.0, blue: 114/255.0, alpha: 1.0), chartDetailsArrowColor: GColor(red: 197/255.0, green: 199/255.0, blue: 205/255.0, alpha: 1.0), chartDetailsViewColor: GColor(red: 245/255.0, green: 245/255.0, blue: 251/255.0, alpha: 1.0), rangeViewFrameColor: GColor(red: 202/255.0, green: 212/255.0, blue: 222/255.0, alpha: 1.0), rangeViewTintColor: GColor(red: 239/255.0, green: 239/255.0, blue: 244/255.0, alpha: 0.5), rangeViewMarkerColor: GColor.white, rangeCropImage: GImage(named: "selection_frame_light"))

    
-    public static var defaultNightTheme = ChartTheme(chartTitleColor: GColor.white, actionButtonColor: GColor(red: 84/255.0, green: 164/255.0, blue: 247/255.0, alpha: 1.0), chartBackgroundColor: GColor(red: 34/255.0, green: 47/255.0, blue: 63/255.0, alpha: 1.0), chartLabelsColor: GColor(red: 186/255.0, green: 204/255.0, blue: 225/255.0, alpha: 0.6), chartHelperLinesColor: GColor(red: 133/255.0, green: 150/255.0, blue: 171/255.0, alpha: 0.20), chartStrongLinesColor: GColor(red: 186/255.0, green: 204/255.0, blue: 225/255.0, alpha: 0.45), barChartStrongLinesColor: GColor(red: 186/255.0, green: 204/255.0, blue: 225/255.0, alpha: 0.45), chartDetailsTextColor: GColor(red: 254/255.0, green: 254/255.0, blue: 254/255.0, alpha: 1.0), chartDetailsArrowColor: GColor(red: 76/255.0, green: 84/255.0, blue: 96/255.0, alpha: 1.0), chartDetailsViewColor: GColor(red: 25/255.0, green: 35/255.0, blue: 47/255.0, alpha: 1.0), rangeViewFrameColor: GColor(red: 53/255.0, green: 70/255.0, blue: 89/255.0, alpha: 1.0), rangeViewTintColor: GColor(red: 24/255.0, green: 34/255.0, blue: 45/255.0, alpha: 0.5), rangeViewMarkerColor: GColor.white)
-    
-    public var rangeCropImage: GImage? {
-//        case .day:
-            let image = GImage(named: "selection_frame_light")
-            #if os(macOS)
-            image?.resizingMode = .stretch
-            image?.capInsets = NSEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)
-            #endif
-            return image
-//        case .night:
-//            let image = GImage(named: "selection_frame_dark")
-//            #if os(macOS)
-//            image?.resizingMode = .stretch
-//            image?.capInsets = NSEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)
-//            #endif
-//            return image
-    }
+    public static var defaultNightTheme = ChartTheme(chartTitleColor: GColor.white, actionButtonColor: GColor(red: 84/255.0, green: 164/255.0, blue: 247/255.0, alpha: 1.0), chartBackgroundColor: GColor(red: 34/255.0, green: 47/255.0, blue: 63/255.0, alpha: 1.0), chartLabelsColor: GColor(red: 186/255.0, green: 204/255.0, blue: 225/255.0, alpha: 0.6), chartHelperLinesColor: GColor(red: 133/255.0, green: 150/255.0, blue: 171/255.0, alpha: 0.20), chartStrongLinesColor: GColor(red: 186/255.0, green: 204/255.0, blue: 225/255.0, alpha: 0.45), barChartStrongLinesColor: GColor(red: 186/255.0, green: 204/255.0, blue: 225/255.0, alpha: 0.45), chartDetailsTextColor: GColor(red: 254/255.0, green: 254/255.0, blue: 254/255.0, alpha: 1.0), chartDetailsArrowColor: GColor(red: 76/255.0, green: 84/255.0, blue: 96/255.0, alpha: 1.0), chartDetailsViewColor: GColor(red: 25/255.0, green: 35/255.0, blue: 47/255.0, alpha: 1.0), rangeViewFrameColor: GColor(red: 53/255.0, green: 70/255.0, blue: 89/255.0, alpha: 1.0), rangeViewTintColor: GColor(red: 24/255.0, green: 34/255.0, blue: 45/255.0, alpha: 0.5), rangeViewMarkerColor: GColor.white, rangeCropImage: GImage(named: "selection_frame_light"))
 }
--- a/submodules/GraphUI/Sources/ChartNode.swift
+++ b/submodules/GraphUI/Sources/ChartNode.swift
@ -19,7 +19,47 @@ public enum ChartType {

 public extension ChartTheme {    
    convenience init(presentationTheme: PresentationTheme) {
-        self.init(chartTitleColor: presentationTheme.list.itemPrimaryTextColor, actionButtonColor: presentationTheme.list.itemAccentColor, chartBackgroundColor: presentationTheme.list.itemBlocksBackgroundColor, chartLabelsColor: presentationTheme.chart.labelsColor, chartHelperLinesColor: presentationTheme.chart.helperLinesColor, chartStrongLinesColor: presentationTheme.chart.strongLinesColor, barChartStrongLinesColor: presentationTheme.chart.barStrongLinesColor, chartDetailsTextColor: presentationTheme.chart.detailsTextColor, chartDetailsArrowColor: presentationTheme.chart.detailsArrowColor, chartDetailsViewColor: presentationTheme.chart.detailsViewColor, rangeViewFrameColor: presentationTheme.chart.rangeViewFrameColor, rangeViewTintColor: presentationTheme.list.blocksBackgroundColor.withAlphaComponent(0.5), rangeViewMarkerColor: presentationTheme.chart.rangeViewMarkerColor)
+        let rangeViewFrameColor = presentationTheme.chart.rangeViewFrameColor
+        let rangeViewMarkerColor = presentationTheme.chart.rangeViewMarkerColor
+        
+        let rangeImage = generateImage(CGSize(width: 114.0, height: 42.0), rotatedContext: { size, context in
+            let bounds = CGRect(origin: CGPoint(), size: size)
+            context.clear(bounds)
+            
+            context.setFillColor(rangeViewFrameColor.cgColor)
+            var path = UIBezierPath.init(roundedRect: CGRect(x: 0.0, y: 0.0, width: 11.0, height: 42.0), byRoundingCorners: [.topLeft, .bottomLeft], cornerRadii: CGSize(width: 6.0, height: 6.0))
+            context.addPath(path.cgPath)
+            context.fillPath()
+            
+            path = UIBezierPath.init(roundedRect: CGRect(x: 103.0, y: 0.0, width: 11.0, height: 42.0), byRoundingCorners: [.topRight, .bottomRight], cornerRadii: CGSize(width: 6.0, height: 6.0))
+            context.addPath(path.cgPath)
+            context.fillPath()
+            
+            context.setFillColor(rangeViewFrameColor.cgColor)
+            context.fill(CGRect(x: 7.0, y: 0.0, width: 4.0, height: 1.0))
+            context.fill(CGRect(x: 7.0, y: 41.0, width: 4.0, height: 1.0))
+            
+            context.fill(CGRect(x: 107.0, y: 0.0, width: 4.0, height: 1.0))
+            context.fill(CGRect(x: 107.0, y: 41.0, width: 4.0, height: 1.0))
+            
+            context.fill(CGRect(x: 11.0, y: 0.0, width: 81.0, height: 1.0))
+            context.fill(CGRect(x: 11.0, y: 41.0, width: 81.0, height: 1.0))
+            
+            context.setLineCap(.round)
+            context.setLineWidth(1.5)
+            context.setStrokeColor(rangeViewMarkerColor.cgColor)
+            context.move(to: CGPoint(x: 7.0, y: 17.0))
+            context.addLine(to: CGPoint(x: 4.0, y: 21.0))
+            context.addLine(to: CGPoint(x: 7.0, y: 25.0))
+            context.strokePath()
+            
+            context.move(to: CGPoint(x: 107.0, y: 17.0))
+            context.addLine(to: CGPoint(x: 110.0, y: 21.0))
+            context.addLine(to: CGPoint(x: 107.0, y: 25.0))
+            context.strokePath()
+        })?.resizableImage(withCapInsets: UIEdgeInsets(top: 15.0, left: 15.0, bottom: 15.0, right: 15.0), resizingMode: .stretch)
+        
+        self.init(chartTitleColor: presentationTheme.list.itemPrimaryTextColor, actionButtonColor: presentationTheme.list.itemAccentColor, chartBackgroundColor: presentationTheme.list.itemBlocksBackgroundColor, chartLabelsColor: presentationTheme.chart.labelsColor, chartHelperLinesColor: presentationTheme.chart.helperLinesColor, chartStrongLinesColor: presentationTheme.chart.strongLinesColor, barChartStrongLinesColor: presentationTheme.chart.barStrongLinesColor, chartDetailsTextColor: presentationTheme.chart.detailsTextColor, chartDetailsArrowColor: presentationTheme.chart.detailsArrowColor, chartDetailsViewColor: presentationTheme.chart.detailsViewColor, rangeViewFrameColor: rangeViewFrameColor, rangeViewTintColor: presentationTheme.list.blocksBackgroundColor.withAlphaComponent(0.5), rangeViewMarkerColor: rangeViewMarkerColor, rangeCropImage: rangeImage)
    }
 }

--- a/submodules/GraphUI/Sources/RangeChartView.swift
+++ b/submodules/GraphUI/Sources/RangeChartView.swift
@ -316,9 +316,7 @@ extension RangeChartView: ChartThemeContainer {
            self.upperBoundTintView.backgroundColor = theme.rangeViewTintColor
        }
        
-        
-        let image = UIImage(bundleImageName: "Chart/selection_frame_light")
-        self.cropFrameView.setImage(image, animated: animated)
+        self.cropFrameView.setImage(theme.rangeCropImage, animated: animated)
        
        if animated {
            UIView.animate(withDuration: .defaultDuration, animations: closure)
--- a/submodules/TelegramUI/Images.xcassets/Chart/selection_frame_dark.imageset/Contents.json
+++ b/submodules/TelegramUI/Images.xcassets/Chart/selection_frame_dark.imageset/Contents.json
@ -1,23 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "filename" : "selection_frame_dark.pdf",
-      "resizing" : {
-        "mode" : "3-part-horizontal",
-        "center" : {
-          "mode" : "stretch",
-          "width" : 1
-        },
-        "cap-insets" : {
-          "right" : 11,
-          "left" : 11
-        }
-      }
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}
--- a/submodules/TelegramUI/Images.xcassets/Chart/selection_frame_dark.imageset/selection_frame_dark.pdf
+++ b/submodules/TelegramUI/Images.xcassets/Chart/selection_frame_dark.imageset/selection_frame_dark.pdf
@ -1,61 +0,0 @@
-%PDF-1.4
-%Óëéá
-1 0 obj
-<</Producer (Adobe XD)
-/ProductionLibrary (Skia/PDF m69)>>
-endobj
-2 0 obj
-<</Filter /FlateDecode
-/Length 323>> stream
-xœ<EFBFBD>’MN1…÷9…×HìØùñ	º.,8ÀÊbŠD{	'ÓvBZ$&Ò(zvü9Î#@[ÙOÌG÷íª@$£ÉmàôîÞžàËyæž‹€—<E282AC>áeƒr:¸çÂáì³×ú…kÊptiÚ©‹>)å Ô©SÝ JŒ¢)	°zÆKº<4B>´¢Hf7Æ.<£Œ±Ulü5…(eÌz;ní<0E>¹¿à[µfsc×éwøNÜú5Â&oW\~É·™tÄm„ß`vŸÖ{Õ*CK°þŠ=N'Õ|¡T<C2A1>ªžˆþ’[ŠRšü öbÐ35ÏL¡d‚Õvu™—ÖM³U±²ÏD-=°1‰X—¬Ù×<C399>²ÉT¼a«ß'Û€²°™zq¯nßc¹¨M=ÄÿÀ<C3BF>"Xîà+&
ð-y€ïÝKSª²
-endstream
-endobj
-3 0 obj
-<</Type /Catalog
-/Pages 4 0 R>>
-endobj
-4 0 obj
-<</Type /Pages
-/Count 1
-/Kids [5 0 R]>>
-endobj
-5 0 obj
-<</Type /Page
-/Resources <</ProcSets [/PDF /Text /ImageB /ImageC /ImageI]
-/ExtGState <</G0 6 0 R
-/G1 7 0 R>>>>
-/MediaBox [0 0 114 42]
-/Contents 2 0 R
-/Parent 4 0 R>>
-endobj
-6 0 obj
-<</ca 1
-/BM /Normal>>
-endobj
-7 0 obj
-<</CA 1
-/ca 1
-/LC 1
-/LJ 1
-/LW 1.5
-/ML 4
-/SA true
-/BM /Normal>>
-endobj
-xref
-0 8
-0000000000 65535 f 
-0000000015 00000 n 
-0000000089 00000 n 
-0000000482 00000 n 
-0000000529 00000 n 
-0000000584 00000 n 
-0000000765 00000 n 
-0000000802 00000 n 
-trailer
-<</Size 8
-/Root 3 0 R
-/Info 1 0 R>>
-startxref
-880
-%%EOF
--- a/submodules/TelegramUI/Images.xcassets/Chart/selection_frame_light.imageset/Contents.json
+++ b/submodules/TelegramUI/Images.xcassets/Chart/selection_frame_light.imageset/Contents.json
@ -1,23 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "filename" : "selection_frame_light.pdf",
-      "resizing" : {
-        "mode" : "3-part-horizontal",
-        "center" : {
-          "mode" : "stretch",
-          "width" : 1
-        },
-        "cap-insets" : {
-          "right" : 11,
-          "left" : 11
-        }
-      }
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}
--- a/submodules/TelegramUI/Images.xcassets/Chart/selection_frame_light.imageset/selection_frame_light.pdf
+++ b/submodules/TelegramUI/Images.xcassets/Chart/selection_frame_light.imageset/selection_frame_light.pdf
@ -1,62 +0,0 @@
-%PDF-1.4
-%Óëéá
-1 0 obj
-<</Producer (Adobe XD)
-/ProductionLibrary (Skia/PDF m69)>>
-endobj
-2 0 obj
-<</Filter /FlateDecode
-/Length 323>> stream
-xœ<EFBFBD>’ÏNÃ0Æï~
-Ÿ‘ìÄùã'Øypà*‡‰ñþNºY6$5Š¾ÏõÏuÌH¶&¶M<ÎGø†*0‹#¢@Ñävòxz‡·'ü—c@W¼½¶½ìðV8àyGxø¦ì´>þ’„3!™U;uï’röÂ<C3B6>:Õ‘Ä(š’`P¨Ä’î<E28099>–”8â£wæ±eôÎT-¸ñ×æ”)ëõs+w0æþofnÅæ2z—Þrèð<C3A8>¸Õk„MÞ~q¹‘¯=éˆ[ÞÁŸV{Õ©]]õ¾b—ÓÉÂ5^8U ùª'æ¿ä–„£”&?È½ôÃÆ‹ÛÄ1N¾dôBuèë²QZm„¸ŽPÐà2{Q÷Áù˜D¬Ê ÙÕ†“¹8-,l
Êl¤x…}<7D>
Eë>þn¡r_1i€oÁ|¿BªV
-endstream
-endobj
-3 0 obj
-<</Type /Catalog
-/Pages 4 0 R>>
-endobj
-4 0 obj
-<</Type /Pages
-/Count 1
-/Kids [5 0 R]>>
-endobj
-5 0 obj
-<</Type /Page
-/Resources <</ProcSets [/PDF /Text /ImageB /ImageC /ImageI]
-/ExtGState <</G0 6 0 R
-/G1 7 0 R>>>>
-/MediaBox [0 0 114 42]
-/Contents 2 0 R
-/Parent 4 0 R>>
-endobj
-6 0 obj
-<</ca 1
-/BM /Normal>>
-endobj
-7 0 obj
-<</CA 1
-/ca 1
-/LC 1
-/LJ 1
-/LW 1.5
-/ML 4
-/SA true
-/BM /Normal>>
-endobj
-xref
-0 8
-0000000000 65535 f 
-0000000015 00000 n 
-0000000089 00000 n 
-0000000482 00000 n 
-0000000529 00000 n 
-0000000584 00000 n 
-0000000765 00000 n 
-0000000802 00000 n 
-trailer
-<</Size 8
-/Root 3 0 R
-/Info 1 0 R>>
-startxref
-880
-%%EOF