Matched lines indicator

[vredesbyyrd]

Version

1.5.4-1

Launch Command

echo -en "1\n2\n3\n4\n5" | rofi -dmenu

Steps to reproduce

• run rofi

What behaviour you see

• No indicator displaying number of matches / total lines

What behaviour you expect to see

• Under certain use cases, e.g, filtering large data sets, having an indicator somewhere in the prompt area that displays the matched lines / total lines could be useful, imho.

Thoughts

Filtering tools like fzf, peco display an indicator showing how many lines are matched. Having something similar in rofi could be useful. One example use case. I use rofi for querying various databases, or for displaying music playlist queue's etc. Seeing how many tracks are in a playlist at a glance would be nice to have.

fzf's --inline-info option is pretty slick imo. An indicator is displayed right next to the entry prompt, and shifts to accommodate the query .

Peco has a similar feature, by default I believe it displays filtering method [ matches (page# / total pages) ]

I know rofi is an entirely different animal compared to filtering tools like fzf, and I assume implementing a similar feature in rofi would not be very straightforward. Just an idea, searching the issues I could not find it mentioned before.

[DaveDavenport]

Should actually be pretty straightforward to implement..

Nice idea.. will look at it.

[DaveDavenport]

Added 2 widgets 'num-rows' and 'num-filtered-rows'

So a theme can add these widgets to the GUI to display.

[DaveDavenport]

quick theme test, that looks a bit better .

/*******************************************************************************
 * ROFI Color theme
 * Theme designed to show off moving, packing of widgets, icons and more.
 * User: DaveDavenport
 * Copyright: DaveDavenport
 ********************************************************************************/
* {
    selected-normal-foreground:  rgba ( 248, 248, 242, 100 % );
    foreground:                  rgba ( 248, 248, 242, 100 % );
    normal-foreground:           @foreground;
    alternate-normal-background: rgba ( 39, 40, 34, 0 % );
    selected-urgent-foreground:  rgba ( 248, 248, 242, 100 % );
    urgent-foreground:           rgba ( 249, 38, 114, 100 % );
    alternate-urgent-background: rgba ( 39, 40, 34, 0 % );
    active-foreground:           rgba ( 166, 226, 42, 100 % );
    lightbg:                     rgba ( 238, 232, 213, 100 % );
    selected-active-foreground:  rgba ( 166, 226, 42, 100 % );
    alternate-active-background: rgba ( 39, 40, 34, 0 % );
    background:                  rgba ( 39, 40, 34, 93 % );
    bordercolor:                 rgba ( 0, 43, 54, 100 % );
    alternate-normal-foreground: @foreground;
    normal-background:           rgba ( 39, 40, 34, 0 % );
    selected-normal-background:  rgba ( 20, 20, 17, 100 % );
    separatorcolor:              rgba ( 230, 219, 116, 100 % );
    urgent-background:           rgba ( 39, 40, 34, 0 % );
    selected-urgent-background:  rgba ( 249, 38, 114, 100 % );
    alternate-urgent-foreground: @urgent-foreground;
    background-color:            transparent;
    alternate-active-foreground: @active-foreground;
    active-background:           rgba ( 39, 40, 34, 0 % );
    selected-active-background:  rgba ( 20, 20, 17, 100 % );
}
window {
    border-color:     black/30%;
    background-color: darkgrey/ 95%;
    border:           2px;
    padding:          0px;
    border-radius:    10px;
    padding:          0.5em;
    spacing:          0px;

    anchor:         north;
    location:       center;
    y-offset:       -15.5em;


    children: [ inputbar, message, wrapper-mode-switcher, listview ];
}



wrapper-mode-switcher {
    orientation: horizontal;

    expand:     false;
    spacing:    0;
    children: [ icon-ms-ic1, mode-switcher, icon-ms-ic2 ];
}
icon-ms-ic1 {
    filename: "go-previous";
}
icon-ms-ic2 {
    filename: "go-next";
}
icon-ms-ic1,icon-ms-ic2 {
    size: 16;
    vertical-align: 0.8;
    expand:        false;
    border:       0px 0px 2px ;
    border-color: @separatorcolor;
}

mode-switcher {
    border:  0px;
    spacing: 0px;
    expand: true;
}

button {
    padding:      2px;
    border:       0px 0px 2px ;
    border-color: @separatorcolor;
}
button selected.normal {
    text-color: white;
    background-color: black/50%;

    border:       2px 2px 0px ;
    border-color: @separatorcolor;
    border-radius:    10px 10px 0 0;
}


sidebar {
    expand: false;
}

message {
    text-color:       black;
    background-color: lightgrey / 50%;
    border-color:     grey;
    border:           2px;
    border-radius:    5px;
    padding:          4px;
    margin:           0px 0px 0.5em;
    expand:           false;
}

listview {
    spacing:      2px ;
    scrollbar:    false;
    padding:      0.5em;
    background-color: black/50%;

    expand:       true;
    border:       0px 2px 2px ;
    border-color: @separatorcolor;
    border-radius: 0px 0px 10px 10px;
}
element {
    border:  1;
    border-color: transparent;
    padding: 4px ;
}
element.normal.normal {
    background-color: @normal-background;
    text-color:       @normal-foreground;
}
element.normal.urgent {
    background-color: @urgent-background;
    text-color:       @urgent-foreground;
}
element.normal.active {
    background-color: @active-background;
    text-color:       @active-foreground;
}
element.selected.normal {
    border:  1;
    border-color: grey/80%;
    background-color: @selected-normal-background;
    text-color:       @selected-normal-foreground;
}
element.selected.urgent {
    border:  1;
    border-color: grey/80%;
    background-color: @selected-urgent-background;
    text-color:       @selected-urgent-foreground;
}
element.selected.active {
    border:  1;
    border-color: grey/80%;
    background-color: @selected-active-background;
    text-color:       @selected-active-foreground;
}
element.alternate.normal {
    background-color: @alternate-normal-background;
    text-color:       @alternate-normal-foreground;
}
element.alternate.urgent {
    background-color: @alternate-urgent-background;
    text-color:       @alternate-urgent-foreground;
}
element.alternate.active {
    background-color: @alternate-active-background;
    text-color:       @alternate-active-foreground;
}
scrollbar {
    width:        4px ;
    border:       0;
    handle-width: 8px ;
    padding:      0;
}
sidebar {
    border:       2px 0px 0px ;
    border-color: @separatorcolor;
}
inputbar {
    text-color: @normal-foreground;
    padding: 0px 0px 0.5em;
}
case-indicator {
    text-color: @normal-foreground;
}

textbox-sep, num-filtered-rows, num-rows {
    text-color: grey;
    expand: false;
    str: "/";
    vertical-align: 0.5;
}

tb-wrap {
    orientation: horizontal;
    expand: false;
    children: [ num-filtered-rows, textbox-sep, num-rows];
}

wrapper {
    orientation: horizontal;
    text-color:       black;
    background-color: white / 70%;
    border-color:     grey;

    border: 2px;
    border-radius: 5px;
    padding: 4px;
    children:   [ icon-k, entry,tb-wrap ];
    spacing:  0.5em;
}
icon-k {
    expand: false;
    filename: "input-keyboard";
    size: 24;
    vertical-align: 0.5;

}
entry {
    vertical-align: 0.5;
}
inputbar {
    children:   [ wrapper ];
}

error-message {
    background-color: darkred/10%;
    border-color: darkred;
    border-radius: 10px;
    border: 2px;
    padding: 0.5em;

}

[vredesbyyrd]

This works and looks great! Thank you much for implementing it and sharing the example rasi.

So a theme can add these widgets to the GUI to display.

The rasi theme format appears very powerful :) I have not messed around with it much until now. One question if you do not mind...

On 1.5.4-1 I used the following to modify the color of matched strings:

element {
    highlight: bold underline #4DB6AC;
}

working example

After building the latest commit, using highlight no longer has an effect. A change in the theme engine perhaps?

Thanks for your time.

[DaveDavenport]

element {
highlight: bold underline #4DB6AC;
}

try element-text widget.

[vredesbyyrd]

try element-text widget.

I missed this response, This works, thank you for the info

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.