Coder Social home page Coder Social logo

bullhorn / novo-elements Goto Github PK

View Code? Open in Web Editor NEW
75.0 48.0 61.0 274.36 MB

UI Repository for Bullhorn's Novo Theme

Home Page: http://bullhorn.github.io/novo-elements

License: MIT License

CSS 2.34% JavaScript 0.70% TypeScript 84.06% HTML 4.89% Shell 0.03% SCSS 7.98%
bullhorn angular2 ui-components framework

novo-elements's Introduction

NOVO Elements npm version Build Status Coverage Status

Gitter Dependency Status devDependency Status

Dependencies

Quick Start

# Clone the project
git clone [email protected]:bullhorn/novo-elements.git

# Change directory
cd novo-elements

# Install
npm install

# Start (you will need two terminals)
npm run build (builds the library, alternatively you can use npm run build:watch for live-reload)
npm start (starts the demo)

# Access the Demo in your browser at
http://localhost:4200/

Integrating into a project

# Install the module from NPM
npm install --save novo-elements

Depending on what system you are using (SystemJS, Webpack, etc..) the setup will vary.

If using SCSS/SASS you will need to include the following includes: node_modules/novo-elements/lib.

Building Examples

All examples can be added to the appropriate directory in the novo-examples project. Each markdown file will be converted to a demo page and a route will automatically be added to the demo. You can import any example project by using the angular selector, or inject it using the code-example tag, ie. <code-example example="demo-name"></code-example>.

# Compile markdown, generate routes, and AOT build the project
npm run build:examples

# Automatically rebuild changes to the examples project
npm run build:examples:watch

Customizing Labels

With Novo Elements there are a few hard-coded labels throughout the library. To override these labels with your own, you will simply extend the NovoLabelService and override any labels that you wish.

To make Angular use this new class over the default one you can provide in the bootstrapping of your application as a provider.

{ provide: NovoLabelService, useClass: MyLabelService }

To use the default labels, you will need to provide the NOVO_ELEMENTS_LABELS_PROVIDERS via

import {NOVO_ELEMENTS_LABELS_PROVIDERS} from 'novo-elements';
bootstrap(MyApp [..NOVO_ELEMENTS_LABELS_PROVIDERS]);

Upgrading Novo Elements

To Version 6

Note: Ensure your tsconfig.app.json include property references all the ts files the migrations should be run against. You can add a glob then remove it to ensure your build system works the same as before.

npm install --save timezone-support@2 novo-design-tokens@0 angular-imask@6 imask@6
npm install --save novo-elements@6
ng update novo-elements --migrate-only --from=0.0.0 --to=6.0.0 --force --allow-dirty  

Contribute

There are many ways to contribute to our OpenSource projects.

TL;DR: Fork this repository, make any required change and then submit a PR :)

Contributors

License

Copyright (c) forever Bullhorn.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

novo-elements's People

Contributors

adrianossi avatar akurtovic avatar alyssabryant avatar amrutha-rajiv avatar awubullhorn avatar bvkimball avatar charlesabarnes avatar chasitywickenhauser-bh avatar davidkbh avatar dependabot[bot] avatar drewdudley avatar drewhoo avatar dvoegelin avatar escarre avatar ezrashim avatar github-actions[bot] avatar hiqbal01 avatar jeremy-dobler avatar jgodi avatar krsween avatar magicaardvark avatar michaeldill avatar monroepe avatar nathan-wilson-bh avatar ndickerson avatar steveerfalot avatar tb9will avatar tbo47 avatar tgadre avatar trenthibbard avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

novo-elements's Issues

[Forms] - Ability to have disabled state

I'm submitting a FEATURE REQUEST
What is the current behavior?

Forms do not have a disabled state.

What is the expected behavior?

Implement disabled state to look like
pasted image at 2016_06_24 03_37 pm

Header element, unable to make mobile sticky header

Note: for support questions, please use one of these channels: Chat: BullhornOSS Gitter

I'm submitting a ...
  • bug report
  • feature request
  • question about the decisions made in the repository
What is the current behavior?

section.primary is transparent

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via

https://plnkr.co or similar. (TODO - make a starter plnkr)

What is the expected behavior?

The top bar should not be transparent when position:fixed

What is the motivation / use case for changing the behavior?

I would like to make a sticky header in mobile which is made up of 3 sections

[BTN] [HEADER] [BTN] <- should be sticky to top (position:fixed)
[SECTION] <- should slide under header when user scrolls
[TAB SECTION] <- should become sticky under HEADER (becomes fixed at certain point)

The top bar uses the section.primary class and currently has no background color so it is transparent when the section content slides under it.

What I would like is the background color to also be applied to section.primary to allow me to have this functionality.

Please tell us about your environment:
  • Angular version: 2.0.0-beta.X
  • Ionic 2
  • Browser: all
Other information

screen shot 2016-05-05 at 10 32 32 am
screen shot 2016-05-05 at 10 32 46 am

Add link to icon font in Iconography section

Note: for support questions, please use one of these channels: Chat: BullhornOSS Gitter

I'm submitting a ...
  • bug report
  • feature request
  • question about the decisions made in the repository
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via

https://plnkr.co or similar. (TODO - make a starter plnkr)

What is the expected behavior?
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
  • Angular version: 2.0.0-beta.X
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Other information

(e.g. detailed explanation, screenshots, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[Select] - Improvements to the Select Footer

Footer should just be another

  • tag.

    Also, the text "+ ADD NEW ITEM" is not visually centered inside the footer.

    When toggling the "ADD NEW" the footer renders off screen, making me scroll down to save. Possible to not have it scroll when showing the input?

    The "Save/Cancel" should be added to the https://github.com/bullhorn/novo-elements/blob/master/src/services/novo-label-service.js, then you can inject that into Select and use {{labels.save}} instead of the plain text. This is used to localize it else where. Or you can get around that by having the save/cancel come from the config too.

  • Inline Toast Z-Index

    The inline toast (when using as component and not via service) still has the z-index of 9999, making it appear over the modals (z1000). If it is used inline, the zindex should not be 9999.

    [Toast] - Ability to add timer for inline toasts

    Note: for support questions, please use one of these channels: Chat: BullhornOSS Gitter

    I'm submitting a ...
    • bug report
    • feature request
    • question about the decisions made in the repository
    What is the current behavior?

    Inline novo-toast elements are tied to *ngIf to show or hide. Time properties on inline novo-toast elements are set to null.

    What is the expected behavior?

    Use a timer attribute on inline novo-toast elements to control show or hide. timer attribute should allow for a time in ms or for indefinite.

    What is the motivation / use case for changing the behavior?
    • Added/improved functionality

    [Toasts] - Animations

    Currently, the toast will animate down and if the toast is of the same type it will animate down correctly. However, if you have toasts that are different they still animate down. Video url below:

    http://recordit.co/0zU49Usdmu

    Clean up Demos

    • put all toast/tooltips back in (ColorDemo, etc..)
    • remove dummy text

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google โค๏ธ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.