From 0b4142ad1360dfb7629ecd33c2d4ad963079338c Mon Sep 17 00:00:00 2001 From: stefano-lacorazza <112132737+stefano-lacorazza@users.noreply.github.com> Date: Thu, 26 Sep 2024 05:35:56 -0500 Subject: [PATCH 1/5] OV-412: * fix multiple scrollbars --- .../timeline/timeline-view/timeline-view.tsx | 4 ++-- frontend/src/bundles/studio/pages/studio.tsx | 3 +++ .../bundles/studio/pages/styles.module.css | 21 +++++++++++++++++++ 3 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 frontend/src/bundles/studio/pages/styles.module.css diff --git a/frontend/src/bundles/studio/components/timeline/timeline-view/timeline-view.tsx b/frontend/src/bundles/studio/components/timeline/timeline-view/timeline-view.tsx index ef9eea3cb..deb460ef3 100644 --- a/frontend/src/bundles/studio/components/timeline/timeline-view/timeline-view.tsx +++ b/frontend/src/bundles/studio/components/timeline/timeline-view/timeline-view.tsx @@ -23,8 +23,8 @@ const TimelineView: React.FC = ({ playerRef }) => { return ( diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx index 2ae012f91..9ca5826c0 100644 --- a/frontend/src/bundles/studio/pages/studio.tsx +++ b/frontend/src/bundles/studio/pages/studio.tsx @@ -47,6 +47,7 @@ import { NotificationMessage, NotificationTitle } from '../enums/enums.js'; import { getVoicesConfigs, scenesExceedScripts } from '../helpers/helpers.js'; import { selectVideoDataById } from '../store/selectors.js'; import { actions as studioActions } from '../store/studio.js'; +import styles from './styles.module.css'; const Studio: React.FC = () => { const { state: locationState } = useLocation(); @@ -190,6 +191,8 @@ const Studio: React.FC = () => { position="relative" display="flex" flexDirection="column" + overflowY={'hidden'} + className={styles['scrollableContainer']} > Date: Thu, 26 Sep 2024 05:57:59 -0500 Subject: [PATCH 2/5] OV-412: * fix scrollbar styles --- frontend/src/bundles/studio/pages/styles.module.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/src/bundles/studio/pages/styles.module.css b/frontend/src/bundles/studio/pages/styles.module.css index 8c7b53591..9c21bafdf 100644 --- a/frontend/src/bundles/studio/pages/styles.module.css +++ b/frontend/src/bundles/studio/pages/styles.module.css @@ -1,14 +1,22 @@ .scrollableContainer { + /* WebKit Browsers */ ::-webkit-scrollbar { width: 12px; + background-color: #F5F5F5; /* Added background color */ } ::-webkit-scrollbar-track { background: #f1f1f1; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /* Added box shadow */ + border-radius: 10px; /* Added border radius */ + background-color: #F5F5F5; /* Added background color */ } ::-webkit-scrollbar-thumb { background: #888; + border-radius: 10px; /* Added border radius */ + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /* Added box shadow */ + background-color: #F5F5F5; /* Added background color */ } ::-webkit-scrollbar-thumb:hover { @@ -16,6 +24,6 @@ } /* Firefox */ - scrollbar-width: 15px; + scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; } \ No newline at end of file From 6f7372becaf5ffdfc7c68e78a850c430cd2c13e0 Mon Sep 17 00:00:00 2001 From: stefano-lacorazza <112132737+stefano-lacorazza@users.noreply.github.com> Date: Thu, 26 Sep 2024 13:53:57 -0500 Subject: [PATCH 3/5] Merge branch 'next' into task/OV-412-timeline-scroll-and-items-resize From 967bf3e742fe89e37c959bff2dfc7f45dbfc7f1e Mon Sep 17 00:00:00 2001 From: stefano-lacorazza <112132737+stefano-lacorazza@users.noreply.github.com> Date: Thu, 26 Sep 2024 13:55:49 -0500 Subject: [PATCH 4/5] OV-412: * prettier --- .../components/timeline/timeline-view/timeline-view.tsx | 9 +++++++-- frontend/src/bundles/studio/pages/studio.tsx | 4 ++-- frontend/src/bundles/studio/pages/styles.module.css | 8 ++++---- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/frontend/src/bundles/studio/components/timeline/timeline-view/timeline-view.tsx b/frontend/src/bundles/studio/components/timeline/timeline-view/timeline-view.tsx index deb460ef3..f78ede682 100644 --- a/frontend/src/bundles/studio/components/timeline/timeline-view/timeline-view.tsx +++ b/frontend/src/bundles/studio/components/timeline/timeline-view/timeline-view.tsx @@ -23,8 +23,13 @@ const TimelineView: React.FC = ({ playerRef }) => { return ( diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx index b272aa846..2ac28b3fb 100644 --- a/frontend/src/bundles/studio/pages/studio.tsx +++ b/frontend/src/bundles/studio/pages/studio.tsx @@ -222,8 +222,8 @@ const Studio: React.FC = () => { display="flex" flexDirection="column" overflowY={'hidden'} - className={styles['scrollableContainer']} - > + className={styles['scrollableContainer']} + > Date: Fri, 27 Sep 2024 03:55:40 -0500 Subject: [PATCH 5/5] OV-412: - delete comments --- .../src/bundles/studio/pages/styles.module.css | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/frontend/src/bundles/studio/pages/styles.module.css b/frontend/src/bundles/studio/pages/styles.module.css index 95b75cbfc..411163f11 100644 --- a/frontend/src/bundles/studio/pages/styles.module.css +++ b/frontend/src/bundles/studio/pages/styles.module.css @@ -1,29 +1,27 @@ .scrollableContainer { - /* WebKit Browsers */ ::-webkit-scrollbar { width: 12px; - background-color: #f5f5f5; /* Added background color */ + background-color: #f5f5f5; } ::-webkit-scrollbar-track { background: #f1f1f1; - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /* Added box shadow */ - border-radius: 10px; /* Added border radius */ - background-color: #f5f5f5; /* Added background color */ + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + border-radius: 10px; + background-color: #f5f5f5; } ::-webkit-scrollbar-thumb { background: #888; - border-radius: 10px; /* Added border radius */ - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /* Added box shadow */ - background-color: #f5f5f5; /* Added background color */ + border-radius: 10px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + background-color: #f5f5f5; } ::-webkit-scrollbar-thumb:hover { background: #555; } - /* Firefox */ scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; }