dnrops
/
Tokamak
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Change stack implementation from grid to flex-box (#441)

This commit is contained in:
Tyler-pollick 2022-09-01 18:02:49 -06:00
parent 47c5a05068
commit 85b8d00c82
21 changed files with 105 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Sources/TokamakStaticHTML/Resources/TokamakStyles.swift
View File

@ -16,15 +16,15 @@ import TokamakCore
public let tokamakStyles = """
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, \(Int(defaultStackSpacing))px);
flex-direction: row;
gap: var(--tokamak-stack-gap, \(Int(defaultStackSpacing))px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, \(Int(defaultStackSpacing))px);
flex-direction: column;
gap: var(--tokamak-stack-gap, \(Int(defaultStackSpacing))px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;

4
Sources/TokamakStaticHTML/Shapes/Path.swift
View File

@ -147,10 +147,14 @@ extension Path: _HTMLPrimitive {
"""
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
""" :
"""
width: \(max(0, size.width));
height: \(max(0, size.height));
min-width: 0;
min-height: 0;
"""
}

6
Sources/TokamakStaticHTML/Views/Layout/HStack.swift
View File

@ -18,11 +18,11 @@ extension VerticalAlignment {
var cssValue: String {
switch self {
case .top:
return "start"
return "flex-start"
case .center:
return "center"
case .bottom:
return "end"
return "flex-end"
default:
return "center"
}
@ -38,7 +38,7 @@ extension HStack: _HTMLPrimitive, SpacerContainer {
return AnyView(HTML("div", [
"style": """
align-items: \(alignment.cssValue);
justify-content: \(alignment.cssValue);
\(hasSpacer ? "width: 100%;" : "")
\(fillCrossAxis ? "height: 100%;" : "")
\(spacing != defaultStackSpacing ? "--tokamak-stack-gap: \(spacing)px;" : "")

2
Sources/TokamakStaticHTML/Views/Layout/VStack.swift
View File

@ -38,7 +38,7 @@ extension VStack: _HTMLPrimitive, SpacerContainer {
return AnyView(HTML("div", [
"style": """
justify-items: \(alignment.cssValue);
align-items: \(alignment.cssValue);
\(hasSpacer ? "height: 100%;" : "")
\(fillCrossAxis ? "width: 100%;" : "")
\(spacing != defaultStackSpacing ? "--tokamak-stack-gap: \(spacing)px;" : "")

2
Tests/TokamakStaticHTMLTests/RenderingTests/VisualTests.swift
View File

@ -147,7 +147,7 @@ final class VisualRenderingTests: XCTestCase {
Color.clear
.background(Material.ultraThick)
}
},
}.frame(width: 100, height: 100),
as: .image(size: .init(width: 100, height: 100)),
timeout: defaultSnapshotTimeout
)

BIN
Tests/TokamakStaticHTMLTests/RenderingTests/__Snapshots__/VisualTests/testMaterial.1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

14
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitle.1.html
View File

@ -3,15 +3,15 @@
<title>Tokamak 2</title>
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;
@ -246,7 +246,7 @@ width: 100%;
height: 100%;
justify-content: center;
align-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="align-items: center;
"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;
@ -259,7 +259,7 @@ vertical-align: baseline;
text-decoration: none;
text-decoration-color: inherit;
text-align: left;">Hello, world!</span>
<div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
<div class="_tokamak-stack _tokamak-vstack" style="align-items: center;
"></div></div></body>

10
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testDoubleTitleModifier.1.html
View File

@ -3,15 +3,15 @@
<title>Tokamak 2</title>
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;

10
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.1.html
View File

@ -3,15 +3,15 @@
<title></title>
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;

12
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testFontStacks.2.html
View File

@ -3,15 +3,15 @@
<title></title>
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;
@ -246,7 +246,7 @@ width: 100%;
height: 100%;
justify-content: center;
align-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="align-items: center;
"><span style="font-family: 'Marker Felt', Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;

10
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.1.html
View File

@ -3,15 +3,15 @@
<title></title>
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;

10
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testHTMLSanitizer.2.html
View File

@ -3,15 +3,15 @@
<title></title>
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;

12
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaAll.1.html
View File

@ -7,15 +7,15 @@
<meta http-equiv="refresh" content="60">
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;
@ -250,7 +250,7 @@ width: 100%;
height: 100%;
justify-content: center;
align-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="align-items: center;
"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;

12
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharset.1.html
View File

@ -4,15 +4,15 @@
<meta charset="utf-8">
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;
@ -247,7 +247,7 @@ width: 100%;
height: 100%;
justify-content: center;
align-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="align-items: center;
"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;

10
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testMetaCharsetModifier.1.html
View File

@ -4,15 +4,15 @@
<meta charset="utf-8">
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;

14
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testOptional.1.html
View File

@ -3,15 +3,15 @@
<title></title>
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;
@ -246,11 +246,13 @@ width: 100%;
height: 100%;
justify-content: center;
align-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="align-items: center;
height: 100%;
"><svg style="width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: visible; fill: rgba(255.0, 58.650000000000006, 48.45, 1.0);"><rect height="100%" stroke-width="0.0" width="100%" x="0.0" y="0.0"></rect></svg>
<div style="flex-grow: 1; "></div></div></body>
</html>

12
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testPaddingFusion.1.html
View File

@ -3,15 +3,15 @@
<title></title>
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;
@ -248,5 +248,7 @@ justify-content: center;
align-items: center;
overflow: hidden;"><div style="padding-top: 30.0px; padding-left: 30.0px; padding-bottom: 30.0px; padding-right: 30.0px;"><svg style="width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: visible; fill: rgba(255.0, 58.650000000000006, 48.45, 1.0);"><rect height="100%" stroke-width="0.0" width="100%" x="0.0" y="0.0"></rect></svg></div></body>
</html>

12
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testPaddingFusion.2.html
View File

@ -3,15 +3,15 @@
<title></title>
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;
@ -248,5 +248,7 @@ justify-content: center;
align-items: center;
overflow: hidden;"><div style="padding-top: 60.0px; padding-left: 60.0px; padding-bottom: 60.0px; padding-right: 60.0px;"><svg style="width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
overflow: visible; fill: rgba(255.0, 58.650000000000006, 48.45, 1.0);"><rect height="100%" stroke-width="0.0" width="100%" x="0.0" y="0.0"></rect></svg></div></body>
</html>

16
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testPreferencePropagation.1.html
View File

@ -3,15 +3,15 @@
<title>Tokamak 3</title>
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;
@ -246,14 +246,14 @@ width: 100%;
height: 100%;
justify-content: center;
align-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="align-items: center;
"><div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
"><div class="_tokamak-stack _tokamak-vstack" style="align-items: center;
"></div>
<div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
<div class="_tokamak-stack _tokamak-vstack" style="align-items: center;
"></div></div></body>

12
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitle.1.html
View File

@ -3,15 +3,15 @@
<title>Tokamak</title>
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;
@ -246,7 +246,7 @@ width: 100%;
height: 100%;
justify-content: center;
align-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="justify-items: center;
overflow: hidden;"><div class="_tokamak-stack _tokamak-vstack" style="align-items: center;
"><span style="font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif; font-size: 17.0px; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal;

10
Tests/TokamakStaticHTMLTests/__Snapshots__/HTMLTests/testTitleModifier.1.html
View File

@ -3,15 +3,15 @@
<title>Tokamak</title>
<style>
._tokamak-stack {
display: grid;
display: flex;
}
._tokamak-hstack {
grid-auto-flow: column;
column-gap: var(--tokamak-stack-gap, 8px);
flex-direction: row;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-vstack {
grid-auto-flow: row;
row-gap: var(--tokamak-stack-gap, 8px);
flex-direction: column;
gap: var(--tokamak-stack-gap, 8px);
}
._tokamak-scrollview-hideindicators {
scrollbar-color: transparent;