jarek-foksa / xel Goto Github PK

View Code? Open in Web Editor NEW

675.0 675.0 58.0 1.67 MB

Xel - Widget toolkit for building native-like Electron and Web apps

Home Page: https://xel-toolkit.org

License: Other

JavaScript 80.52% CSS 19.01% HTML 0.22% Fluent 0.25%

xel's People

Contributors

Stargazers

Watchers

Forkers

lulzzz ux-ftw bengotow neuroradiology minhpascal antropov0 d-demirci tomjamescn dppage dimapaloskin helsus happy-ferret seraekim sandor michalczerwinski depeele coldcsnow wetdesertrock present1001 micheg lukasdrgon cube3power waldercong nfwyst l3dlp-sandbox xiongbinsh yudaprama vlinhd11 undeadinu doubleslashdesign2 fengweijp yjprakash hhy5277 nelaurynas nunodotferreira fucora dbuentello beekeeper-studio jozeyhall manufitoussiwit alansferreira astrowq zazaulola sss-software fxztam ajunlonglive fairhopeweb gjcfer felipetesc blendermf zilveer jamiller619 chinesedron dbrnz madtechservices nick2834

xel's Issues

Dockable layout support for tabs

It would be nice to have docking / dockable layout support for tabs since it is quite common component for desktop app UIs.

Buttons onClick event doesnt work with Material Theme

Hi!

The buttons onClick event doesnt work with Material Theme but works correctly with Vanilla and Macos themes.

<link rel="stylesheet" href="node_modules/xel/stylesheets/material.theme.css">
<script src="node_modules/xel/xel.min.js"></script>

<x-button><x-label onclick="openURLNavigator()">Open in Navigator</x-label> </x-button>

<script>
	function openURLNavigator() {
		alert("Open Navigator clicked");
	}
</script>

What I am doing bad?
Thanks

x-notification

This widget is also known as a "toast".

Inspirations:

x-tooltip

Inspirations:

Sample usage:

<x-button>
  <x-label>Open</x-label>
  <x-tooltip>Click to open a new tab</x-tooltip>
</x-button>

Fluent theme

Should implement Microsoft Fluent Design System.

Inspirations:

https://metroui.org.ua/

Inconsistent hit testing on mobile

Upstream bug with more details: https://bugs.chromium.org/p/chromium/issues/detail?id=625198

x-nav / x-list

Something like: x-menu
But for stand-alone like the demo left side menu

SyntxError:

I am getting an Uncaught SyntaxError in devtools while launching my Electron project with Xel installed:

missing ) after argument list xel.min.html:1

Help is appreciated – would like to test out Xel...

Problem to load icons

Hello Ive got a problem with x-icons

I cannot use icons on "file" URLs. But it is important because I'm going to create an electron application. I've tried out many things that I've found with google to solve it but none of them works.

The HTML looks like this, and Yes I did include the xel files in the right order etc.
<x-button> <x-icon name="expand-less"></x-icon> </x-button>

But the console throws this error:
Unsafe attempt to load URL file:///G:/Projects/Web/James%20-%20AI/App/src/renderer/node_modules/xel/images/icons.svg#expand-less from frame with URL file:///G:/Projects/Web/James%20-%20AI/App/src/renderer/index.html. 'file:' URLs are treated as unique security origins.

x-table

Should rely on CSS "display: table" and "position: sticky".

Inspirations

Document events available per element

It would be good if the documentation on https://xel-toolkit.org/ included a list of events that are available for each element.

<x-overlay> should not be preventing "wheel" events, use "overscroll-behavior" instead (Requires Chrome 63)

Documentation: https://developers.google.com/web/updates/2017/11/overscroll-behavior

iOS theme

Implement a theme that follows iOS HIG.

Please compile the JavaScript on your website

Using classes and async on browsers that don't support it natively is not a good idea. However, your website's JS throws errors because it doesn't recognise what async means.

So impossible to see your website on Chrome because of:

xel.min.js:764 Uncaught SyntaxError: Unexpected identifier.

You should probably use something like Babel to compile your code.

another issue that you closed but which is not fixed

Flat theme

Implement Flat theme inspired by http://designmodo.github.io/Flat-UI/ and http://element.eleme.io/

Follow https://www.viget.com/articles/color-contrast and https://www.nngroup.com/articles/low-contrast/.

Icons shouldn't load from relative path

I am getting this error
icons.svg net::ERR_FILE_NOT_FOUND
the problem is that my html file is not in the root of my project (it is inside an "app" folder) but xel is trying loding icons.svg from the relative path which results in "Desktop/MyProject/app/node_modules/xel/images/icons.svg net::ERR_FILE_NOT_FOUND"
Can you please fix this? Should be an easy fix. Thank you!

problems with numberinput

I am using this angular code to set/change my canvas size:

	$scope.width = null;
	$scope.height = null;
    $scope.setNumeric = function (width, height) {
		console.log("test");
         canvas.setWidth(width);
    canvas.setHeight(height);
    canvas.calcOffset();
    };

Using regular inputs like this is working fine:

<form>     
    <input type="text" name="name" ng-model="width" />
	<input type="text" name="name2" ng-model="height" />
    <button ng-click="setNumeric(width, height)"></button>
</form>

Using your numberinput like this is not working. The function gets fired (according to log) but my canvas is not resizing. This happens with or without putting this code inside of a form tag:

	<div class="col-4">
		<x-numberinput class="small" skin="condensed" ng-value="canvas.getWidth()"  suffix=" px" ng-model="width">
			<x-stepper></x-stepper>
		</x-numberinput>
	</div>
	<div class="col-1">
	</div>
	<div class="col-4">
		<x-numberinput class="small" skin="condensed" ng-value="canvas.getHeight()"  suffix=" px" ng-model="height" >
			<x-stepper></x-stepper>
		</x-numberinput>
	</div>

	<div class="col-3"></div>
	<div class="col-4 centered_sm">Width</div>
	<div class="col-1"></div>
	<div class="col-4 centered_sm">Height</div>

	<div class="col-3"></div>
	<div class="col-9">
		<x-button skin="textured" style="width:197px;" type='submit' ng-click="setNumeric(width, height)">
			<x-box>
				<x-label>Apply</x-label>
			</x-box>
		</x-button>
	</div>

Add "Resources" section to the project site

For now it should contain only two sections:

"Editor extensions"
- https://marketplace.visualstudio.com/items?itemName=noeguerreroponce.Xel
"Demos"
- https://type-fu.com/demo

costume url

@import url(https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i);
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i);

should be local for electron (desktop applications).

xel/elements/x-icon.js

Line 14 in 5e8d556

    
                 <link rel="stylesheet" href="node_modules/xel/stylesheets/x-icon.css" data-vulcanize>

Url path should be costumizable, if you change you app directory like this:

<link rel="import" href="../node_modules/xel/xel.min.html">
<link rel="stylesheet" href="../node_modules/xel/stylesheets/material.theme.css">

AngularJS – bind-value-to="" not propagated?

Not sure what's going on there. We had the problem with the "x-numberinput" not working with the bind-value-to in AngularJS. Now the "x-numberinput" is working perfectly but other elements like "x-radio" etc. will not accept the two way binding of AngularJS.

This is working in my code:

        <x-box>
            <label>
                Left
                <input type="radio" name="origin-x" class="origin-x btn-object-action" value="left" bind-value-to="originX">
            </label>
            <label>
                Center
                <input type="radio" name="origin-x" class="origin-x btn-object-action" value="center" bind-value-to="originX">
            </label>
            <label>
                Right
                <input type="radio" name="origin-x" class="origin-x btn-object-action" value="right" bind-value-to="originX">
            </label>
        </x-box>

This one is not working:

        <x-radios>
            <x-box>
                <x-radio id="first-radio" toggled value="left" bind-value-to="originX"></x-radio>
                <x-label for="first-radio" id="label-1">Left</x-label>
            </x-box>
            <x-box>
                <x-radio id="second-radio" value="center" bind-value-to="originX"></x-radio>
                <x-label for="second-radio" id="label-2">Center</x-label>
            </x-box>
            <x-box>
                <x-radio id="third-radio" value="right" bind-value-to="originX"></x-radio>
                <x-label for="third-radio" id="label-3">Right</x-label>
            </x-box>
        </x-radios>

Trying to get the function with some Button fail also:

        <x-buttons tracking="1">
            <x-button toggled ng-value="left" bind-value-to="originX" ng-model="originX" click="setActiveProp('originX', left);">
                <x-label>Left</x-label>
            </x-button>

            <x-button ng-value="center" bind-value-to="originX" ng-model="originX" ng-model="originX" click="setActiveProp('originX', center);">
                <x-label>Center</x-label>
            </x-button>

            <x-button ng-value="right" bind-value-to="originX" ng-model="originX" ng-model="originX" click="setActiveProp('originX', right);">
                <x-label>Right</x-label>
            </x-button>
        </x-buttons>

Any clue?

BTW: the new release is cool. I really love your work. Thank you for your efforts. I wish I could be able to contribute more. But at least I will try to give you a UseCcase (getting better and better, but takes time).

https://github.com/sandor/floido-designer

:-)

Question: Why did you abandoned the galaxy style – not that I would need it but it was pretty nice?

Anyhow: as a suggestion, you should make the latest build available for linking on codepen/fiddle etc. – at least as a "built" as gitraw, so that we can reproduce problems?

icons are breaking

using this will show the icons as intended (see first screenshot):

					<div class="Grid-cell Grid--full">
						<div class="content">
							<x-buttons style="padding:4px;" tracking="1">
								<x-button skin="plain">
									<x-icon name="edit"></x-icon>
									<x-label style="margin-left:4px;">Editor</x-label>
								</x-button>

								<x-button skin="plain">
									<x-icon name="visibility"></x-icon>
									<x-label style="margin-left:4px;">Preview</x-label>
								</x-button>

								<x-button skin="plain">
									<x-icon name="code"></x-icon>
									<x-label style="margin-left:4px;">Code</x-label>
								</x-button>
							</x-buttons>
						</div>
					</div>
					<div class="Grid-cell right-menu">
						<div class="content">
							<x-buttons tracking="1">
								<x-button skin="iconic">
									<x-box vertical>
										<x-icon name="extensions-color"></x-icon>
										<x-label>Editor</x-label>
									</x-box>
								</x-button>

								<x-button skin="iconic">
									<x-box vertical>
										<x-icon name="visibility"></x-icon>
										<x-label>Preview</x-label>
									</x-box>
								</x-button>

							</x-buttons>
						</div>
					</div>

changing the icon name (extension-color) to edit will break the icons (screenshot2):

					<div class="Grid-cell Grid--full">
						<div class="content">
							<x-buttons style="padding:4px;" tracking="1">
								<x-button skin="plain">
									<x-icon name="edit"></x-icon>
									<x-label style="margin-left:4px;">Editor</x-label>
								</x-button>

								<x-button skin="plain">
									<x-icon name="visibility"></x-icon>
									<x-label style="margin-left:4px;">Preview</x-label>
								</x-button>

								<x-button skin="plain">
									<x-icon name="code"></x-icon>
									<x-label style="margin-left:4px;">Code</x-label>
								</x-button>
							</x-buttons>
						</div>
					</div>
					<div class="Grid-cell right-menu">
						<div class="content">
							<x-buttons tracking="1">
								<x-button skin="iconic">
									<x-box vertical>
										<x-icon name="edit"></x-icon>
										<x-label>Editor</x-label>
									</x-box>
								</x-button>

								<x-button skin="iconic">
									<x-box vertical>
										<x-icon name="visibility"></x-icon>
										<x-label>Preview</x-label>
									</x-box>
								</x-button>

							</x-buttons>
						</div>
					</div>

key attribute of x-shortcut conflicts with react's key attribute

It seems to me, that the key attribute for the x-shortcut is "misread" by react as an identification key. This way I can't display shortcuts correctly. I can only display the modifiers, but the character of the shortcut is not shown (see picture).

Is it possible to rename the key attribute to char or val?

FYI, I am not using react directly, but with Clojurescript and Reagent. IMO the problem should persist with JSX.

Add Marko support

Hi, I work one electron project using Marko.

When I compile (with webpack), it failed because x-button,etc are not defined templates.

Solution I found ?

Just create a marko.json at the root of project and describe all tags with attributes.
Exemple :

{
  "tags": {
    "x-input": {
      "attributes": {
        "type": "string"
      }
    },
    "x-icon": {
      "attributes": {
        "name": "string",
        "iconset": "string"
      }
    },
    "x-label": {
      "attributes": {
        "data-vivaldi-spatnav-clickable": "number"
      }
    },
    "x-button": {
      "attributes": {
        "data-vivaldi-spatnav-clickable": "number"
      }
    }
  }
}

Possible improvement, add an marko.json at the root of project who discribe all tags with attributes ?

Adding content to x-doctabs

Hello,
I would like to add some content to my x-doctabs, something like:

        <x-doctabs>
          <x-doctab>
            <x-label>Normal</x-label>
            <x-content>my content</x-content>
          </x-doctab>

          <x-doctab selected>
            <x-label>Selected</x-label>
            <x-content>my other content</x-content>
          </x-doctab>
       </x-doctabs>

There is no example about this in the docs. Is it even possible?
Also, when clicking the "+" button to create a new tab, is there some way to control this? To assign a title and mayble a content? In a word: How do I control the x-doctabs element?

Thank you.

Warning in DevTools

xel.min.html:1 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.

Is this something I should worry about?

Stable API

Public API of each element has to be reviewed and adjusted in case there are any inconsistencies. Then release the first stable version of Xel (1.0.0).

Inspirations:

xel-toolkit.org is blank

The demo website loads an empty canvas; the sole element is a element and it's a light gray background. Does it have something to do with the xel.min.js script tag having a type of 'module' ?

Chrome 60 on Windows 10, Chrome 60.0.3112.89 on iOS 9.3.2, Chrome 58.0.3029.83 on Android 5.1.1

x-colorselect

Either implement it from scratch or just wrap the standard HTML5 input.

x-actionbutton

Also known as FAB or Floating Action Button.

Inspirations:

https://github.com/kciter/KCFloatingActionButton
https://material.io/guidelines/components/buttons-floating-action-button.html
https://material-components-web.appspot.com/fab.html
Zoom in/out buttons in Chrome's PDF viewer

x-palletecolorpicker

Should look like the "Block" picker on https://casesandberg.github.io/react-color/

Uncaught TypeError: Cannot read property 'getAttribute' of null

Syntax Error Loading HTML file

Xel has been working great for me on one of my Windows 7 machines. Yet, I tried loading it on a different Windows 10 machine today. I get the following error when loading the html file:

xel.min.html:1 Uncaught SyntaxError: missing ) after argument list

I have tried installing different versions from npm (0.0.12 to 0.0.14). They all give this error. I am using xel on the same project with the same code on both machines, so I don't know where to go from here.

Custom pseudo-elements support

Most custom CSS variables could be replaced with corresponding custom pseudo-elements.

This has to wait until Chrome implements support for custom pseudo-elements.

Documentation:

Hide and Recover Menu for Printing

I've attempted to hide the menu for printing purposes in an electron app. I've done it by wrapping the menu elements in a div and hiding it, and with CSS @media to hide the div for printing. Either way, it works fine for printing but the menu is no longer active when I show it again.

Anything I need to do differently?

System color Theme

CSS has the option to pick system default colors and fonts, detailed here: https://www.sitepoint.com/css-system-styles/ implementing the use of these colors and fonts will get you additional integration for relatively little effort!

input/numberinput not updating value on blur (click)

I have a form with a couple of number inputs.

If I change the value of a numberinput, then click the submit button while the number input is still focused, the updated value is not retrievable using jQuery.

However, if I focus the number input and press the TAB key to get out of it, the value gets updated and I can retrieve the value using $('x-numberinput').val().

Is there a workaround for this that I can use?

x-accordion

Would be very handy to have something like this. Specially if you have long control lists in a menu-tab (right or left) and you are able to expand and collapse some of the menu groups.

Inspiration:

https://getuikit.com/docs/accordion

electron Fetch API

Fetch API cannot load file:///C:/Users/.../node_modules/xel/images/ring-throbber.svg. URL scheme "file" is not supported.

simple polyfill: https://github.com/github/fetch

or change to another solution, what think you about it?

Visual glitch in Accordion with Material Theme

I am experiencing a visual bug with my Drawer/Accordion configuration. It seems applicable only to the Material stylesheet. When the page loads, the carat symbol jumps out of frame, but snaps into place once the user interacts with it.

The below animation shows the bug occurring in an Electron app:

The bug also occurs in the attached HTML document running in Chromium.

My Chromium version is: Version 63.0.3239.84 (Developer Build) (64-bit)
Electron version v1.6.15

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bug Report</title>
    <link rel="stylesheet" href="node_modules/typeface-noto-sans/index.css">
    <link rel="stylesheet" href="node_modules/typeface-roboto-mono/index.css">
    <link rel="stylesheet" href="node_modules/typeface-roboto/index.css">
    <link rel="stylesheet" href="node_modules/xel/stylesheets/material.theme.css">
    <script src="node_modules/xel/xel.min.js"></script>
  </head>
  <body>
    <div id="app">
      <x-drawer id="drawer">
        <x-accordion>
            <header>
              <x-label>Accordion1</x-label>
            </header>
            <main>
            <x-label>Chrome Example</x-label>
                <x-input value="Accordion1"></x-input>
                <x-button>
                <x-label>Button</x-label>
                </x-button>
            </main>
        </x-accordion>
        <hr>
      </x-drawer>
      <h1>Bug Report</h1>
      <x-box>
        <x-progressbar></x-progressbar>
        <x-button onclick="document.querySelector('#drawer').opened = true" id="button_drawer">
            <x-label>Open</x-label>
        </x-button>
      </x-box>
    </div>
  </body>
</html>

x-searchinput

Should support autocompletion. API similar to http://element.eleme.io/#/en-US/component/input

Allow source to be bundled

Currently js requires link tag with theme.

let theme = document.querySelector('link[href*=".theme.css"]').getAttribute("href");

Also there is XelAppElement class in the source that looks like xel demo

x-input readonly attribute support

Would be great to have basic attributes support

x-numberinput – not able to set to "0"

I am getting and setting the values for my x-numberinput with JS. Working fine when I get values like 1,2,3 ... 100 etc. (also no problem with negative values. But when I am receiving "0" (zero) the value is not displayed in the x-numberinput. Typing manually "0" in the input ist working. I think I am missing something obvious... ?

x-input file

A themed file selection input currently does not seem to exist. You can manually specify file as a type to x-input but it doesn't seem to fit with themes. Alternative would be to have the file input its own separate type.

declaration for iconset default possible?

Hey,

I am constructing a tab menu with icons in angular wit ng-repeat. Some of the icons are using the default iconset and some not. I would like to get my icons via my controller like this:
{ title: 'Four', url: 'templates/style_menu.html', ticon: 'style', custom: '' }, { title: 'Five', url: 'templates/text_menu.html', ticon: 'text', custom: 'images/icons.svg' },

Where custom would be the path to the custom iconset:

<x-button ng-repeat="tab in tabs" skin="tabnav" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)"> <x-icon name="{{tab.ticon}}" iconset={{tab.custom}}></x-icon> </x-button>

My problem: If I am leaving the iconset="" – empty the default icons are not showing up.

So short question: is it somehow possible to declare iconset="default"

Elementary themes

Implement bright and dark themes based on Elementary OS HIG.

Widgets should be styled so that macOS and Elementary themes could be switched without breaking the app layout.

Additional mockups: http://elementaryos.deviantart.com/gallery/

jQuery check if checkbox is checked

Hello, I am stuck on a problem with your x-checkbox. I have tried all of the following methods to check if checkbox is checked but with no success. Does x-checkbox act like a checkbox?

$('#checkbox').is(":checked")
$('#checkbox').prop('checked')
$('#checkbox')[0].checked
$('#checkbox').get(0).checked

When I replace your x-checkbox with normal input type='checkbox' these methods work as expected.

Trouble with ES6 import

I would love to give this toolkit a try, but I'm not able to get past the ES6 import statement. I'm thinking perhaps it's because I'm using Express as the server, and nodejs doesn't yet support the import statement?
In other words, when running Express as the server and sending:

But that's showing in the Chrome debug tools.

Yet, I can see the examples at https://xel-toolkit.org just fine. In both cases I'm using the same Chrome browser version 63.0.3239.108.

What am I not understanding?

(Note, what I'm wanting to do eventually is make an Electron or NWJS app with it's UI served from my server).

jarek-foksa / xel Goto Github PK

xel's People

Contributors

Stargazers

Watchers

Forkers

xel's Issues

Recommend Projects

Recommend Topics

Recommend Org