Giter Club home page Giter Club logo

Comments (4)

rodrigogiraoserrao avatar rodrigogiraoserrao commented on September 24, 2024

Hey there!
I'm struggling to understand exactly what the underlying issue seems to be, maybe some sort of MRE would be helpful? Something with code that I can run.

I say this because I created a silly subclass of DirectoryTree that changes the colour of files/folders that have an a in the name and that custom colour doesn't go away when I click those files/folders or when I navigate the directory tree.
The recording below shows said directory tree in action where all files/folders with an a in the name are coloured green:

Screen.Recording.2024-01-18.at.14.59.28.mov
Code
from textual.app import App, ComposeResult
from textual.widgets import DirectoryTree


class MyDictT(DirectoryTree):
    def render_label(self, node, base_style, style):
        text = super().render_label(node, base_style, style)
        if "a" in str(node.data.path):
            text.stylize("green")
        return text


class MyApp(App[None]):
    def compose(self) -> ComposeResult:
        yield MyDictT(".")


if __name__ == "__main__":
    MyApp().run()

from textual.

JoeZiminski avatar JoeZiminski commented on September 24, 2024

Thanks @rodrigogiraoserrao! Apologies, did not think to supply an MRE 🤦‍♂️ Please find below:


from rich.style import Style
from rich.text import Text
from textual.app import App
from textual.widgets import DirectoryTree
from textual.widgets._directory_tree import DirEntry
from textual.widgets._tree import TOGGLE_STYLE, TreeNode


ROOT_PATH = "path/to/some/folder"
FOLDERNAME_TO_HIGHLIGHT = ["dir_1", "dir_2"]


class MyDirectoryTree(DirectoryTree):

    DEFAULT_CSS = """
    MyDirectoryTree:focus > .tree--cursor  {
    background: $panel-lighten-2;
    }
    """

    def render_label(
        self, node: TreeNode[DirEntry], base_style: Style, style: Style
    ) -> Text:
        """
        This function is exactly the same as the parent method
        except for the `style_node_color` call.
        """

        node_label = node._label.copy()
        node_label.stylize(style)

        node_path = node.data.path

        if node._allow_expand:
            prefix = (
                "📂 " if node.is_expanded else "📁 ",
                base_style + TOGGLE_STYLE,
            )
            node_label.stylize_before(
                self.get_component_rich_style(
                    "directory-tree--folder", partial=True
                )
            )
        else:
            prefix = (
                "📄 ",
                base_style,
            )
            node_label.stylize_before(
                self.get_component_rich_style(
                    "directory-tree--file", partial=True
                ),
            )
            node_label.highlight_regex(
                r"\..+$",
                self.get_component_rich_style(
                    "directory-tree--extension", partial=True
                ),
            )

        self.style_node_color(node_label, node_path)

        text = Text.assemble(prefix, node_label)
        return text

    def style_node_color(self, node_label, node_path):
        if node_path.stem in FOLDERNAME_TO_HIGHLIGHT:
            node_label.stylize_before("bright_red")

class TuiApp(App):

    def compose(self):
        yield MyDirectoryTree(ROOT_PATH)

if __name__ == "__main__":
    TuiApp().run()

It looks long because of the override of render_label but the only change in the overriden method is the call to style_node_color. To highlight some directories you will need to replace ROOT_PATH and FOLDERNAME_TO_HIGHLIGHT with some arbitary directory path on your system, and folder name/s within it, repsectively.

I wonder why we are seeing different behaviour, maybe it is due to how we are styling the node (in the overriden render_label). The result I get is like the below:

image

Thanks a lot for taking a look at this!

from textual.

rodrigogiraoserrao avatar rodrigogiraoserrao commented on September 24, 2024

You don't have to copy and paste the whole code only to add an extra function call at the end.

This would do the same thing as your code:

    def render_label(
        self, node: TreeNode[DirEntry], base_style: Style, style: Style
    ) -> Text:
        text = super().render_label(node, base_style, style)
        self.style_node_color(text, node.data.path)
        return text

As for the overriding, notice that in my comment above I'm using Text.stylize whereas your code is using Text.stylize_before:

I'll close this issue as it seems to me it is resolved.
Feel free to reopen if you feel I missed something!

from textual.

github-actions avatar github-actions commented on September 24, 2024

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

from textual.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.