From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001 From: Israel Lavi Date: Mon, 21 May 2018 17:42:00 +0300 Subject: init commit onap ui Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi --- demo/.gitignore | 7 ++ demo/README.md | 35 ++++++++ demo/assests/README.md | 9 ++ demo/assests/icons/empty.txt | 0 demo/assests/icons/locked.svg | 39 ++++++++ demo/assests/icons/plus.svg | 9 ++ demo/assests/icons/unlocked.svg | 39 ++++++++ demo/assests/icons/vendor.svg | 1 + demo/assests/icons/vlm.svg | 1 + demo/assests/icons/vsp.svg | 1 + demo/assests/images/empty.txt | 0 demo/components/button.html | 15 ++++ demo/components/colors.html | 26 ++++++ demo/components/tiles-generic.html | 106 ++++++++++++++++++++++ demo/components/tiles.html | 105 ++++++++++++++++++++++ demo/index.css | 178 +++++++++++++++++++++++++++++++++++++ demo/index.html | 53 +++++++++++ demo/index.js | 84 +++++++++++++++++ demo/package.json | 23 +++++ 19 files changed, 731 insertions(+) create mode 100644 demo/.gitignore create mode 100644 demo/README.md create mode 100644 demo/assests/README.md create mode 100644 demo/assests/icons/empty.txt create mode 100644 demo/assests/icons/locked.svg create mode 100644 demo/assests/icons/plus.svg create mode 100644 demo/assests/icons/unlocked.svg create mode 100644 demo/assests/icons/vendor.svg create mode 100644 demo/assests/icons/vlm.svg create mode 100644 demo/assests/icons/vsp.svg create mode 100644 demo/assests/images/empty.txt create mode 100644 demo/components/button.html create mode 100644 demo/components/colors.html create mode 100644 demo/components/tiles-generic.html create mode 100644 demo/components/tiles.html create mode 100644 demo/index.css create mode 100644 demo/index.html create mode 100644 demo/index.js create mode 100644 demo/package.json (limited to 'demo') diff --git a/demo/.gitignore b/demo/.gitignore new file mode 100644 index 0000000..7788a08 --- /dev/null +++ b/demo/.gitignore @@ -0,0 +1,7 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +/dist +/tmp +/node_modules +npm-debug.log* +Thumbs.db diff --git a/demo/README.md b/demo/README.md new file mode 100644 index 0000000..6a478d8 --- /dev/null +++ b/demo/README.md @@ -0,0 +1,35 @@ +# Local DEMO + +### How to compile +Go to root folder (sdc-ui) and run: `npm run build` +This will compile all scss files and will copy generated style.css and assets folder to gen folder inside demo project. + +### How to run +Go to demo and run: `npm start` +This will open the default browser at port 2900. + +### How to build component HTML for DEMO + +For more info see example in tiles.html file + +### How add the new component to router for DEMO +In index.html file (under id main-navigation) add new
  • with id equal to HTML file you created above +
    Example: + diff --git a/demo/assests/README.md b/demo/assests/README.md new file mode 100644 index 0000000..5f2681b --- /dev/null +++ b/demo/assests/README.md @@ -0,0 +1,9 @@ + +# Folder Structure + +### icons +Contains `svg` icons **ONLY** + + +### images +Contains large images (if any...) diff --git a/demo/assests/icons/empty.txt b/demo/assests/icons/empty.txt new file mode 100644 index 0000000..e69de29 diff --git a/demo/assests/icons/locked.svg b/demo/assests/icons/locked.svg new file mode 100644 index 0000000..9785f8d --- /dev/null +++ b/demo/assests/icons/locked.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/demo/assests/icons/plus.svg b/demo/assests/icons/plus.svg new file mode 100644 index 0000000..36f3486 --- /dev/null +++ b/demo/assests/icons/plus.svg @@ -0,0 +1,9 @@ + + + + + + + + diff --git a/demo/assests/icons/unlocked.svg b/demo/assests/icons/unlocked.svg new file mode 100644 index 0000000..6d94a94 --- /dev/null +++ b/demo/assests/icons/unlocked.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/demo/assests/icons/vendor.svg b/demo/assests/icons/vendor.svg new file mode 100644 index 0000000..a3b8f5f --- /dev/null +++ b/demo/assests/icons/vendor.svg @@ -0,0 +1 @@ +vendor diff --git a/demo/assests/icons/vlm.svg b/demo/assests/icons/vlm.svg new file mode 100644 index 0000000..79b4625 --- /dev/null +++ b/demo/assests/icons/vlm.svg @@ -0,0 +1 @@ +vlm_new_icon \ No newline at end of file diff --git a/demo/assests/icons/vsp.svg b/demo/assests/icons/vsp.svg new file mode 100644 index 0000000..344755c --- /dev/null +++ b/demo/assests/icons/vsp.svg @@ -0,0 +1 @@ +vsp_new_icon diff --git a/demo/assests/images/empty.txt b/demo/assests/images/empty.txt new file mode 100644 index 0000000..e69de29 diff --git a/demo/components/button.html b/demo/components/button.html new file mode 100644 index 0000000..5a68bb5 --- /dev/null +++ b/demo/components/button.html @@ -0,0 +1,15 @@ +
    Button
    + +
      +
    • + +
      • + +
    • + +
      • + +
    • + +
      • +
    \ No newline at end of file diff --git a/demo/components/colors.html b/demo/components/colors.html new file mode 100644 index 0000000..a9bb9f9 --- /dev/null +++ b/demo/components/colors.html @@ -0,0 +1,26 @@ +
    Colors
    +

    + List of supported colors. All colors are background colors. +

    +
      +
    • sdc-bc-blue
      • +
    • sdc-bc-dark-blue
      • +
    • sdc-bc-light-blue
      • +
    • sdc-bc-green
      • +
    • sdc-bc-dark-green
      • +
    • sdc-bc-light-green
      • +
    • sdc-bc-orange
      • +
    • sdc-bc-yellow
      • +
    • sdc-bc-dark-purple
      • +
    • sdc-bc-purple
      • +
    • sdc-bc-light-purple
      • +
    • sdc-bc-black
      • +
    • sdc-bc-dark-gray
      • +
    • sdc-bc-gray
      • +
    • sdc-bc-light-gray
      • +
    • sdc-bc-white
      • +
    +

    Example of usage:

    + + <div class='sdc-bc-blue'>sdc-bc-blue</div> + \ No newline at end of file diff --git a/demo/components/tiles-generic.html b/demo/components/tiles-generic.html new file mode 100644 index 0000000..3d03909 --- /dev/null +++ b/demo/components/tiles-generic.html @@ -0,0 +1,106 @@ +
    Tiles Generic
    +

    + Tile do not have size, you can define the size in the wrapping container, or adding them + to css in your project. +
    Note: specific tiles like sdc-tile-catalog has specifc width & height. +
    Tiles content has overflow auto, so if the content overflow a scroll will appear. +

    + +

    Basic tile

    +

    Tile without width or height

    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat, lorem at vulputate sollicitudin, neque magna hendrerit diam, nec sagittis eros libero ut dolor. Donec tincidunt, elit nec vestibulum tristique, nulla tellus aliquam eros, at rutrum massa purus quis ipsum. In aliquet non augue quis condimentum. Praesent efficitur tellus quis mauris auctor, vel semper erat vulputate. Mauris rhoncus nunc et ante dapibus, id luctus urna sodales. Proin eu augue efficitur ligula tincidunt placerat. Suspendisse potenti. +
    +
    + +

    Tile with header & footer

    +

    + Note: The background-color is just for showing header, content & footer sections. + This is done using inline styles which should not be included in the final component. +
    The content will resize automaticly his height. +

    +
    +
    top
    +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat, lorem at vulputate sollicitudin, neque magna hendrerit diam, nec sagittis eros libero ut dolor. Donec tincidunt, elit nec vestibulum tristique, nulla tellus aliquam eros, at rutrum massa purus quis ipsum. In aliquet non augue quis condimentum. Praesent efficitur tellus quis mauris auctor, vel semper erat vulputate. Mauris rhoncus nunc et ante dapibus, id luctus urna sodales. Proin eu augue efficitur ligula tincidunt placerat. Suspendisse potenti. +
    +
    footer
    +
    + +

    Catalog tile (VSP)

    +

    + Specific tile of SDC. +
    Note: The differences betweeb the tiles is the color (diffrent class) and the icons. + The div with class='sdc-tile-content-info-vendor-name' is not needed in the second tile. +

    + +
    + +
    +
    +
    + vsp +
    +
    +
    +
    + + + +
    +
    +
    vlm
    +
    lilach vsp
    +
    +
    V 0.1
    +
    +
    +
    +
    +
    + Footer text +
    +
    + + + +
    +
    +
    + +
    +
    +
    + vlm +
    +
    +
    +
    + + + +
    +
    +
    vlm
    +
    +
    V 0.1
    +
    +
    +
    +
    +
    + Footer text +
    +
    + + + +
    +
    +
    + +
    + +
    + diff --git a/demo/components/tiles.html b/demo/components/tiles.html new file mode 100644 index 0000000..3519817 --- /dev/null +++ b/demo/components/tiles.html @@ -0,0 +1,105 @@ +
    Tiles
    + +

    VSP Tile

    +

    + Example +

    +
    +
    +
    VSP
    +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    vlm
    +
    +
    +
    lilach vsp
    +
    +
    +
    V 0.1
    +
    +
    +
    +
    Checked Out
    +
    +
    + + + +
    +
    +
    +
    +
    + +

    VLM Tile

    +
    +
    +
    VLM
    +
    +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    vlm
    +
    +
    +
    V 0.2
    +
    +
    +
    +
    Checked In
    +
    +
    + + + +
    +
    +
    +
    +
    + +

    Vendor Tile

    +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    vlm
    +
    1 VSPs
    +
    +
    +
    + + + +
    +    Create new VSP +
    +
    +
    +
    diff --git a/demo/index.css b/demo/index.css new file mode 100644 index 0000000..ef71773 --- /dev/null +++ b/demo/index.css @@ -0,0 +1,178 @@ +/* GENERAL */ +body { + margin: 0; + color: #333333; + /*font-family: 'Open Sans Condensed';*/ + font-family: 'Overlock'; + font-size: 16px; + display: flex; + flex-wrap: wrap; + height: auto; +} + +h1 { font-size: 1.5em; } +h2 { font-size: 1.3em; } +h3 { font-size: 1.2em; } +h1, h2, h3 { margin: 2em 0 0.5em 0; color: #009fdb; } +p { margin: 6px 0; } + +/* LAYOUT */ +header { + order: 1; + width: 100%; + background-color: #ffffff; +} + +footer { + order: 4; + width: 100%; +} + +#main-navigation { + order: 2; + width: 100%; +} + +#main-content { + order: 3; + width: 100%; +} + +/* HEADER */ +header { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33); + height: 50px; + line-height: 50px; + z-index: 9; + display: flex; + flex-direction: row; + padding: 0 1vw; +} + +header .logo { + font-size: 22px; + font-weight: 700; +} + +header .title { + font-size: 20px; + margin-left: 2vw; +} + +/* FOOTER */ +footer { + height: 50px; + line-height: 50px; + z-index: 6; + display: flex; + flex-direction: row; + padding: 0 1vw; + border-top: solid 1px #dddddd; +} + +/* MAIN NAVIGATION */ +#main-navigation { + align-content: stretch; + z-index: 8; + box-shadow: 2px 0 0 0 rgba(68,68,68,0.2); +} + +#main-navigation .title { + font-size: 20px; + font-weight: 700; + background-color: #ffffff; + color: #009fdb; + border-bottom: 1px solid #d2d2d2; + height: 30px; + line-height: 30px; + padding: 0.3em; +} + +#main-navigation ul { + padding: 0; +} + +#main-navigation ul li { + background-color: #f8f8f8; + border-bottom: 1px solid #d2d2d2; + height: 30px; + line-height: 30px; + cursor: pointer; + padding: 0.3em; +} + +#main-navigation ul li.selected { + background-color: #009fdb; + color: #ffffff; +} + +/* MAIN CONTENT */ +#main-content { + -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ + -moz-box-sizing: border-box; /* Firefox, other Gecko */ + box-sizing: border-box; /* Opera/IE 8+ */ + align-content: stretch; + padding: 2vh 2vw; + z-index: 7; +} + +/* RESPONSIVE */ +@media screen and (min-width: 800px) { + #main-navigation { width: 20%; } + #main-content { width: 80%; } +} + +/* OTHERS */ +.component { + background-color: #009fdb; + color: #ffffff; + font-size: 20px; + padding: 0.5em 1em; + margin: 0 0 0.5em 0; +} + +pre { + padding: 1em; + display: block; + margin: 1em 0; + font-family: 'PT Sans Narrow'; + font-size: 1em; +} + +/* SPECIFIC COMPONENT - TILE */ +.sdc-tile-showcase-tiles { + display: flex; + flex-direction: row; +} +.sdc-tile-showcase-tiles > div.sdc-tile-catalog { + margin: 0 5px 5px 5px; +} +.sdc-tile-showcase-tiles > div.sdc-tile-catalog:first-child { margin-left: 0; } +.sdc-tile-showcase-tiles > div.sdc-tile-catalog:last-child { margin-right: 0; } + +/* SPECIFIC COMPONENT - COLORS */ +.sdc-colors-showcase li { + padding: 1vw; + margin: 1vw; +} + +/* SPECIFIC COMPONENTS - BUTTONS */ +.buttons-showcase li { + display: flex; + flex-direction: column; + margin-top: 2vh; +} +.buttons-showcase li pre { + flex-grow: 1; + margin: 1vw 0 0.5vw 0; +} + +@media screen and (min-width: 600px) { + .buttons-showcase li { + margin-top: 0; + flex-direction: row; + } + .buttons-showcase li pre { + margin: 0.5vw 0 0.5vw 2vw; + } +} diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..f3b4cb4 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + SDC-UI Show case + + + +
    + +
    Show case
    +
    + + + +
    + +
    + Copywrite 2017. All rights reserved. +
    + + + + diff --git a/demo/index.js b/demo/index.js new file mode 100644 index 0000000..1c9a4bb --- /dev/null +++ b/demo/index.js @@ -0,0 +1,84 @@ +$( document ).ready(function() { + + initNavigation(); + registerEvents(); + doAfterComponentHtmlLoaded(); + +}); + +var initNavigation = function() { + + // Set default page + var page = window.location.hash; + if (page === '') { + page = "button"; + window.location.hash = page; + } + + // Remove # at the begining + if (page.indexOf('#')!==-1){ + page = page.substr(1); + } + console.log("page: " + page); + + // Upload the content + $("#main-content").load( "./components/" + page + ".html" ); + + // Set selected in navigation + $('#main-navigation #' + page).addClass('selected'); + +}; + +/** + * Simple router to load components HTML based on id. + */ +var registerEvents = function() { + $("#main-navigation li").click(function(e){ + page = e.target.id; + $("#main-content").load( "./components/" + page + ".html", function() { + doAfterComponentHtmlLoaded(); + }); + window.location.hash = page; + $('#main-navigation li').removeClass('selected'); + $('#main-navigation #' + page).addClass('selected'); + }); +}; + +/** + * Wait for component to load before applying javascript actions on it. + */ +var doAfterComponentHtmlLoaded = function() { + window.setTimeout(function() { + // Build code text to show to user + buildCode(); + + // highlight the code + hljs.initHighlightingOnLoad(); + },1000); +}; + +/** + * Build HTML code automaticly when attribute data-code exists + * For example: + * + * Will add the HTML of this (highlighted) button below the button. + */ +var buildCode = function() { + $('[data-code]').each(function(index, element){ + var result = $(element).removeAttr('data-code')[0].outerHTML; + var resultEncoded = $('
    ').text(result).html(); + var newElement = $('
    ' + resultEncoded + '
    ')[0]; + $(element).after(newElement); + hljs.highlightBlock(newElement); + }); + + $('[data-code-id]').each(function(index, element){ + var attVlue = $(element).attr('data-code-id'); + var codeHere = $('[data-code-ref='+attVlue+']'); + var result = $(element).removeAttr('data-code-id')[0].outerHTML; + var resultEncoded = $('
    ').text(result).html(); + var newElement = $('
    ' + resultEncoded + '
    ')[0]; + codeHere.replaceWith(newElement); + hljs.highlightBlock(newElement); + }); +}; diff --git a/demo/package.json b/demo/package.json new file mode 100644 index 0000000..40a7b7d --- /dev/null +++ b/demo/package.json @@ -0,0 +1,23 @@ +{ + "name": "onap-sdc", + "preferGlobal": true, + "version": "1.0.0", + "author": "Onap Sdc ", + "description": "Styles and UI components for ONAP SDC", + "license": "MIT", + "engines": { + "node": ">=0.10" + }, + "scripts": { + "start": "watch-http-server ./ -a 127.0.0.1 -p 2900 -o" + }, + "dependencies": { + "express": "~3.4.7", + "http-server": "^0.9.0" + }, + "devDependencies": { + "node-sass": "^4.5.2", + "nodemon": "^1.11.0", + "watch-http-server": "^0.7.6" + } +} -- cgit 1.2.3-korg