alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Renaming opacity to text-opacity in code

Browse Source
This commit is contained in:
Darren Burns
2022-08-31 13:39:34 +01:00
parent 786e2ee5fd
commit 210214260d
15 changed files with 126 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
docs/examples/basic.css
View File

@@ -4,18 +4,18 @@
* {
transition: color 300ms linear, background 300ms linear;
}
}
*:hover {
/* tint: 30% red;
/* tint: 30% red;
/* outline: heavy red; */
}
App > Screen {
background: $surface;
color: $text-surface;
color: $text-surface;
layers: base sidebar;
color: $text-background;
@@ -23,12 +23,12 @@ App > Screen {
layout: vertical;
overflow: hidden;
}
#tree-container {
overflow-y: auto;
height: 20;
height: 20;
margin: 1 3;
background: $panel;
padding: 1 2;
@@ -37,7 +37,7 @@ App > Screen {
DirectoryTree {
padding: 0 1;
height: auto;
}
@@ -46,10 +46,10 @@ DirectoryTree {
DataTable {
/*border:heavy red;*/
/* tint: 10% green; */
/* opacity: 50%; */
/* text-opacity: 50%; */
padding: 1;
margin: 1 2;
height: 24;
margin: 1 2;
height: 24;
}
#sidebar {
@@ -59,7 +59,7 @@ DataTable {
width: 30;
margin-bottom: 1;
offset-x: -100%;
transition: offset 500ms in_out_cubic;
layer: sidebar;
}
@@ -97,8 +97,8 @@ DataTable {
Tweet {
height:12;
width: 100%;
margin: 0 2;
margin: 0 2;
background: $panel;
color: $text-panel;
layout: vertical;
@@ -121,9 +121,9 @@ Tweet {
layout: vertical;
}
.code {
.code {
height: auto;
}
@@ -133,12 +133,12 @@ TweetHeader {
color: $text-accent
}
TweetBody {
TweetBody {
width: 100%;
background: $panel;
color: $text-panel;
height: auto;
padding: 0 1 0 0;
height: auto;
padding: 0 1 0 0;
}
Tweet.scroll-horizontal TweetBody {
@@ -158,7 +158,7 @@ Tweet.scroll-horizontal TweetBody {
/* padding: 1 0 0 0 ; */
transition: background 400ms in_out_cubic, color 400ms in_out_cubic;
}
.button:hover {
@@ -178,7 +178,7 @@ Tweet.scroll-horizontal TweetBody {
color: $text-accent;
background: $accent;
height: 1;
content-align: center middle;
dock:bottom;
}
@@ -213,7 +213,7 @@ Error {
color: $text-error;
border-top: tall $error-darken-2;
border-bottom: tall $error-darken-2;
padding: 0;
text-style: bold;
align-horizontal: center;
@@ -226,21 +226,21 @@ Warning {
color: $text-warning-fade-1;
border-top: tall $warning-darken-2;
border-bottom: tall $warning-darken-2;
text-style: bold;
align-horizontal: center;
}
Success {
width: 100%;
height:auto;
height:auto;
box-sizing: border-box;
background: $success;
color: $text-success-fade-1;
color: $text-success-fade-1;
border-top: hkey $success-darken-2;
border-bottom: hkey $success-darken-2;
border-bottom: hkey $success-darken-2;
text-style: bold ;

8
docs/examples/introduction/stopwatch.css
View File

@@ -9,12 +9,12 @@ Stopwatch {
TimeDisplay {
content-align: center middle;
opacity: 60%;
text-opacity: 60%;
height: 3;
}
Button {
width: 16;
width: 16;
}
#start {
@@ -30,14 +30,14 @@ Button {
dock: right;
}
.started {
.started {
text-style: bold;
background: $success;
color: $text-success;
}
.started TimeDisplay {
opacity: 100%;
text-opacity: 100%;
}
.started #start {

4
docs/examples/introduction/stopwatch03.css
View File

@@ -8,12 +8,12 @@ Stopwatch {
TimeDisplay {
content-align: center middle;
opacity: 60%;
text-opacity: 60%;
height: 3;
}
Button {
width: 16;
width: 16;
}
#start {

8
docs/examples/introduction/stopwatch04.css
View File

@@ -9,12 +9,12 @@ Stopwatch {
TimeDisplay {
content-align: center middle;
opacity: 60%;
text-opacity: 60%;
height: 3;
}
Button {
width: 16;
width: 16;
}
#start {
@@ -30,14 +30,14 @@ Button {
dock: right;
}
.started {
.started {
text-style: bold;
background: $success;
color: $text-success;
}
.started TimeDisplay {
opacity: 100%;
text-opacity: 100%;
}
.started #start {

54
e2e_tests/test_apps/basic.css
View File

@@ -4,33 +4,33 @@
* {
transition: color 300ms linear, background 300ms linear;
}
}
*:hover {
/* tint: 30% red;
/* tint: 30% red;
/* outline: heavy red; */
}
App > Screen {
background: $surface;
color: $text-surface;
color: $text-surface;
layers: sidebar;
color: $text-background;
background: $background;
layout: vertical;
}
DataTable {
/*border:heavy red;*/
/* tint: 10% green; */
/* opacity: 50%; */
/* text-opacity: 50%; */
padding: 1;
margin: 1 2;
height: 12;
margin: 1 2;
height: 12;
}
#sidebar {
@@ -39,7 +39,7 @@ DataTable {
dock: left;
width: 30;
offset-x: -100%;
transition: offset 500ms in_out_cubic;
layer: sidebar;
}
@@ -76,7 +76,7 @@ DataTable {
background: $secondary-background;
height: 1;
content-align: center middle;
dock: top;
}
@@ -84,8 +84,8 @@ DataTable {
Tweet {
height:12;
width: 100%;
background: $panel;
color: $text-panel;
layout: vertical;
@@ -100,7 +100,7 @@ Tweet {
.scrollable {
overflow-y: scroll;
margin: 1 2;
height: 20;
@@ -108,9 +108,9 @@ Tweet {
layout: vertical;
}
.code {
.code {
height: auto;
}
@@ -120,12 +120,12 @@ TweetHeader {
color: $text-accent
}
TweetBody {
TweetBody {
width: 100%;
background: $panel;
color: $text-panel;
height: auto;
padding: 0 1 0 0;
height: auto;
padding: 0 1 0 0;
}
Tweet.scroll-horizontal TweetBody {
@@ -145,7 +145,7 @@ Tweet.scroll-horizontal TweetBody {
/* padding: 1 0 0 0 ; */
transition: background 400ms in_out_cubic, color 400ms in_out_cubic;
}
.button:hover {
@@ -165,7 +165,7 @@ Tweet.scroll-horizontal TweetBody {
color: $text-accent;
background: $accent;
height: 1;
content-align: center middle;
dock:bottom;
}
@@ -200,7 +200,7 @@ Error {
color: $text-error;
border-top: tall $error-darken-2;
border-bottom: tall $error-darken-2;
padding: 0;
text-style: bold;
align-horizontal: center;
@@ -213,21 +213,21 @@ Warning {
color: $text-warning-fade-1;
border-top: tall $warning-darken-2;
border-bottom: tall $warning-darken-2;
text-style: bold;
align-horizontal: center;
}
Success {
width: 100%;
height:auto;
height:auto;
box-sizing: border-box;
background: $success;
color: $text-success-fade-1;
color: $text-success-fade-1;
border-top: hkey $success-darken-2;
border-bottom: hkey $success-darken-2;
border-bottom: hkey $success-darken-2;
text-style: bold ;

2
sandbox/darren/buttons.css
View File

@@ -1,4 +1,6 @@
Button {
padding-left: 1;
padding-right: 1;
margin: 3;
text-opacity: 30%;
}

16
sandbox/darren/just_a_box.py
View File

@@ -26,15 +26,15 @@ class JustABox(App):
yield Box(classes="box2")
def key_a(self):
self.box.styles.display = "none"
# self.box.styles.display = "none"
# self.box.styles.visibility = "hidden"
# self.animator.animate(
# self.box.styles,
# "opacity",
# value=0.0,
# duration=2.0,
# on_complete=self.box.remove,
# )
self.animator.animate(
self.box.styles,
"text_opacity",
value=0.0,
duration=2.0,
on_complete=self.box.remove,
)
async def on_key(self, event: events.Key) -> None:
await self.dispatch_key(event)

4
sandbox/dev_sandbox.scss
View File

@@ -54,7 +54,7 @@ Widget:hover {
}
#footer {
opacity: 1;
text-opacity: 1;
color: $text;
background: $background;
height: 3;
@@ -62,5 +62,5 @@ Widget:hover {
}
#footer.dim {
opacity: 0.5;
text-opacity: 0.5;
}

52
sandbox/will/basic.css
View File

@@ -4,18 +4,18 @@
* {
transition: color 300ms linear, background 300ms linear;
}
}
*:hover {
/* tint: 30% red;
/* tint: 30% red;
/* outline: heavy red; */
}
App > Screen {
background: $surface;
color: $text-surface;
color: $text-surface;
layers: base sidebar;
color: $text-background;
@@ -23,12 +23,12 @@ App > Screen {
layout: vertical;
overflow: hidden;
}
#tree-container {
overflow-y: auto;
height: 20;
height: 20;
margin: 1 2;
background: $panel;
padding: 1 2;
@@ -37,7 +37,7 @@ App > Screen {
DirectoryTree {
padding: 0 1;
height: auto;
}
@@ -46,10 +46,10 @@ DirectoryTree {
DataTable {
/*border:heavy red;*/
/* tint: 10% green; */
/* opacity: 50%; */
/* text-opacity: 50%; */
padding: 1;
margin: 1 2;
height: 24;
margin: 1 2;
height: 24;
}
#sidebar {
@@ -59,7 +59,7 @@ DataTable {
width: 30;
margin-bottom: 1;
offset-x: -100%;
transition: offset 500ms in_out_cubic;
layer: sidebar;
}
@@ -98,7 +98,7 @@ Tweet {
height:12;
width: 100%;
margin: 0 2;
margin:0 2;
background: $panel;
color: $text-panel;
@@ -123,9 +123,9 @@ Tweet {
layout: vertical;
}
.code {
.code {
height: auto;
}
@@ -135,12 +135,12 @@ TweetHeader {
color: $text-accent
}
TweetBody {
TweetBody {
width: 100%;
background: $panel;
color: $text-panel;
height: auto;
padding: 0 1 0 0;
height: auto;
padding: 0 1 0 0;
}
Tweet.scroll-horizontal TweetBody {
@@ -160,7 +160,7 @@ Tweet.scroll-horizontal TweetBody {
/* padding: 1 0 0 0 ; */
transition: background 400ms in_out_cubic, color 400ms in_out_cubic;
}
.button:hover {
@@ -180,7 +180,7 @@ Tweet.scroll-horizontal TweetBody {
color: $text-accent;
background: $accent;
height: 1;
content-align: center middle;
dock:bottom;
}
@@ -215,7 +215,7 @@ Error {
color: $text-error;
border-top: tall $error-darken-2;
border-bottom: tall $error-darken-2;
padding: 0;
text-style: bold;
align-horizontal: center;
@@ -228,21 +228,21 @@ Warning {
color: $text-warning-fade-1;
border-top: tall $warning-darken-2;
border-bottom: tall $warning-darken-2;
text-style: bold;
align-horizontal: center;
}
Success {
width: 100%;
height:auto;
height:auto;
box-sizing: border-box;
background: $success;
color: $text-success-fade-1;
color: $text-success-fade-1;
border-top: hkey $success-darken-2;
border-bottom: hkey $success-darken-2;
border-bottom: hkey $success-darken-2;
text-style: bold ;

4
src/textual/_styles_cache.py
View File

@@ -237,8 +237,8 @@ class StylesCache:
Returns:
list[Segment]: New list of segments
"""
if styles.opacity != 1.0:
segments = Opacity.process_segments(segments, styles.opacity)
if styles.text_opacity != 1.0:
segments = Opacity.process_segments(segments, styles.text_opacity)
if styles.tint.a:
segments = Tint.process_segments(segments, styles.tint)
return segments if isinstance(segments, list) else list(segments)

11
src/textual/css/_styles_builder.py
View File

@@ -332,7 +332,7 @@ class StylesBuilder:
"visibility", valid_values=list(VALID_VISIBILITY), context="css"
)
def process_opacity(self, name: str, tokens: list[Token]) -> None:
def process_text_opacity(self, name: str, tokens: list[Token]) -> None:
if not tokens:
return
token = tokens[0]
@@ -342,16 +342,17 @@ class StylesBuilder:
else:
token_name = token.name
value = token.value
rule_name = name.replace("-", "_")
if token_name == "scalar" and value.endswith("%"):
try:
opacity = percentage_string_to_float(value)
self.styles.set_rule(name, opacity)
text_opacity = percentage_string_to_float(value)
self.styles.set_rule(rule_name, text_opacity)
except ValueError:
error = True
elif token_name == "number":
try:
opacity = clamp(float(value), 0, 1)
self.styles.set_rule(name, opacity)
text_opacity = clamp(float(value), 0, 1)
self.styles.set_rule(rule_name, text_opacity)
except ValueError:
error = True
else:

6
src/textual/css/styles.py
View File

@@ -87,7 +87,7 @@ class RulesMap(TypedDict, total=False):
background: Color
text_style: Style
opacity: float
text_opacity: float
padding: Spacing
margin: Spacing
@@ -184,7 +184,7 @@ class StylesBase(ABC):
"max_height",
"color",
"background",
"opacity",
"text_opacity",
"tint",
"scrollbar_color",
"scrollbar_color_hover",
@@ -204,7 +204,7 @@ class StylesBase(ABC):
background = ColorProperty(Color(0, 0, 0, 0), background=True)
text_style = StyleFlagsProperty()
opacity = FractionalProperty()
text_opacity = FractionalProperty()
padding = SpacingProperty()
margin = SpacingProperty()

12
src/textual/widgets/_header.py
View File

@@ -29,14 +29,14 @@ class HeaderClock(Widget):
"""Display a clock on the right of the header."""
CSS = """
HeaderClock {
HeaderClock {
dock: right;
width: auto;
padding: 0 1;
background: $secondary-background-lighten-1;
color: $text-secondary-background;
opacity: 85%;
content-align: center middle;
text-opacity: 85%;
content-align: center middle;
}
"""
@@ -51,9 +51,9 @@ class HeaderTitle(Widget):
"""Display the title / subtitle in the header."""
CSS = """
HeaderTitle {
HeaderTitle {
content-align: center middle;
width: 100%;
width: 100%;
}
"""
@@ -79,7 +79,7 @@ class Header(Widget):
height: 1;
}
Header.tall {
height: 3;
height: 3;
}
"""

6
tests/css/test_parse.py
View File

@@ -1098,15 +1098,15 @@ class TestParseOpacity:
],
)
def test_opacity_to_styles(self, css_value, styles_value):
css = f"#some-widget {{ opacity: {css_value} }}"
css = f"#some-widget {{ text-opacity: {css_value} }}"
stylesheet = Stylesheet()
stylesheet.add_source(css)
assert stylesheet.rules[0].styles.opacity == styles_value
assert stylesheet.rules[0].styles.text_opacity == styles_value
assert not stylesheet.rules[0].errors
def test_opacity_invalid_value(self):
css = "#some-widget { opacity: 123x }"
css = "#some-widget { text-opacity: 123x }"
stylesheet = Stylesheet()
with pytest.raises(StylesheetParseError):

8
tests/css/test_styles.py
View File

@@ -120,7 +120,7 @@ def test_render_styles_border():
def test_get_opacity_default():
styles = RenderStyles(DOMNode(), Styles(), Styles())
assert styles.opacity == 1.0
assert styles.text_opacity == 1.0
@pytest.mark.parametrize(
@@ -136,14 +136,14 @@ def test_get_opacity_default():
)
def test_opacity_set_then_get(set_value, expected):
styles = RenderStyles(DOMNode(), Styles(), Styles())
styles.opacity = set_value
assert styles.opacity == expected
styles.text_opacity = set_value
assert styles.text_opacity == expected
def test_opacity_set_invalid_type_error():
styles = RenderStyles(DOMNode(), Styles(), Styles())
with pytest.raises(StyleValueError):
styles.opacity = "invalid value"
styles.text_opacity = "invalid value"
@pytest.mark.parametrize(