terms: add partial scaling support
authorLukasz Stanislawski <lukasz.stanislawski@gmail.com>
Thu, 2 Jul 2020 08:41:20 +0000 (10:41 +0200)
committerLukasz Stanislawski <lukasz.stanislawski@gmail.com>
Thu, 2 Jul 2020 13:57:20 +0000 (15:57 +0200)
Now the terms page should be partially scalable across various
resolutions.

Change-Id: I77df6e82459e3ed9903ab261101366468c9ab5de

Oobe/Oobe.Common/Utils/Config.cs [new file with mode: 0644]
Oobe/Oobe.Terms/Views/TermsView.cs
Oobe/Oobe.Terms/res/Rectangle 861.svg [deleted file]

diff --git a/Oobe/Oobe.Common/Utils/Config.cs b/Oobe/Oobe.Common/Utils/Config.cs
new file mode 100644 (file)
index 0000000..252bebb
--- /dev/null
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2020 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI;
+
+namespace Oobe.Common.Utils
+{
+    /// <summary>
+    /// Helper class for Size2D conversion.
+    /// </summary>
+    public static class Config
+    {
+        /// <summary>
+        /// Horizontal scaling factor
+        /// </summary>
+        private static readonly float WIDTH_SCALE_FACTOR = Tizen.NUI.Window.Instance.WindowSize.Width / 1280.0f;
+
+        /// <summary>
+        /// Vertical scaling factor
+        /// </summary>
+        private static readonly float HEIGHT_SCALE_FACTOR = Tizen.NUI.Window.Instance.WindowSize.Height / 720.0f;
+
+        /// <summary>
+        /// Scale Size2D accoring to device screen size.
+        /// <returns>Scaled size</returns>
+        /// </summary>
+        public static Size2D ScaledSize(Size2D size)
+        {
+            return new Size2D((int)(size.Width * WIDTH_SCALE_FACTOR), (int)(size.Height * HEIGHT_SCALE_FACTOR));
+        }
+    }
+}
index 326cace..88b8f62 100644 (file)
@@ -22,6 +22,7 @@ using Tizen.NUI.Components;
 using Oobe.Terms.Model;
 using Oobe.Terms.Styles;
 using Oobe.Common.Layouts;
+using Oobe.Common.Utils;
 
 namespace Oobe.Terms.Views
 {
@@ -33,7 +34,7 @@ namespace Oobe.Terms.Views
         private Switch agreeSwitch;
         private TapGestureDetector tapGestureDetector;
         private ScrollableBase scroller;
-        private TextLabel content;
+        private TextLabel termsContent;
 
         private bool agreementCheckable;
         private bool nextEnabled;
@@ -46,33 +47,55 @@ namespace Oobe.Terms.Views
             Title.ParentOrigin = new Position(0.5f, 0.064f);
             Title.TranslatableText = "TERMS_AND_CONDITIONS";
 
-            View bounding = new View();
-            bounding.BackgroundImage = NUIApplication.Current.DirectoryInfo.Resource + "Rectangle 861.svg";
-            // subtract 6 pixels due to top/left offset in resource file
-            bounding.Position2D = new Position2D(56 - 6, 112 - 6);
-            bounding.Size2D = new Size2D(1086, 331);
+            View content = new View
+            {
+                Layout = new LinearLayout
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    CellPadding = new Size2D(0, 12),
+                },
+            };
 
-            scroller = new ScrollableBase{
-                Position2D = new Position2D(56, 136),
-                Size2D = new Size2D(1072, 264),
+            View bounding = new View
+            {
+                BackgroundColor = Color.White,
+                CornerRadius = 25.0f,
+                Size2D = CalculateTermsViewSize(),
+                Layout = new LinearLayout(),
+                Padding = new Extents(0, 0, 24, 24),
+            };
+
+            scroller = new ScrollableBase
+            {
                 Scrollbar = new Scrollbar(ScrollbarStyles.Default),
                 HideScrollBar = false,
+                WidthResizePolicy = ResizePolicyType.FillToParent,
+                HeightResizePolicy = ResizePolicyType.FillToParent,
+            };
+
+            var scrollerContent = new View
+            {
+                Padding = new Extents(64, 64, 0, 0),
+                WidthResizePolicy = ResizePolicyType.FillToParent,
+                HeightResizePolicy = ResizePolicyType.FitToChildren,
+                Layout = new LinearLayout(),
             };
 
             // Do not use style on content as it seriously impacts scrolling
             // performance on ScrollableBase
-            content = new TextLabel();
-            content.TextColor = new Color(0, 12.0f / 255.0f, 43.0f / 255.0f, 1.0f);
-            content.PixelSize = 18.0f;
-            content.FontFamily = "BreezeSans";
-            content.Text = terms.LoadTerms();
-            content.LineWrapMode = LineWrapMode.Character;
-            content.EnableMarkup = true;
-            content.Focusable = false;
-            content.MultiLine = true;
-            content.WidthResizePolicy = ResizePolicyType.FillToParent;
-
-            scroller.Add(content);
+            termsContent = new TextLabel();
+            termsContent.TextColor = new Color(0, 12.0f / 255.0f, 43.0f / 255.0f, 1.0f);
+            termsContent.PixelSize = 18.0f;
+            termsContent.FontFamily = "BreezeSans";
+            termsContent.Text = terms.LoadTerms();
+            termsContent.LineWrapMode = LineWrapMode.Character;
+            termsContent.EnableMarkup = true;
+            termsContent.Focusable = false;
+            termsContent.MultiLine = true;
+            termsContent.WidthResizePolicy = ResizePolicyType.FillToParent;
+
+            scrollerContent.Add(termsContent);
+            scroller.Add(scrollerContent);
             scroller.Scrolling += (object sender, ScrollEventArgs args) =>
             {
                 if (IsScrolledToLastPage(args.Position))
@@ -95,12 +118,11 @@ namespace Oobe.Terms.Views
             };
 
             TextLabel guide = new TextLabel(TextLabelStyles.GuideTextLabelStyle);
-            guide.Position2D = new Position2D(160, 440);
             guide.TranslatableText = "YOU_MUST_SCROLL_DOWN_AND_READ_THE_WHOLE_TEXT_ABOVE";
 
             agreeSwitch = new Switch(SwitchStyles.IHaveReadAndAgreeSwitchStyle);
             agreeSwitch.Size2D = new Size2D(24, 24);
-            agreeSwitch.Position2D = new Position2D(120, 463);
+            agreeSwitch.Margin = new Extents(0, 0, 0, 2);
             agreeSwitch.IsSelected = false;
             agreeSwitch.IsEnabled = false;
             agreeSwitch.ClickEvent += (obj, args) =>
@@ -111,13 +133,37 @@ namespace Oobe.Terms.Views
             agreeLabel = new TextLabel(TextLabelStyles.IHaveReadAndAgreeTextStyleDisabled);
             agreeLabel.State = States.Disabled;
             agreeLabel.TranslatableText = "I_HAVE_READ_AND_AGREE_TO_TERMS_AND_CONDITIONS";
-            agreeLabel.Position2D = new Position2D(160, 462);
 
-            this.Add(bounding);
-            this.Add(scroller);
-            this.Add(agreeSwitch);
-            this.Add(agreeLabel);
-            this.Add(guide);
+            var footnote = new View
+            {
+                Padding = new Extents(64, 64, 0, 0),
+                Layout = new LinearLayout
+                {
+                    LinearOrientation = LinearLayout.Orientation.Horizontal,
+                    LinearAlignment = LinearLayout.Alignment.Bottom,
+                    CellPadding = new Size2D(16, 0),
+                },
+            };
+
+            var ihaveread = new View
+            {
+                Layout = new LinearLayout
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    LinearAlignment = LinearLayout.Alignment.Bottom,
+                },
+            };
+
+            ihaveread.Add(guide);
+            ihaveread.Add(agreeLabel);
+            bounding.Add(scroller);
+            footnote.Add(agreeSwitch);
+            footnote.Add(ihaveread);
+
+            content.Add(bounding);
+            content.Add(footnote);
+
+            this.Content = content;
 
             AgreementCheckable = false;
             NextEnabled = false;
@@ -128,7 +174,8 @@ namespace Oobe.Terms.Views
             // after creation the size of scroller content is zero, so we
             // have to delay check to get proper measurements
             Timer timer = new Timer(1000);
-            timer.Tick += (sender, args) => {
+            timer.Tick += (sender, args) =>
+            {
                 if (IsScrolledToLastPage(new Position()))
                 {
                     AgreementCheckable = true;
@@ -203,9 +250,9 @@ namespace Oobe.Terms.Views
 
         private bool IsScrolledToLastPage(Position currentPos)
         {
-            if (scroller != null && content != null)
+            if (scroller != null && termsContent != null)
             {
-                if ((content.Position.Y + content.Size2D.Height - scroller.CurrentSize.Height) + currentPos.Y < 1.0f)
+                if ((termsContent.Position.Y + termsContent.Size2D.Height - scroller.CurrentSize.Height) + currentPos.Y < 1.0f)
                 {
                     return true;
                 }
@@ -225,6 +272,12 @@ namespace Oobe.Terms.Views
         {
             NextEnabled = !NextEnabled;
         }
+
+        private Size2D CalculateTermsViewSize()
+        {
+            var referenceTermsSize = new Size2D(1072, 316);
+            return Config.ScaledSize(referenceTermsSize);
+        }
     }
 
 }
diff --git a/Oobe/Oobe.Terms/res/Rectangle 861.svg b/Oobe/Oobe.Terms/res/Rectangle 861.svg
deleted file mode 100644 (file)
index 417124b..0000000
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1087" height="331" viewBox="0 0 1087 331">\r
-  <defs>\r
-    <filter id="Rectangle_861" x="0" y="0" width="1087" height="331" filterUnits="userSpaceOnUse">\r
-      <feOffset dx="1" dy="1" input="SourceAlpha"/>\r
-      <feGaussianBlur stdDeviation="2.5" result="blur"/>\r
-      <feFlood flood-opacity="0.161"/>\r
-      <feComposite operator="in" in2="blur"/>\r
-      <feComposite in="SourceGraphic"/>\r
-    </filter>\r
-  </defs>\r
-  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Rectangle_861)">\r
-    <rect id="Rectangle_861-2" data-name="Rectangle 861" width="1072" height="316" rx="28" transform="translate(6.5 6.5)" fill="#fff"/>\r
-  </g>\r
-</svg>\r