Merge branch 'view' into UI_2.0

2023-10-12 00:21:27 +09:00
parent 1a7cf32dc6 3e6bce367c
commit 475da85b51
15 changed files with 133 additions and 63 deletions
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -26,6 +26,7 @@ selectable_language_window:

 config_window:
  config_title: Settings
+  compact_mode: Compact Mode
  side_menu_labels:
    appearance: Appearance
    translation: Translation
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -27,6 +27,7 @@ selectable_language_window:

 config_window:
  config_title: 設定
+  compact_mode: コンパクトモード
  side_menu_labels:
    appearance: デザイン
    translation: 翻訳
--- a/view.py
+++ b/view.py
@@ -137,6 +137,7 @@ class View():
            VAR_ERROR_MESSAGE=StringVar(value=""),
            VAR_VERSION=StringVar(value=config.VERSION),
            VAR_CONFIG_WINDOW_TITLE=StringVar(value=i18n.t("config_window.config_title")),
+            VAR_CONFIG_WINDOW_COMPACT_MODE_LABEL=StringVar(value=i18n.t("config_window.compact_mode")),


            # Side Menu Labels
--- a/vrct_gui/_CreateDropdownMenuWindow.py
+++ b/vrct_gui/_CreateDropdownMenuWindow.py
@@ -3,7 +3,7 @@ from types import SimpleNamespace
 from customtkinter import CTkToplevel, CTkFrame, CTkLabel, CTkFont, CTkScrollableFrame
 from time import sleep

-from .ui_utils import bindButtonReleaseFunction, bindEnterAndLeaveColor, bindButtonPressColor, getLatestWidth, getLatestHeight
+from .ui_utils import bindButtonReleaseFunction, bindEnterAndLeaveColor, bindButtonPressColor, getLatestWidth, getLatestHeight, applyUiScalingAndFixTheBugScrollBar
 from functools import partial

 from utils import isEven, makeEven
@@ -126,7 +126,6 @@ class _CreateDropdownMenuWindow(CTkToplevel):
            border_width=0,
        )
        self.scroll_frame_container.grid(row=0, column=0, padx=BORDER_WIDTH, pady=BORDER_WIDTH, sticky="nsew")
-        self.scroll_frame_container._scrollbar.grid_configure(padx=self.scrollbar_ipadx)
        self.scroll_frame_container.grid_columnconfigure(0, weight=1)


@@ -139,6 +138,12 @@ class _CreateDropdownMenuWindow(CTkToplevel):

        self._createDropdownMenuValues(dropdown_menu_widget_id, dropdown_menu_values, command)

+        applyUiScalingAndFixTheBugScrollBar(
+            scrollbar_widget=self.scroll_frame_container,
+            padx=self.scrollbar_ipadx,
+            width=self.scrollbar_width,
+        )
+
        geometry_width = int(self.new_width + self.scroll_frame_container._scrollbar.winfo_width() + (BORDER_WIDTH*2) + (self.scrollbar_ipadx[0] + self.scrollbar_ipadx[1]))
        geometry_height = int(self.new_height + (BORDER_WIDTH*2))

@@ -210,10 +215,6 @@ class _CreateDropdownMenuWindow(CTkToplevel):
        self.new_width = makeEven(self.new_width)
        self.scroll_frame_container.configure(width=self.new_width, height=self.new_height)

-        # This is for CustomTkinter's spec change or bug fix.
-        self.scroll_frame_container._scrollbar.configure(height=0)
-        self.scroll_frame_container._scrollbar.configure(width=self.scrollbar_width)
-


        row=0
--- a/vrct_gui/_CreateModalWindow.py
+++ b/vrct_gui/_CreateModalWindow.py
@@ -9,7 +9,7 @@ class _CreateModalWindow(CTkToplevel):
        self.title("")
        self.overrideredirect(True)

-        self.wm_attributes("-alpha", 0.5)
+        # self.wm_attributes("-alpha", 0.5)
        self.wm_attributes("-toolwindow", True)

        self.attach_window = attach_window
--- a/vrct_gui/_CreateSelectableLanguagesWindow.py
+++ b/vrct_gui/_CreateSelectableLanguagesWindow.py
@@ -1,6 +1,6 @@
 from functools import partial

-from .ui_utils import bindButtonReleaseFunction, bindEnterAndLeaveColor, bindButtonPressColor
+from .ui_utils import bindButtonReleaseFunction, bindEnterAndLeaveColor, bindButtonPressColor, applyUiScalingAndFixTheBugScrollBar
 from utils import callFunctionIfCallable

 from customtkinter import CTkToplevel, CTkFrame, CTkLabel, CTkFont, CTkScrollableFrame
@@ -124,11 +124,11 @@ class _CreateSelectableLanguagesWindow(CTkToplevel):
        self.scroll_frame_container = CTkScrollableFrame(self, corner_radius=0, fg_color=self.settings.ctm.MAIN_BG_COLOR, width=self.width_new, height=self.height_new)
        self.scroll_frame_container.grid(row=1, column=0, sticky="nsew")

-        self.scroll_frame_container._scrollbar.grid_configure(padx=self.settings.uism.SCROLLBAR_IPADX)
-
-        # This is for CustomTkinter's spec change or bug fix.
-        self.scroll_frame_container._scrollbar.configure(height=0)
-        self.scroll_frame_container._scrollbar.configure(width=self.settings.uism.SCROLLBAR_WIDTH)
+        applyUiScalingAndFixTheBugScrollBar(
+            scrollbar_widget=self.scroll_frame_container,
+            padx=self.settings.uism.SCROLLBAR_IPADX,
+            width=self.settings.uism.SCROLLBAR_WIDTH,
+        )


        self.container = CTkFrame(self.scroll_frame_container, corner_radius=0, fg_color=self.settings.ctm.MAIN_BG_COLOR, width=0, height=0)
--- a/vrct_gui/config_window/widgets/createSettingBoxTopBar/_createSettingBoxCompactModeButton.py
+++ b/vrct_gui/config_window/widgets/createSettingBoxTopBar/_createSettingBoxCompactModeButton.py
@@ -13,7 +13,7 @@ def _createSettingBoxCompactModeButton(parent_widget, config_window, settings, v


    config_window.setting_box_compact_mode_button_container = CTkFrame(parent_widget, corner_radius=0, fg_color=settings.ctm.TOP_BAR_BG_COLOR, width=0, height=0)
-    config_window.setting_box_compact_mode_button_container.grid(row=0, column=1, padx=(0, 20), sticky="nsw")
+    config_window.setting_box_compact_mode_button_container.grid(row=0, column=1, padx=settings.uism.COMPACT_MODE_PADX, sticky="nsw")



@@ -26,12 +26,13 @@ def _createSettingBoxCompactModeButton(parent_widget, config_window, settings, v
    config_window.setting_box_compact_mode_label = CTkLabel(
        config_window.setting_box_compact_mode_button_container,
        height=0,
-        text="Compact Mode",
+        # text="Compact Mode",
+        textvariable=view_variable.VAR_CONFIG_WINDOW_COMPACT_MODE_LABEL,
        anchor="w",
-        font=CTkFont(family=settings.FONT_FAMILY, size=12, weight="normal"),
+        font=CTkFont(family=settings.FONT_FAMILY, size=settings.uism.COMPACT_MODE_LABEL_FONT_SIZE, weight="normal"),
        text_color=settings.ctm.LABELS_TEXT_COLOR
    )
-    config_window.setting_box_compact_mode_label.grid(row=0, column=0, padx=(0,10))
+    config_window.setting_box_compact_mode_label.grid(row=0, column=0, padx=settings.uism.COMPACT_MODE_LABEL_PADX)



@@ -50,14 +51,14 @@ def _createSettingBoxCompactModeButton(parent_widget, config_window, settings, v
        width=0,
        # corner_radius=0,
        border_width=0,
-        switch_width=40,
-        switch_height=16,
+        switch_width=settings.uism.COMPACT_MODE_SWITCH_WIDTH,
+        switch_height=settings.uism.COMPACT_MODE_SWITCH_HEIGHT,
        onvalue=True,
        offvalue=False,
        command=switchConfigWindowCompactMode,
        # fg_color="",
        # bg_color="red",
-        progress_color=settings.ctm.SB__SWITCH_BOX_ACTIVE_BG_COLOR, # SB__SWITCH_BOX_ACTIVE_BG_COLOR is for SB. change it later.
+        progress_color=settings.ctm.COMPACT_MODE_SWITCH_BOX_ACTIVE_BG_COLOR,
    )

    config_window.setting_box_compact_mode_switch_box.grid(row=0, column=0)
--- a/vrct_gui/config_window/widgets/createSideMenuAndSettingsBoxContainers/_createSettingBoxContainer.py
+++ b/vrct_gui/config_window/widgets/createSideMenuAndSettingsBoxContainers/_createSettingBoxContainer.py
@@ -30,7 +30,7 @@ def _createSettingBoxContainer(config_window, settings, view_variable, setting_b
    setting_box_row=0
    for i, setting_box_setting in enumerate(setting_box_container_settings["setting_boxes"]):
        # Top-Padding that can be container the section title
-        setting_box_top_padding = CTkFrame(setting_box_container_widget, corner_radius=0, fg_color=settings.ctm.MAIN_BG_COLOR, width=0, height=60)
+        setting_box_top_padding = CTkFrame(setting_box_container_widget, corner_radius=0, fg_color=settings.ctm.MAIN_BG_COLOR, width=0, height=settings.uism.SB__TOP_PADY)
        setting_box_top_padding.grid(row=setting_box_row, column=0, sticky="ew", padx=0, pady=0)
        setting_box_top_padding.grid_columnconfigure(0, weight=1)
        setting_box_row+=1
--- a/vrct_gui/config_window/widgets/createSideMenuAndSettingsBoxContainers/createSideMenuAndSettingsBoxContainers.py
+++ b/vrct_gui/config_window/widgets/createSideMenuAndSettingsBoxContainers/createSideMenuAndSettingsBoxContainers.py
@@ -1,6 +1,6 @@
 from customtkinter import CTkFrame, CTkScrollableFrame

-from ....ui_utils import _setDefaultActiveTab
+from ....ui_utils import _setDefaultActiveTab, applyUiScalingAndFixTheBugScrollBar

 from ._addConfigSideMenuItem import _addConfigSideMenuItem
 from ._createSettingBoxContainer import _createSettingBoxContainer
@@ -41,6 +41,12 @@ def createSideMenuAndSettingsBoxContainers(config_window, settings, view_variabl
    config_window.main_setting_box_scrollable_container = CTkScrollableFrame(config_window.main_bg_container, corner_radius=0, fg_color=settings.ctm.MAIN_BG_COLOR)
    config_window.main_setting_box_scrollable_container.grid(row=1, column=0, sticky="nsew")

+    applyUiScalingAndFixTheBugScrollBar(
+        scrollbar_widget=config_window.main_setting_box_scrollable_container,
+        padx=settings.uism.SCROLLBAR_IPADX,
+        width=settings.uism.SCROLLBAR_WIDTH,
+    )
+

    config_window.main_setting_box_bg_wrapper = CTkFrame(config_window.main_setting_box_scrollable_container, corner_radius=0, width=0, height=0, fg_color=settings.ctm.MAIN_BG_COLOR)
    config_window.main_setting_box_bg_wrapper.grid(row=0, column=0, pady=settings.uism.SB__BOTTOM_MARGIN, sticky="n")
--- a/vrct_gui/config_window/widgets/createSideMenuAndSettingsBoxContainers/setting_box_containers/_SettingBoxGenerator.py
+++ b/vrct_gui/config_window/widgets/createSideMenuAndSettingsBoxContainers/setting_box_containers/_SettingBoxGenerator.py
@@ -21,7 +21,7 @@ class _SettingBoxGenerator():
        setting_box_frame = CTkFrame(self.parent_widget, corner_radius=0, fg_color=self.settings.ctm.SB__BG_COLOR, width=0, height=0)

        # "pady=(0,1)" is for bottom padding. It can be removed(override) when you do like "self.attr_name.grid(row=row, pady=0)"
-        setting_box_frame.grid(column=0, padx=0, pady=(0,1), sticky="ew")
+        setting_box_frame.grid(column=0, padx=0, pady=self.settings.uism.SB__FAKE_BOTTOM_BORDER_SIZE, sticky="ew")
        setting_box_frame.grid_columnconfigure(0, weight=1)


@@ -54,7 +54,7 @@ class _SettingBoxGenerator():
            setting_box_labels_frame,
            textvariable=for_var_label_text,
            anchor="w",
-            # height=0,
+            height=0,
            font=CTkFont(family=self.settings.FONT_FAMILY, size=self.settings.uism.SB__LABEL_FONT_SIZE, weight="normal"),
            text_color=self.settings.ctm.LABELS_TEXT_COLOR
        )
@@ -66,7 +66,7 @@ class _SettingBoxGenerator():
                textvariable=for_var_desc_text,
                anchor="w",
                justify="left",
-                # height=0,
+                height=0,
                wraplength=int(self.settings.uism.MAIN_AREA_MIN_WIDTH / 2),
                font=CTkFont(family=self.settings.FONT_FAMILY, size=self.settings.uism.SB__DESC_FONT_SIZE, weight="normal"),
                text_color=self.settings.ctm.LABELS_DESC_TEXT_COLOR
@@ -88,9 +88,9 @@ class _SettingBoxGenerator():
            optionmenu_bg_color=self.settings.ctm.SB__OPTIONMENU_BG_COLOR,
            optionmenu_hovered_bg_color=self.settings.ctm.SB__OPTIONMENU_HOVERED_BG_COLOR,
            optionmenu_clicked_bg_color=self.settings.ctm.SB__OPTIONMENU_CLICKED_BG_COLOR,
-            optionmenu_ipadx=(8,8),
-            optionmenu_ipady=2,
-            optionmenu_ipady_between_img=8,
+            optionmenu_ipadx=self.settings.uism.SB__OPTIONMENU_IPADX,
+            optionmenu_ipady=self.settings.uism.SB__OPTIONMENU_IPADY,
+            optionmenu_padx_between_img=self.settings.uism.SB__OPTIONMENU_IPADX_BETWEEN_IMG,
            optionmenu_min_height=self.settings.uism.SB__OPTIONMENU_MIN_HEIGHT,
            optionmenu_min_width=self.settings.uism.SB__OPTIONMENU_MIN_WIDTH,
            variable=variable,
@@ -98,7 +98,7 @@ class _SettingBoxGenerator():
            font_size=self.settings.uism.SB__OPTION_MENU_FONT_SIZE,
            text_color=self.settings.ctm.LABELS_TEXT_COLOR,
            image_file=self.settings.image_file.ARROW_LEFT.rotate(90),
-            image_size=(14,14),
+            image_size=self.settings.uism.SB__OPTIONMENU_IMG_SIZE,
            optionmenu_clicked_command=lambda _e: self.dropdown_menu_window.show(
                dropdown_menu_widget_id=optionmenu_attr_name,
            ),
@@ -187,8 +187,12 @@ class _SettingBoxGenerator():
    def createSettingBoxSlider(self, for_var_label_text, for_var_desc_text, slider_attr_name, slider_range, command, variable, slider_number_of_steps: Union[int, None] = None):
        (setting_box_frame, setting_box_item_frame) = self._createSettingBoxFrame(for_var_label_text, for_var_desc_text)

+        # print(self.settings.uism.SB__SLIDER_WIDTH)
+        # print(self.settings.uism.SB__SLIDER_HEIGHT)
        slider_widget = CTkSlider(
            setting_box_item_frame,
+            width=self.settings.uism.SB__SLIDER_WIDTH,
+            height=self.settings.uism.SB__SLIDER_HEIGHT,
            from_=slider_range[0],
            to=slider_range[1],
            number_of_steps=slider_number_of_steps,
--- a/vrct_gui/splash_window/SplashWindow.py
+++ b/vrct_gui/splash_window/SplashWindow.py
@@ -1,6 +1,5 @@
 from customtkinter import CTkImage, CTkLabel, CTkToplevel
-from ..ui_utils import openImageKeepAspectRatio, getImageFileFromUiUtils
-from time import sleep
+from ..ui_utils import openImageKeepAspectRatio, getImageFileFromUiUtils, setGeometryToCenterOfScreen, fadeInAnimation

 class SplashWindow(CTkToplevel):
    def __init__(self):
@@ -12,7 +11,7 @@ class SplashWindow(CTkToplevel):


        sw=self.winfo_screenwidth()
-        sh=self.winfo_screenheight()
+        # sh=self.winfo_screenheight()

        pw=int(sw/4)

@@ -26,25 +25,14 @@ class SplashWindow(CTkToplevel):
            fg_color="#292a2d",
            image=CTkImage(img, size=(desired_width, height))
        )
-        label.grid(row=1, column=1)
-
-        geometry_width=desired_width+int(desired_width*0.2)
-        geometry_height=height+int(height*0.5)
-
-        self.geometry(str(geometry_width)+"x"+str(geometry_height)+"+"+str((sw-geometry_width)//2)+"+"+str((sh-geometry_height)//2))
-
+        label.grid(row=1, column=1, padx=int(desired_width/7), pady=int(height/3))


    def showSplash(self):
+        self.attributes("-alpha", 0)
        self.deiconify()
-
-        for i in range(0,91,20):
-            if not self.winfo_exists():
-                break
-            self.attributes("-alpha", i/100)
-            self.update()
-            sleep(1/50)
-        self.attributes("-alpha", 1)
+        setGeometryToCenterOfScreen(root_widget=self)
+        fadeInAnimation(self, steps=5, interval=0.02)


    def destroySplash(self):
--- a/vrct_gui/ui_managers/ColorThemeManager.py
+++ b/vrct_gui/ui_managers/ColorThemeManager.py
@@ -223,6 +223,8 @@ class ColorThemeManager():

        # Top bar
        self.config_window.TOP_BAR_BG_COLOR = self.DARK_850_COLOR
+        # Compact Mode
+        self.config_window.COMPACT_MODE_SWITCH_BOX_ACTIVE_BG_COLOR = self.main.SF__SWITCH_BOX_ACTIVE_BG_COLOR


        # Main
--- a/vrct_gui/ui_managers/UiScalingManager.py
+++ b/vrct_gui/ui_managers/UiScalingManager.py
@@ -4,6 +4,7 @@ class UiScalingManager():
    def __init__(self, scaling_percentage):
        scaling_float = int(scaling_percentage.replace("%", "")) / 100
        self.SCALING_FLOAT = max(scaling_float, 0.4)
+        self.common = SimpleNamespace()
        self.main = SimpleNamespace()
        self.config_window = SimpleNamespace()
        self.selectable_language_window = SimpleNamespace()
@@ -17,6 +18,9 @@ class UiScalingManager():
    def _calculatedUiSizes(self):
        # Common
        # RESPONSIVE_UI_SIZE_INT_10 ... RESPONSIVE_UI_SIZE_INT_300
+        self.common.SCROLLBAR_IPADX = (self._calculateUiSize(2), self._calculateUiSize(2))
+        self.common.SCROLLBAR_WIDTH = self._calculateUiSize(16)
+
        for i in range(10, 301, 10):
            setattr(self.main, f"RESPONSIVE_UI_SIZE_INT_{i}", self._calculateUiSize(i))
            setattr(self.config_window, f"RESPONSIVE_UI_SIZE_INT_{i}", self._calculateUiSize(i))
@@ -121,8 +125,8 @@ class UiScalingManager():

        # Selectable Language Window
        self.selectable_language_window.TOP_BAR_MIN_HEIGHT = self._calculateUiSize(50)
-        self.selectable_language_window.SCROLLBAR_IPADX = (self._calculateUiSize(2), self._calculateUiSize(2))
-        self.selectable_language_window.SCROLLBAR_WIDTH = self._calculateUiSize(16)
+        self.selectable_language_window.SCROLLBAR_IPADX = self.common.SCROLLBAR_IPADX
+        self.selectable_language_window.SCROLLBAR_WIDTH = self.common.SCROLLBAR_WIDTH

        self.selectable_language_window.GO_BACK_BUTTON_LABEL_FONT_SIZE = self._calculateUiSize(14)
        self.selectable_language_window.GO_BACK_BUTTON_IPADX = self._calculateUiSize(10)
@@ -151,25 +155,34 @@ class UiScalingManager():
        self.config_window.TOP_BAR_SIDE__CONFIG_TITLE_LEFT_PADX = int(self.config_window.TOP_BAR_SIDE__CONFIG_TITLE_FONT_SIZE + self._calculateUiSize(16))
        self.config_window.TOP_BAR_SIDE__TITLE_PADX= self._calculateUiSize(30)

+        # Compact Mode
+        self.config_window.COMPACT_MODE_PADX = (0, self._calculateUiSize(20))
+        self.config_window.COMPACT_MODE_LABEL_FONT_SIZE = self._calculateUiSize(12)
+        self.config_window.COMPACT_MODE_LABEL_PADX = (0, self._calculateUiSize(10))
+        self.config_window.COMPACT_MODE_SWITCH_WIDTH = self._calculateUiSize(40)
+        self.config_window.COMPACT_MODE_SWITCH_HEIGHT = self._calculateUiSize(16)
+
+
        # Side menu
-        self.config_window.SIDE_MENU_TOP_PADY= self._calculateUiSize(54)
+        self.config_window.SIDE_MENU_TOP_PADY = self._calculateUiSize(54)
        self.config_window.SIDE_MENU_LABELS_IPADX = self._calculateUiSize(20)
-        self.config_window.SIDE_MENU_LABELS_IPADY= self._calculateUiSize(8)
-        self.config_window.SIDE_MENU_LABELS_FONT_SIZE= self._calculateUiSize(18)
+        self.config_window.SIDE_MENU_LABELS_IPADY = self._calculateUiSize(8)
+        self.config_window.SIDE_MENU_LABELS_FONT_SIZE = self._calculateUiSize(18)


        # Top bar Main
        self.config_window.TOP_BAR_MAIN__TITLE_FONT_SIZE = self._calculateUiSize(22)
+        self.config_window.SCROLLBAR_IPADX = self.common.SCROLLBAR_IPADX
+        self.config_window.SCROLLBAR_WIDTH = self.common.SCROLLBAR_WIDTH


        # Setting Box
        self.config_window.MAIN_AREA_MIN_WIDTH = self._calculateUiSize(720)
-        self.config_window.SB__TOP_PADY_IF_WITH_SECTION_TITLE = (self._calculateUiSize(24))
-        self.config_window.SB__TOP_PADY_IF_WITHOUT_SECTION_TITLE = (self._calculateUiSize(64))
-        self.config_window.SB__BOTTOM_PADY = (self._calculateUiSize(40))
+        self.config_window.SB__TOP_PADY = (self._calculateUiSize(60))
        self.config_window.SB__IPADX = self._calculateUiSize(20)
        self.config_window.SB__IPADY = self._calculateUiSize(12)
        self.config_window.SB__BOTTOM_MARGIN = (0, self._calculateUiSize(60))
+        self.config_window.SB__FAKE_BOTTOM_BORDER_SIZE = (0, self._calculateUiSize(1, is_allowed_odd=True))

        self.config_window.SB__SECTION_TITLE_FONT_SIZE = self._calculateUiSize(20)
        self.config_window.SB__SECTION_TITLE_BOTTOM_PADY = (0, self._calculateUiSize(10))
@@ -193,12 +206,16 @@ class UiScalingManager():
        self.config_window.SB__OPTION_MENU_FONT_SIZE = self.config_window.SB__SELECTOR_FONT_SIZE
        self.config_window.SB__OPTIONMENU_MIN_HEIGHT = self._calculateUiSize(30)
        self.config_window.SB__OPTIONMENU_MIN_WIDTH = self._calculateUiSize(200)
+        self.config_window.SB__OPTIONMENU_IPADX = (self._calculateUiSize(8), self._calculateUiSize(8))
+        self.config_window.SB__OPTIONMENU_IPADY = self._calculateUiSize(2)
+        self.config_window.SB__OPTIONMENU_IPADX_BETWEEN_IMG = self._calculateUiSize(80)
+        self.config_window.SB__OPTIONMENU_IMG_SIZE = (self._calculateUiSize(14), self._calculateUiSize(14))

        self.config_window.SB__DROPDOWN_MENU_WINDOW_ADDITIONAL_Y_POS = self._calculateUiSize(4)
        self.config_window.SB__DROPDOWN_MENU_WIDTH = self.config_window.SB__OPTIONMENU_MIN_WIDTH
        self.config_window.SB__DROPDOWN_MENU_WINDOW_BORDER_WIDTH = self._calculateUiSize(1, is_allowed_odd=True)
-        self.config_window.SB__DROPDOWN_MENU_SCROLLBAR_IPADX = (self._calculateUiSize(2), self._calculateUiSize(2))
-        self.config_window.SB__DROPDOWN_MENU_SCROLLBAR_WIDTH = self._calculateUiSize(16)
+        self.config_window.SB__DROPDOWN_MENU_SCROLLBAR_IPADX = self.common.SCROLLBAR_IPADX
+        self.config_window.SB__DROPDOWN_MENU_SCROLLBAR_WIDTH = self.common.SCROLLBAR_WIDTH
        self.config_window.SB__DROPDOWN_MENU_VALUE_IPADX = (self._calculateUiSize(8), 0)
        self.config_window.SB__DROPDOWN_MENU_VALUE_IPADY = (self._calculateUiSize(6), self._calculateUiSize(6))
        self.config_window.SB__DROPDOWN_MENU_VALUE_PADY = (0, self._calculateUiSize(1, is_allowed_odd=True))
@@ -217,6 +234,8 @@ class UiScalingManager():
        self.config_window.SB__ENTRY_FONT_SIZE = self.config_window.SB__SELECTOR_FONT_SIZE
        self.config_window.SB__ENTRY_HEIGHT = self._calculateUiSize(30)

+        self.config_window.SB__SLIDER_WIDTH = self._calculateUiSize(200)
+        self.config_window.SB__SLIDER_HEIGHT = self._calculateUiSize(16)

        self.config_window.SB__PROGRESSBAR_X_SLIDER__ENTRY_WIDTH = self.config_window.RESPONSIVE_UI_SIZE_INT_50
        self.config_window.SB__PROGRESSBAR_X_SLIDER__ENTRY_HEIGHT = self.config_window.SB__ENTRY_HEIGHT
--- a/vrct_gui/ui_utils/ui_utils.py
+++ b/vrct_gui/ui_utils/ui_utils.py
@@ -1,5 +1,6 @@
 from os import path as os_path
 from PIL.Image import open as Image_open, LANCZOS
+from time import sleep

 from customtkinter import CTkFrame, CTkLabel, CTkImage, CTkFont

@@ -142,7 +143,7 @@ def createButtonWithImage(parent_widget, button_fg_color, button_enter_color, bu
        return button_wrapper


-def createOptionMenuBox(parent_widget, optionmenu_bg_color, optionmenu_hovered_bg_color, optionmenu_clicked_bg_color, optionmenu_ipadx, optionmenu_ipady, variable, font_family, font_size, text_color, image_file, image_size, optionmenu_clicked_command, optionmenu_position=None, optionmenu_ipady_between_img=0, optionmenu_min_height=None, optionmenu_min_width=None, setattr_widget=None, image_widget_attr_name=None):
+def createOptionMenuBox(parent_widget, optionmenu_bg_color, optionmenu_hovered_bg_color, optionmenu_clicked_bg_color, optionmenu_ipadx, optionmenu_ipady, variable, font_family, font_size, text_color, image_file, image_size, optionmenu_clicked_command, optionmenu_position=None, optionmenu_padx_between_img=0, optionmenu_min_height=None, optionmenu_min_width=None, setattr_widget=None, image_widget_attr_name=None):

    option_menu_box = CTkFrame(parent_widget, corner_radius=6, fg_color=optionmenu_bg_color, cursor="hand2")

@@ -167,7 +168,7 @@ def createOptionMenuBox(parent_widget, optionmenu_bg_color, optionmenu_hovered_b
        font=CTkFont(family=font_family, size=font_size, weight="normal"),
        text_color=text_color
    )
-    optionmenu_label_widget.grid(row=0, column=LABEL_COLUMN, padx=(0, optionmenu_ipady_between_img))
+    optionmenu_label_widget.grid(row=0, column=LABEL_COLUMN, padx=(0, optionmenu_padx_between_img))


    optionmenu_img_widget = CTkLabel(
@@ -191,4 +192,38 @@ def createOptionMenuBox(parent_widget, optionmenu_bg_color, optionmenu_hovered_b

    bindButtonReleaseFunction([optionmenu_label_wrapper, option_menu_box, optionmenu_label_widget, optionmenu_img_widget], optionmenu_clicked_command)

-    return option_menu_box
+    return option_menu_box
+
+
+def applyUiScalingAndFixTheBugScrollBar(scrollbar_widget, padx, width):
+    scrollbar_widget._scrollbar.grid_configure(padx=padx)
+
+    # This is for CustomTkinter's spec change or bug fix.
+    scrollbar_widget._scrollbar.configure(height=0)
+    scrollbar_widget._scrollbar.configure(width=width)
+
+
+def setGeometryToCenterOfScreen(root_widget):
+    root_widget.update()
+    sw=root_widget.winfo_screenwidth()
+    sh=root_widget.winfo_screenheight()
+    geometry_width = root_widget.winfo_width()
+    geometry_height = root_widget.winfo_height()
+
+    root_widget.geometry(str(geometry_width)+"x"+str(geometry_height)+"+"+str((sw-geometry_width)//2)+"+"+str((sh-geometry_height)//2))
+
+
+def fadeInAnimation(root_widget, steps:int=10, interval:float=0.1, max_alpha:float=1):
+    alpha_steps = 100
+    alpha_steps*=max_alpha
+    step_size = alpha_steps/steps
+    root_widget.attributes("-alpha", 0)
+    num = 0
+    while num < alpha_steps:
+        if not root_widget.winfo_exists():
+            break
+        root_widget.attributes("-alpha", num / 100)
+        root_widget.update()
+        sleep(interval)
+        num += step_size
+    root_widget.attributes("-alpha", max_alpha)
--- a/vrct_gui/vrct_gui.py
+++ b/vrct_gui/vrct_gui.py
@@ -11,7 +11,7 @@ from ._printToTextbox import _printToTextbox

 from .main_window import createMainWindowWidgets
 from .config_window import ConfigWindow
-from .ui_utils import _setDefaultActiveTab, getLatestHeight
+from .ui_utils import _setDefaultActiveTab, getLatestHeight, setGeometryToCenterOfScreen, fadeInAnimation

 from utils import callFunctionIfCallable

@@ -20,14 +20,16 @@ class VRCT_GUI(CTk):
        super().__init__()
        self.withdraw()
        self.adjusted_event=None
+        self.is_config_window_already_opened_once=False
        self.BIND_CONFIGURE_ADJUSTED_GEOMETRY_FUNC_ID=None
        self.BIND_FOCUS_IN_MODAL_WINDOW_LIFT_CONFIG_WINDOW_FUNC_ID=None


    def _showGUI(self):
+        self.attributes("-alpha", 0)
        self.deiconify()
-        self.update()
-        self.geometry("{}x{}".format(self.winfo_width(), self.winfo_height()))
+        setGeometryToCenterOfScreen(root_widget=self)
+        fadeInAnimation(self, steps=5, interval=0.008)

    def _createGUI(self, settings, view_variable):
        self.settings = settings
@@ -109,11 +111,20 @@ class VRCT_GUI(CTk):
        callFunctionIfCallable(self._view_variable.CALLBACK_OPEN_CONFIG_WINDOW)

        self._adjustToMainWindowGeometry()
+        self.modal_window.attributes("-alpha", 0)
        self.modal_window.deiconify()
+        fadeInAnimation(self.modal_window, steps=5, interval=0.005, max_alpha=0.5)
+
        self.BIND_CONFIGURE_ADJUSTED_GEOMETRY_FUNC_ID = self.bind("<Configure>", self._adjustToMainWindowGeometry, "+")
        self.BIND_FOCUS_IN_MODAL_WINDOW_LIFT_CONFIG_WINDOW_FUNC_ID = self.modal_window.bind("<FocusIn>", lambda _e: self.config_window.lift(), "+")

+        self.config_window.attributes("-alpha", 0)
        self.config_window.deiconify()
+        if self.is_config_window_already_opened_once is False:
+            setGeometryToCenterOfScreen(self.config_window)
+            self.is_config_window_already_opened_once = True
+            fadeInAnimation(self.config_window, steps=5, interval=0.005)
+        self.config_window.attributes("-alpha", 1)
        self.config_window.focus_set()

    def _closeConfigWindow(self):