Oct 9, 2021 · Oct 9, 2021 · Oct 9, 2021 · Oct 9, 2021 · Oct 9, 2021 · Oct 9, 2021
diff --git a/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts b/app/lib/components/motions/update-hide-by-scroll-position-and-velocity/index.ts
    top_sensitivity: 0.01,
    bottom_sensitivity: 0.01,
    define_intense_velocity: 1,
    do_show_on_bottom_hit: true,
  },
 }: {
  scrollYProgress: ScrollMotionValues["scrollYProgress"];
    top_sensitivity: number;
    bottom_sensitivity: number;
    define_intense_velocity: number;
    do_show_on_bottom_hit: boolean;
  };
 }) {
  const velocity = scrollYProgress.getVelocity();
  const scroll_progress_percentage = scrollYProgress.get();

  if (scroll_progress_percentage >= 1 - options.bottom_sensitivity) {
    // bottom = show
    on_change(false);
    if (options.do_show_on_bottom_hit) {
      // bottom = show
      on_change(false);
    }
  } else if (scroll_progress_percentage <= options.top_sensitivity) {
    switch (direction) {
      // top + down = hide
          setHide(hide);
        },
        options: {
          do_show_on_bottom_hit: false,
          top_sensitivity: 0.05,
          bottom_sensitivity: 0.1,
          define_intense_velocity: 50,
diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx
    props.savedLayout.workmodeSet
  );
  const [tabIndex, setTabIndex] = useState<number>(0);
  const [screen, setScreen] = useState<WorkScreen>();
  const [expansion, setExpansion] = useState<boolean>(true);
  const isTabVisible = expansion;
  const on_workmode_select = (workmode: WorkMode) => {

  const handleTabChange = (index: number) => {
    const screen = tabs_as_page_configs[index];
    setScreen(screen.id);
    on_work_select(index, screen.id);
    history.replace(screen.path); // since it is a movement between tabs, we don't use push. we use replace to avoid the history stack to be too long.
  };
    }
  );

  const shadow_required = screen == WorkScreen.code || !isTabVisible;

  return (
    // root flex styled container for the whole app
    <div
      <AppbarContainerMotion hidden={whole_navigation_hidden}>
        <div
          style={{
            zIndex: 99,
            boxShadow: "0px 4px 24px rgba(0, 0, 0, 0.25)",
            zIndex: 1,
            boxShadow: shadow_required
              ? "0px 4px 24px rgba(0, 0, 0, 0.25)"
              : undefined,
          }}
        >
          <PrimaryWorkmodeWrapper>
diff --git a/packages/ui-previewer/preview-responsive/index.tsx b/packages/ui-previewer/preview-responsive/index.tsx
  border: none;
  transform: ${(props) => `scale(${props.scale})`};
  transform-origin: 0 0;
  z-index: -1;
 `;
diff --git a/packages/ui-previewer/preview/index.tsx b/packages/ui-previewer/preview/index.tsx
  const initialPreviewHeight = 200;
  const previewWrapPadding = 0;
  return (
    // <Container>
    <PreviewWrap
      id="preview-wrap"
      ref={previewRefWrap}
    </PreviewWrap>
  );
 }
 // {/* </Container> */}

 function Content({ props, wrapWidth }: { props: Props; wrapWidth: number }) {
  switch (props.type) {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,6 +11,7 @@ export function update_hide_by_scroll_position_and_velocity({
		top_sensitivity: 0.01,
		bottom_sensitivity: 0.01,
		define_intense_velocity: 1,
		do_show_on_bottom_hit: true,
		},
		}: {
		scrollYProgress: ScrollMotionValues["scrollYProgress"];
Expand All		@@ -21,6 +22,7 @@ export function update_hide_by_scroll_position_and_velocity({
		top_sensitivity: number;
		bottom_sensitivity: number;
		define_intense_velocity: number;
		do_show_on_bottom_hit: boolean;
		};
		}) {
		const velocity = scrollYProgress.getVelocity();
Expand All		@@ -37,8 +39,10 @@ export function update_hide_by_scroll_position_and_velocity({
		const scroll_progress_percentage = scrollYProgress.get();

		if (scroll_progress_percentage >= 1 - options.bottom_sensitivity) {
		// bottom = show
		on_change(false);
		if (options.do_show_on_bottom_hit) {
		// bottom = show
		on_change(false);
		}
		} else if (scroll_progress_percentage <= options.top_sensitivity) {
		switch (direction) {
		// top + down = hide
Expand DownExpand Up		@@ -90,6 +94,7 @@ export function useScrollTriggeredAnimation(el: RefObject<HTMLElement>) {
		setHide(hide);
		},
		options: {
		do_show_on_bottom_hit: false,
		top_sensitivity: 0.05,
		bottom_sensitivity: 0.1,
		define_intense_velocity: 50,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -114,6 +114,7 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) {
		props.savedLayout.workmodeSet
		);
		const [tabIndex, setTabIndex] = useState<number>(0);
		const [screen, setScreen] = useState<WorkScreen>();
		const [expansion, setExpansion] = useState<boolean>(true);
		const isTabVisible = expansion;
		const on_workmode_select = (workmode: WorkMode) => {
Expand All		@@ -140,6 +141,7 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) {

		const handleTabChange = (index: number) => {
		const screen = tabs_as_page_configs[index];
		setScreen(screen.id);
		on_work_select(index, screen.id);
		history.replace(screen.path); // since it is a movement between tabs, we don't use push. we use replace to avoid the history stack to be too long.
		};
Expand All		@@ -155,6 +157,8 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) {
		}
		);

		const shadow_required = screen == WorkScreen.code \|\| !isTabVisible;

		return (
		// root flex styled container for the whole app
		<div
Expand All		@@ -167,8 +171,10 @@ function TabNavigationApp(props: { savedLayout: NavigationStoreState }) {
		<AppbarContainerMotion hidden={whole_navigation_hidden}>
		<div
		style={{
		zIndex: 99,
		boxShadow: "0px 4px 24px rgba(0, 0, 0, 0.25)",
		zIndex: 1,
		boxShadow: shadow_required
		? "0px 4px 24px rgba(0, 0, 0, 0.25)"
		: undefined,
		}}
		>
		<PrimaryWorkmodeWrapper>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -58,4 +58,5 @@ const PlainIframe = styled.iframe<{ scale: number; margin: number }>`
		border: none;
		transform: ${(props) => `scale(${props.scale})`};
		transform-origin: 0 0;
		z-index: -1;
		`;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -51,7 +51,6 @@ export function Preview(props: Props) {
		const initialPreviewHeight = 200;
		const previewWrapPadding = 0;
		return (
		// <Container>
		<PreviewWrap
		id="preview-wrap"
		ref={previewRefWrap}
Expand All		@@ -71,7 +70,6 @@ export function Preview(props: Props) {
		</PreviewWrap>
		);
		}
		// {/* </Container> */}

		function Content({ props, wrapWidth }: { props: Props; wrapWidth: number }) {
		switch (props.type) {
Expand Down