/ Window

A minimal window manager that may be included in your ReactJS app

A minimal window manager that may be included in your ReactJS app

react-paneless

A minimal window manager for engineering web apps.

I am developing paneless to use in a larger app. I want to be able to display multiple, overlapping windows. Each "window" is called a frame. Here is a screenshot of one frame of my app with five panes.

  • All app content is rendered in panes.

  • Frames may be minimized to a thumbnail size.

  • A frame's header (AKA title bar) and footer (AKA status bar) may be hidden. When a header is hidden you can still move the frame by hovering the mouse around its top border.

  • Panes are rendered in frames.

  • Each pane may be split so that a single frame may contain an arbitrary layout of multiple panes.

  • Tabbed panes are implemented by this library.

  • This library supports persisting layouts.

  • Blue lines indicate the frame/pane with user focus. You can navigate around fames and panes with the Alt-f and Alt-p keys. Alt-b will activate the focused pane's menu. Hitting Alt-b again will activate the associated frame's menu. Arrow keys are used to navigate the menu's items and Escape (or clicking anywhere outside) closes the menu.

  • The blue outline indicating the focused pane appears only for a few seconds and then fades so as not to obscure the app's content in that pane.

  • A frame is sized with the mouse by hovering around its lower right corner.

RR-App-ScreenShot-002

Warning

Early development. Tried only on Chrome so far.

Example

This repository includes an example app. Images below are of the example app, illustrating features.

I suppose it should also be mentioned that paneless does the rendering of frames (normal and minimized) in an app-frame that has an app-header and app-footer.

Any pane's button bar is exposed by hovering the mouse around the top of the pane.

Paneless-Pane-BtnBar-001

Install

Clone this repository in a directory on your machine. Then just play around with the example app.

Or, if you already have an app you want to include it in, then do -

npm install <paneless-directory>

where <paneless-directory> is the directory you cloned this repository in.

Usage

See the example app.

GitHub