Skip to content

EmberJS in-repo addon that contains components, services, styles for building Onedata web front-ends using 3-column layout

License

Notifications You must be signed in to change notification settings

onedata/onedata-gui-common

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b0cf884 · Jan 28, 2025
Jan 27, 2025
Jan 24, 2025
Jun 28, 2022
Mar 26, 2024
Jan 19, 2024
Mar 20, 2024
Nov 23, 2024
Jan 27, 2025
Feb 23, 2024
Aug 7, 2017
Apr 5, 2022
Apr 5, 2022
Apr 5, 2022
Apr 6, 2022
Apr 5, 2022
Apr 5, 2022
Apr 5, 2022
Aug 28, 2017
Jun 10, 2022
Apr 5, 2022
May 21, 2024
Apr 8, 2024
Apr 7, 2022
Sep 26, 2024
Sep 25, 2024
Apr 5, 2022
Oct 13, 2023

Repository files navigation

onedata-gui-common

About

Note: this is a successor of ember-cli-onedata-common addon which is now deprecated.

onedata-gui-common is an EmberJS in-repo addon that contains components, services, styles and other EmberJS application resources as well as static resources (images, fonts) for building Onedata web front-ends using 3-column layout. Currently used by:

  • onepanel-gui
  • onezone-gui
  • oneprovider-gui

Versioning

Currently this addon is not versioned due to its dynamic nature.

Usage in projects

Use this repo as a submodule in Ember application lib directory, which in case of Onedata apps is placed in: src/lib/.

Initializing project with addon

Note: this documentation section may be incomplete and serves as an overview.

Installing dependencies for this addon in project

In package.json of Ember app project:

  • add an ember addon in "ember-addon" path, eg.:
"ember-addon": {
  "paths": [
    "lib/onedata-gui-common"
  ]
}

Then dependencies of the in-repo addon should be installed to the parent project. It is required as in this issue on Github: ember-cli/ember-cli#4164 To copy dependencies launch a script (requires Python ^2.7) from root of parent project repo:

./src/lib/onedata-gui-common/onedata-gui-utils/scripts/copy-deps-to-project.py

Setting up Sass

The addon depends on some globally set Sass variables - main colors used in the application theme and window size breakpoints. These variables needs to be injected using ember-cli-build.js configuration file.

At the top of that file, add require statements to import the Sass setup functions and configurations:

const defineSassColors = require('./lib/onedata-gui-common/addon/utils/define-sass-colors');
const colors = require('./lib/onedata-gui-common/addon/colors').default;
const defineSassBreakpoints = require(
  './lib/onedata-gui-common/addon/utils/define-sass-breakpoints'
);
const breakpointValues = require('./lib/onedata-gui-common/addon/breakpoint-values').default;

And then, after an app definition, paste:

defineSassColors(app, colors);
defineSassBreakpoints(app, breakpointValues);

Routing and templates

The addon has a util that configures standard onedata-gui app routes, example of usage:

import onedataRouterSetup from 'onedata-gui-common/utils/onedata-router-setup';
const Router = ...
Router.map(function () {
  onedataRouterSetup(Router, this);
});

Then extend application route shipped with this addon:

  • routes/application.js file:
import OnedataApplicationRoute from 'onedata-gui-common/routes/application';
export default OnedataApplicationRoute.extend();

Templates

You should use standard application template and route shipped with this addon:

  • templates/application.js file:
export { default } from 'onedata-gui-common/templates/application';

Authentication

The login-box component by default sends authentication action to authenticator:application, so set your favorite authenticator as application.

Running tests

Locally just run make test from repo root dir or install dependencies and run ember test from src/ dir for customized test runs.

On Bamboo or other CI server, the best way is to use following script from Onedata bamboos repo: https://git.plgrid.pl/projects/VFS/repos/bamboos/browse/docker/make.py

# clone bamboos repo to <bamboos_dir>
# go to onedata-gui-common repo root dir
<bamboos_dir>/make.py test_ci

Organization of files

The project has structure of standard Ember CLI in-repo addon. See: https://ember-cli.com/extending/#addon-project-structure

Features highlight

Note: this documentation section is not complete features list and serves as an overview.

Routing

The addon has standard onedata-gui app routes. To use them, refer to Initializing project with addon section of this documentation.

Layout

The addon has layout components that creates 3,2,1-columns views of onedata apps (desktop, tablet, phone).

Components

Just see components of this addon. Especially those starting with one- prefix.

Oneicons font

The oneicon font provides a set of icons used in Onedata front-end. It is generated using Icomoon web application (https://icomoon.io). Source files are in SVG format, with size 128x128px, using only black color. They are currently not published in any repository.

To use icons, you can import a onedata-common (all common onedata styles) SCSS file to your main SCSS or oneicons for only icons.

Settings of Icomoon for generating icons are:

  • Font name: oneicons
  • Class prefix: oneicon-
  • Support IE8: false
  • Generate stylesheet variables for: Sass
  • CSS Selector: Use attribute selector
  • Em square height: 1024
  • Baseline height: 0
  • Whitespace width: 0

Package generated with Icomoon is placed in public/assets/fonts/oneicon directory. The directory contains also demo.html file for browsing icons.

Icons can be used with one-icon component (included in gui) or icon helper (only in op-gui-default). They can be also used in pure HTML:

<span class="oneicon oneicon-(icon-name)"></span>

About

EmberJS in-repo addon that contains components, services, styles for building Onedata web front-ends using 3-column layout

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published