fix: css calc inline break app by vallemar · Pull Request #9582 · NativeScript/NativeScript

vallemar · 2021-09-28T15:57:32Z

If you insert the width property: calc(x - x); in an element with inline styles the application breaks, it also happens if you do object.nativeView.width = "calc(x - x)"

Works fine if put as styles of a class.

.bar{
   width: calc(x - x);
}

Sample project
https://play.nativescript.org/?template=play-vue&id=mncNi9&v=2

Note: with NS 8.1.x it also breaks the app

Fix: #9581

rely on android logic

That way we dont “unload” and “load” fragments. This fixes black screens and slow transitions with opengl or cameras # Conflicts: # packages/core/ui/frame/fragment.transitions.android.ts # packages/core/ui/frame/frame-common.ts # packages/core/ui/frame/index.android.ts

… is used

…as/NativeScript

…ativeScript

# Conflicts: # package.json

should be done in a plugin

closes #8840

It comes with a major refactoring of the BorderDrawable. Now all Paths are cached not to regenerate them on every draw pass. Also it is important to understand that the clipping feature on android comes at a cost. It will be done only when truelly necessary. but with complex paths ((border radius > 0 && border non uniform) || border-width >0) then we must apply a costly drawing pass (though hardware accelerated) to accomplish it.

This should not happen but it does. Did not manage to find the real source but it seems ok to test it here. Plus if it happens the measurement chain for that view will be broken

# Conflicts: # package.json # packages/core/bundle-entry-points.ts # packages/core/color/color-common.ts # packages/core/color/index.d.ts # packages/core/globals/index.ts # packages/core/package.json # packages/core/ui/core/bindable/index.ts # packages/core/ui/core/properties/index.ts # packages/core/ui/core/view/index.android.ts # packages/core/ui/frame/index.android.ts # packages/core/ui/styling/style-scope.ts # packages/ui-mobile-base/android/gradle/wrapper/gradle-wrapper.properties # packages/webpack5/package.json # packages/webpack5/src/configuration/base.ts

NathanWalker

Excellent 👏

rigor789 · 2021-09-28T22:27:51Z

Thanks for the PR, calc is a CSS feature - so in this case, I'd say it's working as intended.

We can make it work on properties like this - but I'm a little hesitant on the change due to the processing overhead of evaluating the expressions.

I would like us to run a few benchmarks, and hold off on merging this right away - some numbers would make this easier to reason about.

/cc @NathanWalker @farfromrefug

vallemar · 2021-09-28T23:14:39Z

I agree with what you say. I think that setting the property in the nativeView.width = calc(x - y) format might be part of the developer to calculate the size, but I also think that inline styles should work and currently does not. Anyway I would like to see numbers. How do you normally do this?

edusperoni · 2021-09-29T04:11:17Z

Inline style should work with view.setInlineStyle("width: calc(x)"), does it not?

Maybe view.style.width="calc(x)" also should work?

I believe the distinction here is that views have different ways of setting their properties and CSS is an abstraction on top of them.

cla-bot · 2021-10-13T22:45:35Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign the CLA at https://www.nativescript.org/cla.
CLA has not been signed by users: @crowmagnumb, @tarunama.
After signing the CLA, you can ask me to recheck this PR by posting @cla-bot check as a comment to the PR.

vallemar · 2021-10-13T22:48:40Z

Sorry, I have done a push of everything without wanting to, I have deleted the repo thinking that the PR would be deleted but it has not been like that. I don't usually work with github XD

NathanWalker · 2021-10-21T20:35:53Z

@vallemar Have you tried @edusperoni comments above? Let us know if those options do not work - if they do, we may want to close this.

vallemar · 2021-10-25T18:20:52Z

@NathanWalker @edusperoni I have tested the scenarios and this is the result without the PR

view.setInlineStyle("width: calc(200 - 10)") //WORK
view.style.width= "calc(200 - 10)"  //NO WORK
view.width= "calc(200 - 10)"  //NO WORK

Now when I have typed the object to type view I have realized that it is of type CoreTypes.PercentLengthType view.style.width and view.width

rigor789 · 2022-03-08T22:51:35Z

Looks like the 8.2.0 merge auto deleted and closed this, and I can't seem to reopen it.

Not sure what the consensus is regarding the change, we can still discuss it!

farfromrefug and others added 30 commits August 27, 2020 09:19

onListenerAdded and onListenerRemoved

0ff21d7

fix(android): dont dispose fragment on onloaded

3fbeace

rely on android logic

another try at fixing transitions

b127f12

use replace when navigating with clearHistory

c1e710a

still unload page if navigation is replace or is back or clearHistory…

392e2c8

… is used

also use replace when replacing frame page

9a5d99e

in fact this does not seem to be necessary anymore

d41195e

typo fix

be15327

android fragment transitions fully working now

5fcfb75

test fix for new navigation event order

53c8234

Merge branch 'feature/android_fragment_transition' of github.com:Akyl…

efa1eb0

…as/NativeScript

Merge branch 'feature/onListenerAdded_Removed' of github.com:Akylas/N…

6b6ec37

…ativeScript

chore: allow the use of npm/pnpm to build

d2382a5

chore: fixed npm scripts

6e27467

chore(webpack): allow use of pnpm / yarn

6c2cfa1

chore: fix transformer path

c09c091

Merge branch 'master' of github.com:NativeScript/NativeScript

e9e0d74

# Conflicts: # package.json

nps should be included

b65a1d3

chore: lint

f6e1ab7

feat: boolean to disable systemAppearanceChanged (theme)

b8df0b3

chore: renamed core

eee8626

fix: need to be a function to work

43f1d50

clean up log

6729bfb

remove global events

64594bc

should be done in a plugin

fix(core): autoSystemAppearanceChanged typings in ambient context fix

c30a9c3

chore: add repository

df86162

fix(webpack): verify now works properly

f7713c4

closes #8840

chore: cleanup navigation-helper.ts (#8834)

bd04a47

fix(core): bundle-config-loader global handling (#8838)

1623a56

farfromrefug added 13 commits August 10, 2021 09:30

chore: locl husky fix

e2dcac4

fix: tsc errors fix

00b0794

chore: ignore tsc erro

f99fb2d

chore: missing dep

de3d39a

chore: updated build scrpts

5e11f0b

chore: until it is the official core i need to do it this way

4faca3a

fix(core): prevent iOS views to be measured if no native view

4e97e71

This should not happen but it does. Did not manage to find the real source but it seems ok to test it here. Plus if it happens the measurement chain for that view will be broken

fix: backgroundGradient fix with android BorderDrawable

f1406c0

fix: css colors not parsed correctly within background property

433053c

fix: Color.darken fix

da96e66

chore: color refactoring

748a6e2

cla-bot bot added the cla: yes label Sep 28, 2021

NathanWalker previously approved these changes Sep 28, 2021

View reviewed changes

vallemar dismissed NathanWalker’s stale review via 92480e4 October 13, 2021 22:30

cla-bot bot removed the cla: yes label Oct 13, 2021

NathanWalker added this to the 8.2 milestone Oct 21, 2021

crowmagnumb approved these changes Oct 21, 2021

View reviewed changes

NathanWalker changed the base branch from master to release/8.2.0 February 17, 2022 03:15

rigor789 deleted the branch NativeScript:release/8.2.0 March 8, 2022 22:43

rigor789 closed this Mar 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: css calc inline break app#9582

fix: css calc inline break app#9582
vallemar wants to merge 222 commits intoNativeScript:release/8.2.0from
vallemar:master

vallemar commented Sep 28, 2021 •

edited

Loading

Uh oh!

NathanWalker left a comment

Uh oh!

rigor789 commented Sep 28, 2021

Uh oh!

vallemar commented Sep 28, 2021 •

edited

Loading

Uh oh!

edusperoni commented Sep 29, 2021

Uh oh!

cla-bot bot commented Oct 13, 2021

Uh oh!

vallemar commented Oct 13, 2021

Uh oh!

NathanWalker commented Oct 21, 2021

Uh oh!

vallemar commented Oct 25, 2021 •

edited

Loading

Uh oh!

rigor789 commented Mar 8, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Uh oh!

Conversation

vallemar commented Sep 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NathanWalker left a comment

Choose a reason for hiding this comment

Uh oh!

rigor789 commented Sep 28, 2021

Uh oh!

vallemar commented Sep 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

edusperoni commented Sep 29, 2021

Uh oh!

cla-bot bot commented Oct 13, 2021

Uh oh!

vallemar commented Oct 13, 2021

Uh oh!

NathanWalker commented Oct 21, 2021

Uh oh!

vallemar commented Oct 25, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rigor789 commented Mar 8, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

vallemar commented Sep 28, 2021 •

edited

Loading

vallemar commented Sep 28, 2021 •

edited

Loading

vallemar commented Oct 25, 2021 •

edited

Loading