Fold functions view along the numbers


#1

Hello all,

I am looking for a package that shows the fold arrows along the numbers on the left side like pycharm does.
Attached is a screenshot from pycharm.

In atom I do get these but only when I hover over the numbers column and not in normal view.
Has any one come across such a package?


#2

Try this in your styles.less:

atom-text-editor .gutter .line-number.foldable .icon-right {
  visibility: visible
}

#3

Cool. Thanks. Got a hang of using other modifications as well.


#4

Anything you care to share?


#5

I picked a few from other posts. Below is my stylesheet:

atom-text-editor::shadow {
    /* show a dotted line underneath folded lines */
    .fold-marker {
        &::before {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            border-bottom: 1px dashed @syntax-invisible-character-color;
        }
    }

    .editor {
        .invisible-characters {
            opacity: 1;
        }
    }

    .line.cursor-line .fold-marker {
        &::after {
            color: @syntax-text-color;
        }

        &::before {
            border-color: @syntax-text-color;
        }
    }
    // Cursor style
    .cursor {
        // Makes the cursor pulse instead of blink
        transition: opacity 0.2s;
        border-color: #FF8300; // Light Orange
        border-width: 3px;
    }
    // Makes the bracket matcher highlight more noticeable
    .bracket-matcher .region {
        border-bottom: 3px solid yellow;
    }
    // Highlights the cursor line
    .cursor-line {
        background-color: @background-color-highlight;
    }
    // Make fold arrows always visible
    .line-number.foldable .icon-right {
        visibility: visible;
    }

    .indent-guide-improved {
        background-color: gray;

        &.indent-guide-stack {
            background-color: gray;

            &.indent-guide-active {
                background-color: cyan;
            }
        }
    }
}

#6

Thanks for sharing. I aim to test those now.

Just a note - drop the ::shadow … leave it out.
See:
http://flight-manual.atom.io/shadow-dom/
http://flight-manual.atom.io/upgrading-to-1-0-apis/sections/upgrading-your-ui-theme-or-package-selectors/

The colours shown in your picture - have you replicated that in Atom? If so… which theme?


#7

@danPadric thanks for the links. I will update my stylesheet accordingly. Now I am able to understand what the depreciation warning is. :slight_smile:
I think I have most of the colours covered. in my atom. I am using ‘Atom Dark’ UI theme with ‘Monokai’ syntax theme and ‘Roboto Mono’ font. Attached is a screenshot.


#8

Thanks for sharing.
I was actually hoping you have a colour theme that delivers the syntax colours for Python as you show in your original picture.

Regardless - you might find the following of interest:

The core thing to focus on is the fact that the colouring can adapt according to the light / dark theme. I have found that in some lighting situations I have to use a light theme.

What is the code for that you show in your latest picture? Is it yours?


#9

Hey @danPadric. Thanks again for sharing the gist. I will check how that config looks/works for me.
For python, with the above mentioned theme settings I get something like below:

The previous code is a chef recipe to setup weave.