Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(plugin-basic-ui): minSafeAreaInsetTop #402

Merged
merged 2 commits into from
Jul 18, 2023
Merged

feat(plugin-basic-ui): minSafeAreaInsetTop #402

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c255665
feat(plugin-basic-ui): forceSafeAreaInsetTop
tonyfromundefined Jul 17, 2023
701279d
refactor(plugin-basic-ui): forceSafeAreaInsetTop -> minSafeAreaInsetTop
tonyfromundefined Jul 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions extensions/plugin-basic-ui/src/basicUIPlugin.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const globalVars = createGlobalThemeContract(
backgroundColorTransitionDuration:
"app-bar-background-color-transition-duration",
overflow: "app-bar-overflow",
forceSafeAreaInsetTop: "force-safe-area-inset-top",
},
bottomSheet: {
borderRadius: "bottom-sheet-border-radius",
Expand Down Expand Up @@ -60,6 +61,7 @@ const androidValues: GlobalVars = {
backgroundColor: "#fff",
backgroundColorTransitionDuration: "0s",
overflow: "hidden",
forceSafeAreaInsetTop: "0px",
},
bottomSheet: {
borderRadius: "1rem",
Expand Down
2 changes: 2 additions & 0 deletions extensions/plugin-basic-ui/src/basicUIPlugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,8 @@ export const basicUIPlugin: (
[css.globalVars.appBar.height]: _options.appBar?.height,
[css.globalVars.appBar.iconColor]: _options.appBar?.iconColor,
[css.globalVars.appBar.textColor]: _options.appBar?.textColor,
[css.globalVars.appBar.forceSafeAreaInsetTop]:
_options.appBar?.forceSafeAreaInsetTop,
[css.globalVars.bottomSheet.borderRadius]:
_options.bottomSheet?.borderRadius,
[css.globalVars.modal.borderRadius]: _options.modal?.borderRadius,
Expand Down
10 changes: 8 additions & 2 deletions extensions/plugin-basic-ui/src/components/AppBar.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,10 @@ export const appBar = recipe({
});

export const safeArea = style({
height: ["constant(safe-area-inset-top)", "env(safe-area-inset-top)"],
height: [
`max(${globalVars.appBar.forceSafeAreaInsetTop}, constant(safe-area-inset-top))`,
`max(${globalVars.appBar.forceSafeAreaInsetTop}, env(safe-area-inset-top))`,
],
Copy link
Member Author

@tonyfromundefined tonyfromundefined Jul 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

max로 하는게 나은지...

  • CSS Variable에 empty를 넣으면 자동으로 뒤쪽이 fallback이 되는지 확인 필요 -> fallback이 작동하지 않음

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Vanilla Extract의 createGlobalThemeContract는 선언된 변수의 초기값이 없으면 안됨
  • 따라서 초기값을 ""로 넣어줬음.
  • 해당 방식에서 fallbackVar 사용하니... ""가 값으로 들어가서, env 쪽으로 fallback이 안됨 ㅠ

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스크린샷 2023-07-17 오전 11 55 06

});

export const container = style([
Expand Down Expand Up @@ -191,7 +194,10 @@ export const centerMain = recipe({
left: "50%",
transform: "translate(-50%)",
height: globalVars.appBar.height,
top: ["constant(safe-area-inset-top)", "env(safe-area-inset-top)"],
top: [
`max(${globalVars.appBar.forceSafeAreaInsetTop}, constant(safe-area-inset-top))`,
`max(${globalVars.appBar.forceSafeAreaInsetTop}, env(safe-area-inset-top))`,
],
},
},
},
Expand Down
4 changes: 2 additions & 2 deletions extensions/plugin-basic-ui/src/components/AppScreen.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,10 +125,10 @@ export const paper = recipe({
paddingTop: globalVars.appBar.height,
"@supports": {
"(padding-top: constant(safe-area-inset-top))": {
paddingTop: `calc(${globalVars.appBar.height} + constant(safe-area-inset-top))`,
paddingTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.forceSafeAreaInsetTop}, constant(safe-area-inset-top)))`,
},
"(padding-top: env(safe-area-inset-top))": {
paddingTop: `calc(${globalVars.appBar.height} + env(safe-area-inset-top))`,
paddingTop: `calc(${globalVars.appBar.height} + max(${globalVars.appBar.forceSafeAreaInsetTop}, env(safe-area-inset-top)))`,
},
},
},
Expand Down
Loading