Merge pull request #5 from jhrcook/spinner

New Spinner Design
jhrcook · Nov 9, 2020 · 9853e47 · 9853e47
2 parents 4e38c66 + a90cbfa
commit 9853e47
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 34 deletions.
diff --git a/Workout Spinner WatchKit App/Info.plist b/Workout Spinner WatchKit App/Info.plist
@@ -19,7 +19,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>1.0</string>
 	<key>CFBundleVersion</key>
-	<string>161</string>
+	<string>199</string>
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>

diff --git a/Workout Spinner WatchKit Extension/Info.plist b/Workout Spinner WatchKit Extension/Info.plist
@@ -19,7 +19,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>1.0</string>
 	<key>CFBundleVersion</key>
-	<string>161</string>
+	<string>199</string>
 	<key>CLKComplicationPrincipalClass</key>
 	<string>$(PRODUCT_MODULE_NAME).ComplicationController</string>
 	<key>CLKComplicationSupportedFamilies</key>

diff --git a/Workout Spinner WatchKit Extension/Views/ExercisePicker.swift b/Workout Spinner WatchKit Extension/Views/ExercisePicker.swift
@@ -34,45 +34,72 @@ struct ExercisePicker: View {
     }
 
     var body: some View {
-        VStack(spacing: 0) {
-            Spacer(minLength: 0)
-            GeometryReader { geo in
-                ZStack {
+        ZStack {
+            VStack(spacing: 0) {
+                Spacer(minLength: 0)
+                GeometryReader { geo in
                     ZStack {
-                        ForEach(0..<self.numExercises) { i in
-                            SpinnerSlice(idx: i,
-                                         numberOfSlices: self.numExercises,
-                                         width: geo.minSize)
+                        ZStack {
+                            ForEach(0..<self.numExercises) { i in
+                                SpinnerSlice(idx: i,
+                                             numberOfSlices: self.numExercises,
+                                             width: geo.minSize * 2.0)
+                            }
+                            ForEach(0..<self.numExercises) { i in
+                                WorkoutSlice(workoutInfo: self.exerciseOptions.workouts[i],
+                                             idx: i,
+                                             numberOfWorkouts: self.numExercises,
+                                             size: geo.minSize * 2.0)
+                            }
                         }
-                        ForEach(0..<self.numExercises) { i in
-                            WorkoutSlice(workoutInfo: self.exerciseOptions.workouts[i],
-                                         idx: i,
-                                         numberOfWorkouts: self.numExercises,
-                                         size: geo.minSize)
+                        .modifier(SpinnerRotationModifier(rotation: .degrees(self.spinDirection * self.crownRotation),
+                                                          onFinishedRotationAnimation: self.rotationEffectDidFinish))
+                        .animation(.default)
+
+
+                        HStack {
+                            SpinnerPointer().frame(width: 20, height: 15)
+                            Spacer()
                         }
                     }
-                    .modifier(SpinnerRotationModifier(rotation: .degrees(self.spinDirection * self.crownRotation),
-                                                      onFinishedRotationAnimation: self.rotationEffectDidFinish))
-                    .animation(.default)
-
-
-                    HStack {
-                        SpinnerPointer().frame(width: 20, height: 15)
-                        Spacer()
-                    }
-
+                    .frame(width: geo.minSize * 2, height: geo.minSize * 2, alignment: .center)
+                    .offset(x: 0, y: geo.minSize / -2.0)
                 }
+                .edgesIgnoringSafeArea(.bottom)
+                .padding(0)
+                .focusable()
+                .digitalCrownRotation(self.$crownRotation)
+                .onReceive(Just(crownRotation), perform: crownRotationDidChange)
+            }
+
+            VStack {
+                BlurredBar(height: 10, blurRadius: 4, isTop: true)
+                    .padding(EdgeInsets(top: 0, leading: -50, bottom: 0, trailing: -50))
+                Spacer()
+                BlurredBar(height: 10, blurRadius: 4, isTop: false)
+                    .padding(EdgeInsets(top: 0, leading: -50, bottom: 0, trailing: -50))
             }
             .edgesIgnoringSafeArea(.bottom)
-            .padding(0)
-            .focusable()
-            .digitalCrownRotation(self.$crownRotation)
-            .onReceive(Just(crownRotation), perform: crownRotationDidChange)
         }
     }
 }
 
 
+struct BlurredBar: View {
+    let height: CGFloat
+    let blurRadius: CGFloat
+    let isTop: Bool
+
+    var body: some View {
+        Color.black
+            .padding(0)
+            .frame(height: height)
+            .offset(x: 0, y: height / 2 * (isTop ? -1 : 1))
+            .blur(radius: blurRadius, opaque: false)
+    }
+}
+
+
 
 struct WorkoutPicker_Previews: PreviewProvider {
     static var previews: some View {

diff --git a/Workout Spinner WatchKit Extension/Views/Spinner Subviews/SpinnerSlice.swift b/Workout Spinner WatchKit Extension/Views/Spinner Subviews/SpinnerSlice.swift
@@ -42,11 +42,13 @@ struct SpinnerSlice: View {
 
     var body: some View {
         ZStack {
+            Color.darkGray
+                .clipShape(SpinnerSliceShape(radius: width / 2.0, angle: sliceAngle))
             SpinnerSliceShape(radius: width / 2.0, angle: sliceAngle)
+                .stroke(Color.gray, lineWidth: 3)
                 .frame(width: width, height: width)
-                .foregroundColor(Color.randomPastelColor())
-                .rotationEffect(rotationAngle)
         }
+        .rotationEffect(rotationAngle)
     }
 }
 

diff --git a/Workout Spinner WatchKit Extension/Views/Spinner Subviews/WorkoutSlice.swift b/Workout Spinner WatchKit Extension/Views/Spinner Subviews/WorkoutSlice.swift
@@ -26,11 +26,12 @@ struct WorkoutSlice: View {
 
     var body: some View {
         Text(workoutInfo.displayName)
-            .font(.system(.footnote))
-            .foregroundColor(.black)
+            .rotationEffect(.degrees(180))
+            .font(.system(size: 20))
+            .foregroundColor(.white)
             .lineLimit(1)
+            .padding(.horizontal, 5)
             .frame(width: size / 2 - offset, height: nil, alignment: .trailing)
-            .padding(2)
             .offset(x: size / 4 + halfOffset, y: 0)
             .rotationEffect(rotationAngle)
     }