From 084aa680a15dbe3b421b52441eb5dcaf664b6ef5 Mon Sep 17 00:00:00 2001 From: Shagen Ogandzhanian Date: Wed, 14 Jul 2021 14:06:11 +0200 Subject: [PATCH] Rename mediaQuery-related min/maxWidth/Height extensions by adding media prefix This resolves #886 --- .../com/sample/content/CodeSamplesSwitcher.kt | 2 +- .../kotlin/com/sample/style/Stylesheet.kt | 4 ++-- .../jsMain/kotlin/com/sample/style/WtCard.kt | 4 ++-- .../jsMain/kotlin/com/sample/style/WtCol.kt | 4 ++-- .../kotlin/com/sample/style/WtContainer.kt | 11 +++------- .../kotlin/com/sample/style/WtDisplay.kt | 9 ++------ .../kotlin/com/sample/style/WtOffest.kt | 9 ++------ .../jsMain/kotlin/com/sample/style/WtRow.kt | 7 +------ .../jsMain/kotlin/com/sample/style/WtText.kt | 11 ++++------ .../jetbrains/compose/web/css/CSSMediaRule.kt | 8 +++---- .../src/jsTest/kotlin/CSSStylesheetTests.kt | 4 ++-- web/core/src/jsTest/kotlin/MediaQueryTests.kt | 21 +++++++++---------- .../androidx/compose/web/sample/Sample.kt | 4 ++-- .../compose/web/sample/tests/TestCases1.kt | 2 +- 14 files changed, 38 insertions(+), 62 deletions(-) diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt index 6d6e300cd6..c947be7373 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt @@ -16,7 +16,7 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) { val boxed by style { - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { SwitcherVariables.labelWidth(48.px) SwitcherVariables.labelPadding(5.px) diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt index 3c9605cbe1..538724a015 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/Stylesheet.kt @@ -43,7 +43,7 @@ object AppStylesheet : StyleSheet() { color(Color.RGBA(39,40,44,.7)) borderRadius(4.px, 4.px, 4.px) - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { top((-16).px) } @@ -66,7 +66,7 @@ object AppStylesheet : StyleSheet() { margin(0.px) } - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { CSSSelector.Universal style { AppCSSVariables.wtOffsetTopUnit(16.px) AppCSSVariables.wtFlowUnit(16.px) diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt index 3c8af92bc8..3c8282817c 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCard.kt @@ -14,7 +14,7 @@ import org.jetbrains.compose.web.css.color import org.jetbrains.compose.web.css.display import org.jetbrains.compose.web.css.flexDirection import org.jetbrains.compose.web.css.flexGrow -import org.jetbrains.compose.web.css.maxWidth +import org.jetbrains.compose.web.css.mediaMaxWidth import org.jetbrains.compose.web.css.media import org.jetbrains.compose.web.css.padding import org.jetbrains.compose.web.css.percent @@ -50,7 +50,7 @@ object WtCards : StyleSheet(AppStylesheet) { property("box-sizing", "border-box") property("padding", "24px 32px") - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { padding(16.px) } } } diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt index 525a11018f..641e116659 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtCol.kt @@ -5,7 +5,7 @@ import org.jetbrains.compose.web.css.CSSUnitValue import org.jetbrains.compose.web.css.GenericStyleSheetBuilder import org.jetbrains.compose.web.css.StyleSheet import org.jetbrains.compose.web.css.flexGrow -import org.jetbrains.compose.web.css.maxWidth +import org.jetbrains.compose.web.css.mediaMaxWidth import org.jetbrains.compose.web.css.media import org.jetbrains.compose.web.css.percent import org.jetbrains.compose.web.css.px @@ -16,7 +16,7 @@ fun GenericStyleSheetBuilder.mediaMaxWidth( cssSelector: CSSSelector, rulesBuild: TBuilder.() -> Unit ) { - media(maxWidth(value)) { + media(mediaMaxWidth(value)) { cssSelector style rulesBuild } } diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt index fc2ef401ec..d33f70f607 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtContainer.kt @@ -1,11 +1,6 @@ package com.sample.style -import androidx.compose.runtime.Composable import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.* object WtContainer : StyleSheet(AppStylesheet) { val wtContainer by style { @@ -16,7 +11,7 @@ object WtContainer : StyleSheet(AppStylesheet) { property("padding-right", 22.px) property("max-width", 1276.px) - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { property("max-width", 100.percent) property("padding-left", 16.px) @@ -24,7 +19,7 @@ object WtContainer : StyleSheet(AppStylesheet) { } } - media(maxWidth(1276.px)) { + media(mediaMaxWidth(1276.px)) { self style { property("max-width", 996.px) property("padding-left", 996.px) @@ -32,7 +27,7 @@ object WtContainer : StyleSheet(AppStylesheet) { } } - media(maxWidth(1000.px)) { + media(mediaMaxWidth(1000.px)) { self style { property("max-width", 100.percent) property("padding-left", 22.px) diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtDisplay.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtDisplay.kt index 7407054b85..2a95341fab 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtDisplay.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtDisplay.kt @@ -1,11 +1,6 @@ package com.sample.style -import androidx.compose.runtime.Composable import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.* object WtDisplay : StyleSheet(AppStylesheet) { val wtDisplayNone by style { @@ -13,7 +8,7 @@ object WtDisplay : StyleSheet(AppStylesheet) { } val wtDisplayMdBlock by style { - media(maxWidth(1000.px)) { + media(mediaMaxWidth(1000.px)) { self style { display(DisplayStyle.Block) } @@ -21,7 +16,7 @@ object WtDisplay : StyleSheet(AppStylesheet) { } val wtDisplayMdNone by style { - media(maxWidth(1000.px)) { + media(mediaMaxWidth(1000.px)) { self style { display(DisplayStyle.None) } diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt index a1aa20f0e8..b93fb138e0 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtOffest.kt @@ -1,11 +1,6 @@ package com.sample.style -import androidx.compose.runtime.Composable import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.* object WtOffsets : StyleSheet(AppStylesheet) { val wtTopOffset96 by style { @@ -29,7 +24,7 @@ object WtOffsets : StyleSheet(AppStylesheet) { } val wtTopOffsetSm12 by style { - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { marginTop(12.px) } @@ -37,7 +32,7 @@ object WtOffsets : StyleSheet(AppStylesheet) { } val wtTopOffsetSm24 by style { - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { marginTop(24.px) } diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt index 59b94b9a3e..4bcdd3a1c4 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtRow.kt @@ -1,11 +1,6 @@ package com.sample.style -import androidx.compose.runtime.Composable import org.jetbrains.compose.web.css.* -import org.jetbrains.compose.web.css.selectors.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.* object WtRows : StyleSheet(AppStylesheet) { @@ -28,7 +23,7 @@ object WtRows : StyleSheet(AppStylesheet) { val wtRowSizeM by style { AppCSSVariables.wtHorizontalLayoutGutter(16.px) - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { AppCSSVariables.wtHorizontalLayoutGutter(8.px) } diff --git a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt index d2025f0a81..72ce1a1500 100644 --- a/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt +++ b/web/benchmark-core/src/jsMain/kotlin/com/sample/style/WtText.kt @@ -2,9 +2,6 @@ package com.sample.style import org.jetbrains.compose.web.css.* import org.jetbrains.compose.web.css.selectors.* -import org.jetbrains.compose.web.attributes.* -import org.jetbrains.compose.web.dom.* -import org.jetbrains.compose.web.* object WtTexts : StyleSheet(AppStylesheet) { @@ -17,7 +14,7 @@ object WtTexts : StyleSheet(AppStylesheet) { property("line-height", 64.px) property("line-height", AppCSSVariables.wtHeroLineHeight.value(64.px)) - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { AppCSSVariables.wtHeroFontSize(42.px) AppCSSVariables.wtHeroLineHeight(48.px) @@ -39,7 +36,7 @@ object WtTexts : StyleSheet(AppStylesheet) { property("line-height", 40.px) property("line-height", AppCSSVariables.wtSubtitle2LineHeight.value(40.px)) - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { AppCSSVariables.wtSubtitle2FontSize(24.px) AppCSSVariables.wtSubtitle2LineHeight(32.px) @@ -126,7 +123,7 @@ object WtTexts : StyleSheet(AppStylesheet) { property("line-height", 40.px) property("line-height", AppCSSVariables.wtH2LineHeight.value(40.px)) - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { AppCSSVariables.wtH2FontSize(24.px) AppCSSVariables.wtH2LineHeight(32.px) @@ -214,7 +211,7 @@ object WtTexts : StyleSheet(AppStylesheet) { property("border-radius", 24.px) } - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { property("margin-right", 8.px) property("margin-left", 8.px) diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSMediaRule.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSMediaRule.kt index 97d4367c07..02d5ef1af0 100644 --- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSMediaRule.kt +++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/CSSMediaRule.kt @@ -128,14 +128,14 @@ fun GenericStyleSheetBuilder.not( query: CSSMediaQuery.Invertible ) = CSSMediaQuery.Not(query) -fun GenericStyleSheetBuilder.minWidth(value: CSSUnitValue) = +fun GenericStyleSheetBuilder.mediaMinWidth(value: CSSUnitValue) = CSSMediaQuery.MediaFeature("min-width", value) -fun GenericStyleSheetBuilder.maxWidth(value: CSSUnitValue) = +fun GenericStyleSheetBuilder.mediaMaxWidth(value: CSSUnitValue) = CSSMediaQuery.MediaFeature("max-width", value) -fun GenericStyleSheetBuilder.minHeight(value: CSSUnitValue) = +fun GenericStyleSheetBuilder.mediaMinHeight(value: CSSUnitValue) = CSSMediaQuery.MediaFeature("min-height", value) -fun GenericStyleSheetBuilder.maxHeight(value: CSSUnitValue) = +fun GenericStyleSheetBuilder.madiaMaxHeight(value: CSSUnitValue) = CSSMediaQuery.MediaFeature("max-height", value) diff --git a/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt b/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt index 59c7af1e62..d263fd408d 100644 --- a/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt +++ b/web/core/src/jsTest/kotlin/CSSStylesheetTests.kt @@ -50,13 +50,13 @@ object AppStylesheet : StyleSheet() { color("lime") backgroundColor("lime") - media(minWidth(20000.px)) { + media(mediaMinWidth(20000.px)) { self style { color("red") } } - media(minWidth(20.px)) { + media(mediaMinWidth(20.px)) { self style { backgroundColor("green") } diff --git a/web/core/src/jsTest/kotlin/MediaQueryTests.kt b/web/core/src/jsTest/kotlin/MediaQueryTests.kt index 164a786281..79b896f743 100644 --- a/web/core/src/jsTest/kotlin/MediaQueryTests.kt +++ b/web/core/src/jsTest/kotlin/MediaQueryTests.kt @@ -5,15 +5,14 @@ package org.jetbrains.compose.web.core.tests -import org.jetbrains.compose.web.css.CSSMediaQuery import org.jetbrains.compose.web.css.CSSMediaRuleDeclaration import org.jetbrains.compose.web.css.StyleSheet import org.jetbrains.compose.web.css.and -import org.jetbrains.compose.web.css.maxHeight -import org.jetbrains.compose.web.css.maxWidth +import org.jetbrains.compose.web.css.madiaMaxHeight +import org.jetbrains.compose.web.css.mediaMaxWidth import org.jetbrains.compose.web.css.media -import org.jetbrains.compose.web.css.minHeight -import org.jetbrains.compose.web.css.minWidth +import org.jetbrains.compose.web.css.mediaMinHeight +import org.jetbrains.compose.web.css.mediaMinWidth import org.jetbrains.compose.web.css.px import kotlin.test.Test import kotlin.test.assertEquals @@ -22,20 +21,20 @@ class MediaQueryTests { private object CombinedMediaQueries : StyleSheet() { val combine by style { - media(minWidth(200.px).and(maxWidth(400.px))) { + media(mediaMinWidth(200.px).and(mediaMaxWidth(400.px))) { } - media(minWidth(300.px), maxWidth(500.px)) { + media(mediaMinWidth(300.px), mediaMaxWidth(500.px)) { } } } private object MediaFeatures : StyleSheet() { val features by style { - media(minWidth(200.px)) {} - media(minHeight(300.px)) {} - media(maxWidth(500.px)) {} - media(maxHeight(600.px)) {} + media(mediaMinWidth(200.px)) {} + media(mediaMinHeight(300.px)) {} + media(mediaMaxWidth(500.px)) {} + media(madiaMaxHeight(600.px)) {} } } diff --git a/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/Sample.kt b/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/Sample.kt index 3cc752def6..1fa082c90c 100644 --- a/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/Sample.kt +++ b/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/Sample.kt @@ -79,7 +79,7 @@ object AppStyleSheet : StyleSheet() { color(MyCSSVariables.myVar.value()) } - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { backgroundColor(MyCSSVariables.myVar.value()) property("color", MyCSSVariables.myVar2.value()) @@ -180,7 +180,7 @@ fun main() { color("red") } - media(minWidth(500.px) and maxWidth(700.px)) { + media(mediaMinWidth(500.px) and mediaMaxWidth(700.px)) { className(MyClassName) style { fontSize(40.px) } diff --git a/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt b/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt index 8feb2125c5..8a8a0b4139 100644 --- a/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt +++ b/web/integration-core/src/jsMain/kotlin/androidx/compose/web/sample/tests/TestCases1.kt @@ -71,7 +71,7 @@ class TestCases1 { private object AppStyleSheet : StyleSheet() { val textClass by style { color("rgba(0, 200, 0, 0.92)") - media(maxWidth(600.px)) { + media(mediaMaxWidth(600.px)) { self style { color("rgba(255, 200, 0, 0.99)") }