alexislozano / neutrino Goto Github PK

As selectable is false by default, we don't need an unset_selectable function. Moreover, set_selectable should take no arguments, and only set selectable to true. All the other flags are already implemented like that, we should not change the API for one function.

Let me know if you want to do it @fabrixxm, I'll do it otherwise.

On Windows (at least, haven't tested other systems) all UI text is currently selectable. SASS's negation selector doesn't appear to work with multiple arguments in IE.

As neutrino windows can have a theme which does not always match frame and titlebar (especially for MS windows) I woluld like to open a window without frame and titlebar so that everything is completly customizable (if necessary a custom titlebar could be created out of a small container with an image (app-icon), a label titlebartext) and 3 small buttons (minimize, maximize, close) - or whatever you like to have here) and even frame could follw the chosen theme. What do I have to do, to get such a window?

https://github.com/koute/stdweb

Hi, first of all nice work! I really like your library!

I was wondering if there was a way to write html and add rust event listeners directly to it.

Thanks!

But according to this reply, the Reload button:

should appear only when the debug attribute of window is set to true, which is not the case by default

I have tried running this only on Windows. There are enough problems that I’m just filing this lot in one issue rather than filing many issues. Do what you will with this feedback; I doubt I shall return to the project. (I was trying it out out of curiosity; I have no near-future projects that could benefit from such a thing.)

• Doesn’t handle high-DPI displays.
• The web view is not initially focused, so keyboard shortcuts don’t work until you click into the window.
• Alt should be getting me access to the menus, e.g. Alt followed by F, or Alt+F, for the File menu. Use access keys everywhere, with & prefixing being the standard (e.g. “&File”), and underline the corresponding character in the menus when interacting with them by keyboard (that is, it’s acceptable, though not required, to hide the underline if you’re clicking, but it’s required that you show the underlines if you’re using the keyboard at all).
• Arrow keys should navigate around inside and between menus.
• Menus need to completely steal and hold focus.
  • You should very strongly consider using native menus rather than HTML ones, since you basically need to do that on macOS to feel native anyway.
• In tabs, I expect Ctrl+Tab to switch to the next and Ctrl+Shift+Tab the previous.
• The keyboard shortcut technical mechanism is way too simple and will not scale well at all.
• Keyboard shortcuts are not formatted according to platform conventions. On Windows the keyboard shortcut platform convention is to use + for chords, not -; e.g. Ctrl+Q, not Ctrl-Q. macOS’s conventions are much more radically different, and better-documented too.
• You should set cursor: default on the root, to go with the user-select: none behaviour. cursor: auto should be withheld for places like .selectable.
• user-select: none doesn’t work properly in MSHTML (which you’re using on Windows), as it only blocks selection from starting inside such an area, not from selecting text. This means that to do things properly you need to manage the selection more actively. We do this in Fastmail’s webmail (on which I work), where UI elements are generally user-select: none, and we also want to contain the selection, so that when showing multiple emails in a thread, a selection starting inside one message doesn’t extend outside that message (this matches people’s expectations).
  • Setting * { user-select: none; } is a bad idea; it’s generally better to set :root { user-select: none } and rely on the cascade.
• You look to have implemented what you could with div soup. This is a terribly bad idea. Effects include:
  • Most controls are not focusable.
  • Basically nothing is screen-reader accessible.

I strongly recommend that you have a look at how other projects do things, both desktop and web. For desktop, Qt is often a good one to look at, and Microsoft and Apple’s native toolkits are good too. For web, the story is much weaker, in part because it’s generally not about using web tech on the desktop, but rather on the web where various additional limitations apply and where you’re not trying to imitate a desktop platform; but there are a few options out there that work well for general UI, and I would consider Office UI Fabric’s React implementation to be the best in most regards.

On the div soup problem: use the native control elements everywhere, even when it makes styling harder, as long as it’s still possible. Set ARIA attributes where suitable and definitely where you don’t use the native form field types. Manage focus properly. Familiarise yourself with documents like ARIA in HTML and WAI-ARIA Authoring Practices.

As it stands, I like the goals of this project, but I think you’re ignoring too much good work that already exists, and implementing all the same basic problems all over again, with some additional problems to boot where you’re doing things in ways that are discouraged everywhere, and not just a matter of web tech not being perfectly adapted to desktop problems.

The feel of the entire library at present is “technical proof of concept”. In web terms, it feels more like jQuery in its ad-hocness and less like a solid MVC framework. There’s far more code than there should be in many places due to things like you reimplementing parts of the DOM, but not as much as the DOM provides either. I strongly recommend aiming to wrap existing DOM functionality more of the time, rather than reimplementing it badly on top of it. There are various other places where the design is not going to scale well; for example, the listener approach is quite insufficient for keyboard shortcuts, because you often want to enable or disable keyboard shortcuts based upon the presence of widgets on screen, but the widgets won’t ancestors of the focused element, so under your current design such things would tend to need to go on the window listener, which scales very poorly.

The underlying library that we use at Fastmail is a home-grown one and open source, Overture. We don’t generally recommend other people use it (I’m not aware of anyone other than us that uses it, and we definitely maintain it for ourselves), but there are parts of it that you could find useful to think about in its design—because unlike most JS libraries, it is very much designed for making applications, and not web pages. Perhaps most immediately pertinent is its handling of keyboard shortcuts and modals. It starts with needing to track when views enter and exit the document, so that they can register and unregister things.

In more popular code for the web, I again recommend Fabric React. Its management of things like focus styling and functionality is exquisite, peerless in web tech. It’s just a pity it’s React rather than generic JS!

I couldn't find setting to make window scrollable. Is is possible somehow?

The textboxes do not store the input correctly. If I write something and switch via Tab it works just fine. However if I switch via the mouse the textbox clears itself. Trying to log in doesn't work either.
Not sure if I misstype the password or the button is not working.

A git clone, followed by cargo test gave me:

failures:

---- src/widgets/menubar.rs - widgets::menubar::MenuBar (line 89) stdout ----
error[E0061]: this function takes 3 parameters but 1 parameter was supplied
  --> src/widgets/menubar.rs:151:20
   |
64 |     let mut file = MenuItem::new("File");
   |                    ^^^^^^^^^^^^^^^^^^^^^ expected 3 parameters

error: aborting due to previous error

For more information about this error, try `rustc --explain E0061`.
Couldn't compile the test.

rustc --version
rustc 1.40.0 (73528e339 2019-12-16)

cargo --version
cargo 1.40.0 (bc8e4c8be 2019-11-22)

Adwaita and OSX themes have ticks in the checked Checkboxes. They appear as squares in Windows. I think it has something to do with CSS clip-path.

I think this does not come under MVC. But is it possible to generate update events artificially to force-execute on_update functions?

Example, I want to auto-reload the window from time to time, but I don't want to click on a button every 5 minutes.

We can follow https://docs.microsoft.com/en-us/windows/uwp/design/

• Arrows to navigate menus
• Alt in menu and underlined items

Hello!There is some question when running the example given by the wiki.
It reminds this:

error: failed to run custom build command for webview-sys v0.1.4

Caused by:
process didn't exit successfully: D:\vsc\boo\target\debug\build\webview-sys-4677667d63293584\build-script-build (exit code: 1)
--- stderr

error occurred: Command "D:\Microsoft Visual Studio 11.0\VC\bin\amd64\cl.exe" "-nologo" "-MD" "-Z7" "-Brepro" "-I" "webview.h" "-W4" "-DDEBUG" "-DWEBVIEW_WINAPI" "-FoD:\vsc\boo\target\debug\build\webview-sys-e15e5e355a126747\out\webview.o" "-c" "webview.c" with args "cl.exe" did not execute successfully (status code exit code: 2).

Whats wrong?I dont know how to solve it. Can you help me？Thank YOU!

I saw you did it in one of your branches @fabrixxm . Would it be possible for you to make a PR ? Let me know if you need help :)

The TextInput field keeps resetting itself after typing in some text and clicking somewhere else on the screen (or pressing keys like Alt). A change event never occurs

Platform: Windows 10, 1909
Compiler: Rust 1.40.0 (stable-x86_64-pc-windows-msvc)

use {
    neutrino::widgets::{
        button::*,
        container::{Alignment, Container, Direction, Position},
        label::Label,
        textinput::*,
    },
    std::{cell::RefCell, rc::Rc},
};

pub struct Options {
    game_path: String,
}

impl Options {
    fn new() -> Self {
        Self {
            game_path: "".to_string(),
        }
    }

    #[allow(dead_code)]
    fn get_game_path(&self) -> &str {
        &self.game_path
    }

    fn set_game_path(&mut self, game_path: String) {
        self.game_path = game_path;
    }
}

pub struct GamePathListener {
    options: Rc<RefCell<Options>>,
}

impl GamePathListener {
    fn new(options: Rc<RefCell<Options>>) -> Self {
        Self { options }
    }
}

impl TextInputListener for GamePathListener {
    fn on_change(&self, state: &TextInputState) {
        println!("{:#?}", state.value());
        self.options
            .borrow_mut()
            .set_game_path(state.value().into());
    }

    fn on_update(&self, _state: &mut TextInputState) {}
}

pub struct SaveButtonListener {
    options: Rc<RefCell<Options>>,
}

impl SaveButtonListener {
    fn new(options: Rc<RefCell<Options>>) -> Self {
        Self { options }
    }
}

impl ButtonListener for SaveButtonListener {
    fn on_change(&self, _state: &ButtonState) {
        println!("{}", self.options.borrow().get_game_path());
    }

    fn on_update(&self, _state: &mut ButtonState) {}
}

pub fn construct_options_container() -> Box<Container> {
    let options = Rc::new(RefCell::new(Options::new()));

    let mut root_container = Container::new("options-page");
    root_container.set_position(Position::Center);
    root_container.set_alignment(Alignment::Center);

    let mut game_path_container = Container::new("game-path-container");
    game_path_container.set_alignment(Alignment::Center);
    game_path_container.set_position(Position::Center);
    game_path_container.set_direction(Direction::Horizontal);

    let mut game_path_label = Label::new("game-path-label");
    game_path_label.set_text("Game path: ");

    let mut game_path_input = TextInput::new("game-path");
    let game_path_input_listener = GamePathListener::new(Rc::clone(&options));
    game_path_input.set_listener(Box::new(game_path_input_listener));
    game_path_input.set_placeholder("Game path");
    game_path_input.set_size(70);

    game_path_container.add(Box::new(game_path_label));
    game_path_container.add(Box::new(game_path_input));

    let mut save_button = Button::new("save-options");
    let save_button_listener = SaveButtonListener::new(Rc::clone(&options));
    save_button.set_listener(Box::new(save_button_listener));
    save_button.set_text("Save");

    root_container.add(Box::new(game_path_container));
    root_container.add(Box::new(save_button));

    Box::new(root_container)
}

Hello people!
For those using neutrino, I'm very happy my work was useful for someone. But it's been some time I don't intend to work anymore on this project.
I could add some new maintainers to the project, would it be a solution ? If you want to become a maintainer of neutrino, please answer to this issue ;)

• radios
• checkboxes
  and maybe others

Not sure if it is doable, and I don't have one. So if someone wants to take this task ;)

We should add them in our theme then

I would like to create an overlay with neutrino that stays on top of all other windows. How would I approach that?

Right now it is not possible as far as I know to set an Icon on the top left of the titlebar on Windows.

For unified code readability?

I tried these:

hello_world
demo_default
image_viewer

A window appears, but its content is blank.

Here a screenshot of hello_world:

When I click inside of the window, a context menu with the field "Reload" appears (not sure whether it's a bug or a feature — should I open an issue for this too?). I do reload, but the window stays blank anyway.

Something using SVG to display could be nice. Maybe using https://gionkunz.github.io/chartist-js/ ? It should not be too hard to implement.

I want to implement a 2D plotting widget from what I could find, the easiest way to draw lines is to use a canvas with a 2D context. Now, I'm not an expert in web-related stuff at all, so I followed this tutorial, and in the eval() function of my new widget, I'm returning the following.

Style:

<style type="text/css"></style>

HTML:

<canvas id="my_graph" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('my_graph');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 20);
context.lineTo(200, 160);
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
</script>

But all I'm getting is a blank window. Is what I'm doing not currently possible with neutrino? How can I view the DOM that gets generated, and then rendered? Is there a different and better way of doing this?

After setting up a simple UI with just a menu, I realized that the text is a bit blurry (small resolution).
This is a screen shot:

These are my system specification:

Please send your PR as soon as possible !
@fabrixxm

currently widgets use a format function to generate an html string. What about something that is more jsx-like?

https://github.com/bodil/typed-html

I use KDE/browser in dark mode and normally sites adapt accordingly, I wasn't expecting this to impact neutrino, but it does.. partially anyway. This is how it looks:

We can follow https://developer.apple.com/design/human-interface-guidelines/macos

All wiki examples mention a binary neutrino. Where do I find it. Or how can I build it?

https://github.com/alexislozano/neutrino/wiki/Hello-World

neutrino run --example hello_world

or

https://github.com/alexislozano/neutrino/wiki/Adding-data

neutrino run --example add_data

I forgot it whereas it is created in the Container example.

prixt is working on it.

For now, we can only do ctrl+*. We should be able to have shortcuts without ctrl. Plus we should think about how different OSes set their default shortcuts