diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 9a06ae3..0000000 --- a/.travis.yml +++ /dev/null @@ -1,25 +0,0 @@ -language: node_js - -sudo: false - -git: - depth: 10 - -node_js: - - "0.12" - -env: - matrix: - - RUBY_VERSION=2.0 - -before_install: - - rvm install $RUBY_VERSION - - rvm use $RUBY_VERSION --fuzzy - - export GEMDIR=$(rvm gemdir) - -install: - - travis_retry npm install - - travis_retry gem install --no-document "jekyll:~>3.0.0" "rouge:~>1.10" "sass:~>3.4" - -matrix: - fast_finish: true diff --git a/CNAME b/CNAME deleted file mode 100644 index 5fdaec0..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -photonkit.com diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index 6ba7b6f..0000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,153 +0,0 @@ -# Contributing to Photon - -## Types of issues - -The GitHub issue tracker should only be used for one of the -following: - -+ **Bugs** — when a feature of the project has been _identified as - broken_. - -+ **Feature requests** — when you ask for a _new feature_ to be added to a - project. - -+ **Contribution enquiries** — when you want to discuss whether a _new - feature_ or _change_ would be accepted in a project before you begin - development work on it. - -These are some things that don't belong in the issue tracker: - -+ **Please avoid personal support requests.** We cannot - provide personal support for implementation issues. The best place for help - is generally going to be StackOverflow, Twitter, IRC, etc. - -+ **Please avoid derailing issues.** Keep the discussion on topic and respect - the opinions of others. - -## Bugs - -A bug is a _demonstrable problem_ that is caused by the code in the -repository. - -If you've come across a problem with the code and you're letting us know about -it, _thank you_. We appreciate your time and the effort you're making to help -improve the code for everyone else! - -Please read the following guidelines for reporting bugs: - -1. **Use the GitHub issue search** — check if the issue has already been - reported. If it has been, please comment on the existing issue. - -2. **Check if the issue has been fixed** — the latest `master` or - development branch may already contain a fix. - -3. **Isolate the demonstrable problem** — make sure that the code in the - project's repository is _definitely_ responsible for the issue. Create a - [reduced test case](http://css-tricks.com/6263-reduced-test-cases/) - an - extremely simple and immediately viewable example of the issue. - -4. **Include a live example** — provide a link to your reduced test case - when appropriate (e.g. if the issue is related to front-end technologies). - Please use [jsFiddle](http://jsfiddle.net) to host examples. - -Please try to be as detailed as possible in your report too. What is your -environment? What steps will reproduce the issue? What browser(s) and OS -experience the problem? What would you expect to be the outcome? All these -details will help me and others to assess and fix any potential bugs. - -### Example of a good bug report - -> Short and descriptive title -> -> A summary of the issue and the browser/OS environment in which it occurs. If -> suitable, include the steps required to reproduce the bug. -> -> 1. This is the first step -> 2. This is the second step -> 3. Further steps, etc. -> -> `` - a link to the reduced test case -> -> Any other information you want to share that is relevant to the issue being -> reported. This might include the lines of code that you have identified as -> causing the bug, and potential solutions (and your opinions on their -> merits). - -A good bug report shouldn't leave us needing to chase you up to get further -information that is required to assess or fix the bug. - -## Feature requests - -Feature requests are welcome! Please provide links to examples or articles that -help to illustrate the specifics of a feature you're requesting. The more -detail, the better. It will help us to decide whether the feature is something I -agree should become part of the project. - -## Contribution enquiries - -Contribution enquiries should take place before any significant pull request, -otherwise you risk spending a lot of time working on something that we might not -want to pull into the repository. - -In this regard, some contribution enquires may be feature requests that you -would like to have a go at implementing yourself if they are wanted. Other -enquiries might revolve around refactoring code or porting a project to -different languages. - -## Pull requests - -Good pull requests - patches, improvements, new features - are a fantastic -help. - -If you've spotted any small, obvious errors and want to help out by patching it, -that will be much appreciated. - -If your contribution involves a significant amount of work or substantial -changes to any part of the project, please open a "contribution enquiry" issue -first to check that the work is wanted or matches the goals of the project. - -All pull requests should remain focused in scope and avoid containing unrelated -commits. - -Please follow this process; it's the best way to get your work included in the -project: - -1. [Fork](https://github.com/connors/photon/fork) the project. - -2. Clone your fork (`git clone - git@github.com:/.git`). - -3. Add an `upstream` remote (`git remote add upstream - git://github.com//.git`). - -4. Get the latest changes from upstream (e.g. `git pull upstream - `). - -5. Create a new topic branch to contain your feature, change, or fix (`git - checkout -b `). - -6. Make sure that your changes adhere to the current coding conventions used - throughout the project - indentation, accurate comments, etc. - -7. Commit your changes in logical chunks; use git's [interactive - rebase](https://help.github.com/articles/interactive-rebase) feature to tidy - up your commits before making them public. Please adhere to these [git commit - message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) - or your pull request is unlikely be merged into the main project. - -8. Locally merge (or rebase) the upstream branch into your topic branch. - -9. Push your topic branch up to your fork (`git push origin - `). - -10. [Open a Pull Request](http://help.github.com/send-pull-requests/) with a - clear title and description. Please mention which browsers you tested in. - -If you have any other questions about contributing, please feel free to contact -us. - -**Don't edit files in `dist/`.** You should edit files in `sass/` and `js/`. - -## Special thanks to @necolas - -For writing the original [issue-guidelines](https://github.com/necolas/issue-guidelines/) from which these were adapted. diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index d06abc7..0000000 --- a/Gruntfile.js +++ /dev/null @@ -1,153 +0,0 @@ -/*! - * Photon's Gruntfile - * Copyright 2015 Connor Sears - * Licensed under MIT (https://github.com/connors/photon/blob/master/LICENSE) - */ - -module.exports = function(grunt) { - 'use strict'; - - // Force use of Unix newlines - grunt.util.linefeed = '\n'; - - // Project configuration. - grunt.initConfig({ - pkg: grunt.file.readJSON('package.json'), - - // Metadata. - meta: { - distPath: 'dist/', - docsAssetsPath: 'docs/assets/', - docsDistPath: 'docs/dist/', - docsPath: 'docs/', - srcPath: 'sass/', - }, - - banner: '/*!\n' + - ' * =====================================================\n' + - ' * Photon v<%= pkg.version %>\n' + - ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' + - ' * Licensed under <%= pkg.license %> (https://github.com/connors/proton/blob/master/LICENSE)\n' + - ' *\n' + - ' * v<%= pkg.version %> designed by @connors.\n' + - ' * =====================================================\n' + - ' */\n', - - clean: { - dist: ['<%= meta.distPath %>/css', '<%= meta.docsDistPath %>/css'] - }, - - sass: { - options: { - sourcemap: 'none', - style: 'expanded', - unixNewlines: true - }, - core: { - src: 'sass/photon.scss', - dest: '<%= meta.distPath %>css/<%= pkg.name %>.css' - }, - docs: { - src: 'sass/docs.scss', - dest: '<%= meta.docsAssetsPath %>css/docs.css' - } - }, - - usebanner: { - dist: { - options: { - position: 'top', - banner: '<%= banner %>' - }, - files: { - src: [ - '<%= meta.distPath %>css/*.css' - ] - } - } - }, - - copy: { - fonts: { - expand: true, - src: 'fonts/*', - dest: '<%= meta.distPath %>' - }, - docs: { - expand: true, - cwd: '<%= meta.distPath %>', - src: [ - '**/*' - ], - dest: '<%= meta.docsDistPath %>' - } - }, - - cssmin: { - options: { - keepSpecialComments: '*' // keep all important comments - }, - docs: { - src: [ - '<%= meta.docsAssetsPath %>css/docs.css', - '<%= meta.docsAssetsPath %>css/pygments-manni.css', - '<%= meta.docsAssetsPath %>css/normalize.css' - ], - dest: '<%= meta.docsAssetsPath %>css/docs.min.css' - } - }, - - watch: { - options: { - hostname: 'localhost', - livereload: true, - port: 8000 - }, - css: { - files: '<%= meta.srcPath %>**/*.scss', - tasks: ['dist-css', 'copy'] - }, - html: { - files: '<%= meta.docsPath %>**', - tasks: ['jekyll'] - } - }, - - jekyll: { - options: { - config: '_config.yml' - }, - docs: {}, - github: { - options: { - raw: 'github: true' - } - } - }, - - connect: { - site: { - options: { - base: '_site/', - hostname: 'localhost', - livereload: true, - open: true, - port: 8000 - } - } - } - - }); - - - // Load the plugins - require('load-grunt-tasks')(grunt, { scope: 'devDependencies' }); - require('time-grunt')(grunt); - - // Tasks - grunt.registerTask('dist-css', ['sass', 'usebanner', 'cssmin']); - grunt.registerTask('dist', ['clean', 'dist-css', 'copy']); - grunt.registerTask('server', ['dist', 'jekyll:docs', 'connect', 'watch']); - - grunt.registerTask('default', ['dist']); -}; diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 8e6fa23..0000000 --- a/LICENSE +++ /dev/null @@ -1,20 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2015 connors and other contributors - -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. diff --git a/README.md b/README.md index fc611d2..508eb1b 100644 --- a/README.md +++ b/README.md @@ -1,88 +1,213 @@ -# [Photon](http://photonkit.com/) +# Photon -[![Build Status](https://img.shields.io/travis/connors/photon/master.svg)](https://travis-ci.org/connors/photon) +Develop native looking UI's for **Electron** with HTML, CSS & JS. -UI toolkit for building desktop apps with Electron. +![ShowReel](https://dev.maurice-conrad.eu/img/photon/demo.png) -## Getting started +## Install -* Clone the repo with `git clone https://github.com/connors/photon.git` -* [Read the docs](http://photonkit.com) to learn about the components and how to get your new application started - -Take note that our master branch is our active, unstable development branch and that if you're looking to download a stable copy of the repo, check the [tagged downloads](https://github.com/connors/photon/tags). +```bash +npm install electron-photon +``` -### What's included +[NPM](https://www.npmjs.com/package/electron-photon) -Within the download you'll find the following directories and files, logically grouping common assets. You'll see something like this: +## Usage +```javascript +// Require photon +const Photon = require("electron-photon"); ``` -photon/ -├── css/ -│ ├── photon.css -├── fonts/ -│ ├── photon-entypo.eot -│ ├── photon-entypo.svg -│ ├── photon-entypo.ttf -│ └── photon-entypo.woff -└── template-app/ - ├── js/ - │ └── menu.js - ├── app.js - ├── index.html - └── package.json + +**Just look at the magic! Everything works out of the box.** + +Your `Photon` instance is just used to contain the component controllers and to perform special actions like `Dialog()` (More about [Dialogs](dist/PhotonDialog)). Or if you want to *hack* a components lifecycle, there you get the classes you need. + +## Example + +Just run the `demo/ShowReel` folder with `electron` and will see the whole beauty of Photon! + +## Application Layout + +The main layout of your application needs a `` element in which the ``'s and your `` will find their place. + +```html + + + + Toolbar Header + + + + Window Content + + + + Footer Header + + ``` -We provide compiled CSS (`photon.*`). We also include the Entypo fonts and a template Electron application for you to quickly get started. +## Components + +* [Panes](#panes) +* [Navigation](#navigation-list) +* [Toolbar](#toolbar) +* [Table](#table-view) +* [Tabs](#tabs) +* [Lists/Swipes](#lists--swipes) +* [Button](#button) +* [Button Group](#button-group) +* [Circular Slider](#circular-slider) +* [ContentFrame/SelectList](#content-frame--select-list) +* [Input](#input) +* [NumberInput/Stepper](#number-input--stepper) +* [NumberInput](#number-input) +* [ProgressCircle](#progress-circle) +* [Slider](#slider) +* [Dialog](#dialog) + +If you have a look at the project's structure, you will see that there exist a very well balanced component system you theoretically can contribute to with custom components. + +### Window + +### Panes + +![Paned Layout](https://dev.maurice-conrad.eu/img/photon/paned1.png) + +More about the panes in +[Panes](dist/PhotonPanes) + +### Navigation List + +![Navigation List](https://dev.maurice-conrad.eu/img/photon/navigation2.png) + +More about the navigation list in +[Navigation List](dist/PhotonNavigation) + +### Toolbar + +![Toolbars](https://dev.maurice-conrad.eu/img/photon/toolbar1.png) + +More about toolbars in [Toolbar](dist/PhotonToolbar) + + +### Table View + +![Table View](https://dev.maurice-conrad.eu/img/photon/table1.png) + +More about the table view in [Table View](dist/PhotonTable) + +### Tabs + +![Example](https://dev.maurice-conrad.eu/img/photon/tab1.gif) +![Example](https://dev.maurice-conrad.eu/img/photon/tab2.gif) + +More about tabs in [Tabs](dist/PhotonTab) + +### Lists & Swipes + +#### Lists + +![Lists](https://dev.maurice-conrad.eu/img/photon/lists.png) + +#### Swipes + +![Swipe](https://dev.maurice-conrad.eu/img/photon/swipe1.png) +![Swipe](https://dev.maurice-conrad.eu/img/photon/swipe2.png) + +![Swipes Showreel](https://dev.maurice-conrad.eu/img/photon/swipes.gif) +(GIF is slower than in reality) + +More about lists & swipe actions in [Lists & Swipes](dist/PhotonSwipe) + +### Button + +![Button Default](https://dev.maurice-conrad.eu/img/photon/button1.png) + +![Button Default](https://dev.maurice-conrad.eu/img/photon/button2.png) + +More about all buttons in [Button](dist/PhotonButton) + +### Button Group + +![Button Group Default](https://dev.maurice-conrad.eu/img/photon/buttongroupdefault.png) + +![ButtonGroup Segmented](https://dev.maurice-conrad.eu/img/photon/buttongroupdesegmented.png) + +More about the button group component in [Button Group](dist/PhotonBtnGroup) + +### Circular Slider + +![Circular Slider](https://dev.maurice-conrad.eu/img/photon/circularslider1.png) + +More about the circular slider in [Circular Slider](dist/PhotonCircularSlider) + +### Content Frame & Select List + +![Input Field Focused](https://dev.maurice-conrad.eu/img/photon/contentframe2.png) + +More about the content frames and selectable lists in [Content Frame & Select List](dist/PhotonContent) + +### Input + +#### Simple Text Field + +![Input Field](https://dev.maurice-conrad.eu/img/photon/input1.png) +![Input Field Focused](https://dev.maurice-conrad.eu/img/photon/input2.png) + +#### Number Input & Stepper + +![Number Input with Stepper](https://dev.maurice-conrad.eu/img/photon/input3.png) + +More about input fields in [Input](dist/PhotonInput) + +### Messages + +![Messages](https://dev.maurice-conrad.eu/img/photon/messages.png) -## Documentation +More about messages view in [Messages](dist/PhotonMessages) -Photon's documentation is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at . The docs may also be run locally. +### Number Input -### Running documentation locally +![Number Input](https://dev.maurice-conrad.eu/img/photon/numberinput.png) -1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v2.5.x). - * **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems. -2. Install the Ruby-based syntax highlighter, [Rouge](https://github.com/jneen/rouge), with `gem install rouge`. -3. From the root `/photon` directory, run `jekyll serve` in the command line. -4. Open in your browser, and boom! +More about number input in [Number Input](dist/PhotonNumberInput) -Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/). +### Progress Circle -## Contributing +![Progress Circle](https://camo.githubusercontent.com/3ed0dfb5ab01ce1ebd6ae06acf1b86214d038281/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f72647063706c6f772f62696c6473636869726d666f746f323031362d31312d3132756d31352e332e706e67) -Please file a GitHub issue to [report a bug](https://github.com/connors/photon/issues). When reporting a bug, be sure to follow the [contributor guidelines](https://github.com/connors/photon/blob/master/CONTRIBUTING.md). +More about progress circle in [Progress Circle](dist/PhotonProgressCircle) +### Slider -## Development +![Slider](https://camo.githubusercontent.com/d4635dbfc74c802b7b6dac1edb65d68c1490850b/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f726469706f7077612f62696c6473636869726d666f746f323031362d31312d3036756d32312e312e706e67) -1. Install node dependencies: `npm install`. -2. Open the example app: `npm start`. +More about sliders in [Progress Circle](dist/PhotonSlider) -Modifying source Sass files? Open a second Terminal tab and run `npm run build` to kick off a build of the compiled `photon.css`. +### Dialog -## Versioning +![Dialog](https://dev.maurice-conrad.eu/img/photon/dialog1.png) -For transparency into our release cycle and in striving to maintain backward compatibility, Photon is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to these rules whenever possible. +More about dialog controller in [Dialog](dist/PhotonDialog) -Releases will be numbered with the following format: +### Drop Down Menu -`..` +![Dialog](https://dev.maurice-conrad.eu/img/photon/dropdown1.png) -And constructed with the following guidelines: +More about drop down menu controller in [Drop Down Menu](dist/Drop Down Menu) -* Breaking backward compatibility **bumps the major** while resetting minor and patch -* New additions without breaking backward compatibility **bumps the minor** while resetting the patch -* Bug fixes and misc changes **bumps only the patch** +### More -For more information on SemVer, please visit . +**You are missing something or do you have improvements?** -## Maintainers +Please open a *pull-request* or an *Issue* and I will do my best ;-) -Connor Sears +## Disclaimer -* -* +This framework is a **hard fork** of the original *PhotonKit* framework of *connors*. Because *connors* project is not developed anymore since more than **2** years, this is the release of Photon to version `1.0`. -## License +Pieces of the code that is used here, is originally written by *connors*. The original code is contained within the CSS file `dist/PhotonOriginal/photon-original.css`. -Copyright @connors. Released under MIT. +But I made some important changes on the original components. E.g. I use modern technologies like **Custom Elements** to handle components much easier and cleaner and to provide a lighter API ;-) diff --git a/ShowReel/css/button.css b/ShowReel/css/button.css new file mode 100644 index 0000000..1767a60 --- /dev/null +++ b/ShowReel/css/button.css @@ -0,0 +1,84 @@ + + +.btn-system { + outline: none; + box-sizing: border-box; + height: 21px; + padding: 0px 16px; + font-size: 13px; + border: 1px solid #d5d5d5; + font-weight: 400; + background-color: #fff; + letter-spacing: 0.4px; + border-radius: 4.5px; + border-top-color: rgb(198, 198, 198); + border-bottom-color: rgb(170, 170, 170); + border-left-color: rgb(192, 192, 192); + border-right-color: rgb(192, 192, 192); +} + +.btn-system.btn-active:not([disabled])/*, .btn-system:active:not([disabled])*/ { + letter-spacing: 0.8px; + color: #fff; + font-weight: 300; + padding: 0px 17px 1px 16px; + border-top-color: rgb(64, 150, 248); + border-bottom-color: rgb(9, 85, 255); + border-left-color: rgb(39, 122, 252); + border-right-color: rgb(39, 122, 252); + background-image: linear-gradient(rgb(94, 168, 249), rgb(14, 117, 255)); +} +.btn-system:active:not([disabled]), .btn-system.btn-active:active:not([disabled]) { + border-top-color: rgb(30, 114, 254); + border-bottom-color: rgb(3, 56, 216); + border-left-color: rgb(16, 82, 233); + border-right-color: rgb(17, 82, 227); + background-image: linear-gradient(rgb(64, 140, 253), rgb(11, 93, 224)); + letter-spacing: 0.8px; + color: #fff; + font-weight: 300; + padding: 0px 17px 1px 16px; +} +.btn-system[disabled] { + border-color: rgb(212, 212, 212); + background-image: none; + background-color: rgb(248, 248, 248); + color: rgb(168, 168, 168); + box-shadow: 0px 1px 0px -0.5px rgba(120, 120, 120, 0.2); +} + +@media only screen and (min--moz-device-pixel-ratio: 2), +only screen and (-o-min-device-pixel-ratio: 2/1), +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and (min-device-pixel-ratio: 2) { + .btn-system, .btn-system:focus { + padding: 0px 16px 0.5px 16px; + border: none; + border-radius: 3px; + box-shadow: 0px 1px 0px -0.5px rgba(120, 120, 120, 0.6); + font-family: 'BlinkMacSystemFont', '-apple-system', -apple-system; + background-position: center center; + background-image: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'); + background-size: 100% 100%; + + } + .btn-system.btn-active:not([disabled])/*, .btn-system:active*/ { + border-radius: 3.5px; + font-weight: 300; + } + .btn-system.btn-active { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(94, 168, 249), rgb(14, 117, 255)) !important; + + } + .btn-system.btn-active:active { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(64, 140, 253), rgb(11, 93, 224)) !important; + } + .btn-system[disabled], .btn-system.btn-active[disabled] { + background-image: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,') !important; + } +} diff --git a/ShowReel/css/circular-slider.css b/ShowReel/css/circular-slider.css new file mode 100644 index 0000000..01a21c5 --- /dev/null +++ b/ShowReel/css/circular-slider.css @@ -0,0 +1,23 @@ +circular-slider { + display: inline-block; + width: 25px; + height: 25px; + border: 1px solid rgb(207, 207, 207); /*rgb(195, 195, 195)*/ + border-radius: 50%; + box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5); + position: relative; + background-color: #fff; +} +circular-slider .dot { + position: absolute; + width: 5px; + height: 5px; + left: calc(50% - 2.5px); + top: calc(50% - 2.5px); + background-color: rgb(120, 120, 120); /*rgb(99, 99, 99)*/ + background-color: rgb(189, 189, 189); /*rgb(171, 171, 171)*/ + background-image: linear-gradient(rgb(120, 120, 120), rgb(189, 189, 189)); + border-radius: 50%; + transform-origin: center 190%; + transform: translate(0px, -140%) rotate(0deg); +} diff --git a/ShowReel/css/content-frame.css b/ShowReel/css/content-frame.css new file mode 100644 index 0000000..b06268c --- /dev/null +++ b/ShowReel/css/content-frame.css @@ -0,0 +1,180 @@ +content-frame { + display: block; + margin: 10px; + width: calc(100% - 20px); + border: 1px solid #b5b5b5; + background-color: #fff; + min-height: 150px; + height: auto; + position: relative; +} +content-frame .pane { + flex: 1; + border-right: 1px solid #b5b5b5; + border-left: none; +} +content-frame .pane:last-child { + border-right: none; +} +content-frame .pane.small { + flex: 1; + width: 200px; +} +content-frame frame-inner { + display: block; + box-sizing: padding-box; + height: calc(100% - 22px); + width: 100%; +} +content-frame frame-inner list-select { + list-style: none; + margin: 0; + padding: 0; +} +content-frame frame-inner list-select li { + padding: 0; +} +content-frame frame-inner list-select li + li { + margin-top: -2px; +} +content-frame frame-inner list-select li.active { + background-color: rgb(5, 105, 217); + color: #fff; + font-weight: 400; +} +content-frame frame-inner list-select li:before, content-frame frame-inner list-select li summary:after { + width: 100%; + background-color: transparent; + content: " "; + display: block; + height: 2px; +} +content-frame frame-inner list-select li.drag-before:before, content-frame frame-inner list-select li.drag-after:after { + background-color: rgb(2, 93, 210); +} + +content-frame frame-inner list-select li list-select { + +} +content-frame frame-inner list-select li.active list-select { + +} +content-frame frame-inner list-select li details { + +} +content-frame frame-inner list-select li details summary, content-frame frame-inner list-select li > span { + outline: none; + padding: 0px 0px 0px 7px; +} +content-frame frame-inner list-select li details summary::-webkit-details-marker { + display: none; +} +content-frame frame-inner list-select li details summary:after { + /*background-image: url('data:image/svg+xml;utf8,'); + */ + background-color: #797979; + -webkit-mask-image: url('data:image/svg+xml;utf8,'); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: 90%; + background-repeat: no-repeat; + background-position: left center; + float: left; + height: 20px; + width: 12px; + content: " "; + margin-right: 2px; +} +content-frame frame-inner list-select li.active details summary:after { + background-color: #fff; +} +content-frame frame-inner list-select li details[open] summary:after { + -webkit-mask-image: url('data:image/svg+xml;utf8,'); +} +content-frame frame-inner list-select li details *:not(summary) { + outline: none; + background-color: #fff; + color: #000; +} +content-frame frame-inner list-select li list-select li { + padding: 0px 0px 0px 30px; +} +content-frame .toolbar { + height: 21px; + border-top: 1px solid #b5b5b5; + box-sizing: border-box; + background-color: #f6f6f6; + background-image: none; + font-size: 0; + z-index: 2; + overflow-y: hidden; + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + background-image: none !important; +} +content-frame .toolbar .btn { + margin: 0; + padding: 0; + height: calc(100% + 2px); + width: 26px; + margin-top: -1px; + border-radius: 0; + border-right: 1px solid #b5b5b5; + background-size: 100%; + background-position: center; + background-repeat: no-repeat; + z-index: 1; + background-color: transparent; +} +content-frame .toolbar .btn:active:hover, content-frame .pane tool-bar .btn.active { + background-color: #b3b3b3; +} +content-frame .toolbar .btn-add { + background-image: url('data:image/svg+xml;utf8,'); +} +content-frame .toolbar .btn-remove { + background-image: url('data:image/svg+xml;utf8,'); +} +content-frame .toolbar .btn-remove[disabled] { + background-image: url('data:image/svg+xml;utf8,'); +} + + + +.list-editable { + +} +.list-editable li { + +} +.list-editable.dragging li.active.drag-over, .list-editable.dragging li.drag-over + li.active { + background-color: rgb(220, 220, 220); + color: inherit; +} +.list-editable li, .list-editable li * { + cursor: -webkit-grab; +} +.list-editable.dragging li.drag-over { + border-bottom: 2px solid rgb(5, 105, 217); +} + + +window-content { + display: block; +} +.theme-gray { + background-color: rgb(237, 237, 237); +} +.main-border { + margin: 20px; + padding: 10px 10px 30px 10px; + background-color: rgb(229, 229, 229); + border: 1px solid rgb(223, 223, 223); + border-top: 1px solid rgb(214, 214, 214); + border-radius: 4px; +} +.main-border .content-frame { + +} diff --git a/ShowReel/css/custom.css b/ShowReel/css/custom.css new file mode 100644 index 0000000..ba29b88 --- /dev/null +++ b/ShowReel/css/custom.css @@ -0,0 +1,107 @@ +tool-bar { + background-image: linear-gradient(rgb(233, 233, 233), rgb(210, 210, 210)) !important; + border-radius: 6px 6px 0px 0px; +} + + + + +.window.no-focus tool-bar, +.window.no-focus tool-bar .btn.btn-default, +.window.no-focus tool-bar .title, +.window.no-focus .tab-item.active +{ + background-image: none; + background-color: rgb(245, 244, 245); + color: #bdbdbd; +} +.window.no-focus tool-bar .btn.btn-default { + box-shadow: none; +} +.window.no-focus tool-bar .btn.btn-default, +.window.no-focus tool-bar input +{ + border-color: #d4d4d4; +} +.window.no-focus tool-bar .btn.btn-default.active { + background-color: rgb(227, 227, 227); +} +.window.no-focus tool-bar input { + background-color: transparent !important; +} +.window.no-focus .tab-group { + border-color: rgb(210, 210, 210); +} +.window.no-focus .tab-item:not(.btn) { + background-image: none; +} +.window.no-focus .tab-item { + background-color: rgb(223, 223, 223); + border-color: rgb(210, 210, 210); + color: rgb(110, 110, 110); +} +.window.no-focus .tab-item:hover { + background-color: rgb(223, 223, 223); +} +.window.no-focus .tab-item.active { + color: rgb(110, 110, 110); +} +.window.no-focus .pane-sm.sidebar { + background-color: rgb(246, 246, 246); +} + + +.window.no-focus .list-select li.active { + background-color: rgb(219, 219, 219); +} + + + +.window.no-focus .btn-group .btn-segment.active { + background-image: none; + background-color: rgb(225, 225, 225); + border-color: #d5d5d5; + border-top-color: rgb(195, 195, 195); + border-bottom-color: rgb(174, 174, 174); + border-left-color: rgb(195, 195, 195); + border-right-color: rgb(195, 195, 195); + color: #111; + font-weight: 400; + box-shadow: none; + +} + + + +.window.no-focus .btn-system.btn-active { + background-image: none; + padding: 0px 16px; + font-weight: 400; + letter-spacing: 0.4px; + border-radius: 4.5px; + border-top-color: rgb(198, 198, 198); + border-bottom-color: rgb(170, 170, 170); + border-left-color: rgb(192, 192, 192); + border-right-color: rgb(192, 192, 192); + color: #000; +} + + + +.window.no-focus .slider-round { + /*rgb(98, 97, 98) rgb(117, 116, 117)*/ + background-image: url('data:image/svg+xml;utf8,'); +} + + + +.window { + background-color: transparent; +} +ph-window.vibrancy .pane-sm { + background-color: transparent; + background-color: rgba(255, 255, 255, 0.7); +} +ph-window:not(.vibrancy) .pane-group { + background-color: rgba(255, 255, 255, 0.9); +} diff --git a/ShowReel/css/dialog.css b/ShowReel/css/dialog.css new file mode 100644 index 0000000..711eb0c --- /dev/null +++ b/ShowReel/css/dialog.css @@ -0,0 +1,3 @@ +.chakir { + +} diff --git a/ShowReel/css/input-stepper.css b/ShowReel/css/input-stepper.css new file mode 100644 index 0000000..ef284ee --- /dev/null +++ b/ShowReel/css/input-stepper.css @@ -0,0 +1,33 @@ +:host button { + opacity: 0.1; + padding: 0; + border: none; + width: 100%; + height: 50%; + background-color: transparent; + outline: none; + background-repeat: no-repeat; + background-position: center; + z-index: 2; +} +button:active { + z-index: 1; +} +input-stepper button:nth-child(1) { + border-radius: 5px 5px 0px 0px; + background-image: url('data:image/svg+xml;utf8,'); +} +input-stepper button:nth-child(2) { + border-radius: 0px 0px 5px 5px; + background-image: url('data:image/svg+xml;utf8,'); +} +input-stepper button:nth-child(1):active { + box-shadow: 0px 0px 0px 1px rgb(39, 122, 252); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(76, 154, 255), rgb(41, 129, 246)); +} +input-stepper button:nth-child(2):active { + box-shadow: 0px 0px 0px 1px rgb(8, 80, 234); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(38, 127, 247), rgb(7, 102, 233)); +} diff --git a/ShowReel/css/input.css b/ShowReel/css/input.css new file mode 100644 index 0000000..940bef2 --- /dev/null +++ b/ShowReel/css/input.css @@ -0,0 +1,210 @@ +input:not([type="range"]):not([type="color"]):not(.message-input) { + height: auto; + height: inherit; + font-size: 12px; + height: 13px; + padding: 10px 6px 10px 6px; + outline: none; + border: 1px solid rgb(213, 213, 213); + margin: 5px; + cursor: text; + -webkit-app-region: no-drag; +} +input:not([type="range"]):not([type="color"]):not(.message-input):focus { + border-radius: 1px; + box-shadow: 0px 0px 0px 3.5px rgb(145, 191, 245); + animation: showFocus .3s; + border-color: rgb(122, 167, 221) !important; +} +@keyframes showFocus { + 0% { + border-color: #dbdbdb; + border-radius: -1px; + box-shadow: 0px 0px 0px 14px rgba(145, 191, 245, 0); + /*outline: 14px solid rgba(159, 204, 250, 0); + outline-offset: 0px;*/ + } + 100% { + border-color: rgb(122, 167, 221) !important; + border-radius: 1px; + box-shadow: 0px 0px 0px 3.5px rgba(145, 191, 245, 1); + /*outline: 4px solid rgba(159, 204, 250, 1); + outline-offset: -1px;*/ + } +} + +tool-bar input:not([type="range"]):not([type="color"]):not(.message-input) { + font-size: 13px; + height: 14px; + padding: 11px 6px 11px 6px; + border-radius: 4px; + border-color: #c2c2c2; +} +tool-bar input:not([type="range"]):not([type="color"]):not(.message-input):focus { + border-color: #9fccfa; + border-radius: 4px; +} +input[type="search"] { + text-indent: 0px; + text-align: center; + background-image: url('data:image/svg+xml;utf8,'); + background-size: auto 65%, 100% 100%; + background-position: 5px center, center; + background-repeat: no-repeat; + text-align: center; + text-indent: 12px; + border-radius: 6px !important; +} +tool-bar input[type="search"] { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(255, 255, 255), rgb(241, 240, 240)); + border: 1px solid rgb(167, 167, 167); + border-bottom-color: rgb(178, 178, 178) !important; + border-top-color: rgb(212, 212, 212) !important; + border-left-color: rgb(204, 204, 204) !important; + border-right-color: rgb(204, 204, 204) !important; +} +input[type="search"]:focus { + text-align: left; + text-indent: 15px; + box-shadow: 0px 0px 0px 4.5px rgb(115, 166, 233); + border-bottom-color: #f00 !important; + border-radius: 4px !important; +} +input[type="search"]::-webkit-input-placeholder { + /*text-align: center;*/ + + +} +input[type="search"]:focus::-webkit-input-placeholder { + /*text-align: left;*/ +} +input[type='number'] { + width: 75px; +} +input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { + transform: translate(27px, 0px) scale(1.5); + opacity: 1; + display: none; + background-color: red !important; + background-image: url('data:image/svg+xml;utf8,'); +} +input[type='number']::-webkit-inner-spin-button { + +} + +input-stepper { + display: block; + margin: 0px 3px 0px 0px; + font-size: 0; + height: 20px; + width: 13px; + box-sizing: border-box; + border: 1px solid rgb(202, 202, 202); + border-radius: 5px; + display: inline-block; + vertical-align: middle; + background-color: #fff; +} +input + input-stepper { + margin-top: -1px; +} +input-stepper button { + padding: 0; + border: none; + width: 100%; + height: 50%; + background-color: transparent; + outline: none; + background-repeat: no-repeat; + background-position: center; + z-index: 2; +} +input-stepper button:active { + z-index: 1; +} +input-stepper button:nth-child(1) { + border-radius: 5px 5px 0px 0px; + background-image: url('data:image/svg+xml;utf8,'); +} +input-stepper button:nth-child(2) { + border-radius: 0px 0px 5px 5px; + background-image: url('data:image/svg+xml;utf8,'); +} +input-stepper button:nth-child(1):active { + box-shadow: 0px 0px 0px 1px rgb(39, 122, 252); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(76, 154, 255), rgb(41, 129, 246)); +} +input-stepper button:nth-child(2):active { + box-shadow: 0px 0px 0px 1px rgb(8, 80, 234); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(38, 127, 247), rgb(7, 102, 233)); +} + +@media only screen and (min--moz-device-pixel-ratio: 2), +only screen and (-o-min-device-pixel-ratio: 2/1), +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and (min-device-pixel-ratio: 2) { + input-stepper { + border: 1px solid rgb(202, 202, 202); + border: none; + box-shadow: 0px 0px 0px 0.5px rgb(189, 189, 189); + width: 12px; + } + input-stepper button:nth-child(1) { + background-image: url('data:image/svg+xml;utf8,'); + } + input-stepper button:nth-child(2) { + background-image: url('data:image/svg+xml;utf8,'); + } + input-stepper button:nth-child(1):active { + box-shadow: 0px 0px 0px 0.5px rgb(39, 122, 252); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(76, 154, 255), rgb(41, 129, 246)); + } + input-stepper button:nth-child(2):active { + box-shadow: 0px 0px 0px 0.5px rgb(8, 80, 234); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(38, 127, 247), rgb(7, 102, 233)); + } +} +input[data-type-rule="suffix"] { + width: 75px; +} + + + +:host button { + opacity: 0.1; + padding: 0; + border: none; + width: 100%; + height: 50%; + background-color: transparent; + outline: none; + background-repeat: no-repeat; + background-position: center; + z-index: 2; +} +button:active { + z-index: 1; +} +input-stepper button:nth-child(1) { + border-radius: 5px 5px 0px 0px; + background-image: url('data:image/svg+xml;utf8,'); +} +input-stepper button:nth-child(2) { + border-radius: 0px 0px 5px 5px; + background-image: url('data:image/svg+xml;utf8,'); +} +input-stepper button:nth-child(1):active { + box-shadow: 0px 0px 0px 1px rgb(39, 122, 252); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(76, 154, 255), rgb(41, 129, 246)); +} +input-stepper button:nth-child(2):active { + box-shadow: 0px 0px 0px 1px rgb(8, 80, 234); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(38, 127, 247), rgb(7, 102, 233)); +} diff --git a/ShowReel/css/main-border.css b/ShowReel/css/main-border.css new file mode 100644 index 0000000..7e380df --- /dev/null +++ b/ShowReel/css/main-border.css @@ -0,0 +1,17 @@ +window-content { + display: block; +} +.theme-gray { + background-color: rgb(237, 237, 237); +} +.main-border { + margin: 20px; + padding: 10px 10px 30px 10px; + background-color: rgb(229, 229, 229); + border: 1px solid rgb(223, 223, 223); + border-top: 1px solid rgb(214, 214, 214); + border-radius: 4px; +} +.main-border .content-frame { + +} diff --git a/ShowReel/css/messages.css b/ShowReel/css/messages.css new file mode 100644 index 0000000..44c3be1 --- /dev/null +++ b/ShowReel/css/messages.css @@ -0,0 +1,255 @@ +messages-view { + width: 100%; + height: 100%; + display: block; +} +messages-view .toolbar { + height: 40px; + box-sizing: border-box; + border: 0px solid rgb(220, 220, 220); + background-color: rgb(240, 240, 240); + background-color: none !important; + -webkit-backdrop-filter: blur(1px); + background-image: none !important; + vertical-align: middle; + width: 100%; +} +messages-view .toolbar:first-child { + border-bottom-width: 1px; + -webkit-app-region: drag; + height: 55px; + box-sizing: padding-box; +} +messages-view .toolbar .bar-inner { + padding: 25px 0px 0px 10px; +} +messages-view .toolbar:last-child { + border-top-width: 1px; +} +messages-view .messages { + display: block; + list-style: none; + padding: 0; + margin: 0; + height: calc(100% - 95px); + background-color: #fff; + overflow: scroll; + max-width: 100%; +} +messages-view .messages:last-child { + height: calc(100% - 55px); +} +messages-view .messages:first-child { + height: calc(100% - 40px); +} +messages-view .messages:only-child { + height: 100%; +} +messages-view .messages { + padding: 10px 0px; +} +messages-view .messages li { + width: 100%; + box-sizing: padding-box; + margin-bottom: 1px; + max-width: 100%; +} +messages-view .messages li:not([type="system"]) message-content { + display: inline-block; + max-width: 60%; + padding: 3px 10px; + border-radius: 13px; + text-align: left; + -webkit-user-select: all; +} +messages-view .messages li[type="self"] + li[type="extern"], messages-view .messages li[type="extern"] + li[type="self"] { + margin-top: 30px; +} +messages-view .messages li message-description, messages-view .messages li[type="system"] { + color: rgb(142, 142, 147); + font-weight: 500; + font-size: 11px; + letter-spacing: 0.4px; + margin-bottom: 10px; + display: block; +} +messages-view .messages li message-description:empty { + margin-bottom: 0; +} +messages-view .messages li[type="system"] { + width: 100%; + text-align: center; +} +messages-view .messages li[type="self"] { + text-align: right; + padding: 0px 15px 0px 0px; +} +messages-view .messages li[type="extern"] { + text-align: left; + padding: 0px 0px 0px 15px; +} +messages-view .messages li[type="self"] message-content { + background-image: linear-gradient(rgb(29, 144, 249), rgb(15, 132, 248)); + border-radius: 13px 13px 0px 13px; + -webkit-mask-image: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'); + -webkit-mask-position: calc(100% - 0.5px) calc(100% + 5px), left top, calc(100% + 0px) calc(100% + 6px); + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 14px 14px, calc(100% - 7px) 100%, 22px 15px; /*calc(100% - 7px) 100%*/ + color: #fff; + padding: 3px 15px 3px 10px; + font-weight: 300; + letter-spacing: 0.75px; +} +messages-view .messages li.active message-content { + background-image: none; + display: block; +} +messages-view .messages li[type="self"].active message-content { + background-color: rgb(101, 168, 234); +} +messages-view .messages li[type="extern"].active message-content { + background-color: rgb(206, 206, 210); /*rgb(195, 195, 200) rgb(182, 182, 188)*/ +} +messages-view .messages li[type="extern"] message-content { + background-color: rgb(229, 229, 234); + border-radius: 13px 13px 13px 0px; + -webkit-mask-image: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'); + -webkit-mask-position: 0.5px calc(100% + 5px), 5.5px top, calc(100% + 0px) calc(100% + 6px); + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 14px 14px, calc(100% - 6.5px) 100%, 22px 15px; /*calc(100% - 7px) 100%*/ + padding: 3px 10px 3px 15px; + letter-spacing: 0.25px; +} +messages-view .messages li.attachment message-content { + padding: 0; + margin: 0; + font-size: 0; +} +messages-view .messages li.attachment message-content img { + max-width: 100%; +} +messages-view .messages li audio::-webkit-media-controls-panel { + background-color: transparent; +} +messages-view .messages li[type="self"] { + --fillColor: #fff; +} +messages-view .messages li[type="extern"] { + --fillColor: #000; +} + + +audio { + display: block; + width: 300px; + height: 100px; + background-color: red +} + + +messages-view .messages li audio::-webkit-media-controls-play-button, +messages-view .messages li audio::-webkit-media-controls-mute-button { + background-color: var(--fillColor); + width: 25px; + height: 25px; + margin: 0px 10px; +} +messages-view .messages li audio::-webkit-media-controls-play-button { + -webkit-mask-image: url('data:image/svg+xml;utf8,'); +} +messages-view .messages li audio::-webkit-media-controls-mute-button { + -webkit-mask-image: url('data:image/svg+xml;utf8, '); +} +messages-view .messages li[type="self"] audio::-webkit-media-controls-play-button { + margin: 0px 5px; +} +messages-view .messages li[type="self"] audio::-webkit-media-controls-mute-button { + margin: 0px 10px 0px 0px; +} +messages-view .messages li[type="extern"] audio::-webkit-media-controls-play-button { + margin: 0px 10px; +} +messages-view .messages li[type="extern"] audio::-webkit-media-controls-mute-button { + margin: 0px 5px 0px 0px; +} +messages-view .messages li audio::-webkit-media-controls-timeline-container { + background-color: red; +} +messages-view .messages li audio::-webkit-media-controls-timeline { + background-color: var(--fillColor); +} +/*audio::-webkit-media-controls-volume-slider { + -webkit-filter: hue-rotate(143deg) saturate(10); +}*/ +messages-view .messages li audio::-webkit-media-controls-timeline { + -webkit-filter: brightness(0);/*hsl(0, 0%, 100%)*/ +} +messages-view .messages li[type="self"] audio::-webkit-media-controls-timeline { + -webkit-filter: brightness(0) invert(1);/*hsl(0, 0%, 100%)*/ +} +messages-view .messages li audio::-webkit-media-controls-volume-slider { + display: none; +} +messages-view .messages li audio::-webkit-media-controls-current-time-display, +messages-view .messages li audio::-webkit-media-controls-time-remaining-display { + color: var(--fillColor); +} + +messages-view .messages li { + +} +messages-view .messages li { + +} +messages-view .message-input { + height: 23px; + font-size: 12px !important; + box-sizing: border-box; + border: 1px solid rgb(223, 223, 223) !important; + margin: calc((38px - 23px) / 2) 0px 0px 15px; + border-radius: 12px !important; + text-indent: 10px; + font-weight: 400; + letter-spacing: 0.5px; + color: rgb(75, 75, 75) !important; /*rgb(153, 153, 153)*/ + outline: none; + cursor: text; + width: calc(100% - 60px); +} +messages-view .toolbar .btn-mic, messages-view .toolbar .btn-emojis { + background-color: transparent; + box-shadow: none; + height: 18px; + width: 18px; + background-color: rgb(127, 127, 127); + -webkit-mask-repeat: none; + -webkit-mask-position: left top; + -webkit-mask-size: 100% 100%; + margin-left: 10px; +} +messages-view .toolbar .btn:active { + background-color: rgb(50, 50, 50); +} +messages-view .toolbar .btn.btn-input { + margin-left: -25px; +} +messages-view .toolbar .btn.btn-emojis { + -webkit-mask-image: url('data:image/svg+xml;utf8,'); +} +messages-view .toolbar .btn.btn-mic { + -webkit-mask-image: url('data:image/svg+xml;utf8, '); +} +.btn-text { + background-color: transparent; + color: rgb(38, 140, 251); + box-shadow: none; + font-weight: 400; + letter-spacing: 0.5px !important; +} +.btn.btn-text:active { + background-color: transparent !important; +} diff --git a/ShowReel/css/number-input.css b/ShowReel/css/number-input.css new file mode 100644 index 0000000..53e6c56 --- /dev/null +++ b/ShowReel/css/number-input.css @@ -0,0 +1,50 @@ +number-input { + padding: 2px 2px; + border-radius: 4px; +} +number-input.focus { + background-color: rgba(138, 191, 254, 0.8); +} + +number-input { + display: inline-block; + min-width: calc(var(--length) * 9.25px); + overflow: hidden; + text-align: right; +} +number-input[maxlength="1"] { + --length: 1; +} +number-input[maxlength="2"] { + --length: 2; +} +number-input[maxlength="3"] { + --length: 3; +} +number-input[maxlength="4"] { + --length: 4; +} +number-input[maxlength="5"] { + --length: 5; +} +number-input[maxlength="6"] { + --length: 6; +} +number-input[maxlength="7"] { + --length: 7; +} +number-input[maxlength="8"] { + --length: 8; +} +number-input[maxlength="9"] { + --length: 9; +} +number-input[maxlength="10"] { + --length: 10; +} +number-input[maxlength="11"] { + --length: 11; +} +number-input[maxlength="12"] { + --length: 12; +} diff --git a/ShowReel/css/panes.css b/ShowReel/css/panes.css new file mode 100644 index 0000000..3eeac8c --- /dev/null +++ b/ShowReel/css/panes.css @@ -0,0 +1,3 @@ +.sizing-pane * { + cursor: ew-resize; +} diff --git a/dist/css/photon.css b/ShowReel/css/photon.css similarity index 94% rename from dist/css/photon.css rename to ShowReel/css/photon.css index df5b944..60837db 100644 --- a/dist/css/photon.css +++ b/ShowReel/css/photon.css @@ -203,18 +203,7 @@ h6 { font-size: 12px; } -.window { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: flex; - flex-direction: column; - background-color: #fff; -} - -.window-content { +window-content { position: relative; overflow-y: auto; display: flex; @@ -368,14 +357,11 @@ h6 { .btn-default { color: #333; - border-top-color: #c2c0c2; - border-right-color: #c2c0c2; - border-bottom-color: #a19fa1; - border-left-color: #c2c0c2; - background-color: #fcfcfc; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #f1f1f1)); - background-image: -webkit-linear-gradient(top, #fcfcfc 0%, #f1f1f1 100%); - background-image: linear-gradient(to bottom, #fcfcfc 0%, #f1f1f1 100%); + border-top-color: rgb(205, 205, 205); + border-right-color: rgb(205, 205, 205); + border-bottom-color: rgb(177, 177, 177); + border-left-color: rgb(205, 205, 205); + background-image: linear-gradient(rgb(255, 255, 255), rgb(252, 252, 252) 1px, rgb(241, 241, 241)); } .btn-default:active { background-color: #ddd; @@ -470,81 +456,102 @@ h6 { margin-left: 5px; content: '\e873'; } - +btn-group, .btn-group { position: relative; display: inline-block; vertical-align: middle; -webkit-app-region: no-drag; } +btn-group .btn, .btn-group .btn { position: relative; float: left; } +btn-group .btn-default.active, +.btn-group .btn-default.active { + border-top-color: rgb(105, 105, 105); + border-bottom: 1px solid rgb(94, 94, 94); + border-right: 1px solid rgb(105, 105, 105) !important; + border-left: 1px solid rgb(105, 105, 105) !important; + +} +btn-group .btn:focus, btn-group .btn:active, .btn-group .btn:focus, .btn-group .btn:active { z-index: 2; } +btn-group .btn.active, .btn-group .btn.active { z-index: 3; } +btn-group .btn + .btn, +btn-group .btn + btn-group, +btn-group btn-group + .btn, +btn-group btn-group + btn-group, .btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group { margin-left: -1px; } +btn-group > .btn:first-child, .btn-group > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } +btn-group > .btn:last-child, .btn-group > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } +btn-group > .btn:not(:first-child):not(:last-child), .btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0; } +btn-group .btn + .btn, .btn-group .btn + .btn { border-left: 1px solid #c2c0c2; } +btn-group .btn + .btn.active, .btn-group .btn + .btn.active { border-left: 0; } +btn-group .btn.active, .btn-group .active { color: #fff; border: 1px solid transparent; background-color: #6d6c6d; background-image: none; } +btn-group .active .icon, .btn-group .active .icon { color: #fff; } -.toolbar { +tool-bar { min-height: 22px; box-shadow: inset 0 1px 0 #f5f4f5; background-color: #e8e6e8; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8e6e8), color-stop(100%, #d1cfd1)); - background-image: -webkit-linear-gradient(top, #e8e6e8 0%, #d1cfd1 100%); - background-image: linear-gradient(to bottom, #e8e6e8 0%, #d1cfd1 100%); + background-image: linear-gradient(rgb(233, 233, 233), rgb(233, 233, 233)); + background-image: linear-gradient(rgb(216, 216, 216), rgb(216, 216, 216)); } -.toolbar:before, .toolbar:after { +tool-bar:before, tool-bar:after { display: table; content: " "; } -.toolbar:after { +tool-bar:after { clear: both; } -.toolbar-header { +tool-bar[type="header"] { border-bottom: 1px solid #c2c0c2; } -.toolbar-header .title { +tool-bar[type="header"] .title { margin-top: 1px; } -.toolbar-footer { +tool-bar[type="footer"] { border-top: 1px solid #c2c0c2; -webkit-app-region: drag; } @@ -558,7 +565,7 @@ h6 { cursor: default; } -.toolbar-borderless { +tool-bar .borderless { border-top: 0; border-bottom: 0; } @@ -708,37 +715,39 @@ img { .img-rounded { border-radius: 4px; } - -.list-group { +/* +list-group { width: 100%; list-style: none; margin: 0; padding: 0; + display: block; } -.list-group * { +list-group * { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.list-group-item { +list-item { + display: block; padding: 10px; font-size: 12px; color: #414142; border-top: 1px solid #ddd; } -.list-group-item:first-child { +list-item:first-child { border-top: 0; } -.list-group-item.active, .list-group-item.selected { +list-item.active, .list-group-item.selected { color: #fff; background-color: #116cd6; } -.list-group-header { +list-header { padding: 10px; -} +}*/ .media-object { margin-top: 3px; @@ -2282,14 +2291,14 @@ td:last-child { border-right: 0; } -.tab-group { +.tab-group, tab-group { margin-top: -1px; display: flex; border-top: 1px solid #989698; border-bottom: 1px solid #989698; } -.tab-item { +.tab-item, tab-item { position: relative; flex: 1; padding: 3px; @@ -2301,16 +2310,16 @@ td:last-child { background-image: -webkit-linear-gradient(top, #b8b6b8 0%, #b0aeb0 100%); background-image: linear-gradient(to bottom, #b8b6b8 0%, #b0aeb0 100%); } -.tab-item:first-child { +.tab-item:first-child, tab-item:first-child { border-left: 0; } -.tab-item.active { +.tab-item.active, tab-item.active { background-color: #d4d2d4; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4d2d4), color-stop(100%, #cccacc)); background-image: -webkit-linear-gradient(top, #d4d2d4 0%, #cccacc 100%); background-image: linear-gradient(to bottom, #d4d2d4 0%, #cccacc 100%); } -.tab-item .icon-close-tab { +.tab-item .icon-close-tab, tab-item button[action="close"] { position: absolute; top: 50%; left: 5px; @@ -2326,7 +2335,7 @@ td:last-child { transform: translateY(-50%); z-index: 10; } -.tab-item:after { +.tab-item:after, tab-item:after{ position: absolute; top: 0; right: 0; @@ -2338,17 +2347,17 @@ td:last-child { transition: opacity .1s linear; z-index: 1; } -.tab-item:hover:not(.active):after { +.tab-item:hover:not(.active):after, tab-item:hover:not(.active):after { opacity: 1; } -.tab-item:hover .icon-close-tab { +.tab-item:hover .icon-close-tab, tab-item:hover button[action="close"] { opacity: 1; } -.tab-item .icon-close-tab:hover { +.tab-item .icon-close-tab:hover, tab-item button[action="close"]:hover { background-color: rgba(0, 0, 0, 0.08); } -.tab-item-fixed { +.tab-item-fixed, tab-item[type="fixed"] { flex: none; padding: 3px 10px; } diff --git a/ShowReel/css/photon1.css b/ShowReel/css/photon1.css new file mode 100644 index 0000000..5795b86 --- /dev/null +++ b/ShowReel/css/photon1.css @@ -0,0 +1,2288 @@ +/*! + * ===================================================== + * Photon v0.1.2 + * Copyright 2016 Connor Sears + * Licensed under MIT (https://github.com/connors/proton/blob/master/LICENSE) + * + * v0.1.2 designed by @connors. + * ===================================================== + */ + +@charset "UTF-8"; +audio, +canvas, +progress, +video { + vertical-align: baseline; +} + +audio:not([controls]) { + display: none; +} + +a:active, +a:hover { + outline: 0; +} + +abbr[title] { + border-bottom: 1px dotted; +} + +b, +strong { + font-weight: bold; +} + +dfn { + font-style: italic; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +pre { + overflow: auto; +} + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +button, +input, +optgroup, +select, +textarea { + color: inherit; + font: inherit; + margin: 0; +} + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +input[type="search"] { + -webkit-appearance: textfield; + box-sizing: content-box; +} + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +legend { + border: 0; + padding: 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} + +* { + cursor: default; + -webkit-user-select: none; +} + +input, +textarea { + -webkit-user-select: text; +} + +form, +input, +optgroup, +select, +textarea { + -webkit-user-select: text; + -webkit-app-region: no-drag; +} + +* { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html { + height: 100%; + width: 100%; + overflow: hidden; +} + +body { + height: 100%; + padding: 0; + margin: 0; + font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif; + font-size: 13px; + line-height: 1.6; + color: #333; + background-color: transparent; +} + +hr { + margin: 15px 0; + overflow: hidden; + background: transparent; + border: 0; + border-bottom: 1px solid #ddd; +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 20px; + margin-bottom: 10px; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +h1 { + font-size: 36px; +} + +h2 { + font-size: 30px; +} + +h3 { + font-size: 24px; +} + +h4 { + font-size: 18px; +} + +h5 { + font-size: 14px; +} + +h6 { + font-size: 12px; +} + +.window { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex-direction: column; + background-color: #fff; +} + +.window-content { + position: relative; + overflow-y: auto; + display: flex; + flex: 1; +} + +.selectable-text { + cursor: text; + -webkit-user-select: text; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.text-left { + text-align: left; +} + +.pull-left { + float: left; +} + +.pull-right { + float: right; +} + +.padded { + padding: 10px; +} + +.padded-less { + padding: 5px; +} + +.padded-more { + padding: 20px; +} + +.padded-vertically { + padding-top: 10px; + padding-bottom: 10px; +} + +.padded-vertically-less { + padding-top: 5px; + padding-bottom: 5px; +} + +.padded-vertically-more { + padding-top: 20px; + padding-bottom: 20px; +} + +.padded-horizontally { + padding-right: 10px; + padding-left: 10px; +} + +.padded-horizontally-less { + padding-right: 5px; + padding-left: 5px; +} + +.padded-horizontally-more { + padding-right: 20px; + padding-left: 20px; +} + +.padded-top { + padding-top: 10px; +} + +.padded-top-less { + padding-top: 5px; +} + +.padded-top-more { + padding-top: 20px; +} + +.padded-bottom { + padding-bottom: 10px; +} + +.padded-bottom-less { + padding-bottom: 5px; +} + +.padded-bottom-more { + padding-bottom: 20px; +} + +.sidebar { + background-color: #f5f5f4; +} + +.draggable { + -webkit-app-region: drag; +} + +.not-draggable { + -webkit-app-region: no-drag; +} + +.clearfix:before, .clearfix:after { + display: table; + content: " "; +} +.clearfix:after { + clear: both; +} + +.btn { + display: inline-block; + padding: 3px 8px; + margin-bottom: 0; + font-size: 12px; + line-height: 1.4; + text-align: center; + white-space: nowrap; + vertical-align: middle; + cursor: default; + background-image: none; + border: 1px solid transparent; + border-radius: 4px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06); + -webkit-app-region: no-drag; +} +.btn:focus { + outline: none; + box-shadow: none; +} + +.btn-mini { + padding: 2px 6px; +} + +.btn-large { + padding: 6px 12px; +} + +.btn-form { + padding-right: 20px; + padding-left: 20px; +} + +.btn-default { + color: #333; + border-top-color: rgb(205, 205, 205); + border-right-color: rgb(205, 205, 205); + border-bottom-color: rgb(177, 177, 177); + border-left-color: rgb(205, 205, 205); + background-image: linear-gradient(rgb(255, 255, 255), rgb(252, 252, 252) 1px, rgb(241, 241, 241)); +} +.btn-default:active { + background-color: #ddd; + background-image: none; +} + +.btn-primary, +.btn-positive, +.btn-negative, +.btn-warning { + color: #fff; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); +} + +.btn-primary { + border-color: #388df8; + border-bottom-color: #0866dc; + background-color: #6eb4f7; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6eb4f7), color-stop(100%, #1a82fb)); + background-image: -webkit-linear-gradient(top, #6eb4f7 0%, #1a82fb 100%); + background-image: linear-gradient(to bottom, #6eb4f7 0%, #1a82fb 100%); +} +.btn-primary:active { + background-color: #3e9bf4; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9bf4), color-stop(100%, #0469de)); + background-image: -webkit-linear-gradient(top, #3e9bf4 0%, #0469de 100%); + background-image: linear-gradient(to bottom, #3e9bf4 0%, #0469de 100%); +} + +.btn-positive { + border-color: #29a03b; + border-bottom-color: #248b34; + background-color: #5bd46d; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bd46d), color-stop(100%, #29a03b)); + background-image: -webkit-linear-gradient(top, #5bd46d 0%, #29a03b 100%); + background-image: linear-gradient(to bottom, #5bd46d 0%, #29a03b 100%); +} +.btn-positive:active { + background-color: #34c84a; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #34c84a), color-stop(100%, #248b34)); + background-image: -webkit-linear-gradient(top, #34c84a 0%, #248b34 100%); + background-image: linear-gradient(to bottom, #34c84a 0%, #248b34 100%); +} + +.btn-negative { + border-color: #fb2f29; + border-bottom-color: #fb1710; + background-color: #fd918d; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd918d), color-stop(100%, #fb2f29)); + background-image: -webkit-linear-gradient(top, #fd918d 0%, #fb2f29 100%); + background-image: linear-gradient(to bottom, #fd918d 0%, #fb2f29 100%); +} +.btn-negative:active { + background-color: #fc605b; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fc605b), color-stop(100%, #fb1710)); + background-image: -webkit-linear-gradient(top, #fc605b 0%, #fb1710 100%); + background-image: linear-gradient(to bottom, #fc605b 0%, #fb1710 100%); +} + +.btn-warning { + border-color: #fcaa0e; + border-bottom-color: #ee9d02; + background-color: #fece72; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fece72), color-stop(100%, #fcaa0e)); + background-image: -webkit-linear-gradient(top, #fece72 0%, #fcaa0e 100%); + background-image: linear-gradient(to bottom, #fece72 0%, #fcaa0e 100%); +} +.btn-warning:active { + background-color: #fdbc40; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdbc40), color-stop(100%, #ee9d02)); + background-image: -webkit-linear-gradient(top, #fdbc40 0%, #ee9d02 100%); + background-image: linear-gradient(to bottom, #fdbc40 0%, #ee9d02 100%); +} + +.btn .icon { + float: left; + width: 14px; + height: 14px; + margin-top: 1px; + margin-bottom: 1px; + color: #737475; + font-size: 14px; + line-height: 1; +} + +.btn .icon-text { + margin-right: 5px; +} + +.btn-dropdown:after { + font-family: "photon-entypo"; + margin-left: 5px; + content: '\e873'; +} + +.btn-group { + position: relative; + display: inline-block; + vertical-align: middle; + -webkit-app-region: no-drag; +} +.btn-group .btn { + position: relative; + float: left; +} +.btn-group .btn-default.active { + border-top-color: rgb(105, 105, 105); + border-bottom: 1px solid rgb(94, 94, 94); + border-right: 1px solid rgb(105, 105, 105) !important; + border-left: 1px solid rgb(105, 105, 105) !important; + +} +.btn-group .btn:focus, .btn-group .btn:active { + z-index: 2; +} +.btn-group .btn.active { + z-index: 3; +} + +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { + margin-left: -1px; +} +.btn-group > .btn:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group > .btn:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group > .btn:not(:first-child):not(:last-child) { + border-radius: 0; +} +.btn-group .btn + .btn { + border-left: 1px solid #c2c0c2; +} +.btn-group .btn + .btn.active { + border-left: 0; +} +.btn-group .active { + color: #fff; + border: 1px solid transparent; + background-color: #6d6c6d; + background-image: none; +} +.btn-group .active .icon { + color: #fff; +} + +tool-bar { + min-height: 22px; + box-shadow: inset 0 1px 0 #f5f4f5; + background-color: #e8e6e8; + background-image: linear-gradient(rgb(233, 233, 233), rgb(233, 233, 233)); + background-image: linear-gradient(rgb(216, 216, 216), rgb(216, 216, 216)); +} +tool-bar:before, tool-bar:after { + display: table; + content: " "; +} +tool-bar:after { + clear: both; +} + +tool-bar-header { + border-bottom: 1px solid #c2c0c2; +} +tool-bar-header .title { + margin-top: 1px; +} + +tool-bar-footer { + border-top: 1px solid #c2c0c2; + -webkit-app-region: drag; +} + +.title { + margin: 0; + font-size: 12px; + font-weight: 400; + text-align: center; + color: #555; + cursor: default; +} + +tool-bar-borderless { + border-top: 0; + border-bottom: 0; +} + +tool-bar-actions { + margin-top: 4px; + margin-bottom: 3px; + padding-right: 3px; + padding-left: 3px; + padding-bottom: 3px; + -webkit-app-region: drag; +} +tool-bar-actions:before, tool-bar-actions:after { + display: table; + content: " "; +} +tool-bar-actions:after { + clear: both; +} +tool-bar-actions > .btn, +tool-bar-actions > .btn-group { + margin-left: 4px; + margin-right: 4px; +} + +label { + display: inline-block; + font-size: 13px; + margin-bottom: 5px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +input[type="search"] { + box-sizing: border-box; +} + +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + line-height: normal; +} + +.form-control { + display: inline-block; + width: 100%; + min-height: 25px; + padding: 5px 10px; + font-size: 13px; + line-height: 1.6; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 4px; + outline: none; +} +.form-control:focus { + border-color: #6db3fd; + box-shadow: 0 0 0 3px #6db3fd; +} + +textarea { + height: auto; +} + +.form-group { + margin-bottom: 10px; +} + +.radio, +.checkbox { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; +} +.radio label, +.checkbox label { + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; +} + +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + position: absolute; + margin-left: -20px; + margin-top: 4px; +} + +.form-actions .btn { + margin-right: 10px; +} +.form-actions .btn:last-child { + margin-right: 0; +} + +.pane-group { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; +} + +.pane { + position: relative; + overflow-y: auto; + flex: 1; + border-left: 1px solid #ddd; +} +.pane:first-child { + border-left: 0; +} + +.pane-sm { + max-width: 220px; + min-width: 150px; +} + +.pane-mini { + width: 80px; + flex: none; +} + +.pane-one-fourth { + width: 25%; + flex: none; +} + +.pane-one-third { + width: 33.3%; + flex: none; +} + +img { + -webkit-user-drag: text; +} + +.img-circle { + border-radius: 50%; +} + +.img-rounded { + border-radius: 4px; +} +/* +list-group { + width: 100%; + list-style: none; + margin: 0; + padding: 0; + display: block; +} +list-group * { + margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +list-item { + display: block; + padding: 10px; + font-size: 12px; + color: #414142; + border-top: 1px solid #ddd; +} +list-item:first-child { + border-top: 0; +} +list-item.active, .list-group-item.selected { + color: #fff; + background-color: #116cd6; +} + +list-header { + padding: 10px; +}*/ + +.media-object { + margin-top: 3px; +} + +.media-object.pull-left { + margin-right: 10px; +} + +.media-object.pull-right { + margin-left: 10px; +} + +.media-body { + overflow: hidden; +} + +.nav-group { + font-size: 14px; +} + +.nav-group-item { + padding: 2px 10px 2px 25px; + display: block; + color: #333; + text-decoration: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.nav-group-item:active, .nav-group-item.active { + background-color: #dcdfe1; +} +.nav-group-item .icon { + width: 19px; + height: 18px; + float: left; + color: #737475; + margin-top: -3px; + margin-right: 7px; + font-size: 18px; + text-align: center; +} + +.nav-group-title { + margin: 0; + padding: 10px 10px 2px; + font-size: 12px; + font-weight: 500; + color: #666666; +} + +@font-face { + font-family: "photon-entypo"; + src: url("../fonts/photon-entypo.eot"); + src: url("../fonts/photon-entypo.eot?#iefix") format("eot"), url("../fonts/photon-entypo.woff") format("woff"), url("../fonts/photon-entypo.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} +.icon:before { + position: relative; + display: inline-block; + font-family: "photon-entypo"; + speak: none; + font-size: 100%; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-note:before { + content: '\e800'; +} + +/* '' */ +.icon-note-beamed:before { + content: '\e801'; +} + +/* '' */ +.icon-music:before { + content: '\e802'; +} + +/* '' */ +.icon-search:before { + content: '\e803'; +} + +/* '' */ +.icon-flashlight:before { + content: '\e804'; +} + +/* '' */ +.icon-mail:before { + content: '\e805'; +} + +/* '' */ +.icon-heart:before { + content: '\e806'; +} + +/* '' */ +.icon-heart-empty:before { + content: '\e807'; +} + +/* '' */ +.icon-star:before { + content: '\e808'; +} + +/* '' */ +.icon-star-empty:before { + content: '\e809'; +} + +/* '' */ +.icon-user:before { + content: '\e80a'; +} + +/* '' */ +.icon-users:before { + content: '\e80b'; +} + +/* '' */ +.icon-user-add:before { + content: '\e80c'; +} + +/* '' */ +.icon-video:before { + content: '\e80d'; +} + +/* '' */ +.icon-picture:before { + content: '\e80e'; +} + +/* '' */ +.icon-camera:before { + content: '\e80f'; +} + +/* '' */ +.icon-layout:before { + content: '\e810'; +} + +/* '' */ +.icon-menu:before { + content: '\e811'; +} + +/* '' */ +.icon-check:before { + content: '\e812'; +} + +/* '' */ +.icon-cancel:before { + content: '\e813'; +} + +/* '' */ +.icon-cancel-circled:before { + content: '\e814'; +} + +/* '' */ +.icon-cancel-squared:before { + content: '\e815'; +} + +/* '' */ +.icon-plus:before { + content: '\e816'; +} + +/* '' */ +.icon-plus-circled:before { + content: '\e817'; +} + +/* '' */ +.icon-plus-squared:before { + content: '\e818'; +} + +/* '' */ +.icon-minus:before { + content: '\e819'; +} + +/* '' */ +.icon-minus-circled:before { + content: '\e81a'; +} + +/* '' */ +.icon-minus-squared:before { + content: '\e81b'; +} + +/* '' */ +.icon-help:before { + content: '\e81c'; +} + +/* '' */ +.icon-help-circled:before { + content: '\e81d'; +} + +/* '' */ +.icon-info:before { + content: '\e81e'; +} + +/* '' */ +.icon-info-circled:before { + content: '\e81f'; +} + +/* '' */ +.icon-back:before { + content: '\e820'; +} + +/* '' */ +.icon-home:before { + content: '\e821'; +} + +/* '' */ +.icon-link:before { + content: '\e822'; +} + +/* '' */ +.icon-attach:before { + content: '\e823'; +} + +/* '' */ +.icon-lock:before { + content: '\e824'; +} + +/* '' */ +.icon-lock-open:before { + content: '\e825'; +} + +/* '' */ +.icon-eye:before { + content: '\e826'; +} + +/* '' */ +.icon-tag:before { + content: '\e827'; +} + +/* '' */ +.icon-bookmark:before { + content: '\e828'; +} + +/* '' */ +.icon-bookmarks:before { + content: '\e829'; +} + +/* '' */ +.icon-flag:before { + content: '\e82a'; +} + +/* '' */ +.icon-thumbs-up:before { + content: '\e82b'; +} + +/* '' */ +.icon-thumbs-down:before { + content: '\e82c'; +} + +/* '' */ +.icon-download:before { + content: '\e82d'; +} + +/* '' */ +.icon-upload:before { + content: '\e82e'; +} + +/* '' */ +.icon-upload-cloud:before { + content: '\e82f'; +} + +/* '' */ +.icon-reply:before { + content: '\e830'; +} + +/* '' */ +.icon-reply-all:before { + content: '\e831'; +} + +/* '' */ +.icon-forward:before { + content: '\e832'; +} + +/* '' */ +.icon-quote:before { + content: '\e833'; +} + +/* '' */ +.icon-code:before { + content: '\e834'; +} + +/* '' */ +.icon-export:before { + content: '\e835'; +} + +/* '' */ +.icon-pencil:before { + content: '\e836'; +} + +/* '' */ +.icon-feather:before { + content: '\e837'; +} + +/* '' */ +.icon-print:before { + content: '\e838'; +} + +/* '' */ +.icon-retweet:before { + content: '\e839'; +} + +/* '' */ +.icon-keyboard:before { + content: '\e83a'; +} + +/* '' */ +.icon-comment:before { + content: '\e83b'; +} + +/* '' */ +.icon-chat:before { + content: '\e83c'; +} + +/* '' */ +.icon-bell:before { + content: '\e83d'; +} + +/* '' */ +.icon-attention:before { + content: '\e83e'; +} + +/* '' */ +.icon-alert:before { + content: '\e83f'; +} + +/* '' */ +.icon-vcard:before { + content: '\e840'; +} + +/* '' */ +.icon-address:before { + content: '\e841'; +} + +/* '' */ +.icon-location:before { + content: '\e842'; +} + +/* '' */ +.icon-map:before { + content: '\e843'; +} + +/* '' */ +.icon-direction:before { + content: '\e844'; +} + +/* '' */ +.icon-compass:before { + content: '\e845'; +} + +/* '' */ +.icon-cup:before { + content: '\e846'; +} + +/* '' */ +.icon-trash:before { + content: '\e847'; +} + +/* '' */ +.icon-doc:before { + content: '\e848'; +} + +/* '' */ +.icon-docs:before { + content: '\e849'; +} + +/* '' */ +.icon-doc-landscape:before { + content: '\e84a'; +} + +/* '' */ +.icon-doc-text:before { + content: '\e84b'; +} + +/* '' */ +.icon-doc-text-inv:before { + content: '\e84c'; +} + +/* '' */ +.icon-newspaper:before { + content: '\e84d'; +} + +/* '' */ +.icon-book-open:before { + content: '\e84e'; +} + +/* '' */ +.icon-book:before { + content: '\e84f'; +} + +/* '' */ +.icon-folder:before { + content: '\e850'; +} + +/* '' */ +.icon-archive:before { + content: '\e851'; +} + +/* '' */ +.icon-box:before { + content: '\e852'; +} + +/* '' */ +.icon-rss:before { + content: '\e853'; +} + +/* '' */ +.icon-phone:before { + content: '\e854'; +} + +/* '' */ +.icon-cog:before { + content: '\e855'; +} + +/* '' */ +.icon-tools:before { + content: '\e856'; +} + +/* '' */ +.icon-share:before { + content: '\e857'; +} + +/* '' */ +.icon-shareable:before { + content: '\e858'; +} + +/* '' */ +.icon-basket:before { + content: '\e859'; +} + +/* '' */ +.icon-bag:before { + content: '\e85a'; +} + +/* '' */ +.icon-calendar:before { + content: '\e85b'; +} + +/* '' */ +.icon-login:before { + content: '\e85c'; +} + +/* '' */ +.icon-logout:before { + content: '\e85d'; +} + +/* '' */ +.icon-mic:before { + content: '\e85e'; +} + +/* '' */ +.icon-mute:before { + content: '\e85f'; +} + +/* '' */ +.icon-sound:before { + content: '\e860'; +} + +/* '' */ +.icon-volume:before { + content: '\e861'; +} + +/* '' */ +.icon-clock:before { + content: '\e862'; +} + +/* '' */ +.icon-hourglass:before { + content: '\e863'; +} + +/* '' */ +.icon-lamp:before { + content: '\e864'; +} + +/* '' */ +.icon-light-down:before { + content: '\e865'; +} + +/* '' */ +.icon-light-up:before { + content: '\e866'; +} + +/* '' */ +.icon-adjust:before { + content: '\e867'; +} + +/* '' */ +.icon-block:before { + content: '\e868'; +} + +/* '' */ +.icon-resize-full:before { + content: '\e869'; +} + +/* '' */ +.icon-resize-small:before { + content: '\e86a'; +} + +/* '' */ +.icon-popup:before { + content: '\e86b'; +} + +/* '' */ +.icon-publish:before { + content: '\e86c'; +} + +/* '' */ +.icon-window:before { + content: '\e86d'; +} + +/* '' */ +.icon-arrow-combo:before { + content: '\e86e'; +} + +/* '' */ +.icon-down-circled:before { + content: '\e86f'; +} + +/* '' */ +.icon-left-circled:before { + content: '\e870'; +} + +/* '' */ +.icon-right-circled:before { + content: '\e871'; +} + +/* '' */ +.icon-up-circled:before { + content: '\e872'; +} + +/* '' */ +.icon-down-open:before { + content: '\e873'; +} + +/* '' */ +.icon-left-open:before { + content: '\e874'; +} + +/* '' */ +.icon-right-open:before { + content: '\e875'; +} + +/* '' */ +.icon-up-open:before { + content: '\e876'; +} + +/* '' */ +.icon-down-open-mini:before { + content: '\e877'; +} + +/* '' */ +.icon-left-open-mini:before { + content: '\e878'; +} + +/* '' */ +.icon-right-open-mini:before { + content: '\e879'; +} + +/* '' */ +.icon-up-open-mini:before { + content: '\e87a'; +} + +/* '' */ +.icon-down-open-big:before { + content: '\e87b'; +} + +/* '' */ +.icon-left-open-big:before { + content: '\e87c'; +} + +/* '' */ +.icon-right-open-big:before { + content: '\e87d'; +} + +/* '' */ +.icon-up-open-big:before { + content: '\e87e'; +} + +/* '' */ +.icon-down:before { + content: '\e87f'; +} + +/* '' */ +.icon-left:before { + content: '\e880'; +} + +/* '' */ +.icon-right:before { + content: '\e881'; +} + +/* '' */ +.icon-up:before { + content: '\e882'; +} + +/* '' */ +.icon-down-dir:before { + content: '\e883'; +} + +/* '' */ +.icon-left-dir:before { + content: '\e884'; +} + +/* '' */ +.icon-right-dir:before { + content: '\e885'; +} + +/* '' */ +.icon-up-dir:before { + content: '\e886'; +} + +/* '' */ +.icon-down-bold:before { + content: '\e887'; +} + +/* '' */ +.icon-left-bold:before { + content: '\e888'; +} + +/* '' */ +.icon-right-bold:before { + content: '\e889'; +} + +/* '' */ +.icon-up-bold:before { + content: '\e88a'; +} + +/* '' */ +.icon-down-thin:before { + content: '\e88b'; +} + +/* '' */ +.icon-left-thin:before { + content: '\e88c'; +} + +/* '' */ +.icon-right-thin:before { + content: '\e88d'; +} + +/* '' */ +.icon-up-thin:before { + content: '\e88e'; +} + +/* '' */ +.icon-ccw:before { + content: '\e88f'; +} + +/* '' */ +.icon-cw:before { + content: '\e890'; +} + +/* '' */ +.icon-arrows-ccw:before { + content: '\e891'; +} + +/* '' */ +.icon-level-down:before { + content: '\e892'; +} + +/* '' */ +.icon-level-up:before { + content: '\e893'; +} + +/* '' */ +.icon-shuffle:before { + content: '\e894'; +} + +/* '' */ +.icon-loop:before { + content: '\e895'; +} + +/* '' */ +.icon-switch:before { + content: '\e896'; +} + +/* '' */ +.icon-play:before { + content: '\e897'; +} + +/* '' */ +.icon-stop:before { + content: '\e898'; +} + +/* '' */ +.icon-pause:before { + content: '\e899'; +} + +/* '' */ +.icon-record:before { + content: '\e89a'; +} + +/* '' */ +.icon-to-end:before { + content: '\e89b'; +} + +/* '' */ +.icon-to-start:before { + content: '\e89c'; +} + +/* '' */ +.icon-fast-forward:before { + content: '\e89d'; +} + +/* '' */ +.icon-fast-backward:before { + content: '\e89e'; +} + +/* '' */ +.icon-progress-0:before { + content: '\e89f'; +} + +/* '' */ +.icon-progress-1:before { + content: '\e8a0'; +} + +/* '' */ +.icon-progress-2:before { + content: '\e8a1'; +} + +/* '' */ +.icon-progress-3:before { + content: '\e8a2'; +} + +/* '' */ +.icon-target:before { + content: '\e8a3'; +} + +/* '' */ +.icon-palette:before { + content: '\e8a4'; +} + +/* '' */ +.icon-list:before { + content: '\e8a5'; +} + +/* '' */ +.icon-list-add:before { + content: '\e8a6'; +} + +/* '' */ +.icon-signal:before { + content: '\e8a7'; +} + +/* '' */ +.icon-trophy:before { + content: '\e8a8'; +} + +/* '' */ +.icon-battery:before { + content: '\e8a9'; +} + +/* '' */ +.icon-back-in-time:before { + content: '\e8aa'; +} + +/* '' */ +.icon-monitor:before { + content: '\e8ab'; +} + +/* '' */ +.icon-mobile:before { + content: '\e8ac'; +} + +/* '' */ +.icon-network:before { + content: '\e8ad'; +} + +/* '' */ +.icon-cd:before { + content: '\e8ae'; +} + +/* '' */ +.icon-inbox:before { + content: '\e8af'; +} + +/* '' */ +.icon-install:before { + content: '\e8b0'; +} + +/* '' */ +.icon-globe:before { + content: '\e8b1'; +} + +/* '' */ +.icon-cloud:before { + content: '\e8b2'; +} + +/* '' */ +.icon-cloud-thunder:before { + content: '\e8b3'; +} + +/* '' */ +.icon-flash:before { + content: '\e8b4'; +} + +/* '' */ +.icon-moon:before { + content: '\e8b5'; +} + +/* '' */ +.icon-flight:before { + content: '\e8b6'; +} + +/* '' */ +.icon-paper-plane:before { + content: '\e8b7'; +} + +/* '' */ +.icon-leaf:before { + content: '\e8b8'; +} + +/* '' */ +.icon-lifebuoy:before { + content: '\e8b9'; +} + +/* '' */ +.icon-mouse:before { + content: '\e8ba'; +} + +/* '' */ +.icon-briefcase:before { + content: '\e8bb'; +} + +/* '' */ +.icon-suitcase:before { + content: '\e8bc'; +} + +/* '' */ +.icon-dot:before { + content: '\e8bd'; +} + +/* '' */ +.icon-dot-2:before { + content: '\e8be'; +} + +/* '' */ +.icon-dot-3:before { + content: '\e8bf'; +} + +/* '' */ +.icon-brush:before { + content: '\e8c0'; +} + +/* '' */ +.icon-magnet:before { + content: '\e8c1'; +} + +/* '' */ +.icon-infinity:before { + content: '\e8c2'; +} + +/* '' */ +.icon-erase:before { + content: '\e8c3'; +} + +/* '' */ +.icon-chart-pie:before { + content: '\e8c4'; +} + +/* '' */ +.icon-chart-line:before { + content: '\e8c5'; +} + +/* '' */ +.icon-chart-bar:before { + content: '\e8c6'; +} + +/* '' */ +.icon-chart-area:before { + content: '\e8c7'; +} + +/* '' */ +.icon-tape:before { + content: '\e8c8'; +} + +/* '' */ +.icon-graduation-cap:before { + content: '\e8c9'; +} + +/* '' */ +.icon-language:before { + content: '\e8ca'; +} + +/* '' */ +.icon-ticket:before { + content: '\e8cb'; +} + +/* '' */ +.icon-water:before { + content: '\e8cc'; +} + +/* '' */ +.icon-droplet:before { + content: '\e8cd'; +} + +/* '' */ +.icon-air:before { + content: '\e8ce'; +} + +/* '' */ +.icon-credit-card:before { + content: '\e8cf'; +} + +/* '' */ +.icon-floppy:before { + content: '\e8d0'; +} + +/* '' */ +.icon-clipboard:before { + content: '\e8d1'; +} + +/* '' */ +.icon-megaphone:before { + content: '\e8d2'; +} + +/* '' */ +.icon-database:before { + content: '\e8d3'; +} + +/* '' */ +.icon-drive:before { + content: '\e8d4'; +} + +/* '' */ +.icon-bucket:before { + content: '\e8d5'; +} + +/* '' */ +.icon-thermometer:before { + content: '\e8d6'; +} + +/* '' */ +.icon-key:before { + content: '\e8d7'; +} + +/* '' */ +.icon-flow-cascade:before { + content: '\e8d8'; +} + +/* '' */ +.icon-flow-branch:before { + content: '\e8d9'; +} + +/* '' */ +.icon-flow-tree:before { + content: '\e8da'; +} + +/* '' */ +.icon-flow-line:before { + content: '\e8db'; +} + +/* '' */ +.icon-flow-parallel:before { + content: '\e8dc'; +} + +/* '' */ +.icon-rocket:before { + content: '\e8dd'; +} + +/* '' */ +.icon-gauge:before { + content: '\e8de'; +} + +/* '' */ +.icon-traffic-cone:before { + content: '\e8df'; +} + +/* '' */ +.icon-cc:before { + content: '\e8e0'; +} + +/* '' */ +.icon-cc-by:before { + content: '\e8e1'; +} + +/* '' */ +.icon-cc-nc:before { + content: '\e8e2'; +} + +/* '' */ +.icon-cc-nc-eu:before { + content: '\e8e3'; +} + +/* '' */ +.icon-cc-nc-jp:before { + content: '\e8e4'; +} + +/* '' */ +.icon-cc-sa:before { + content: '\e8e5'; +} + +/* '' */ +.icon-cc-nd:before { + content: '\e8e6'; +} + +/* '' */ +.icon-cc-pd:before { + content: '\e8e7'; +} + +/* '' */ +.icon-cc-zero:before { + content: '\e8e8'; +} + +/* '' */ +.icon-cc-share:before { + content: '\e8e9'; +} + +/* '' */ +.icon-cc-remix:before { + content: '\e8ea'; +} + +/* '' */ +.icon-github:before { + content: '\e8eb'; +} + +/* '' */ +.icon-github-circled:before { + content: '\e8ec'; +} + +/* '' */ +.icon-flickr:before { + content: '\e8ed'; +} + +/* '' */ +.icon-flickr-circled:before { + content: '\e8ee'; +} + +/* '' */ +.icon-vimeo:before { + content: '\e8ef'; +} + +/* '' */ +.icon-vimeo-circled:before { + content: '\e8f0'; +} + +/* '' */ +.icon-twitter:before { + content: '\e8f1'; +} + +/* '' */ +.icon-twitter-circled:before { + content: '\e8f2'; +} + +/* '' */ +.icon-facebook:before { + content: '\e8f3'; +} + +/* '' */ +.icon-facebook-circled:before { + content: '\e8f4'; +} + +/* '' */ +.icon-facebook-squared:before { + content: '\e8f5'; +} + +/* '' */ +.icon-gplus:before { + content: '\e8f6'; +} + +/* '' */ +.icon-gplus-circled:before { + content: '\e8f7'; +} + +/* '' */ +.icon-pinterest:before { + content: '\e8f8'; +} + +/* '' */ +.icon-pinterest-circled:before { + content: '\e8f9'; +} + +/* '' */ +.icon-tumblr:before { + content: '\e8fa'; +} + +/* '' */ +.icon-tumblr-circled:before { + content: '\e8fb'; +} + +/* '' */ +.icon-linkedin:before { + content: '\e8fc'; +} + +/* '' */ +.icon-linkedin-circled:before { + content: '\e8fd'; +} + +/* '' */ +.icon-dribbble:before { + content: '\e8fe'; +} + +/* '' */ +.icon-dribbble-circled:before { + content: '\e8ff'; +} + +/* '' */ +.icon-stumbleupon:before { + content: '\e900'; +} + +/* '' */ +.icon-stumbleupon-circled:before { + content: '\e901'; +} + +/* '' */ +.icon-lastfm:before { + content: '\e902'; +} + +/* '' */ +.icon-lastfm-circled:before { + content: '\e903'; +} + +/* '' */ +.icon-rdio:before { + content: '\e904'; +} + +/* '' */ +.icon-rdio-circled:before { + content: '\e905'; +} + +/* '' */ +.icon-spotify:before { + content: '\e906'; +} + +/* '' */ +.icon-spotify-circled:before { + content: '\e907'; +} + +/* '' */ +.icon-qq:before { + content: '\e908'; +} + +/* '' */ +.icon-instagram:before { + content: '\e909'; +} + +/* '' */ +.icon-dropbox:before { + content: '\e90a'; +} + +/* '' */ +.icon-evernote:before { + content: '\e90b'; +} + +/* '' */ +.icon-flattr:before { + content: '\e90c'; +} + +/* '' */ +.icon-skype:before { + content: '\e90d'; +} + +/* '' */ +.icon-skype-circled:before { + content: '\e90e'; +} + +/* '' */ +.icon-renren:before { + content: '\e90f'; +} + +/* '' */ +.icon-sina-weibo:before { + content: '\e910'; +} + +/* '' */ +.icon-paypal:before { + content: '\e911'; +} + +/* '' */ +.icon-picasa:before { + content: '\e912'; +} + +/* '' */ +.icon-soundcloud:before { + content: '\e913'; +} + +/* '' */ +.icon-mixi:before { + content: '\e914'; +} + +/* '' */ +.icon-behance:before { + content: '\e915'; +} + +/* '' */ +.icon-google-circles:before { + content: '\e916'; +} + +/* '' */ +.icon-vkontakte:before { + content: '\e917'; +} + +/* '' */ +.icon-smashing:before { + content: '\e918'; +} + +/* '' */ +.icon-sweden:before { + content: '\e919'; +} + +/* '' */ +.icon-db-shape:before { + content: '\e91a'; +} + +/* '' */ +.icon-logo-db:before { + content: '\e91b'; +} + +/* '' */ +table { + width: 100%; + border: 0; + border-collapse: separate; + font-size: 12px; + text-align: left; +} + +thead { + background-color: #f5f5f4; +} + +tbody { + background-color: #fff; +} + +.table-striped tr:nth-child(even) { + background-color: #f5f5f4; +} + +tr:active, +.table-striped tr:active:nth-child(even) { + color: #fff; + background-color: #116cd6; +} + +thead tr:active { + color: #333; + background-color: #f5f5f4; +} + +th { + font-weight: normal; + border-right: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} + +th, +td { + padding: 2px 15px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +th:last-child, +td:last-child { + border-right: 0; +} diff --git a/ShowReel/css/progress-circle.css b/ShowReel/css/progress-circle.css new file mode 100644 index 0000000..12b19ff --- /dev/null +++ b/ShowReel/css/progress-circle.css @@ -0,0 +1,9 @@ +progress-circle { + height: 20px; + width: 20px; + border-radius: 50%; + background-size: 100% 100%; + background-position: 0px 0px; + display: inline-block; + overflow: hidden; +} diff --git a/ShowReel/css/progress.css b/ShowReel/css/progress.css new file mode 100644 index 0000000..29350cd --- /dev/null +++ b/ShowReel/css/progress.css @@ -0,0 +1,213 @@ +progress { + -webkit-appearance: none; + border-radius: 3px 3px 3px 3px; + overflow: hidden; + height: 6px; +} +progress::-webkit-progress-bar { + background-color: rgba(0, 0, 0, 0.09); + box-sizing: border-box; + height: 6px; + border-radius: 3px; + background-image: url('data:image/svg+xml;utf8,'); + overflow: hidden; +} +progress::-webkit-progress-value { + height: 100%; + border-radius: 3px 0px 0px 3px; + background-color: #3b99fc; + background-image: url('data:image/svg+xml;utf8,'); +} +progress:not([value])::-webkit-progress-bar { + display: none; +} +progress:not([value]) { + background-color: #429bf8; + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, rgba(66, 155, 249, 0) 0%, #73b9fc 50%, rgba(66, 155, 249, 0) 100%); + animation: progressIndeterminate 2s infinite; +} +/*@keyframes progressIndeterminate { + 0% { + background-position: 0px 0px, -100% 0px; + } + 100% { + background-position: 0px 0px, 500px 0px; + } +}*/ + +@keyframes progressIndeterminate { + 0% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -100%, #73b9fc -50%, #429bf8 0%); + } + 2.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -95%, #73b9fc -45%, #429bf8 5%); + } + 5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -90%, #73b9fc -40%, #429bf8 10%); + } + 7.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -85%, #73b9fc -35%, #429bf8 15%); + } + 10% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -80%, #73b9fc -30%, #429bf8 20%); + } + 12.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -75%, #73b9fc -25%, #429bf8 25%); + } + 15% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -70%, #73b9fc -20%, #429bf8 30%); + } + 17.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -65%, #73b9fc -15%, #429bf8 35%); + } + 20% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -60%, #73b9fc -10%, #429bf8 40%); + } + 22.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -55%, #73b9fc -5%, #429bf8 45%); + } + 25% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -50%, #73b9fc 0%, #429bf8 50%); + } + 27.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -45%, #73b9fc 5%, #429bf8 55%); + } + 30% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -40%, #73b9fc 10%, #429bf8 60%); + } + 32.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -35%, #73b9fc 15%, #429bf8 65%); + } + 35% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -30%, #73b9fc 20%, #429bf8 70%); + } + 37.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -25%, #73b9fc 25%, #429bf8 75%); + } + 40% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -20%, #73b9fc 30%, #429bf8 80%); + } + 42.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -15%, #73b9fc 35%, #429bf8 85%); + } + 45% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -10%, #73b9fc 40%, #429bf8 90%); + } + 47.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -5%, #73b9fc 45%, #429bf8 95%); + } + 50% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 0%, #73b9fc 50%, #429bf8 100%); + } + 52.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 5%, #73b9fc 55%, #429bf8 105%); + } + 55% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 10%, #73b9fc 60%, #429bf8 110%); + } + 57.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 15%, #73b9fc 65%, #429bf8 115%); + } + 60% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 20%, #73b9fc 70%, #429bf8 120%); + } + 62.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 25%, #73b9fc 75%, #429bf8 125%); + } + 65% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 30%, #73b9fc 80%, #429bf8 130%); + } + 67.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 35%, #73b9fc 85%, #429bf8 135%); + } + 70% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 40%, #73b9fc 90%, #429bf8 140%); + } + 72.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 45%, #73b9fc 95%, #429bf8 145%); + } + 75% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 50%, #73b9fc 100%, #429bf8 150%); + } + 77.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 55%, #73b9fc 105%, #429bf8 155%); + } + 80% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 60%, #73b9fc 110%, #429bf8 160%); + } + 82.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 65%, #73b9fc 115%, #429bf8 165%); + } + 85% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 70%, #73b9fc 120%, #429bf8 170%); + } + 87.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 75%, #73b9fc 125%, #429bf8 175%); + } + 90% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 80%, #73b9fc 130%, #429bf8 180%); + } + 92.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 85%, #73b9fc 135%, #429bf8 185%); + } + 95% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 90%, #73b9fc 140%, #429bf8 190%); + } + 97.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 95%, #73b9fc 145%, #429bf8 195%); + } + 100% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 100%, #73b9fc 150%, #429bf8 200%); + } +} + + + +/* +Animation created by: +var defaultColor = "#429bf8"; +var focusColor = "#73b9fc"; +var step = 5; var startPos = -100; var endPos = 0; var middlePos = -50; var cssStr = ""; var defaultColor = "#429bf8"; var focusColor = "#73b9fc"; for (var i = 0; i <= 200; i = i + step) { var percentStep = (100 / (200 / step)) * (i / step); var str = "(to right, " + defaultColor + " " + (startPos + i) + "%, " + focusColor + " " + (middlePos + i) + "%, " + defaultColor + " " + (endPos + i) + "%)"; var completeStr = percentStep + '% {\n background-image: url(\'data:image/svg+xml;utf8,\'),\n linear-gradient' + str + ';\n}'; cssStr += completeStr + "\n"; } console.log(cssStr); +*/ diff --git a/ShowReel/css/scorpion.css b/ShowReel/css/scorpion.css new file mode 100644 index 0000000..5795b86 --- /dev/null +++ b/ShowReel/css/scorpion.css @@ -0,0 +1,2288 @@ +/*! + * ===================================================== + * Photon v0.1.2 + * Copyright 2016 Connor Sears + * Licensed under MIT (https://github.com/connors/proton/blob/master/LICENSE) + * + * v0.1.2 designed by @connors. + * ===================================================== + */ + +@charset "UTF-8"; +audio, +canvas, +progress, +video { + vertical-align: baseline; +} + +audio:not([controls]) { + display: none; +} + +a:active, +a:hover { + outline: 0; +} + +abbr[title] { + border-bottom: 1px dotted; +} + +b, +strong { + font-weight: bold; +} + +dfn { + font-style: italic; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +pre { + overflow: auto; +} + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +button, +input, +optgroup, +select, +textarea { + color: inherit; + font: inherit; + margin: 0; +} + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +input[type="search"] { + -webkit-appearance: textfield; + box-sizing: content-box; +} + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +legend { + border: 0; + padding: 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} + +* { + cursor: default; + -webkit-user-select: none; +} + +input, +textarea { + -webkit-user-select: text; +} + +form, +input, +optgroup, +select, +textarea { + -webkit-user-select: text; + -webkit-app-region: no-drag; +} + +* { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html { + height: 100%; + width: 100%; + overflow: hidden; +} + +body { + height: 100%; + padding: 0; + margin: 0; + font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif; + font-size: 13px; + line-height: 1.6; + color: #333; + background-color: transparent; +} + +hr { + margin: 15px 0; + overflow: hidden; + background: transparent; + border: 0; + border-bottom: 1px solid #ddd; +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 20px; + margin-bottom: 10px; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +h1 { + font-size: 36px; +} + +h2 { + font-size: 30px; +} + +h3 { + font-size: 24px; +} + +h4 { + font-size: 18px; +} + +h5 { + font-size: 14px; +} + +h6 { + font-size: 12px; +} + +.window { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex-direction: column; + background-color: #fff; +} + +.window-content { + position: relative; + overflow-y: auto; + display: flex; + flex: 1; +} + +.selectable-text { + cursor: text; + -webkit-user-select: text; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.text-left { + text-align: left; +} + +.pull-left { + float: left; +} + +.pull-right { + float: right; +} + +.padded { + padding: 10px; +} + +.padded-less { + padding: 5px; +} + +.padded-more { + padding: 20px; +} + +.padded-vertically { + padding-top: 10px; + padding-bottom: 10px; +} + +.padded-vertically-less { + padding-top: 5px; + padding-bottom: 5px; +} + +.padded-vertically-more { + padding-top: 20px; + padding-bottom: 20px; +} + +.padded-horizontally { + padding-right: 10px; + padding-left: 10px; +} + +.padded-horizontally-less { + padding-right: 5px; + padding-left: 5px; +} + +.padded-horizontally-more { + padding-right: 20px; + padding-left: 20px; +} + +.padded-top { + padding-top: 10px; +} + +.padded-top-less { + padding-top: 5px; +} + +.padded-top-more { + padding-top: 20px; +} + +.padded-bottom { + padding-bottom: 10px; +} + +.padded-bottom-less { + padding-bottom: 5px; +} + +.padded-bottom-more { + padding-bottom: 20px; +} + +.sidebar { + background-color: #f5f5f4; +} + +.draggable { + -webkit-app-region: drag; +} + +.not-draggable { + -webkit-app-region: no-drag; +} + +.clearfix:before, .clearfix:after { + display: table; + content: " "; +} +.clearfix:after { + clear: both; +} + +.btn { + display: inline-block; + padding: 3px 8px; + margin-bottom: 0; + font-size: 12px; + line-height: 1.4; + text-align: center; + white-space: nowrap; + vertical-align: middle; + cursor: default; + background-image: none; + border: 1px solid transparent; + border-radius: 4px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06); + -webkit-app-region: no-drag; +} +.btn:focus { + outline: none; + box-shadow: none; +} + +.btn-mini { + padding: 2px 6px; +} + +.btn-large { + padding: 6px 12px; +} + +.btn-form { + padding-right: 20px; + padding-left: 20px; +} + +.btn-default { + color: #333; + border-top-color: rgb(205, 205, 205); + border-right-color: rgb(205, 205, 205); + border-bottom-color: rgb(177, 177, 177); + border-left-color: rgb(205, 205, 205); + background-image: linear-gradient(rgb(255, 255, 255), rgb(252, 252, 252) 1px, rgb(241, 241, 241)); +} +.btn-default:active { + background-color: #ddd; + background-image: none; +} + +.btn-primary, +.btn-positive, +.btn-negative, +.btn-warning { + color: #fff; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); +} + +.btn-primary { + border-color: #388df8; + border-bottom-color: #0866dc; + background-color: #6eb4f7; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6eb4f7), color-stop(100%, #1a82fb)); + background-image: -webkit-linear-gradient(top, #6eb4f7 0%, #1a82fb 100%); + background-image: linear-gradient(to bottom, #6eb4f7 0%, #1a82fb 100%); +} +.btn-primary:active { + background-color: #3e9bf4; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9bf4), color-stop(100%, #0469de)); + background-image: -webkit-linear-gradient(top, #3e9bf4 0%, #0469de 100%); + background-image: linear-gradient(to bottom, #3e9bf4 0%, #0469de 100%); +} + +.btn-positive { + border-color: #29a03b; + border-bottom-color: #248b34; + background-color: #5bd46d; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bd46d), color-stop(100%, #29a03b)); + background-image: -webkit-linear-gradient(top, #5bd46d 0%, #29a03b 100%); + background-image: linear-gradient(to bottom, #5bd46d 0%, #29a03b 100%); +} +.btn-positive:active { + background-color: #34c84a; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #34c84a), color-stop(100%, #248b34)); + background-image: -webkit-linear-gradient(top, #34c84a 0%, #248b34 100%); + background-image: linear-gradient(to bottom, #34c84a 0%, #248b34 100%); +} + +.btn-negative { + border-color: #fb2f29; + border-bottom-color: #fb1710; + background-color: #fd918d; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd918d), color-stop(100%, #fb2f29)); + background-image: -webkit-linear-gradient(top, #fd918d 0%, #fb2f29 100%); + background-image: linear-gradient(to bottom, #fd918d 0%, #fb2f29 100%); +} +.btn-negative:active { + background-color: #fc605b; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fc605b), color-stop(100%, #fb1710)); + background-image: -webkit-linear-gradient(top, #fc605b 0%, #fb1710 100%); + background-image: linear-gradient(to bottom, #fc605b 0%, #fb1710 100%); +} + +.btn-warning { + border-color: #fcaa0e; + border-bottom-color: #ee9d02; + background-color: #fece72; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fece72), color-stop(100%, #fcaa0e)); + background-image: -webkit-linear-gradient(top, #fece72 0%, #fcaa0e 100%); + background-image: linear-gradient(to bottom, #fece72 0%, #fcaa0e 100%); +} +.btn-warning:active { + background-color: #fdbc40; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdbc40), color-stop(100%, #ee9d02)); + background-image: -webkit-linear-gradient(top, #fdbc40 0%, #ee9d02 100%); + background-image: linear-gradient(to bottom, #fdbc40 0%, #ee9d02 100%); +} + +.btn .icon { + float: left; + width: 14px; + height: 14px; + margin-top: 1px; + margin-bottom: 1px; + color: #737475; + font-size: 14px; + line-height: 1; +} + +.btn .icon-text { + margin-right: 5px; +} + +.btn-dropdown:after { + font-family: "photon-entypo"; + margin-left: 5px; + content: '\e873'; +} + +.btn-group { + position: relative; + display: inline-block; + vertical-align: middle; + -webkit-app-region: no-drag; +} +.btn-group .btn { + position: relative; + float: left; +} +.btn-group .btn-default.active { + border-top-color: rgb(105, 105, 105); + border-bottom: 1px solid rgb(94, 94, 94); + border-right: 1px solid rgb(105, 105, 105) !important; + border-left: 1px solid rgb(105, 105, 105) !important; + +} +.btn-group .btn:focus, .btn-group .btn:active { + z-index: 2; +} +.btn-group .btn.active { + z-index: 3; +} + +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { + margin-left: -1px; +} +.btn-group > .btn:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.btn-group > .btn:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group > .btn:not(:first-child):not(:last-child) { + border-radius: 0; +} +.btn-group .btn + .btn { + border-left: 1px solid #c2c0c2; +} +.btn-group .btn + .btn.active { + border-left: 0; +} +.btn-group .active { + color: #fff; + border: 1px solid transparent; + background-color: #6d6c6d; + background-image: none; +} +.btn-group .active .icon { + color: #fff; +} + +tool-bar { + min-height: 22px; + box-shadow: inset 0 1px 0 #f5f4f5; + background-color: #e8e6e8; + background-image: linear-gradient(rgb(233, 233, 233), rgb(233, 233, 233)); + background-image: linear-gradient(rgb(216, 216, 216), rgb(216, 216, 216)); +} +tool-bar:before, tool-bar:after { + display: table; + content: " "; +} +tool-bar:after { + clear: both; +} + +tool-bar-header { + border-bottom: 1px solid #c2c0c2; +} +tool-bar-header .title { + margin-top: 1px; +} + +tool-bar-footer { + border-top: 1px solid #c2c0c2; + -webkit-app-region: drag; +} + +.title { + margin: 0; + font-size: 12px; + font-weight: 400; + text-align: center; + color: #555; + cursor: default; +} + +tool-bar-borderless { + border-top: 0; + border-bottom: 0; +} + +tool-bar-actions { + margin-top: 4px; + margin-bottom: 3px; + padding-right: 3px; + padding-left: 3px; + padding-bottom: 3px; + -webkit-app-region: drag; +} +tool-bar-actions:before, tool-bar-actions:after { + display: table; + content: " "; +} +tool-bar-actions:after { + clear: both; +} +tool-bar-actions > .btn, +tool-bar-actions > .btn-group { + margin-left: 4px; + margin-right: 4px; +} + +label { + display: inline-block; + font-size: 13px; + margin-bottom: 5px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +input[type="search"] { + box-sizing: border-box; +} + +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + line-height: normal; +} + +.form-control { + display: inline-block; + width: 100%; + min-height: 25px; + padding: 5px 10px; + font-size: 13px; + line-height: 1.6; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 4px; + outline: none; +} +.form-control:focus { + border-color: #6db3fd; + box-shadow: 0 0 0 3px #6db3fd; +} + +textarea { + height: auto; +} + +.form-group { + margin-bottom: 10px; +} + +.radio, +.checkbox { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; +} +.radio label, +.checkbox label { + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; +} + +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + position: absolute; + margin-left: -20px; + margin-top: 4px; +} + +.form-actions .btn { + margin-right: 10px; +} +.form-actions .btn:last-child { + margin-right: 0; +} + +.pane-group { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; +} + +.pane { + position: relative; + overflow-y: auto; + flex: 1; + border-left: 1px solid #ddd; +} +.pane:first-child { + border-left: 0; +} + +.pane-sm { + max-width: 220px; + min-width: 150px; +} + +.pane-mini { + width: 80px; + flex: none; +} + +.pane-one-fourth { + width: 25%; + flex: none; +} + +.pane-one-third { + width: 33.3%; + flex: none; +} + +img { + -webkit-user-drag: text; +} + +.img-circle { + border-radius: 50%; +} + +.img-rounded { + border-radius: 4px; +} +/* +list-group { + width: 100%; + list-style: none; + margin: 0; + padding: 0; + display: block; +} +list-group * { + margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +list-item { + display: block; + padding: 10px; + font-size: 12px; + color: #414142; + border-top: 1px solid #ddd; +} +list-item:first-child { + border-top: 0; +} +list-item.active, .list-group-item.selected { + color: #fff; + background-color: #116cd6; +} + +list-header { + padding: 10px; +}*/ + +.media-object { + margin-top: 3px; +} + +.media-object.pull-left { + margin-right: 10px; +} + +.media-object.pull-right { + margin-left: 10px; +} + +.media-body { + overflow: hidden; +} + +.nav-group { + font-size: 14px; +} + +.nav-group-item { + padding: 2px 10px 2px 25px; + display: block; + color: #333; + text-decoration: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.nav-group-item:active, .nav-group-item.active { + background-color: #dcdfe1; +} +.nav-group-item .icon { + width: 19px; + height: 18px; + float: left; + color: #737475; + margin-top: -3px; + margin-right: 7px; + font-size: 18px; + text-align: center; +} + +.nav-group-title { + margin: 0; + padding: 10px 10px 2px; + font-size: 12px; + font-weight: 500; + color: #666666; +} + +@font-face { + font-family: "photon-entypo"; + src: url("../fonts/photon-entypo.eot"); + src: url("../fonts/photon-entypo.eot?#iefix") format("eot"), url("../fonts/photon-entypo.woff") format("woff"), url("../fonts/photon-entypo.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} +.icon:before { + position: relative; + display: inline-block; + font-family: "photon-entypo"; + speak: none; + font-size: 100%; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-note:before { + content: '\e800'; +} + +/* '' */ +.icon-note-beamed:before { + content: '\e801'; +} + +/* '' */ +.icon-music:before { + content: '\e802'; +} + +/* '' */ +.icon-search:before { + content: '\e803'; +} + +/* '' */ +.icon-flashlight:before { + content: '\e804'; +} + +/* '' */ +.icon-mail:before { + content: '\e805'; +} + +/* '' */ +.icon-heart:before { + content: '\e806'; +} + +/* '' */ +.icon-heart-empty:before { + content: '\e807'; +} + +/* '' */ +.icon-star:before { + content: '\e808'; +} + +/* '' */ +.icon-star-empty:before { + content: '\e809'; +} + +/* '' */ +.icon-user:before { + content: '\e80a'; +} + +/* '' */ +.icon-users:before { + content: '\e80b'; +} + +/* '' */ +.icon-user-add:before { + content: '\e80c'; +} + +/* '' */ +.icon-video:before { + content: '\e80d'; +} + +/* '' */ +.icon-picture:before { + content: '\e80e'; +} + +/* '' */ +.icon-camera:before { + content: '\e80f'; +} + +/* '' */ +.icon-layout:before { + content: '\e810'; +} + +/* '' */ +.icon-menu:before { + content: '\e811'; +} + +/* '' */ +.icon-check:before { + content: '\e812'; +} + +/* '' */ +.icon-cancel:before { + content: '\e813'; +} + +/* '' */ +.icon-cancel-circled:before { + content: '\e814'; +} + +/* '' */ +.icon-cancel-squared:before { + content: '\e815'; +} + +/* '' */ +.icon-plus:before { + content: '\e816'; +} + +/* '' */ +.icon-plus-circled:before { + content: '\e817'; +} + +/* '' */ +.icon-plus-squared:before { + content: '\e818'; +} + +/* '' */ +.icon-minus:before { + content: '\e819'; +} + +/* '' */ +.icon-minus-circled:before { + content: '\e81a'; +} + +/* '' */ +.icon-minus-squared:before { + content: '\e81b'; +} + +/* '' */ +.icon-help:before { + content: '\e81c'; +} + +/* '' */ +.icon-help-circled:before { + content: '\e81d'; +} + +/* '' */ +.icon-info:before { + content: '\e81e'; +} + +/* '' */ +.icon-info-circled:before { + content: '\e81f'; +} + +/* '' */ +.icon-back:before { + content: '\e820'; +} + +/* '' */ +.icon-home:before { + content: '\e821'; +} + +/* '' */ +.icon-link:before { + content: '\e822'; +} + +/* '' */ +.icon-attach:before { + content: '\e823'; +} + +/* '' */ +.icon-lock:before { + content: '\e824'; +} + +/* '' */ +.icon-lock-open:before { + content: '\e825'; +} + +/* '' */ +.icon-eye:before { + content: '\e826'; +} + +/* '' */ +.icon-tag:before { + content: '\e827'; +} + +/* '' */ +.icon-bookmark:before { + content: '\e828'; +} + +/* '' */ +.icon-bookmarks:before { + content: '\e829'; +} + +/* '' */ +.icon-flag:before { + content: '\e82a'; +} + +/* '' */ +.icon-thumbs-up:before { + content: '\e82b'; +} + +/* '' */ +.icon-thumbs-down:before { + content: '\e82c'; +} + +/* '' */ +.icon-download:before { + content: '\e82d'; +} + +/* '' */ +.icon-upload:before { + content: '\e82e'; +} + +/* '' */ +.icon-upload-cloud:before { + content: '\e82f'; +} + +/* '' */ +.icon-reply:before { + content: '\e830'; +} + +/* '' */ +.icon-reply-all:before { + content: '\e831'; +} + +/* '' */ +.icon-forward:before { + content: '\e832'; +} + +/* '' */ +.icon-quote:before { + content: '\e833'; +} + +/* '' */ +.icon-code:before { + content: '\e834'; +} + +/* '' */ +.icon-export:before { + content: '\e835'; +} + +/* '' */ +.icon-pencil:before { + content: '\e836'; +} + +/* '' */ +.icon-feather:before { + content: '\e837'; +} + +/* '' */ +.icon-print:before { + content: '\e838'; +} + +/* '' */ +.icon-retweet:before { + content: '\e839'; +} + +/* '' */ +.icon-keyboard:before { + content: '\e83a'; +} + +/* '' */ +.icon-comment:before { + content: '\e83b'; +} + +/* '' */ +.icon-chat:before { + content: '\e83c'; +} + +/* '' */ +.icon-bell:before { + content: '\e83d'; +} + +/* '' */ +.icon-attention:before { + content: '\e83e'; +} + +/* '' */ +.icon-alert:before { + content: '\e83f'; +} + +/* '' */ +.icon-vcard:before { + content: '\e840'; +} + +/* '' */ +.icon-address:before { + content: '\e841'; +} + +/* '' */ +.icon-location:before { + content: '\e842'; +} + +/* '' */ +.icon-map:before { + content: '\e843'; +} + +/* '' */ +.icon-direction:before { + content: '\e844'; +} + +/* '' */ +.icon-compass:before { + content: '\e845'; +} + +/* '' */ +.icon-cup:before { + content: '\e846'; +} + +/* '' */ +.icon-trash:before { + content: '\e847'; +} + +/* '' */ +.icon-doc:before { + content: '\e848'; +} + +/* '' */ +.icon-docs:before { + content: '\e849'; +} + +/* '' */ +.icon-doc-landscape:before { + content: '\e84a'; +} + +/* '' */ +.icon-doc-text:before { + content: '\e84b'; +} + +/* '' */ +.icon-doc-text-inv:before { + content: '\e84c'; +} + +/* '' */ +.icon-newspaper:before { + content: '\e84d'; +} + +/* '' */ +.icon-book-open:before { + content: '\e84e'; +} + +/* '' */ +.icon-book:before { + content: '\e84f'; +} + +/* '' */ +.icon-folder:before { + content: '\e850'; +} + +/* '' */ +.icon-archive:before { + content: '\e851'; +} + +/* '' */ +.icon-box:before { + content: '\e852'; +} + +/* '' */ +.icon-rss:before { + content: '\e853'; +} + +/* '' */ +.icon-phone:before { + content: '\e854'; +} + +/* '' */ +.icon-cog:before { + content: '\e855'; +} + +/* '' */ +.icon-tools:before { + content: '\e856'; +} + +/* '' */ +.icon-share:before { + content: '\e857'; +} + +/* '' */ +.icon-shareable:before { + content: '\e858'; +} + +/* '' */ +.icon-basket:before { + content: '\e859'; +} + +/* '' */ +.icon-bag:before { + content: '\e85a'; +} + +/* '' */ +.icon-calendar:before { + content: '\e85b'; +} + +/* '' */ +.icon-login:before { + content: '\e85c'; +} + +/* '' */ +.icon-logout:before { + content: '\e85d'; +} + +/* '' */ +.icon-mic:before { + content: '\e85e'; +} + +/* '' */ +.icon-mute:before { + content: '\e85f'; +} + +/* '' */ +.icon-sound:before { + content: '\e860'; +} + +/* '' */ +.icon-volume:before { + content: '\e861'; +} + +/* '' */ +.icon-clock:before { + content: '\e862'; +} + +/* '' */ +.icon-hourglass:before { + content: '\e863'; +} + +/* '' */ +.icon-lamp:before { + content: '\e864'; +} + +/* '' */ +.icon-light-down:before { + content: '\e865'; +} + +/* '' */ +.icon-light-up:before { + content: '\e866'; +} + +/* '' */ +.icon-adjust:before { + content: '\e867'; +} + +/* '' */ +.icon-block:before { + content: '\e868'; +} + +/* '' */ +.icon-resize-full:before { + content: '\e869'; +} + +/* '' */ +.icon-resize-small:before { + content: '\e86a'; +} + +/* '' */ +.icon-popup:before { + content: '\e86b'; +} + +/* '' */ +.icon-publish:before { + content: '\e86c'; +} + +/* '' */ +.icon-window:before { + content: '\e86d'; +} + +/* '' */ +.icon-arrow-combo:before { + content: '\e86e'; +} + +/* '' */ +.icon-down-circled:before { + content: '\e86f'; +} + +/* '' */ +.icon-left-circled:before { + content: '\e870'; +} + +/* '' */ +.icon-right-circled:before { + content: '\e871'; +} + +/* '' */ +.icon-up-circled:before { + content: '\e872'; +} + +/* '' */ +.icon-down-open:before { + content: '\e873'; +} + +/* '' */ +.icon-left-open:before { + content: '\e874'; +} + +/* '' */ +.icon-right-open:before { + content: '\e875'; +} + +/* '' */ +.icon-up-open:before { + content: '\e876'; +} + +/* '' */ +.icon-down-open-mini:before { + content: '\e877'; +} + +/* '' */ +.icon-left-open-mini:before { + content: '\e878'; +} + +/* '' */ +.icon-right-open-mini:before { + content: '\e879'; +} + +/* '' */ +.icon-up-open-mini:before { + content: '\e87a'; +} + +/* '' */ +.icon-down-open-big:before { + content: '\e87b'; +} + +/* '' */ +.icon-left-open-big:before { + content: '\e87c'; +} + +/* '' */ +.icon-right-open-big:before { + content: '\e87d'; +} + +/* '' */ +.icon-up-open-big:before { + content: '\e87e'; +} + +/* '' */ +.icon-down:before { + content: '\e87f'; +} + +/* '' */ +.icon-left:before { + content: '\e880'; +} + +/* '' */ +.icon-right:before { + content: '\e881'; +} + +/* '' */ +.icon-up:before { + content: '\e882'; +} + +/* '' */ +.icon-down-dir:before { + content: '\e883'; +} + +/* '' */ +.icon-left-dir:before { + content: '\e884'; +} + +/* '' */ +.icon-right-dir:before { + content: '\e885'; +} + +/* '' */ +.icon-up-dir:before { + content: '\e886'; +} + +/* '' */ +.icon-down-bold:before { + content: '\e887'; +} + +/* '' */ +.icon-left-bold:before { + content: '\e888'; +} + +/* '' */ +.icon-right-bold:before { + content: '\e889'; +} + +/* '' */ +.icon-up-bold:before { + content: '\e88a'; +} + +/* '' */ +.icon-down-thin:before { + content: '\e88b'; +} + +/* '' */ +.icon-left-thin:before { + content: '\e88c'; +} + +/* '' */ +.icon-right-thin:before { + content: '\e88d'; +} + +/* '' */ +.icon-up-thin:before { + content: '\e88e'; +} + +/* '' */ +.icon-ccw:before { + content: '\e88f'; +} + +/* '' */ +.icon-cw:before { + content: '\e890'; +} + +/* '' */ +.icon-arrows-ccw:before { + content: '\e891'; +} + +/* '' */ +.icon-level-down:before { + content: '\e892'; +} + +/* '' */ +.icon-level-up:before { + content: '\e893'; +} + +/* '' */ +.icon-shuffle:before { + content: '\e894'; +} + +/* '' */ +.icon-loop:before { + content: '\e895'; +} + +/* '' */ +.icon-switch:before { + content: '\e896'; +} + +/* '' */ +.icon-play:before { + content: '\e897'; +} + +/* '' */ +.icon-stop:before { + content: '\e898'; +} + +/* '' */ +.icon-pause:before { + content: '\e899'; +} + +/* '' */ +.icon-record:before { + content: '\e89a'; +} + +/* '' */ +.icon-to-end:before { + content: '\e89b'; +} + +/* '' */ +.icon-to-start:before { + content: '\e89c'; +} + +/* '' */ +.icon-fast-forward:before { + content: '\e89d'; +} + +/* '' */ +.icon-fast-backward:before { + content: '\e89e'; +} + +/* '' */ +.icon-progress-0:before { + content: '\e89f'; +} + +/* '' */ +.icon-progress-1:before { + content: '\e8a0'; +} + +/* '' */ +.icon-progress-2:before { + content: '\e8a1'; +} + +/* '' */ +.icon-progress-3:before { + content: '\e8a2'; +} + +/* '' */ +.icon-target:before { + content: '\e8a3'; +} + +/* '' */ +.icon-palette:before { + content: '\e8a4'; +} + +/* '' */ +.icon-list:before { + content: '\e8a5'; +} + +/* '' */ +.icon-list-add:before { + content: '\e8a6'; +} + +/* '' */ +.icon-signal:before { + content: '\e8a7'; +} + +/* '' */ +.icon-trophy:before { + content: '\e8a8'; +} + +/* '' */ +.icon-battery:before { + content: '\e8a9'; +} + +/* '' */ +.icon-back-in-time:before { + content: '\e8aa'; +} + +/* '' */ +.icon-monitor:before { + content: '\e8ab'; +} + +/* '' */ +.icon-mobile:before { + content: '\e8ac'; +} + +/* '' */ +.icon-network:before { + content: '\e8ad'; +} + +/* '' */ +.icon-cd:before { + content: '\e8ae'; +} + +/* '' */ +.icon-inbox:before { + content: '\e8af'; +} + +/* '' */ +.icon-install:before { + content: '\e8b0'; +} + +/* '' */ +.icon-globe:before { + content: '\e8b1'; +} + +/* '' */ +.icon-cloud:before { + content: '\e8b2'; +} + +/* '' */ +.icon-cloud-thunder:before { + content: '\e8b3'; +} + +/* '' */ +.icon-flash:before { + content: '\e8b4'; +} + +/* '' */ +.icon-moon:before { + content: '\e8b5'; +} + +/* '' */ +.icon-flight:before { + content: '\e8b6'; +} + +/* '' */ +.icon-paper-plane:before { + content: '\e8b7'; +} + +/* '' */ +.icon-leaf:before { + content: '\e8b8'; +} + +/* '' */ +.icon-lifebuoy:before { + content: '\e8b9'; +} + +/* '' */ +.icon-mouse:before { + content: '\e8ba'; +} + +/* '' */ +.icon-briefcase:before { + content: '\e8bb'; +} + +/* '' */ +.icon-suitcase:before { + content: '\e8bc'; +} + +/* '' */ +.icon-dot:before { + content: '\e8bd'; +} + +/* '' */ +.icon-dot-2:before { + content: '\e8be'; +} + +/* '' */ +.icon-dot-3:before { + content: '\e8bf'; +} + +/* '' */ +.icon-brush:before { + content: '\e8c0'; +} + +/* '' */ +.icon-magnet:before { + content: '\e8c1'; +} + +/* '' */ +.icon-infinity:before { + content: '\e8c2'; +} + +/* '' */ +.icon-erase:before { + content: '\e8c3'; +} + +/* '' */ +.icon-chart-pie:before { + content: '\e8c4'; +} + +/* '' */ +.icon-chart-line:before { + content: '\e8c5'; +} + +/* '' */ +.icon-chart-bar:before { + content: '\e8c6'; +} + +/* '' */ +.icon-chart-area:before { + content: '\e8c7'; +} + +/* '' */ +.icon-tape:before { + content: '\e8c8'; +} + +/* '' */ +.icon-graduation-cap:before { + content: '\e8c9'; +} + +/* '' */ +.icon-language:before { + content: '\e8ca'; +} + +/* '' */ +.icon-ticket:before { + content: '\e8cb'; +} + +/* '' */ +.icon-water:before { + content: '\e8cc'; +} + +/* '' */ +.icon-droplet:before { + content: '\e8cd'; +} + +/* '' */ +.icon-air:before { + content: '\e8ce'; +} + +/* '' */ +.icon-credit-card:before { + content: '\e8cf'; +} + +/* '' */ +.icon-floppy:before { + content: '\e8d0'; +} + +/* '' */ +.icon-clipboard:before { + content: '\e8d1'; +} + +/* '' */ +.icon-megaphone:before { + content: '\e8d2'; +} + +/* '' */ +.icon-database:before { + content: '\e8d3'; +} + +/* '' */ +.icon-drive:before { + content: '\e8d4'; +} + +/* '' */ +.icon-bucket:before { + content: '\e8d5'; +} + +/* '' */ +.icon-thermometer:before { + content: '\e8d6'; +} + +/* '' */ +.icon-key:before { + content: '\e8d7'; +} + +/* '' */ +.icon-flow-cascade:before { + content: '\e8d8'; +} + +/* '' */ +.icon-flow-branch:before { + content: '\e8d9'; +} + +/* '' */ +.icon-flow-tree:before { + content: '\e8da'; +} + +/* '' */ +.icon-flow-line:before { + content: '\e8db'; +} + +/* '' */ +.icon-flow-parallel:before { + content: '\e8dc'; +} + +/* '' */ +.icon-rocket:before { + content: '\e8dd'; +} + +/* '' */ +.icon-gauge:before { + content: '\e8de'; +} + +/* '' */ +.icon-traffic-cone:before { + content: '\e8df'; +} + +/* '' */ +.icon-cc:before { + content: '\e8e0'; +} + +/* '' */ +.icon-cc-by:before { + content: '\e8e1'; +} + +/* '' */ +.icon-cc-nc:before { + content: '\e8e2'; +} + +/* '' */ +.icon-cc-nc-eu:before { + content: '\e8e3'; +} + +/* '' */ +.icon-cc-nc-jp:before { + content: '\e8e4'; +} + +/* '' */ +.icon-cc-sa:before { + content: '\e8e5'; +} + +/* '' */ +.icon-cc-nd:before { + content: '\e8e6'; +} + +/* '' */ +.icon-cc-pd:before { + content: '\e8e7'; +} + +/* '' */ +.icon-cc-zero:before { + content: '\e8e8'; +} + +/* '' */ +.icon-cc-share:before { + content: '\e8e9'; +} + +/* '' */ +.icon-cc-remix:before { + content: '\e8ea'; +} + +/* '' */ +.icon-github:before { + content: '\e8eb'; +} + +/* '' */ +.icon-github-circled:before { + content: '\e8ec'; +} + +/* '' */ +.icon-flickr:before { + content: '\e8ed'; +} + +/* '' */ +.icon-flickr-circled:before { + content: '\e8ee'; +} + +/* '' */ +.icon-vimeo:before { + content: '\e8ef'; +} + +/* '' */ +.icon-vimeo-circled:before { + content: '\e8f0'; +} + +/* '' */ +.icon-twitter:before { + content: '\e8f1'; +} + +/* '' */ +.icon-twitter-circled:before { + content: '\e8f2'; +} + +/* '' */ +.icon-facebook:before { + content: '\e8f3'; +} + +/* '' */ +.icon-facebook-circled:before { + content: '\e8f4'; +} + +/* '' */ +.icon-facebook-squared:before { + content: '\e8f5'; +} + +/* '' */ +.icon-gplus:before { + content: '\e8f6'; +} + +/* '' */ +.icon-gplus-circled:before { + content: '\e8f7'; +} + +/* '' */ +.icon-pinterest:before { + content: '\e8f8'; +} + +/* '' */ +.icon-pinterest-circled:before { + content: '\e8f9'; +} + +/* '' */ +.icon-tumblr:before { + content: '\e8fa'; +} + +/* '' */ +.icon-tumblr-circled:before { + content: '\e8fb'; +} + +/* '' */ +.icon-linkedin:before { + content: '\e8fc'; +} + +/* '' */ +.icon-linkedin-circled:before { + content: '\e8fd'; +} + +/* '' */ +.icon-dribbble:before { + content: '\e8fe'; +} + +/* '' */ +.icon-dribbble-circled:before { + content: '\e8ff'; +} + +/* '' */ +.icon-stumbleupon:before { + content: '\e900'; +} + +/* '' */ +.icon-stumbleupon-circled:before { + content: '\e901'; +} + +/* '' */ +.icon-lastfm:before { + content: '\e902'; +} + +/* '' */ +.icon-lastfm-circled:before { + content: '\e903'; +} + +/* '' */ +.icon-rdio:before { + content: '\e904'; +} + +/* '' */ +.icon-rdio-circled:before { + content: '\e905'; +} + +/* '' */ +.icon-spotify:before { + content: '\e906'; +} + +/* '' */ +.icon-spotify-circled:before { + content: '\e907'; +} + +/* '' */ +.icon-qq:before { + content: '\e908'; +} + +/* '' */ +.icon-instagram:before { + content: '\e909'; +} + +/* '' */ +.icon-dropbox:before { + content: '\e90a'; +} + +/* '' */ +.icon-evernote:before { + content: '\e90b'; +} + +/* '' */ +.icon-flattr:before { + content: '\e90c'; +} + +/* '' */ +.icon-skype:before { + content: '\e90d'; +} + +/* '' */ +.icon-skype-circled:before { + content: '\e90e'; +} + +/* '' */ +.icon-renren:before { + content: '\e90f'; +} + +/* '' */ +.icon-sina-weibo:before { + content: '\e910'; +} + +/* '' */ +.icon-paypal:before { + content: '\e911'; +} + +/* '' */ +.icon-picasa:before { + content: '\e912'; +} + +/* '' */ +.icon-soundcloud:before { + content: '\e913'; +} + +/* '' */ +.icon-mixi:before { + content: '\e914'; +} + +/* '' */ +.icon-behance:before { + content: '\e915'; +} + +/* '' */ +.icon-google-circles:before { + content: '\e916'; +} + +/* '' */ +.icon-vkontakte:before { + content: '\e917'; +} + +/* '' */ +.icon-smashing:before { + content: '\e918'; +} + +/* '' */ +.icon-sweden:before { + content: '\e919'; +} + +/* '' */ +.icon-db-shape:before { + content: '\e91a'; +} + +/* '' */ +.icon-logo-db:before { + content: '\e91b'; +} + +/* '' */ +table { + width: 100%; + border: 0; + border-collapse: separate; + font-size: 12px; + text-align: left; +} + +thead { + background-color: #f5f5f4; +} + +tbody { + background-color: #fff; +} + +.table-striped tr:nth-child(even) { + background-color: #f5f5f4; +} + +tr:active, +.table-striped tr:active:nth-child(even) { + color: #fff; + background-color: #116cd6; +} + +thead tr:active { + color: #333; + background-color: #f5f5f4; +} + +th { + font-weight: normal; + border-right: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} + +th, +td { + padding: 2px 15px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +th:last-child, +td:last-child { + border-right: 0; +} diff --git a/ShowReel/css/segment.css b/ShowReel/css/segment.css new file mode 100644 index 0000000..e250d06 --- /dev/null +++ b/ShowReel/css/segment.css @@ -0,0 +1,188 @@ +btn-group { + display: inline-block; + font-size: 0; + margin: 0 !important; +} +btn-group .btn { + + border-radius: 0; +} +btn-group .btn + .btn { + margin-left: -1px; +} + +btn-group .btn.btn-segment, +.btn-group .btn.btn-segment { + outline: none; + padding: 0px 12px 0px 12px; + border: 1px solid #d5d5d5; + font-weight: 400; + background-color: #fff; + letter-spacing: 0.4px; + height: 21px; + border-top: 1px solid rgb(205, 205, 205); + border-bottom: 1px solid rgb(174, 174, 174); + box-sizing: border-box; + z-index: 1; + color: #000; +} +btn-group .btn.active { + background-image: linear-gradient(rgb(113, 113, 113), rgb(106, 106, 106)); + color: #fff; + border-top-color: rgb(104, 104, 104); + border-left-color: rgb(96, 96, 96); + border-right: 1px solid rgb(96, 96, 96); + border-bottom-color: rgb(91, 96, 96); +} +btn-group .btn.active + .btn { + border-left: none; +} +btn-group .btn.btn-segment.active { + border-left-color: transparent; +} +btn-group, .btn:first-child { + border-radius: 4.5px 0px 0px 4.5px; +} +btn-group .btn:last-child { + border-radius: 0px 4.5px 4.5px 0px; +} +btn-group, .btn.btn-segment:first-child, +.btn-group .btn.btn-segment:first-child { + border-radius: 4.5px 0px 0px 4.5px; + border-left-color: rgb(205, 205, 205); +} +btn-group .btn.btn-segment:last-child, +.btn-group .btn.btn-segment:last-child { + border-radius: 0px 4.5px 4.5px 0px; + border-right: 1px solid rgb(205, 205, 205); +} +btn-group:hover .btn-segment:active, +.btn-group:hover .btn-segment:active { + background-color: #f0f0f0; +} +btn-group:hover .btn-segment.active:active, +.btn-group:hover .btn-segment.active:active { + background-image: linear-gradient(to bottom, rgb(74, 152, 253), rgb(7, 102, 227)) !important; + border-top-color: rgb(35, 127, 254) !important; + border-bottom-color: rgb(3, 63, 221) !important; +} +btn-group .btn.btn-segment.active, +.btn-group .btn.btn-segment.active { + border-right-color: transparent; + z-index: 3; +} +btn-group .btn.btn-segment.active, +.btn-group .btn.btn-segment.active { + border-top-color: rgb(73, 160, 249); + border-bottom-color: rgb(5, 95, 255); + background-image: linear-gradient(to bottom, rgb(105, 180, 250), rgb(13, 128, 255)); + color: #fff; + font-weight: 300; + letter-spacing: 0.75px; + background-size: 100% 100%; +} +btn-group .btn-segment.active:last-child, +.btn-group .btn-segment.active:last-child { + border-right: 1px solid rgb(73, 160, 249); +} +btn-group .btn-segment.active:first-child, +.btn-group .btn-segment.active:first-child { + border-left-color: rgb(73, 160, 249); +} +btn-group .btn-segment.active + .btn-segment, +.btn-group .btn-segment.active + .btn-segment { + border-left: none; +} +btn-group.fill-width, +.btn-group.fill-width { + display: inline-flex; +} +btn-group.fill-width .btn, +.btn-group.fill-width .btn { + flex: 1; +} +btn-group.seperated .btn-segment.active, +.btn-group.seperated .btn-segment.active { + border-left: 1px solid rgb(30, 140, 254); +} +btn-group .btn.btn-segment[disabled], btn-group .btn.btn-segment.active[disabled], +.btn-group .btn.btn-segment[disabled], .btn-group .btn.btn-segment.active[disabled] { + border-color: rgb(212, 212, 212); + background-image: none !important; + background-color: rgb(248, 248, 248); + color: rgb(168, 168, 168); +} + +@media only screen and (min--moz-device-pixel-ratio: 2), +only screen and (-o-min-device-pixel-ratio: 2/1), +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and (min-device-pixel-ratio: 2) { + btn-group .btn.btn-segment, btn-group .btn.btn-segment:first-child, btn-group .btn.btn-segment:last-child, + .btn-group .btn.btn-segment, .btn-group .btn.btn-segment:first-child, .btn-group .btn.btn-segment:last-child { + border-left: none; + border-right: none; + border-top: none; + border-bottom: none; + padding: 0px 13px 0px 13px; + } + btn-group .btn.btn-segment.active + .btn.btn-segment:not(.active) { + + } + btn-group .btn.btn-segment, + .btn-group .btn.btn-segment { + box-shadow: inset 0px 0px 0px 0.5px rgb(190, 190, 190); + } + btn-group, + .btn-group { + box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253); + border-radius: 4.5px; + } + btn-group .btn.btn-segment.active, + .btn-group .btn.btn-segment.active { + border-top: none; + border-bottom: none; + border-left: none; + border-right: none; + padding: 0px 12px; + box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253); + box-shadow: none; + background-image: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + linear-gradient(to bottom, rgb(105, 180, 250), rgb(13, 128, 255)); + background-position: left top, left bottom, center; + background-size: 100% 1px, 100% 1px, 100% 100%; + background-repeat: no-repeat; + z-index: 3; + } + btn-group .btn.btn-segment.active:active:hover, + .btn-group .btn.btn-segment.active:active:hover { + background-image: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + linear-gradient(to bottom, rgb(74, 152, 253), rgb(7, 102, 227)) !important; + background-position: left top, left bottom, center; + background-size: 100% 1px, 100% 1px, 100% 100%; + } + btn-group .btn.btn-segment.active:first-child, btn-group .btn.btn-segment.active:last-child, + .btn-group .btn.btn-segment.active:first-child, .btn-group .btn.btn-segment.active:last-child { + background-image: linear-gradient(to bottom, rgb(105, 180, 250), rgb(13, 128, 255)); + background-position: center; + background-size: 100% 100%; + } + btn-group .btn.btn-segment.active:first-child, + .btn-group .btn.btn-segment.active:first-child { + box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253); + } + btn-group .btn.btn-segment.active:last-child, + .btn-group .btn.btn-segment.active:last-child { + box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253); + z-index: 1; + } + btn-group.seperated .btn.btn-segment.active, + .btn-group.seperated .btn.btn-segment.active { + background-image: linear-gradient(to bottom, rgb(105, 180, 250), rgb(13, 128, 255)); + background-position: center; + background-size: 100% 100%; + box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253); + } + +} diff --git a/ShowReel/css/slider.css b/ShowReel/css/slider.css new file mode 100644 index 0000000..6c5bff2 --- /dev/null +++ b/ShowReel/css/slider.css @@ -0,0 +1,128 @@ +.slider { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #bababa; + width: auto; + height: 3px; + border-radius: 5px; + outline: none; +} +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; +} +.slider.slider-bold { + height: 4px; + border-radius: 10px; +} +.slider.slider-square, .slider.slider-square-inverted { + margin-bottom: 7px; +} +.slider.slider-square::-webkit-slider-thumb, .slider.slider-square-inverted::-webkit-slider-thumb { + height: 23px; + width: 20px; + border: 1px solid #BABABA; + border: none; + background-image: url('data:image/svg+xml;utf8,');/*In Chrome dunkler!*/ + background-size: 98% 98%; + -webkit-filter: drop-shadow(0px 1px 1px rgba(100, 100, 100, 0.2)); + filter: drop-shadow(0px 1px 1px rgba(100, 100, 100, 0.2)); + background-position: 0.5px 2px; + background-repeat: no-repeat; +} +.slider.slider-square::-webkit-slider-thumb:active, .slider.slider-square-inverted::-webkit-slider-thumb:active { + background-image: url('data:image/svg+xml;utf8,');/*In Chrome dunkler!*/ +} +.slider.slider-square-inverted::-webkit-slider-thumb { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + -webkit-filter: drop-shadow(0px -1px 1px rgba(100, 100, 100, 0.2)); + filter: drop-shadow(0px -1px 1px rgba(100, 100, 100, 0.2)); +} +.slider.slider-round { + background-size: 50% 100%; + background-repeat: no-repeat; + background-image: url('data:image/svg+xml;utf8,'); +} +.slider-round.blue { + background-image: url('data:image/svg+xml;utf8,'); +} +.slider-round.gray { + background-image: url('data:image/svg+xml;utf8,'); +} +.slider.slider-round::-webkit-slider-thumb { + height: 17px; + width: 17px; + border: 1px solid rgb(190, 190, 190); + background-color: #fff; + border-radius: 50%; + -webkit-filter: drop-shadow(0px 1px 1px rgba(150, 150, 150, 0.4)); + filter: drop-shadow(0px 1px 1px rgba(150, 150, 150, 0.4)); +} +.slider.slider-round.slider-small::-webkit-slider-thumb { + height: 14px; + width: 14px; +} +.slider.slider-round::-webkit-slider-thumb:active { + background-color: #f0f0f0; +} +.slider.slider-round.gray::-webkit-slider-thumb:active { + background-color: #f0f0f0; +} + +/*Vertical Settings*/ + +.slider-vertical { + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; + -webkit-transform-origin: 0% 50%; + transform-origin: 0% 50%; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + /*appearance: slider-vertical; + width: 5px; + height: auto;*/ + +} +@media only screen and (min--moz-device-pixel-ratio: 2), +only screen and (-o-min-device-pixel-ratio: 2/1), +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and (min-device-pixel-ratio: 2) { + .slider.slider-square::-webkit-slider-thumb, .slider.slider-square-inverted::-webkit-slider-thumb { + background-image: url('data:image/svg+xml;utf8,'); + } + .slider.slider-square::-webkit-slider-thumb:active, .slider.slider-square-inverted::-webkit-slider-thumb:active { + background-image: url('data:image/svg+xml;utf8,'); + } + .slider.slider-vertical::-webkit-slider-thumb { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + -webkit-filter: drop-shadow(0px -1px 1px rgba(100, 100, 100, 0.2)); + filter: drop-shadow(0px -1px 1px rgba(100, 100, 100, 0.2)); + } + /*Here is a Data-URL used because Chrome (Blink) don't support rendering 0.1px for retina displays. The borders would be too thick. To use a background-image isn't a clean solution but it's the only way*/ + .slider.slider-round::-webkit-slider-thumb { + border: none; + background-image: url('data:image/svg+xml;utf8,'); + background-size: 100%; + border-radius: 0px; + background-color: transparent; + height: 18px; + width: 18px; + } + .slider.slider-round::-webkit-slider-thumb:active { + background-color: transparent; + background-image: url('data:image/svg+xml;utf8,'); + } + .slider.slider-round.gray::-webkit-slider-thumb:active { + background-color: transparent; + } + .slider.slider-round.slider-bold::-webkit-slider-thumb { + background-image: url('data:image/svg+xml;utf8,'); + } + .slider.slider-round.slider-bold::-webkit-slider-thumb:active { + background-color: transparent; + background-image: url('data:image/svg+xml;utf8,'); + } +} diff --git a/ShowReel/css/swipe.css b/ShowReel/css/swipe.css new file mode 100644 index 0000000..6809599 --- /dev/null +++ b/ShowReel/css/swipe.css @@ -0,0 +1,166 @@ +list-group { + font-size: 0; + display: block; + overflow-x: hidden; +} +list-item { + display: inline-flex; + overflow: hidden; + width: 100%; +} +list-item * { + transition-duration: 0.5s; + transition-timing-function: ease-out; +} +list-item action-list { + display: inline-block; + flex: none; + white-space: nowrap; + overflow: hidden; + background-color: rgb(192, 192, 197); + transition-property: width; +} +list-item.touching action-list { + transition: none; + position: relative; +} +list-item action-list[role="left"] { + width: 0px; +} +list-item action-list[role="right"] { + width: 0px; + text-align: right; +} +list-item action-list swipe-action { + width: 65px; + display: inline-block; + height: 100%; + position: relative; + font-size: 13px; +} +list-item.touching action-list swipe-action { + transition: none; +} +list-item action-list swipe-action.smart { + transition: width 1s; + width: 95% !important; + +} +list-item action-list swipe-action:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + margin-right: -0.25em; /* Adjusts for spacing */ +} +list-item action-list swipe-action action-inner { + display: inline-block; + color: #fff; + font-weight: 300; + letter-spacing: 0.5px; + text-align: center; + width: 100%; + white-space: normal; + vertical-align: middle; +} +list-item action-list swipe-action action-inner > * { + +} +list-item action-list swipe-action action-inner .icon { + display: block; + width: 100%; + height: 24px; +} +list-item item-inner { + flex: none; + width: 100%; + font-size: 13px; + padding: 7px 0px 7px 12px; + text-align: left; + margin-left: -0px; + display: flex; + transition-property: margin-left; +} +list-item.touching item-inner { + transition: none; +} +list-item + list-item { + border-top: 1px solid rgb(225, 225, 225); +} +item-inner .media-object { + display: inline-block; + +} +item-inner .media-body { + margin: 0; + overflow: hidden; + display: inline-block; +} +item-inner .media-body p { + margin: 5px 0 0; +} +/* +item-inner .media-body { + display: inline-block; +} +.list-item-swipe .item-inner { + padding: 12px; + width: 100%; +} +.list-item-swipe .item-inner, .list-item-swipe .swipe-actions { + display: inline-block; + font-size: 12px; + vertical-align: middle; +} +.list-item-swipe.smart-action { + +} +.list-item-swipe .swipe-actions { + font-size: 0; + display: inline-block; + width: 0px; + position: relative; + background-color: #afafaf; + transition-timing-function: ; +} +.list-item-swipe .swipe-actions .action { + display: inline-block; + position: absolute; + font-size: 12px; + height: 100%; + transition-timing-function: ease-out; + width: 70px; +} +.list-item-swipe .swipe-actions-left .action { + left: 0px; +} +.list-item-swipe .swipe-actions-right .action { + right: 0px; +} +.action-inner { + vertical-align: middle; +} +.action-inner .action-center { + display: inline-block; + width: 100%; + text-align: center; + color: #fff; +} +.action-inner { + display: block; + position: absolute; + width: 100%; + text-align: center; + top: 50%; + transform: translate(0px, calc(-50%)); + font-size: 1.1em; + color: #fff; +} +.list-item-swipe.smart-action .action:first-child { + transition: width 0.3s; + width: 100%; +} +.list-item-swipe .swipe-actions-left .action:first-child { + transition-property: width; + transition-duration: 0.4s; +}*/ diff --git a/ShowReel/css/tabs.css b/ShowReel/css/tabs.css new file mode 100644 index 0000000..0d99d9f --- /dev/null +++ b/ShowReel/css/tabs.css @@ -0,0 +1,136 @@ +tab-group { + margin-top: 0px; + border-bottom: 1px solid #a5a3a5; + background-image: linear-gradient(to bottom, #bdbaba 0%, #b0adb0 100%); + min-height: 22px; + z-index: 2; + width: 100%; + box-sizing: border-box; + border-top: 1px solid #a5a3a5; +} +tool-bar + tab-group { + margin-top: -1px; +} +tool-bar { + /*border-bottom: none !important;*/ +} +tab-item { + padding: 3px 3px 2px 3px; + font-size: 11px; + color: #4c4c52; + border-top: 1px solid transparent; + border-top: none; + background-image: linear-gradient(to bottom, #c1bfc1 0%, #b8b6b8 100%); + margin-top: -1px; + border-right: 1px solid #989698; + margin-right: -1px; + border-top: 1px solid #a5a3a5; +} +tab-item:first-child { + border-left: 1px solid #989698; + margin-left: -1px; +} +tab-item:not(.active):hover { + background-image: linear-gradient(rgb(182, 182, 182), rgb(177, 177, 177)); +} +tab-item:hover:not(.active):after { + opacity: 0; +} +tab-item.active { + background-image: linear-gradient(to bottom, #dedcde 0%, #d5d4d5 100%); + color: #202020; + border-top-color: #babbbe; +} + +tab-item button[action="close"] { + height: 16px; + width: 16px; + transition: opacity .3s linear; + border-radius: 2px; + background-color: transparent; +} +tab-item button[action="close"]:hover { + background-color: #9d9d9d; +} +tab-item:hover button[action="close"] { + background-image: url('data:image/svg+xml;utf8,'); +} +tab-item.active button[action="close"]:hover { + background-color: #c3c3c3; +} +tab-item.active:hover button[action="close"] { + background-image: url('data:image/svg+xml;utf8,'); +} +tab-item[type="fixed"][action="add"] { + width: 25px; + transition: border-color 0.2s; + background-image: url('data:image/svg+xml;utf8,'); + background-size: 100%; + box-sizing: border-box; +} +tab-item[type="fixed"][action="add"]:hover { + border-top-color: #858585; + border-left-color: #858585; + background-image: url('data:image/svg+xml;utf8,'), linear-gradient(to bottom, #b6b6b6 0%, #adadad 100%); +} +tab-item[type="fixed"][action="add"]:active:hover { + background-color: #a2a2a2; + background-image: url('data:image/svg+xml;utf8,'); +} +tab-item button[action="close"]:active { + background-color: #919191; +} +tab-item.active button[action="close"]:active { + background-color: #bababa; +} + + + + + +tab-item { + transition-property: none; + transition-duration: .3s; +} +tab-item button { + outline: none; + border: none; + -webkit-appearance: none; + background-color: transparent; +} +.in-drag tab-item, tab-item.active:not(.dragging) { + transition-property: transform; + transition-timing-function: ease-out; +} + +tab-item.active { + z-index: 1; +} +tab-item.dragging { + transition-property: none; + +} + +tab-item.dragging.active.active-in-transition { + transition-property: left; + +} + +tab-item.adding { + flex: none; + width: 0px; + padding: normal 0px; + transition-property: width !important; + overflow: hidden; + max-height: 23px; +} + +tab-item[type="fixed"] { + + overflow: hidden; + border-bottom: none; + +} +tab-item[type="fixed"].btn { + border-radius: 0; +} diff --git a/ShowReel/css/window.css b/ShowReel/css/window.css new file mode 100644 index 0000000..f7a9f60 --- /dev/null +++ b/ShowReel/css/window.css @@ -0,0 +1,10 @@ +.window, ph-window { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex-direction: column; + background-color: #fff; +} diff --git a/ShowReel/dialog1.html b/ShowReel/dialog1.html new file mode 100644 index 0000000..a05be8e --- /dev/null +++ b/ShowReel/dialog1.html @@ -0,0 +1,4 @@ +

Dialog

+ + + diff --git a/ShowReel/index.html b/ShowReel/index.html new file mode 100644 index 0000000..774bcd1 --- /dev/null +++ b/ShowReel/index.html @@ -0,0 +1,433 @@ + + + + + ShowReel Photon + + + + + + +

Show Real

+
+ + + + + + + + + +
+ + + + Fixed Tab + + + + Tab 2 + + + + Tab 3 + + + + +
+
+
+
+ +
+ + + + + +
+ + + +
+ Action A + + + + +
+ + + +
+ Action B + + + + + +
+ Swipe Me Both! +

Swipe me to left or right! +

+ + + + +
+ + + +
+ Action A + + + + +
+ + + +
+ Action B + + + + +
+ + + +
+ Action C + + + + + + + + +
+ + + +
+ Action A + + + + +
+ + + +
+ Action B + + + + + +
+ Swipe Me Left! +

Lorem ipsum dolor sit amet

+
+ + + + + +
+ Swipe Me Right! +

Lorem ipsum dolor sit amet dolor

+
+ + + + +
+ + + +
+ Action A + + + + +
+ + + +
+ Action B + + + + + +
+
+
+ + + + + +

+ + + + + +

+ +
+ + + + + +
+ + + + + +

+ +
+ +
+ +

+ + + +

+
+ + + +
+

+ + +

+ +
+ +
+ +
+
+
+
+ + + + + + + + + + + diff --git a/ShowReel/js/app.js b/ShowReel/js/app.js new file mode 100644 index 0000000..ce15c44 --- /dev/null +++ b/ShowReel/js/app.js @@ -0,0 +1,124 @@ +// Require Photon +const Photon = require('./../'); +// Lop Photon instance +console.log(Photon); + + +window.addEventListener("activate", function(event) { + console.log(event); +}); + +window.addEventListener("load", function() { + var componentGroup = document.getElementsByClassName("component-groups")[0]; + componentGroup.addEventListener("activate", function(event) { + var viewSelector = event.detail.button.getAttribute("data-view"); + var btns = this.getElementsByTagName("button"); + for (var i = 0; i < btns.length; i++) { + document.querySelector(btns[i].getAttribute("data-view")).style.display = "none"; + } + document.querySelector(viewSelector).style.removeProperty("display"); + }); + document.getElementsByClassName("btn-show-popup")[0].addEventListener("click", function() { + Photon.Dialog("#dialog1", { + width: 600, + height: 400, + minHeight: 150, + minWidth: 200 + }); + }); + + document.getElementsByClassName("btn-show-menu")[0].addEventListener("mousedown", function() { + Photon.DropDown(this, [ + { + label: "Item 1", + submenu: [ + { + label: "Sub Item 1.1", + click: function() { + console.log("Clicked Sub Item 1.1"); + } + } + ] + }, + { + label: "Item 2", + submenu: [ + { + label: "Sub Item 2.1" + } + ] + } + ]); + }); + + //document.getElementsByClassName("progress-circle")[0].updateCircleProgress(62.5); + + + const tabGroup = document.getElementsByTagName("tab-group")[0]; + tabGroup.addEventListener("tabActivate", function(event) { + console.log(event); + }); + tabGroup.addEventListener("tabClose", function(event) { + console.log(event); + }); + tabGroup.addEventListener("tabMove", function(event) { + console.log(event); + }); + tabGroup.addEventListener("tabAdd", function(event) { + console.log(event); + }); + + window.addEventListener("swipe", function(event) { + console.log(event); + }); + + const circularSlider = document.getElementsByTagName("circular-slider")[0]; + circularSlider.addEventListener("input", function(event) { + console.log(event); + }); + circularSlider.addEventListener("change", function(event) { + console.log(event); + }); + + + const messagesView = document.getElementsByTagName("messages-view")[0]; + + messagesView.add("Hey", { + type: "self" + }); + messagesView.add("What's up?", { + type: "extern" + }); + messagesView.add("Look at this!", { + type: "self" + }); + messagesView.add("https://maurice-conrad.eu/acting/images/big-narrenkaefig-5.jpg", { + type: "self", + content: { + type: "image/png" + } + }); + messagesView.add("https://maurice-conrad.eu/acting/images/big-schach-4.jpg", { + type: "extern", + content: { + type: "image/png" + } + }); + messagesView.add("https://upload.wikimedia.org/wikipedia/commons/transcoded/4/4b/Lofsöngur.ogg/Lofsöngur.ogg.mp3", { + type: "self", + content: { + type: "audio/*" + } + }); + + window.addEventListener("resize", function(event) { + //console.log(event); + }); + + window.addEventListener("input", function(event) { + console.log(event); + }); + + + +}); diff --git a/ShowReel/js/dialog1.js b/ShowReel/js/dialog1.js new file mode 100644 index 0000000..8d92c09 --- /dev/null +++ b/ShowReel/js/dialog1.js @@ -0,0 +1,9 @@ +(() => { + const electron = require('electron'); + + const currWindow = electron.remote.getCurrentWindow(); + + document.querySelector(".btn-system").addEventListener("click", function() { + currWindow.close(); + }); +})(); diff --git a/ShowReel/main.js b/ShowReel/main.js new file mode 100644 index 0000000..9e484fa --- /dev/null +++ b/ShowReel/main.js @@ -0,0 +1,15 @@ +const electron = require('electron'); + +electron.app.on("ready", function() { + const window = new electron.BrowserWindow({ + width: 1280, + height: 720, + titleBarStyle: "hidden", + webPreferences: { + experimentalFeatures: true + } + }); + window.loadURL("file://" + __dirname + "/index.html"); + + window.openDevTools(); +}); diff --git a/ShowReel/package.json b/ShowReel/package.json new file mode 100644 index 0000000..9f99011 --- /dev/null +++ b/ShowReel/package.json @@ -0,0 +1,16 @@ +{ + "name": "app", + "version": "1.0.0", + "description": "Test demo application for photon", + "keywords": [ + "test", + "demo", + "skitch" + ], + "license": "ISC", + "author": "Maurice Conrad", + "main": "main.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + } +} diff --git a/_config.yml b/_config.yml deleted file mode 100644 index f503410..0000000 --- a/_config.yml +++ /dev/null @@ -1,15 +0,0 @@ -# Meta data -name: Photon -authors: Connor Sears -description: Build desktop apps with simple HTML and CSS components. - -# Dependencies -highlighter: rouge - -# Permalinks -permalink: pretty - -# Server -source: docs -port: 4000 -url: http://photonkit.com diff --git a/dist/PhotonBtnGroup/README.md b/dist/PhotonBtnGroup/README.md new file mode 100644 index 0000000..d3dd194 --- /dev/null +++ b/dist/PhotonBtnGroup/README.md @@ -0,0 +1,59 @@ +# Button Group + + + +## Default +![Button Group Default](https://dev.maurice-conrad.eu/img/photon/buttongroupdefault.png) + +```html + + + + + + +``` + +As you can see, the *button* with the class `active` is the currently active one. + +## Segmented Control + +![ButtonGroup Segmented](https://dev.maurice-conrad.eu/img/photon/buttongroupdesegmented.png) + +```html + + + + + +``` + +As you can see, the *button* with the class `active` is the currently active one. + +### Type + +The `type` attribute specifies wether the *buttons* can be activated an deactivated relative to each other. This means, `type` = `absolute` means that the currently active *button* will be deactivated when activating one of the other ones. If `type` = `relative` (default value), every *button* can be activated & deactivated seperatly. + +#### Relative + +```html + + + + + +``` + +#### Absolute + +```html + + + + + +``` + +## API + +To recognize when a *button* is activated, listen to the `activate` event that fires on the currently activated *button*. But diff --git a/dist/PhotonBtnGroup/group.js b/dist/PhotonBtnGroup/group.js new file mode 100644 index 0000000..acd16a1 --- /dev/null +++ b/dist/PhotonBtnGroup/group.js @@ -0,0 +1,62 @@ +class ButtonGroup extends HTMLElement { + constructor() { + super(); + + this.__typeHandler = { + absolute: btn => this.__typeAbsoluteHandle(btn), + relative: btn => this.__typeRelativeHandle(btn), + }; + + this.addEventListener("click", this.__handleClick); + } + activate(button) { + let typeHandler = this.__typeHandler[this.type]; + typeHandler(button); + } + __handleClick(event) { + const button = event.target.closest(".btn"); + if (button) { + this.activate(button); + + button.dispatchEvent(new CustomEvent("activate", { + bubbles: true, + detail: { + button: button + } + })); + } + } + __typeAbsoluteHandle(button) { + for (let button of this.buttons) { + button.classList.remove("active"); + } + button.classList.add("active"); + } + __typeRelativeHandle(button) { + if (button.classList.contains("active")) { + button.classList.remove("active"); + } + else { + button.classList.add("active"); + } + } + attributeChangedCallback(attr, oldValue, newValue) { + + } + get buttons() { + return this.getElementsByClassName("btn"); + } + get type() { + return this.getAttribute("type") || "relative"; + } + set type(value) { + return this.setAttribute("type", value); + } +} +ButtonGroup.observedAttributes = ["type"]; + + +customElements.define("btn-group", ButtonGroup); + + +module.exports = ButtonGroup; diff --git a/dist/PhotonBtnGroup/package.json b/dist/PhotonBtnGroup/package.json new file mode 100644 index 0000000..405f295 --- /dev/null +++ b/dist/PhotonBtnGroup/package.json @@ -0,0 +1,15 @@ +{ + "name": "photonbtngroup", + "version": "0.1.0", + "description": "Button group controller", + "main": "group.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "button", + "group" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonBtnGroup/segment.css b/dist/PhotonBtnGroup/segment.css new file mode 100644 index 0000000..e250d06 --- /dev/null +++ b/dist/PhotonBtnGroup/segment.css @@ -0,0 +1,188 @@ +btn-group { + display: inline-block; + font-size: 0; + margin: 0 !important; +} +btn-group .btn { + + border-radius: 0; +} +btn-group .btn + .btn { + margin-left: -1px; +} + +btn-group .btn.btn-segment, +.btn-group .btn.btn-segment { + outline: none; + padding: 0px 12px 0px 12px; + border: 1px solid #d5d5d5; + font-weight: 400; + background-color: #fff; + letter-spacing: 0.4px; + height: 21px; + border-top: 1px solid rgb(205, 205, 205); + border-bottom: 1px solid rgb(174, 174, 174); + box-sizing: border-box; + z-index: 1; + color: #000; +} +btn-group .btn.active { + background-image: linear-gradient(rgb(113, 113, 113), rgb(106, 106, 106)); + color: #fff; + border-top-color: rgb(104, 104, 104); + border-left-color: rgb(96, 96, 96); + border-right: 1px solid rgb(96, 96, 96); + border-bottom-color: rgb(91, 96, 96); +} +btn-group .btn.active + .btn { + border-left: none; +} +btn-group .btn.btn-segment.active { + border-left-color: transparent; +} +btn-group, .btn:first-child { + border-radius: 4.5px 0px 0px 4.5px; +} +btn-group .btn:last-child { + border-radius: 0px 4.5px 4.5px 0px; +} +btn-group, .btn.btn-segment:first-child, +.btn-group .btn.btn-segment:first-child { + border-radius: 4.5px 0px 0px 4.5px; + border-left-color: rgb(205, 205, 205); +} +btn-group .btn.btn-segment:last-child, +.btn-group .btn.btn-segment:last-child { + border-radius: 0px 4.5px 4.5px 0px; + border-right: 1px solid rgb(205, 205, 205); +} +btn-group:hover .btn-segment:active, +.btn-group:hover .btn-segment:active { + background-color: #f0f0f0; +} +btn-group:hover .btn-segment.active:active, +.btn-group:hover .btn-segment.active:active { + background-image: linear-gradient(to bottom, rgb(74, 152, 253), rgb(7, 102, 227)) !important; + border-top-color: rgb(35, 127, 254) !important; + border-bottom-color: rgb(3, 63, 221) !important; +} +btn-group .btn.btn-segment.active, +.btn-group .btn.btn-segment.active { + border-right-color: transparent; + z-index: 3; +} +btn-group .btn.btn-segment.active, +.btn-group .btn.btn-segment.active { + border-top-color: rgb(73, 160, 249); + border-bottom-color: rgb(5, 95, 255); + background-image: linear-gradient(to bottom, rgb(105, 180, 250), rgb(13, 128, 255)); + color: #fff; + font-weight: 300; + letter-spacing: 0.75px; + background-size: 100% 100%; +} +btn-group .btn-segment.active:last-child, +.btn-group .btn-segment.active:last-child { + border-right: 1px solid rgb(73, 160, 249); +} +btn-group .btn-segment.active:first-child, +.btn-group .btn-segment.active:first-child { + border-left-color: rgb(73, 160, 249); +} +btn-group .btn-segment.active + .btn-segment, +.btn-group .btn-segment.active + .btn-segment { + border-left: none; +} +btn-group.fill-width, +.btn-group.fill-width { + display: inline-flex; +} +btn-group.fill-width .btn, +.btn-group.fill-width .btn { + flex: 1; +} +btn-group.seperated .btn-segment.active, +.btn-group.seperated .btn-segment.active { + border-left: 1px solid rgb(30, 140, 254); +} +btn-group .btn.btn-segment[disabled], btn-group .btn.btn-segment.active[disabled], +.btn-group .btn.btn-segment[disabled], .btn-group .btn.btn-segment.active[disabled] { + border-color: rgb(212, 212, 212); + background-image: none !important; + background-color: rgb(248, 248, 248); + color: rgb(168, 168, 168); +} + +@media only screen and (min--moz-device-pixel-ratio: 2), +only screen and (-o-min-device-pixel-ratio: 2/1), +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and (min-device-pixel-ratio: 2) { + btn-group .btn.btn-segment, btn-group .btn.btn-segment:first-child, btn-group .btn.btn-segment:last-child, + .btn-group .btn.btn-segment, .btn-group .btn.btn-segment:first-child, .btn-group .btn.btn-segment:last-child { + border-left: none; + border-right: none; + border-top: none; + border-bottom: none; + padding: 0px 13px 0px 13px; + } + btn-group .btn.btn-segment.active + .btn.btn-segment:not(.active) { + + } + btn-group .btn.btn-segment, + .btn-group .btn.btn-segment { + box-shadow: inset 0px 0px 0px 0.5px rgb(190, 190, 190); + } + btn-group, + .btn-group { + box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253); + border-radius: 4.5px; + } + btn-group .btn.btn-segment.active, + .btn-group .btn.btn-segment.active { + border-top: none; + border-bottom: none; + border-left: none; + border-right: none; + padding: 0px 12px; + box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253); + box-shadow: none; + background-image: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + linear-gradient(to bottom, rgb(105, 180, 250), rgb(13, 128, 255)); + background-position: left top, left bottom, center; + background-size: 100% 1px, 100% 1px, 100% 100%; + background-repeat: no-repeat; + z-index: 3; + } + btn-group .btn.btn-segment.active:active:hover, + .btn-group .btn.btn-segment.active:active:hover { + background-image: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + linear-gradient(to bottom, rgb(74, 152, 253), rgb(7, 102, 227)) !important; + background-position: left top, left bottom, center; + background-size: 100% 1px, 100% 1px, 100% 100%; + } + btn-group .btn.btn-segment.active:first-child, btn-group .btn.btn-segment.active:last-child, + .btn-group .btn.btn-segment.active:first-child, .btn-group .btn.btn-segment.active:last-child { + background-image: linear-gradient(to bottom, rgb(105, 180, 250), rgb(13, 128, 255)); + background-position: center; + background-size: 100% 100%; + } + btn-group .btn.btn-segment.active:first-child, + .btn-group .btn.btn-segment.active:first-child { + box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253); + } + btn-group .btn.btn-segment.active:last-child, + .btn-group .btn.btn-segment.active:last-child { + box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253); + z-index: 1; + } + btn-group.seperated .btn.btn-segment.active, + .btn-group.seperated .btn.btn-segment.active { + background-image: linear-gradient(to bottom, rgb(105, 180, 250), rgb(13, 128, 255)); + background-position: center; + background-size: 100% 100%; + box-shadow: inset 0px 0px 0px 0.5px rgb(30, 130, 253); + } + +} diff --git a/dist/PhotonButton/README.md b/dist/PhotonButton/README.md new file mode 100644 index 0000000..283bfa0 --- /dev/null +++ b/dist/PhotonButton/README.md @@ -0,0 +1,18 @@ +# Button + +## Default + +![Button Default](https://dev.maurice-conrad.eu/img/photon/button1.png) + +```html + +``` + +## System + +![Button Default](https://dev.maurice-conrad.eu/img/photon/button2.png) + +```html + + +``` diff --git a/dist/PhotonButton/button.css b/dist/PhotonButton/button.css new file mode 100644 index 0000000..1767a60 --- /dev/null +++ b/dist/PhotonButton/button.css @@ -0,0 +1,84 @@ + + +.btn-system { + outline: none; + box-sizing: border-box; + height: 21px; + padding: 0px 16px; + font-size: 13px; + border: 1px solid #d5d5d5; + font-weight: 400; + background-color: #fff; + letter-spacing: 0.4px; + border-radius: 4.5px; + border-top-color: rgb(198, 198, 198); + border-bottom-color: rgb(170, 170, 170); + border-left-color: rgb(192, 192, 192); + border-right-color: rgb(192, 192, 192); +} + +.btn-system.btn-active:not([disabled])/*, .btn-system:active:not([disabled])*/ { + letter-spacing: 0.8px; + color: #fff; + font-weight: 300; + padding: 0px 17px 1px 16px; + border-top-color: rgb(64, 150, 248); + border-bottom-color: rgb(9, 85, 255); + border-left-color: rgb(39, 122, 252); + border-right-color: rgb(39, 122, 252); + background-image: linear-gradient(rgb(94, 168, 249), rgb(14, 117, 255)); +} +.btn-system:active:not([disabled]), .btn-system.btn-active:active:not([disabled]) { + border-top-color: rgb(30, 114, 254); + border-bottom-color: rgb(3, 56, 216); + border-left-color: rgb(16, 82, 233); + border-right-color: rgb(17, 82, 227); + background-image: linear-gradient(rgb(64, 140, 253), rgb(11, 93, 224)); + letter-spacing: 0.8px; + color: #fff; + font-weight: 300; + padding: 0px 17px 1px 16px; +} +.btn-system[disabled] { + border-color: rgb(212, 212, 212); + background-image: none; + background-color: rgb(248, 248, 248); + color: rgb(168, 168, 168); + box-shadow: 0px 1px 0px -0.5px rgba(120, 120, 120, 0.2); +} + +@media only screen and (min--moz-device-pixel-ratio: 2), +only screen and (-o-min-device-pixel-ratio: 2/1), +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and (min-device-pixel-ratio: 2) { + .btn-system, .btn-system:focus { + padding: 0px 16px 0.5px 16px; + border: none; + border-radius: 3px; + box-shadow: 0px 1px 0px -0.5px rgba(120, 120, 120, 0.6); + font-family: 'BlinkMacSystemFont', '-apple-system', -apple-system; + background-position: center center; + background-image: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'); + background-size: 100% 100%; + + } + .btn-system.btn-active:not([disabled])/*, .btn-system:active*/ { + border-radius: 3.5px; + font-weight: 300; + } + .btn-system.btn-active { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(94, 168, 249), rgb(14, 117, 255)) !important; + + } + .btn-system.btn-active:active { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(64, 140, 253), rgb(11, 93, 224)) !important; + } + .btn-system[disabled], .btn-system.btn-active[disabled] { + background-image: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,') !important; + } +} diff --git a/dist/PhotonButton/button.js b/dist/PhotonButton/button.js new file mode 100644 index 0000000..7d6ca9a --- /dev/null +++ b/dist/PhotonButton/button.js @@ -0,0 +1,34 @@ +const Button = { + __mouseDown(event) { + var btn = event.target.closest("*:not(btn-group) > .btn-system:not(.active)"); + if (btn) { + // Clone button for sandboxing + var sandboxBtn = btn.cloneNode(true); + sandboxBtn.classList.add("sandbox"); + // Append the sanbox button to the DOM + document.body.appendChild(sandboxBtn); + // Get informations from sandbox button + var sandboxBoundings = sandboxBtn.getBoundingClientRect(); + // Remove sanbox button from DOM + document.body.removeChild(sandboxBtn); + // Round up to 4 decimal numbers because more are not supported by CSS + btn.style.width = sandboxBoundings.width + "px"; + // Add this width as stamp + btn.__photonModifiedWidth = btn.style.width; + } + }, + __mouseUp(event) { + var btns = document.getElementsByTagName("button"); + for (let btn of btns) { + if (btn.__photonModifiedWidth === btn.style.width) { + btn.style.removeProperty("width"); + delete btn.__photonModifiedWidth; + } + } + } +}; + +window.addEventListener("mousedown", Button.__mouseDown); +window.addEventListener("mouseup", Button.__mouseUp); + +module.exports = Button; diff --git a/dist/PhotonButton/package.json b/dist/PhotonButton/package.json new file mode 100644 index 0000000..2bf8a69 --- /dev/null +++ b/dist/PhotonButton/package.json @@ -0,0 +1,14 @@ +{ + "name": "photonbutton", + "version": "0.1.0", + "description": "Button controller", + "main": "button.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "button" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonCircularSlider/README.md b/dist/PhotonCircularSlider/README.md new file mode 100644 index 0000000..f3ee7b1 --- /dev/null +++ b/dist/PhotonCircularSlider/README.md @@ -0,0 +1,48 @@ +# Circular Slider + +![Circular Slider](https://dev.maurice-conrad.eu/img/photon/circularslider1.png) + +## Layout + +```html + +``` + +## API + +### Important + +The `value` of your `` is measured in **grads**. They reach from `0` - `400`. + +### Get Value + +Just *get* the `value` property of your `` element. + +```javascript +// Get value +const val = myCircularSlider.value; +// Log it +console.log(val); +``` + +### Set Value + +Just *set* the `value` property of your `` element. + +```javascript +// Set value to 200 (half of 400) +myCircularSlider.value = 200; +// Look at your circular slider! +``` + +### Input Event + +To recognize user input on the ``, just listen to the `input` event. + +```javascript +// Listen to the 'input' event +myCircularSlider.addEventListener("input", function() { + // Log new value + console.log("New Value:", this.value); +}); +``` diff --git a/dist/PhotonCircularSlider/circular-slider.css b/dist/PhotonCircularSlider/circular-slider.css new file mode 100644 index 0000000..01a21c5 --- /dev/null +++ b/dist/PhotonCircularSlider/circular-slider.css @@ -0,0 +1,23 @@ +circular-slider { + display: inline-block; + width: 25px; + height: 25px; + border: 1px solid rgb(207, 207, 207); /*rgb(195, 195, 195)*/ + border-radius: 50%; + box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5); + position: relative; + background-color: #fff; +} +circular-slider .dot { + position: absolute; + width: 5px; + height: 5px; + left: calc(50% - 2.5px); + top: calc(50% - 2.5px); + background-color: rgb(120, 120, 120); /*rgb(99, 99, 99)*/ + background-color: rgb(189, 189, 189); /*rgb(171, 171, 171)*/ + background-image: linear-gradient(rgb(120, 120, 120), rgb(189, 189, 189)); + border-radius: 50%; + transform-origin: center 190%; + transform: translate(0px, -140%) rotate(0deg); +} diff --git a/dist/PhotonCircularSlider/circular.js b/dist/PhotonCircularSlider/circular.js new file mode 100644 index 0000000..179b749 --- /dev/null +++ b/dist/PhotonCircularSlider/circular.js @@ -0,0 +1,96 @@ +class CircularSlider extends HTMLElement { + constructor() { + super(); + + this.__angle = 0; + + this.addEventListener("mousedown", this.__handleMouseDown); + window.addEventListener("mouseup", event => this.__handleMouseUp(event)); + window.addEventListener("mousemove", event => this.__handleMouseMove(event)); + + const dot = document.createElement("div"); + dot.classList.add("dot"); + + setTimeout(() => { + this.appendChild(dot); + this.attributeChangedCallback("value", undefined, this.getAttribute("value")); + }, 0); + + } + __handleMouseDown(event) { + this.__mousedown = true; + this.__handleMouseMove(event); + } + __handleMouseUp(event) { + if (this.__mousedown) { + this.dispatchEvent(new Event('change', { + bubbles: true, + cancelable: true + })); + } + this.__mousedown = false; + } + __handleMouseMove(event) { + if (this.__mousedown) { + this.__angle = this.__getAngle(); + this.value = this.__angle; + + this.dispatchEvent(new Event('input', { + bubbles: true, + cancelable: true + })); + } + } + connectedCallback() { + this.__initialized = true; + //this.attributeChangedCallback("value", undefined, this.getAttribute("value")); + } + attributeChangedCallback(attribute, oldValue, newValue) { + const attributeHandlers = { + value: value => this.__setAngle(value) + }; + if (attribute in attributeHandlers && this.__initialized) { + attributeHandlers[attribute](newValue); + } + } + get dot() { + return this.getElementsByClassName("dot")[0]; + } + __getAngle() { + const boundings = this.getBoundingClientRect(); + const center = { + x: boundings.left + boundings.width / 2, + y: boundings.top + boundings.height / 2 + }; + const diff = { + x: event.pageX - center.x, + y: event.pageY - center.y + }; + const tan = diff.x / diff.y; + const angle = (diff.y >= 0 ? 200 : (diff.x >= 0 ? 0 : 400)) - Math.atan(tan) * (200 / Math.PI); + + return angle; + } + __render() { + const deg = 360 / 400 * this.__angle; + this.dot.style.transform = 'translate(0px, -140%) rotate(' + deg + 'deg)'; + } + __setAngle(angle) { + this.__angle = parseFloat(angle); + this.__render(); + } + set value(value) { + this.__setAngle(value); + this.setAttribute("value", value); + } + get value() { + return this.__angle; + } +} +CircularSlider.observedAttributes = ["value"]; + + + +customElements.define("circular-slider", CircularSlider); + +module.exports = CircularSlider; diff --git a/dist/PhotonCircularSlider/package.json b/dist/PhotonCircularSlider/package.json new file mode 100644 index 0000000..2031065 --- /dev/null +++ b/dist/PhotonCircularSlider/package.json @@ -0,0 +1,15 @@ +{ + "name": "photoncircularslider", + "version": "0.0.1", + "description": "Circular slider controller", + "main": "circular.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "circular", + "slider" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonContent/ContentFrame.js b/dist/PhotonContent/ContentFrame.js new file mode 100644 index 0000000..dab0990 --- /dev/null +++ b/dist/PhotonContent/ContentFrame.js @@ -0,0 +1,8 @@ +class ContentFrame extends HTMLElement { + constructor() { + super(); + + } +} + +module.exports = ContentFrame; diff --git a/dist/PhotonContent/FrameInner.js b/dist/PhotonContent/FrameInner.js new file mode 100644 index 0000000..34ab510 --- /dev/null +++ b/dist/PhotonContent/FrameInner.js @@ -0,0 +1,8 @@ +class PhotonFrameInner extends HTMLElement { + constructor() { + super(); + + } +} + +module.exports = PhotonFrameInner; diff --git a/dist/PhotonContent/ListSelect.js b/dist/PhotonContent/ListSelect.js new file mode 100644 index 0000000..8e56eac --- /dev/null +++ b/dist/PhotonContent/ListSelect.js @@ -0,0 +1,101 @@ +const __prototypeExtensions = require('../PrototypeExtensions'); + +class PhotonListSelect extends HTMLElement { + constructor() { + super(); + + this.addEventListener("dragstart", this.__handleDragStart); + this.addEventListener("dragenter", this.__handleDragEnter); + this.addEventListener("dragend", this.__handleDragEnd); + this.addEventListener("drag", this.__handleDrag); + } + __handleDragStart(event) { + if (event.target.parentNode === this) { + this.drag = { + target: event.target, + lastTarget: event.target, + get relPos() { + const targetBoundings = this.target.getBoundingClientRect(); + return { + x: this.position.x - targetBoundings.left, + y: this.position.y - targetBoundings.top + }; + }, + // Return the index (+ or -) addition for the new drag position relative to the drag target + get insertIndexRel() { + // Returns 1 or 0 + // 0 stants for "top" (The dragged index will be the original index of the drag target) + // 1 stands for "bottom" (The dragged index will be the original index of the drag target + 1) + // That's because we can calculate with these numbers in a very powerful way + // 0 or 1 will be returned by converting the boolean result of the expression below to a number (0 = false, 1 = true) by using the bitwise operator & + return (this.relPos.y - this.target.getBoundingClientRect().height / 2 > 0) & 1; + }, + }; + } + } + __handleDragEnter(event) { + if (event.target.parentNode === this) { + const nextTarget = event.target.closest("list-select li"); + + if (this.drag) { + this.drag.lastTarget = this.drag.target; + this.drag.target = nextTarget; + } + } + } + __handleDragEnd(event) { + if (event.target.parentNode === this) { + + const targetClone = event.target.cloneNode(true); + PhotonListSelect.removeGraphical(targetClone); + + const targetNodePos = __prototypeExtensions.nodePos(this.drag.target); + + // Get the reference element, the dragged element will be inserted before + const insertRefElement = this.drag.target.parentNode.children[targetNodePos + this.drag.insertIndexRel]; + + // If this reference element is undefined, it does not exist + if (insertRefElement) { + this.drag.target.parentNode.insertBefore(targetClone, insertRefElement); + } + // We are using appendChild to append it on the end + else { + this.drag.target.parentNode.appendChild(targetClone); + } + // Delete original node from DOM + event.target.parentNode.removeChild(event.target); + + PhotonListSelect.removeGraphical(this.drag.target); + + + this.drag = null; + } + } + __handleDrag(event) { + if (event.target.parentNode === this) { + if (event.clientX && event.clientY) { + this.drag.position = { + x: event.clientX, + y: event.clientY + }; + // Reset graphical classes + PhotonListSelect.removeGraphical(this.drag.lastTarget); + PhotonListSelect.removeGraphical(this.drag.target); + + // 'insertIndexRel' is used to dtermine wether border top or border bottom should be drawn + this.drag.target.classList.add(PhotonListSelect.__dragGraphicalCSSClasses[this.drag.insertIndexRel]); + + } + } + } + static removeGraphical(target) { + // Remove any possible graphical class from drag target + for (let className of this.__dragGraphicalCSSClasses) { + target.classList.remove(className); + } + } +} +// Static class references for drawing a border while dragging +PhotonListSelect.__dragGraphicalCSSClasses = ["drag-before", "drag-after"]; + +module.exports = PhotonListSelect; diff --git a/dist/PhotonContent/README.md b/dist/PhotonContent/README.md new file mode 100644 index 0000000..a5fcf97 --- /dev/null +++ b/dist/PhotonContent/README.md @@ -0,0 +1,79 @@ +# Content Frame + +![Lists](https://dev.maurice-conrad.eu/img/photon/contentframe2.png) + +This a component for a framed list that may is editable. + +## Basic Layout + +```html + + + + ... + + +
+ + +
+ +``` + + +### List Select + +To add an selectable (and possible editable) list into the inner of the frame, use the `` element. + +```html + + + + + +
  • +
    + Orange + +
  • Bloodorange
    • +
  • Orange
    • +     +
    +
    • +
  • + Banana +
    • +
  • + Grapefruit +
    • +     +     + +
    + + +
    +     +``` + +You can add infinity sub lists and each of them can be editable. Just set the item's `draggable` attribute to `true`. + +### Main Border + +![Main Border](https://dev.maurice-conrad.eu/img/photon/mainborder.png) + +```html +... + + +
    + ... +
    + +     +... +``` + +Parent element should have the class `theme-gray` because this adds the lighweight gray background to the main border you know from *macOS*. + +Of course, if you are using your **main border** within a pane, it is okay to set the pane's class to `theme-gray`. diff --git a/dist/PhotonContent/content.css b/dist/PhotonContent/content.css new file mode 100644 index 0000000..b06268c --- /dev/null +++ b/dist/PhotonContent/content.css @@ -0,0 +1,180 @@ +content-frame { + display: block; + margin: 10px; + width: calc(100% - 20px); + border: 1px solid #b5b5b5; + background-color: #fff; + min-height: 150px; + height: auto; + position: relative; +} +content-frame .pane { + flex: 1; + border-right: 1px solid #b5b5b5; + border-left: none; +} +content-frame .pane:last-child { + border-right: none; +} +content-frame .pane.small { + flex: 1; + width: 200px; +} +content-frame frame-inner { + display: block; + box-sizing: padding-box; + height: calc(100% - 22px); + width: 100%; +} +content-frame frame-inner list-select { + list-style: none; + margin: 0; + padding: 0; +} +content-frame frame-inner list-select li { + padding: 0; +} +content-frame frame-inner list-select li + li { + margin-top: -2px; +} +content-frame frame-inner list-select li.active { + background-color: rgb(5, 105, 217); + color: #fff; + font-weight: 400; +} +content-frame frame-inner list-select li:before, content-frame frame-inner list-select li summary:after { + width: 100%; + background-color: transparent; + content: " "; + display: block; + height: 2px; +} +content-frame frame-inner list-select li.drag-before:before, content-frame frame-inner list-select li.drag-after:after { + background-color: rgb(2, 93, 210); +} + +content-frame frame-inner list-select li list-select { + +} +content-frame frame-inner list-select li.active list-select { + +} +content-frame frame-inner list-select li details { + +} +content-frame frame-inner list-select li details summary, content-frame frame-inner list-select li > span { + outline: none; + padding: 0px 0px 0px 7px; +} +content-frame frame-inner list-select li details summary::-webkit-details-marker { + display: none; +} +content-frame frame-inner list-select li details summary:after { + /*background-image: url('data:image/svg+xml;utf8,'); + */ + background-color: #797979; + -webkit-mask-image: url('data:image/svg+xml;utf8,'); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: 90%; + background-repeat: no-repeat; + background-position: left center; + float: left; + height: 20px; + width: 12px; + content: " "; + margin-right: 2px; +} +content-frame frame-inner list-select li.active details summary:after { + background-color: #fff; +} +content-frame frame-inner list-select li details[open] summary:after { + -webkit-mask-image: url('data:image/svg+xml;utf8,'); +} +content-frame frame-inner list-select li details *:not(summary) { + outline: none; + background-color: #fff; + color: #000; +} +content-frame frame-inner list-select li list-select li { + padding: 0px 0px 0px 30px; +} +content-frame .toolbar { + height: 21px; + border-top: 1px solid #b5b5b5; + box-sizing: border-box; + background-color: #f6f6f6; + background-image: none; + font-size: 0; + z-index: 2; + overflow-y: hidden; + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + background-image: none !important; +} +content-frame .toolbar .btn { + margin: 0; + padding: 0; + height: calc(100% + 2px); + width: 26px; + margin-top: -1px; + border-radius: 0; + border-right: 1px solid #b5b5b5; + background-size: 100%; + background-position: center; + background-repeat: no-repeat; + z-index: 1; + background-color: transparent; +} +content-frame .toolbar .btn:active:hover, content-frame .pane tool-bar .btn.active { + background-color: #b3b3b3; +} +content-frame .toolbar .btn-add { + background-image: url('data:image/svg+xml;utf8,'); +} +content-frame .toolbar .btn-remove { + background-image: url('data:image/svg+xml;utf8,'); +} +content-frame .toolbar .btn-remove[disabled] { + background-image: url('data:image/svg+xml;utf8,'); +} + + + +.list-editable { + +} +.list-editable li { + +} +.list-editable.dragging li.active.drag-over, .list-editable.dragging li.drag-over + li.active { + background-color: rgb(220, 220, 220); + color: inherit; +} +.list-editable li, .list-editable li * { + cursor: -webkit-grab; +} +.list-editable.dragging li.drag-over { + border-bottom: 2px solid rgb(5, 105, 217); +} + + +window-content { + display: block; +} +.theme-gray { + background-color: rgb(237, 237, 237); +} +.main-border { + margin: 20px; + padding: 10px 10px 30px 10px; + background-color: rgb(229, 229, 229); + border: 1px solid rgb(223, 223, 223); + border-top: 1px solid rgb(214, 214, 214); + border-radius: 4px; +} +.main-border .content-frame { + +} diff --git a/dist/PhotonContent/frame.js b/dist/PhotonContent/frame.js new file mode 100644 index 0000000..d8da5b1 --- /dev/null +++ b/dist/PhotonContent/frame.js @@ -0,0 +1,13 @@ +const PhotonContent = { + ContentFrame: require('./ContentFrame'), + FrameInner: require('./FrameInner'), + ListSelect: require('./ListSelect') +}; + + +customElements.define("content-frame", PhotonContent.ContentFrame); +customElements.define("frame-inner", PhotonContent.FrameInner); +customElements.define("list-select", PhotonContent.ListSelect); + + +module.exports = PhotonContent; diff --git a/dist/PhotonContent/package.json b/dist/PhotonContent/package.json new file mode 100644 index 0000000..50c8230 --- /dev/null +++ b/dist/PhotonContent/package.json @@ -0,0 +1,17 @@ +{ + "name": "photoncontent", + "version": "0.0.1", + "description": "Content Frame controller for list editable and list selectable", + "keywords": [ + "frame", + "content", + "list", + "editable" + ], + "license": "ISC", + "author": "Maurice Conrad", + "main": "frame.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + } +} diff --git a/dist/PhotonCustom/custom.css b/dist/PhotonCustom/custom.css new file mode 100644 index 0000000..d56da51 --- /dev/null +++ b/dist/PhotonCustom/custom.css @@ -0,0 +1,124 @@ +tool-bar { + background-image: linear-gradient(rgb(233, 233, 233), rgb(210, 210, 210)) !important; + border-radius: 6px 6px 0px 0px; +} + + + + +.window.no-focus tool-bar, +.window.no-focus tool-bar .btn.btn-default, +.window.no-focus tool-bar .title, +.window.no-focus .tab-item.active +{ + background-image: none; + background-color: rgb(245, 244, 245); + color: #bdbdbd; +} +.window.no-focus tool-bar .btn.btn-default { + box-shadow: none; +} +.window.no-focus tool-bar .btn.btn-default, +.window.no-focus tool-bar input +{ + border-color: #d4d4d4; +} +.window.no-focus tool-bar .btn.btn-default.active { + background-color: rgb(227, 227, 227); +} +.window.no-focus tool-bar input { + background-color: transparent !important; +} +.window.no-focus .tab-group { + border-color: rgb(210, 210, 210); +} +.window.no-focus .tab-item:not(.btn) { + background-image: none; +} +.window.no-focus .tab-item { + background-color: rgb(223, 223, 223); + border-color: rgb(210, 210, 210); + color: rgb(110, 110, 110); +} +.window.no-focus .tab-item:hover { + background-color: rgb(223, 223, 223); +} +.window.no-focus .tab-item.active { + color: rgb(110, 110, 110); +} +.window.no-focus .pane-sm.sidebar { + background-color: rgb(246, 246, 246); +} + + +.window.no-focus .list-select li.active { + background-color: rgb(219, 219, 219); +} + + + +.window.no-focus .btn-group .btn-segment.active { + background-image: none; + background-color: rgb(225, 225, 225); + border-color: #d5d5d5; + border-top-color: rgb(195, 195, 195); + border-bottom-color: rgb(174, 174, 174); + border-left-color: rgb(195, 195, 195); + border-right-color: rgb(195, 195, 195); + color: #111; + font-weight: 400; + box-shadow: none; + +} + + + +.window.no-focus .btn-system.btn-active { + background-image: none; + padding: 0px 16px; + font-weight: 400; + letter-spacing: 0.4px; + border-radius: 4.5px; + border-top-color: rgb(198, 198, 198); + border-bottom-color: rgb(170, 170, 170); + border-left-color: rgb(192, 192, 192); + border-right-color: rgb(192, 192, 192); + color: #000; +} + + + +.window.no-focus .slider-round { + background-image: url('data:image/svg+xml;utf8,'); +} + + + +.window { + background-color: transparent; +} +ph-window[data-vibrancy] { + background-color: transparent; +} + +ph-window[data-vibrancy] .pane-sm { + background-color: transparent; + background-color: rgba(255, 255, 255, 0.6); +} + +ph-window:not([data-vibrancy]) .pane-group { + background-color: rgba(255, 255, 255, 0.9); +} + + +.icon { + margin: 0px 5px 0px 0px !important; +} + +.pane-group .pane, .pane-group .pane-sm { + overflow: scroll; +} + +tool-bar .toolbar-actions { + +} diff --git a/dist/PhotonCustom/custom.js b/dist/PhotonCustom/custom.js new file mode 100644 index 0000000..e69de29 diff --git a/dist/PhotonCustom/package.json b/dist/PhotonCustom/package.json new file mode 100644 index 0000000..41cb5e5 --- /dev/null +++ b/dist/PhotonCustom/package.json @@ -0,0 +1,14 @@ +{ + "name": "photoncustom", + "version": "0.1.0", + "description": "Custom photon controller", + "main": "custom.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "custom" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonDialog/README.md b/dist/PhotonDialog/README.md new file mode 100644 index 0000000..464d3bb --- /dev/null +++ b/dist/PhotonDialog/README.md @@ -0,0 +1,69 @@ +# Dialog + +A controller for native modal windows connected to **Photon**. + +![Dialog](https://dev.maurice-conrad.eu/img/photon/dialog1.png) + +To define a dialog's content use a `x-template` ` + ... + +``` + +## API + +Just call `Photon.Dialog()` with your *x-template* ` +``` + +### Custom Controller + +Because the dialog will be rendered in a own window and therefore within a separate webview, you can load a javascript controller in the `` of your dialog webview using the `data-js` attribute. + + +```html + +``` + +Please note that your `data-js` file is added to the `` of your dialog's webview which means that the content is not loaded while executing the code. To make things working, you should listen to `load` event ;-) + +There also exists a global `Photon` instance in your dialog's storage that is initialized automatically. + +#### Important! + +Adding an inline ` + + + +
    + +
    + + diff --git a/dist/PhotonInput/InputStepper.js b/dist/PhotonInput/InputStepper.js new file mode 100644 index 0000000..44a9f9f --- /dev/null +++ b/dist/PhotonInput/InputStepper.js @@ -0,0 +1,72 @@ +class PhotonInputStepper extends HTMLElement { + constructor() { + super(); + /* + const shadow = this.attachShadow({mode: 'open'}); + + const addButton = document.createElement("button"); + const subButton = document.createElement("button"); + + shadow.append(` + + `); + + shadow.appendChild(addButton); + shadow.appendChild(subButton);*/ + + this.addEventListener("click", this.__handleClick); + + } + get buttons() { + const buttons = this.getElementsByTagName("button"); + return { + add: buttons[0], + sub: buttons[1] + }; + } + get for() { + return document.querySelector(this.getAttribute("for")); + } + set for(value) { + this.setAttribute("for", value); + } + get min() { + return parseFloat(this.for.min) || PhotonInputStepper.__defaultMin; + } + get max() { + return parseFloat(this.for.max) || PhotonInputStepper.__defaultMax; + } + get step() { + return parseFloat(this.for.step) || PhotonInputStepper.__defaultStep; + } + get value() { + return parseFloat(this.for.value); + } + __handleClick(event) { + const button = event.target.closest("button"); + + if (button === this.buttons.add) { + this.add(this.step); + } + else if (button === this.buttons.sub) { + this.add(-this.step); + } + this.for.dispatchEvent(new Event("input", { + cancelable: true, + bubbles: true + })); + } + add(number) { + var newValue = this.value + number; + if (newValue > this.max) newValue = this.max; + if (newValue < this.min) newValue = this.min; + this.for.value = newValue; + } +} +PhotonInputStepper.__defaultStep = 1; +PhotonInputStepper.__defaultMax = Infinity; +PhotonInputStepper.__defaultMin = -Infinity; + +module.exports = PhotonInputStepper; diff --git a/dist/PhotonInput/InputValuePrototype.js b/dist/PhotonInput/InputValuePrototype.js new file mode 100644 index 0000000..c4b5ea8 --- /dev/null +++ b/dist/PhotonInput/InputValuePrototype.js @@ -0,0 +1,54 @@ +const valueDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value"); + +Object.defineProperty(HTMLInputElement.prototype, "value", { + get() { + var suffix = this.getAttribute("data-suffix") || ""; + var value = valueDescriptor.get.apply(this); + // If the type is "number", it will be replaced with "text" to allow normal chars like a-z. But it adds 'type-rule' for identifing it as an number field (only such fields will use the replace function that removes all chars except 0-9, '.' and '-') + if (this.type === "number" && suffix) { + this.type = "text"; + this.setAttribute("data-type-rule", "suffix"); + } + // Replace all chars except 0-9, '.', '-' + if (this.getAttribute("data-type-rule") === "suffix") { + value = value.replace(/[^[0-9]\.\-]/g, ""); + return parseFloat(value) ? parseFloat(value) : value; + } + return value; + }, + set(value) { + var suffix = this.getAttribute("data-suffix") || ""; + // If the type is "number", it will be replaced with "text" to allow normal chars like a-z. But it adds 'type-rule' for identifing it as an number field (only such fields will use the replace function that removes all chars except 0-9, '.' and '-') + if (this.type === "number" && suffix) { + this.type = "text"; + this.setAttribute("data-type-rule", "suffix"); + } + // Matches all input fields that have lost their 'number' type because of avoid the limitation 'number-chars-only' + if (this.getAttribute("data-type-rule") === "suffix") { + value = value + suffix; + } + valueDescriptor.set.apply(this, [value]); + return true; + } +}); + +const newValueDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value"); + + +window.addEventListener("change", function(event) { + var suffix = event.target.getAttribute("data-suffix") || ""; + if (suffix) { + event.target.value = event.target.value; + } +}); + +window.addEventListener("load", function(event) { + var numberSuffixInputs = document.querySelectorAll("input[data-suffix]"); + for (var i = 0; i < numberSuffixInputs.length; i++) { + numberSuffixInputs[i].value = numberSuffixInputs[i].value; + } +}); + + + +module.exports = newValueDescriptor; diff --git a/dist/PhotonInput/README.md b/dist/PhotonInput/README.md new file mode 100644 index 0000000..74771fb --- /dev/null +++ b/dist/PhotonInput/README.md @@ -0,0 +1,29 @@ +# Input + + +## Simple Input Field + + +```html + +``` +![Input Field](https://dev.maurice-conrad.eu/img/photon/input1.png) +![Input Field Focused](https://dev.maurice-conrad.eu/img/photon/input2.png) + +## Number Input with Steppers + +```html + + + + + + + +``` + +![Number Input with Stepper](https://dev.maurice-conrad.eu/img/photon/input3.png) + +## API + +Just listen on your `` elements as you would do normally. You can use `value` property and `input` event as defined by **W3**. diff --git a/dist/PhotonInput/input.css b/dist/PhotonInput/input.css new file mode 100644 index 0000000..fb843a4 --- /dev/null +++ b/dist/PhotonInput/input.css @@ -0,0 +1,237 @@ +input:not([type="range"]):not([type="color"]):not(.message-input) { + height: auto; + height: inherit; + font-size: 12px; + height: 13px; + padding: 10px 6px 10px 6px; + outline: none; + border: 1px solid rgb(213, 213, 213); + margin: 5px; + cursor: text; + -webkit-app-region: no-drag; +} +input:not([type="range"]):not([type="color"]):not(.message-input):focus { + border-radius: 1px; + box-shadow: 0px 0px 0px 3.5px rgba(116, 180, 255, 0.7); + animation: showFocus .3s; + border-color: rgb(122, 167, 221) !important; +} +@keyframes showFocus { + 0% { + border-color: #dbdbdb; + border-radius: -1px; + box-shadow: 0px 0px 0px 14px rgba(145, 191, 245, 0); + /*outline: 14px solid rgba(159, 204, 250, 0); + outline-offset: 0px;*/ + } + 100% { + border-color: rgb(122, 167, 221) !important; + border-radius: 1px; + box-shadow: 0px 0px 0px 3.5px rgba(145, 191, 245, 1); + /*outline: 4px solid rgba(159, 204, 250, 1); + outline-offset: -1px;*/ + } +} + +tool-bar input:not([type="range"]):not([type="color"]):not(.message-input) { + font-size: 13px; + height: 14px; + padding: 11px 6px 11px 6px; + border-radius: 4px; + border-color: #c2c2c2; + margin: 0; +} +tool-bar input:not([type="range"]):not([type="color"]):not(.message-input):focus { + border-color: #9fccfa; + border-radius: 4px; +} +input[type="search"] { + text-indent: 0px; + text-align: center; + background-image: url('data:image/svg+xml;utf8,'); + background-size: auto 65%, 100% 100%; + background-position: 5px center, center; + background-repeat: no-repeat; + text-align: center; + text-indent: 12px; + border-radius: 5px !important; +} +tool-bar input[type="search"] { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(255, 255, 255), rgb(241, 240, 240)); + border: 1px solid rgb(167, 167, 167); + border-bottom-color: rgb(178, 178, 178) !important; + border-top-color: rgb(212, 212, 212) !important; + border-left-color: rgb(204, 204, 204) !important; + border-right-color: rgb(204, 204, 204) !important; +} +input[type="search"]:focus { + text-align: left; + text-indent: 15px; + box-shadow: 0px 0px 0px 4.5px rgb(115, 166, 233); + border-bottom-color: #f00 !important; + border-radius: 4px !important; +} +input[type="search"]::-webkit-input-placeholder { + /*text-align: center;*/ + color: rgb(181, 181, 181); + font-weight: 400; + letter-spacing: 0.4px; + +} +input[type="search"]:focus::-webkit-input-placeholder { + /*text-align: left;*/ +} +input[type='number'] { + width: 75px; +} +input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { + transform: translate(27px, 0px) scale(1.5); + opacity: 1; + display: none; + background-color: red !important; + background-image: url('data:image/svg+xml;utf8,'); +} +input[type='number']::-webkit-inner-spin-button { + +} + +input-stepper { + display: block; + margin: 0px 3px 0px 0px; + font-size: 0; + height: 20px; + width: 13px; + box-sizing: border-box; + border: 1px solid rgb(202, 202, 202); + border-radius: 5px; + display: inline-block; + vertical-align: middle; + background-color: #fff; +} +input + input-stepper { + margin-top: -1px; +} +input-stepper button { + padding: 0; + border: none; + width: 100%; + height: 50%; + background-color: transparent; + outline: none; + background-repeat: no-repeat; + background-position: center; + z-index: 2; +} +input-stepper button:active { + z-index: 1; +} +input-stepper button:nth-child(1) { + border-radius: 5px 5px 0px 0px; + background-image: url('data:image/svg+xml;utf8,'); +} +input-stepper button:nth-child(2) { + border-radius: 0px 0px 5px 5px; + background-image: url('data:image/svg+xml;utf8,'); +} +input-stepper button:nth-child(1):active { + box-shadow: 0px 0px 0px 1px rgb(39, 122, 252); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(76, 154, 255), rgb(41, 129, 246)); +} +input-stepper button:nth-child(2):active { + box-shadow: 0px 0px 0px 1px rgb(8, 80, 234); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(38, 127, 247), rgb(7, 102, 233)); +} + +@media only screen and (min--moz-device-pixel-ratio: 2), +only screen and (-o-min-device-pixel-ratio: 2/1), +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and (min-device-pixel-ratio: 2) { + input-stepper { + border: 1px solid rgb(202, 202, 202); + border: none; + box-shadow: 0px 0px 0px 0.5px rgb(189, 189, 189); + width: 12px; + } + input-stepper button:nth-child(1) { + background-image: url('data:image/svg+xml;utf8,'); + } + input-stepper button:nth-child(2) { + background-image: url('data:image/svg+xml;utf8,'); + } + input-stepper button:nth-child(1):active { + box-shadow: 0px 0px 0px 0.5px rgb(39, 122, 252); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(76, 154, 255), rgb(41, 129, 246)); + } + input-stepper button:nth-child(2):active { + box-shadow: 0px 0px 0px 0.5px rgb(8, 80, 234); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(38, 127, 247), rgb(7, 102, 233)); + } +} +input[data-type-rule="suffix"] { + width: 75px; +} + + + +:host button { + opacity: 0.1; + padding: 0; + border: none; + width: 100%; + height: 50%; + background-color: transparent; + outline: none; + background-repeat: no-repeat; + background-position: center; + z-index: 2; +} +button:active { + z-index: 1; +} +input-stepper button:nth-child(1) { + border-radius: 5px 5px 0px 0px; + background-image: url('data:image/svg+xml;utf8,'); +} +input-stepper button:nth-child(2) { + border-radius: 0px 0px 5px 5px; + background-image: url('data:image/svg+xml;utf8,'); +} +input-stepper button:nth-child(1):active { + box-shadow: 0px 0px 0px 1px rgb(39, 122, 252); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(76, 154, 255), rgb(41, 129, 246)); +} +input-stepper button:nth-child(2):active { + box-shadow: 0px 0px 0px 1px rgb(8, 80, 234); + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(rgb(38, 127, 247), rgb(7, 102, 233)); +} + +.pane-group > * header { + text-align: center; +} +/* +.pane-group > * header { + display: flex; +} +.pane-group > * header > * { + flex: 0; +} +.pane-group > * header .input-sidebar { + flex: 1; +}*/ + +.input-sidebar { + background-color: rgba(35, 35, 35, 0.1); + border-color: rgba(129, 129, 129, 0.2) !important; + border-radius: 1px !important; + +} +.input-sidebar::-webkit-input-placeholder { + +} diff --git a/dist/PhotonInput/input.js b/dist/PhotonInput/input.js new file mode 100644 index 0000000..5ac5308 --- /dev/null +++ b/dist/PhotonInput/input.js @@ -0,0 +1,10 @@ +const Input = { + InputStepper: require('./InputStepper'), + InputSuffixPropertyDescriptor: require('./InputValuePrototype') +}; + + +customElements.define("input-stepper", Input.InputStepper); + + +module.exports = Input; diff --git a/dist/PhotonInput/package.json b/dist/PhotonInput/package.json new file mode 100644 index 0000000..f1b0439 --- /dev/null +++ b/dist/PhotonInput/package.json @@ -0,0 +1,15 @@ +{ + "name": "photoninput", + "version": "0.0.1", + "description": "Input controllers", + "main": "input.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "input", + "controller" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonMenu/README.md b/dist/PhotonMenu/README.md new file mode 100644 index 0000000..d872876 --- /dev/null +++ b/dist/PhotonMenu/README.md @@ -0,0 +1,53 @@ +# Drop Down Menu + +![Dialog](https://dev.maurice-conrad.eu/img/photon/dropdown1.png) + +The dropdown menu is just a controller that binds a native `Menu` from *Electron* to the bottom of a target. +Therefore have a look at the Electrons [Menu API](https://electronjs.org/docs/api/menu#menubuildfromtemplatetemplate). + +## API + +To open such a *drop down menu*, just use the static `DropDown` method of your `Photon` instance. + +```javascript +// 'target' is just the to which's bottom your menu should be positioned +// 'template' is just a normal electron template you already know + +// Returns a electron menu class instance +const menu = Photon.DropDown(target, template); + +// Log the menu normally +console.log(menu); +``` + +### Note + +Because the drop down menu is just a normal electron menu, `DropDown` will return such a *menu class instance*. You are abled to use this class normally with all its methods and properties as you know from [Electron API](https://electronjs.org/docs/api/menu) + +### Example + +```javascript +const myButton = document.querySelector("button"); // Get your button here + +const myDropDownMenu = Photon.DropDown(myButton, [ + { + label: "Item 1", + submenu: [ + { + label: "Sub Item 1.1", + click: function() { + console.log("Clicked Sub Item 1.1"); + } + } + ] + }, + { + label: "Item 2", + submenu: [ + { + label: "Sub Item 2.1" + } + ] + } +]); +``` diff --git a/dist/PhotonMenu/dropdown.js b/dist/PhotonMenu/dropdown.js new file mode 100644 index 0000000..630e8a5 --- /dev/null +++ b/dist/PhotonMenu/dropdown.js @@ -0,0 +1,15 @@ +const { Menu } = require('electron').remote; + +module.exports = function DropDown(target, template) { + // Create menu from options template + const menu = Menu.buildFromTemplate(template); + // Get boundings of target + const targetBounds = target.getBoundingClientRect(); + // Popup menu and set its position + const res = menu.popup({ + x: Math.round(targetBounds.left), + y: Math.round(targetBounds.top + targetBounds.height + 6), + async: true + }); + return menu; +} diff --git a/dist/PhotonMenu/package.json b/dist/PhotonMenu/package.json new file mode 100644 index 0000000..0add97d --- /dev/null +++ b/dist/PhotonMenu/package.json @@ -0,0 +1,16 @@ +{ + "name": "photonmenu", + "version": "0.1.0", + "description": "Photon dropdown menu", + "main": "dropdown.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "drop", + "down", + "menu" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonMessages/MessageContent.js b/dist/PhotonMessages/MessageContent.js new file mode 100644 index 0000000..1b96ca0 --- /dev/null +++ b/dist/PhotonMessages/MessageContent.js @@ -0,0 +1,9 @@ +class MessageContent extends HTMLElement { + constructor() { + super(); + + + //console.log(this); + } +} +module.exports = MessageContent; diff --git a/dist/PhotonMessages/MessageDescription.js b/dist/PhotonMessages/MessageDescription.js new file mode 100644 index 0000000..425782b --- /dev/null +++ b/dist/PhotonMessages/MessageDescription.js @@ -0,0 +1,9 @@ +class MessageDescription extends HTMLElement { + constructor() { + super(); + + + //console.log(this); + } +} +module.exports = MessageDescription; diff --git a/dist/PhotonMessages/MessagesView.js b/dist/PhotonMessages/MessagesView.js new file mode 100644 index 0000000..d50edcb --- /dev/null +++ b/dist/PhotonMessages/MessagesView.js @@ -0,0 +1,72 @@ +const { argumentsSort } = require('./../../helper'); + +class MessagesView extends HTMLElement { + constructor() { + super(); + + //console.log(this); + } + add() { + const self = this; + + var { message, text } = argumentsSort(arguments, { + text: "string", + message: "object" + }); + + message = (message || {}).fillDefaults({ + content: { + type: "text/plains", + source: text || "" + }, + timestamp: new Date().getTime(), + type: "self" + }); + Object.defineProperty(message, "id", { + get() { + for (var i = 0; i < self.messages.length; i++) { + if (this === self.messages[i]) { + return i; + } + } + } + }); + + this.messages.push(message); + + this.__render(message); + + return message; + } + __render(message) { + const li = document.createElement("li"); + li.setAttribute("type", message.type); + li.__proto__.message = message; + + const msgContent = document.createElement("message-content"); + const msgDescription = document.createElement("message-description"); + + for (let handler of this.__contentTypeHandler) { + let handleable = message.content.type.match(handler.type); + if (handleable) { + handler.content(msgContent, message, li, this); + handler.description(msgDescription, message, li, this); + break; + } + } + + li.appendChild(msgContent); + li.appendChild(msgDescription); + + message.__listItem = li; + + this.messagesList.appendChild(li); + } + get messagesList() { + return this.getElementsByClassName('messages')[0]; + } +} +MessagesView.prototype.messages = []; + +MessagesView.prototype.__contentTypeHandler = require('./contentHandler.js'); +module.exports = MessagesView; diff --git a/dist/PhotonMessages/README.md b/dist/PhotonMessages/README.md new file mode 100644 index 0000000..892ef70 --- /dev/null +++ b/dist/PhotonMessages/README.md @@ -0,0 +1,97 @@ +# Messages + +![Messages](https://dev.maurice-conrad.eu/img/photon/messages.png) + +## Layout + +```html + +
      + +
    + +
    + + + +
    +     +``` + +### Message + +A message is just an `
  • ` element with a typically syntax. + +```html +
  • + + Chat with Somebody + + + Today, 11:00 + +
    • +``` + +There exist **3** types of messages. + +1. `system`: A message that comes from the chat system and is displayed in center of screen (no bubble) +2. `self`: A message that is sent from the client (blue) +3. `extern`: A message that was sent to the client (gray) + +To define the `type` of a message, just set the `
  • `'s `type` attribute to `system`, `self` or `extern`. + +### Toolbar + +As you may already saw, you can use a **toolbar** for the bottom of your chat. The toolbar is optional. + +This is a sample content for the toolbar but you can do whatever you want there. + +```html +... +
    + + + +
    +... +``` + +## API + +It is not very smart to add every message as elements. Therefore exist an API to handle a ``'s lifecycle more smart. + +### Get Messages + +Just get the `messages` property of your `` element and you get every message as object. + +```javascript +const messages = myMessageView.messages; + +console.log(messages); +``` + +### Add Message + +All keys of the options are optional. + +#### Simple Text + +```javascript +messagesView.add("Hey", { + type: "self" +}); +``` + +#### Image + +```javascript +messagesView.add("https://maurice-conrad.eu/acting/images/big-narrenkaefig-5.jpg", { + type: "self", + content: { + type: "image/png" + } +}); +``` + +You can pass the message source (Filepath or text string) as string to the method or into the `source` key of `content` in the object. diff --git a/dist/PhotonMessages/contentHandler.js b/dist/PhotonMessages/contentHandler.js new file mode 100644 index 0000000..3f9b226 --- /dev/null +++ b/dist/PhotonMessages/contentHandler.js @@ -0,0 +1,53 @@ +const staticHandlers = { + descriptionDefault(descriptionElement, message, li, self) { + const now = new Date(); + const time = new Date(message.timestamp); + var timeStr = time.getHours() + ":" + time.getMinutes(); + // If the difference of the message is more away than 1 day + if (now.getTime() - time > 86400000 || true) { + timeStr = time.getDate() + "." + (time.getMonth() + 1) + "." + time.getFullYear() + ", " + timeStr + } + descriptionElement.append(timeStr); + + if (self.messages[message.id - 1] && message.timestamp - self.messages[message.id - 1].timestamp < 60 * 1000) { + //descriptionElement.hidden = true; + } + } +}; + +module.exports = [ + { + type: /^text\/.*$/, + content(contentElement, message, li, self) { + contentElement.append(message.content.source); + }, + description: staticHandlers.descriptionDefault + }, + { + type: /^image\/.*$/, + content(contentElement, message, li, self) { + const img = document.createElement("img"); + img.src = message.content.source; + contentElement.append(img); + li.classList.add("attachment"); + }, + description: staticHandlers.descriptionDefault + }, + { + type: /^audio\/.*$/, + content(contentElement, message, li, self) { + + const audio = document.createElement("audio"); + audio.controls = true; + audio.src = message.content.source; + contentElement.append(audio); + //console.log(audio); + //audio.play(); + //audio.attachShadow({mode: 'open'}); + //audio.attachShadow({mode: 'close'}); + + li.classList.add("attachment"); + }, + description: staticHandlers.descriptionDefault + } +]; diff --git a/dist/PhotonMessages/messages.css b/dist/PhotonMessages/messages.css new file mode 100644 index 0000000..bd4d557 --- /dev/null +++ b/dist/PhotonMessages/messages.css @@ -0,0 +1,252 @@ +messages-view { + width: 100%; + height: 100%; + display: block; +} +messages-view .toolbar { + height: 40px; + box-sizing: border-box; + border: 0px solid rgb(220, 220, 220); + background-color: rgb(240, 240, 240); + background-color: none !important; + -webkit-backdrop-filter: blur(1px); + background-image: none !important; + vertical-align: middle; + width: 100%; +} +messages-view .toolbar:first-child { + border-bottom-width: 1px; + -webkit-app-region: drag; + height: 55px; + box-sizing: padding-box; +} +messages-view .toolbar .bar-inner { + padding: 25px 0px 0px 10px; +} +messages-view .toolbar:last-child { + border-top-width: 1px; +} +messages-view .messages { + display: block; + list-style: none; + padding: 0; + margin: 0; + height: calc(100% - 95px); + background-color: #fff; + overflow: scroll; + max-width: 100%; +} +messages-view .messages:last-child { + height: calc(100% - 55px); +} +messages-view .messages:first-child { + height: calc(100% - 40px); +} +messages-view .messages:only-child { + height: 100%; +} +messages-view .messages { + padding: 10px 0px; +} +messages-view .messages li { + width: 100%; + box-sizing: padding-box; + margin-bottom: 1px; + max-width: 100%; +} +messages-view .messages li:not([type="system"]) message-content { + display: inline-block; + max-width: 60%; + padding: 3px 10px; + border-radius: 13px; + text-align: left; + -webkit-user-select: all; +} +messages-view .messages li[type="self"] + li[type="extern"], messages-view .messages li[type="extern"] + li[type="self"] { + margin-top: 30px; +} +messages-view .messages li message-description, messages-view .messages li[type="system"] { + color: rgb(142, 142, 147); + font-weight: 500; + font-size: 11px; + letter-spacing: 0.4px; + margin-bottom: 10px; + display: block; +} +messages-view .messages li message-description:empty { + margin-bottom: 0; +} +messages-view .messages li[type="system"] { + width: 100%; + text-align: center; +} +messages-view .messages li[type="self"] { + text-align: right; + padding: 0px 15px 0px 0px; +} +messages-view .messages li[type="extern"] { + text-align: left; + padding: 0px 0px 0px 15px; +} +messages-view .messages li[type="self"] message-content { + background-image: linear-gradient(rgb(29, 144, 249), rgb(15, 132, 248)); + border-radius: 13px 13px 0px 13px; + -webkit-mask-image: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'); + -webkit-mask-position: calc(100% - 0.5px) calc(100% + 5px), left top, calc(100% + 0px) calc(100% + 6px); + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 14px 14px, calc(100% - 7px) 100%, 22px 15px; /*calc(100% - 7px) 100%*/ + color: #fff; + padding: 3px 15px 3px 10px; + font-weight: 300; + letter-spacing: 0.75px; +} +messages-view .messages li.active message-content { + background-image: none; + display: block; +} +messages-view .messages li[type="self"].active message-content { + background-color: rgb(101, 168, 234); +} +messages-view .messages li[type="extern"].active message-content { + background-color: rgb(206, 206, 210); /*rgb(195, 195, 200) rgb(182, 182, 188)*/ +} +messages-view .messages li[type="extern"] message-content { + background-color: rgb(229, 229, 234); + border-radius: 13px 13px 13px 0px; + -webkit-mask-image: url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'), + url('data:image/svg+xml;utf8,'); + -webkit-mask-position: 0.5px calc(100% + 5px), 5.5px top, calc(100% + 0px) calc(100% + 6px); + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: 14px 14px, calc(100% - 6.5px) 100%, 22px 15px; /*calc(100% - 7px) 100%*/ + padding: 3px 10px 3px 15px; + letter-spacing: 0.25px; +} +messages-view .messages li.attachment message-content { + padding: 0; + margin: 0; + font-size: 0; +} +messages-view .messages li.attachment message-content img { + max-width: 100%; +} +messages-view .messages li audio::-webkit-media-controls-panel { + background-color: transparent; +} +messages-view .messages li[type="self"] { + --fillColor: #fff; +} +messages-view .messages li[type="extern"] { + --fillColor: #000; +} + + +audio { + display: block; +} + + +messages-view .messages li audio::-webkit-media-controls-play-button, +messages-view .messages li audio::-webkit-media-controls-mute-button { + background-color: var(--fillColor); + width: 25px; + height: 25px; + margin: 0px 10px; +} +messages-view .messages li audio::-webkit-media-controls-play-button { + -webkit-mask-image: url('data:image/svg+xml;utf8,'); +} +messages-view .messages li audio::-webkit-media-controls-mute-button { + -webkit-mask-image: url('data:image/svg+xml;utf8, '); +} +messages-view .messages li[type="self"] audio::-webkit-media-controls-play-button { + margin: 0px 5px; +} +messages-view .messages li[type="self"] audio::-webkit-media-controls-mute-button { + margin: 0px 10px 0px 0px; +} +messages-view .messages li[type="extern"] audio::-webkit-media-controls-play-button { + margin: 0px 10px; +} +messages-view .messages li[type="extern"] audio::-webkit-media-controls-mute-button { + margin: 0px 5px 0px 0px; +} +messages-view .messages li audio::-webkit-media-controls-timeline-container { + background-color: red; +} +messages-view .messages li audio::-webkit-media-controls-timeline { + background-color: var(--fillColor); +} +/*audio::-webkit-media-controls-volume-slider { + -webkit-filter: hue-rotate(143deg) saturate(10); +}*/ +messages-view .messages li audio::-webkit-media-controls-timeline { + -webkit-filter: brightness(0);/*hsl(0, 0%, 100%)*/ +} +messages-view .messages li[type="self"] audio::-webkit-media-controls-timeline { + -webkit-filter: brightness(0) invert(1);/*hsl(0, 0%, 100%)*/ +} +messages-view .messages li audio::-webkit-media-controls-volume-slider { + display: none; +} +messages-view .messages li audio::-webkit-media-controls-current-time-display, +messages-view .messages li audio::-webkit-media-controls-time-remaining-display { + color: var(--fillColor); +} + +messages-view .messages li { + +} +messages-view .messages li { + +} +messages-view .message-input { + height: 23px; + font-size: 12px !important; + box-sizing: border-box; + border: 1px solid rgb(223, 223, 223) !important; + margin: calc((38px - 23px) / 2) 0px 0px 15px; + border-radius: 12px !important; + text-indent: 10px; + font-weight: 400; + letter-spacing: 0.5px; + color: rgb(75, 75, 75) !important; /*rgb(153, 153, 153)*/ + outline: none; + cursor: text; + width: calc(100% - 60px); +} +messages-view .toolbar .btn-mic, messages-view .toolbar .btn-emojis { + background-color: transparent; + box-shadow: none; + height: 18px; + width: 18px; + background-color: rgb(127, 127, 127); + -webkit-mask-repeat: none; + -webkit-mask-position: left top; + -webkit-mask-size: 100% 100%; + margin-left: 10px; +} +messages-view .toolbar .btn:active { + background-color: rgb(50, 50, 50); +} +messages-view .toolbar .btn.btn-input { + margin-left: -25px; +} +messages-view .toolbar .btn.btn-emojis { + -webkit-mask-image: url('data:image/svg+xml;utf8,'); +} +messages-view .toolbar .btn.btn-mic { + -webkit-mask-image: url('data:image/svg+xml;utf8, '); +} +.btn-text { + background-color: transparent; + color: rgb(38, 140, 251); + box-shadow: none; + font-weight: 400; + letter-spacing: 0.5px !important; +} +.btn.btn-text:active { + background-color: transparent !important; +} diff --git a/dist/PhotonMessages/messages.js b/dist/PhotonMessages/messages.js new file mode 100644 index 0000000..eaab98c --- /dev/null +++ b/dist/PhotonMessages/messages.js @@ -0,0 +1,12 @@ + +const Messages = { + MessagesView: require('./MessagesView'), + MessageContent: require('./MessageContent'), + MessageDescription: require('./MessageDescription') +}; + + + +customElements.define("messages-view", Messages.MessagesView); +customElements.define("message-content", Messages.MessageContent); +customElements.define("message-description", Messages.MessageDescription); diff --git a/dist/PhotonMessages/package.json b/dist/PhotonMessages/package.json new file mode 100644 index 0000000..fe8173a --- /dev/null +++ b/dist/PhotonMessages/package.json @@ -0,0 +1,15 @@ +{ + "name": "photonmessages", + "version": "0.0.1", + "description": "Messages controller", + "main": "messages.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "messages", + "controller" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonNavigation/NavGroup.js b/dist/PhotonNavigation/NavGroup.js new file mode 100644 index 0000000..5303d49 --- /dev/null +++ b/dist/PhotonNavigation/NavGroup.js @@ -0,0 +1,12 @@ +class NavigationGroup extends HTMLElement { + constructor() { + super(); + + //console.log(this); + } + get items() { + return this.getElementsByTagName("nav-item"); + } +} + +module.exports = NavigationGroup; diff --git a/dist/PhotonNavigation/NavItem.js b/dist/PhotonNavigation/NavItem.js new file mode 100644 index 0000000..24a5afb --- /dev/null +++ b/dist/PhotonNavigation/NavItem.js @@ -0,0 +1,30 @@ +class NavigationItem extends HTMLElement { + constructor() { + super(); + + this.addEventListener("click", event => this.__handleClick(event)); + } + activate() { + for (let item of this.group.items) { + item.classList.remove("active"); + } + this.classList.add("active"); + } + get group() { + return this.closest("nav-group"); + } + __handleClick(event) { + if (!this.classList.contains("active")) { + this.activate(); + + this.dispatchEvent(new CustomEvent("activate", { + bubbles: true, + detail: { + + } + })); + } + } +} + +module.exports = NavigationItem; diff --git a/dist/PhotonNavigation/README.md b/dist/PhotonNavigation/README.md new file mode 100644 index 0000000..73093a2 --- /dev/null +++ b/dist/PhotonNavigation/README.md @@ -0,0 +1,63 @@ +# Navigation List + +![Navigation List](https://dev.maurice-conrad.eu/img/photon/navigation2.png) + +```html + +
    Favorites
    + +
    + +
    + connors +     + +
    + +
    + Downloads +     + +
    + +
    + Documents +     + +
    + +
    + AirPlay +     + +
    + +
    + Applications +     + +
    + +
    + Desktop +     +     +``` + +### Usage With Panes + +To make a navigation group looking nice, use it within a `pane-sm sidebar` **pane** ;-) + +```html +
    + +
    + +
    + +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
    + +
    +``` diff --git a/dist/PhotonNavigation/navigation.css b/dist/PhotonNavigation/navigation.css new file mode 100644 index 0000000..ef42ef1 --- /dev/null +++ b/dist/PhotonNavigation/navigation.css @@ -0,0 +1,11 @@ +nav-group { + display: block; + +} +nav-group nav-item.active { + background-color: rgba(69, 69, 69, 0.15); +} +nav-group nav-item:not(.active):active { + background-color: transparent; + +} diff --git a/dist/PhotonNavigation/navigation.js b/dist/PhotonNavigation/navigation.js new file mode 100644 index 0000000..c2b03be --- /dev/null +++ b/dist/PhotonNavigation/navigation.js @@ -0,0 +1,10 @@ +const Navigation = { + NavigationGroup: require("./NavGroup"), + NavigationItem: require("./NavItem") +}; + +customElements.define("nav-group", Navigation.NavigationGroup); +customElements.define("nav-item", Navigation.NavigationItem); + + +console.log(Navigation); diff --git a/dist/PhotonNavigation/package.json b/dist/PhotonNavigation/package.json new file mode 100644 index 0000000..7814f19 --- /dev/null +++ b/dist/PhotonNavigation/package.json @@ -0,0 +1,14 @@ +{ + "name": "photonnavigation", + "version": "0.1.0", + "description": "Photon navigation controller", + "main": "navigation.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "navigation" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonNumberInput/Number.js b/dist/PhotonNumberInput/Number.js new file mode 100644 index 0000000..7bd2c44 --- /dev/null +++ b/dist/PhotonNumberInput/Number.js @@ -0,0 +1,224 @@ +class NumberInput extends HTMLElement { + constructor() { + super(); + + + window.addEventListener("mousedown", (event) => { + if (this != event.target) { + this.focus = false; + } + }); + + this.addEventListener("click", function(event) { + this.focus = true; + }) + + window.addEventListener("keydown", event => { + if (this.focus) { + this.__handleKeyPress(event); + NumberInput.__keyPressed = true; + } + }); + window.addEventListener("keyup", event => { + NumberInput.__keyPressed = false; + }); + // Cursor for handling input + this.cursor = 0; + + this.__value = 0; + } + attributeChangedCallback(attr, oldValue, newValue) { + this.__setValue(newValue); + } + __handleKeyPress(event) { + // Get method name of handler + var handlerMethod = (function(keyCode) { + // Loop trough records and check them for possibility to handle the current key code + for (let record of NumberInput.__keyCodes) { + // Match the key code with the code matcher of the current record + const keyCodeMatch = keyCode.match(record.code); + // If the match is valid, return this record as the valid handler + if (keyCodeMatch) { + return { + name: record.name, + // Use all variables from match result (regular expression groups) excepting the first one because this is always the text itself + matchResult: Array.from(keyCodeMatch.slice(1)) + }; + } + } + })(event.code); + // If there exist a handler for this kind of key code, use it + if (handlerMethod) { + // Call the handler by its name and send all match variables (e.g. match groups) as arguments to the handler + this.keyHandlers[handlerMethod.name].apply(this, handlerMethod.matchResult); + this.registerFillTimer(); + + this.dispatchEvent(new Event("input", { + bubbles: true, + detail: { + + } + })); + } + } + fill() { + // Get the amount of digits that will be filled up + const fillCount = this.maxlength - this.digits.length; + + const newDigits = new Array(fillCount).fill(0).concat(this.digits); + + //this.value = newDigits.join(""); + this.__setValue(newDigits.join("")); + } + registerFillTimer() { + // Get current time and store it to prevent old timers to be fired + this.lastTimerTime = new Date().getTime(); + // Create new timeout for + setTimeout((thisTimer) => { + // If this timer is the last one + if (this.lastTimerTime === thisTimer) { + this.fill(); + } + }, this.cursorTimeout, this.lastTimerTime); + } + get cursorTimeout() { + return parseInt(this.getAttribute("data-cursortimeout")) || NumberInput.__defaultCursorTimeout; + } + get value() { + return new Number(this.__value); + } + get textValue() { + return new String(this.__value).padStart(this.maxlength, "\u00A0"); + } + set value(value) { + this.__setValue(value); + + this.setAttribute("value", this.value); + } + __setValue(value) { + // If the value is too big + if (value > this.max) { + // Set value to minimum (if exists) or to maximum instead + value = this.min + Infinity ? this.min : this.max; + } + if (value < this.min) { + // Set value to maximum (if exists) or to minimum instead + value = this.max - Infinity ? this.max : this.min; + } + this.__value = value; + + while (this.childNodes.length > 0) { + this.removeChild(this.childNodes[0]); + } + + const textNode = document.createTextNode(this.textValue); + + this.appendChild(textNode); + } + get digits() { + return this.textValue.replace(/\s/g, "").split("").map(number => parseInt(number)); + } + get maxlength() { + return (new Number(this.getAttribute("maxlength")) + 0) || 1; + } + set maxlength(length) { + this.setAttribute("maxlength", length); + } + get max() { + return new Number(this.getAttribute("max") || NumberInput.__defaultMax); + } + set max(maximal) { + this.setAttribute("max", maximal); + } + get min() { + return new Number(this.getAttribute("min") || NumberInput.__defaultMin); + } + set min(minimum) { + this.setAttribute("min", minimum); + } + get step() { + return new Number(this.getAttribute("step") || NumberInput.__defaultStep); + } + set step(stepValue) { + this.setAttribute("step", stepValue); + } + set focus(value) { + if (value) { + this.classList.add("focus"); + } + else { + this.classList.remove("focus"); + } + } + get focus() { + return this.classList.contains("focus"); + } +} +NumberInput.observedAttributes = ["value"]; +NumberInput.__defaultCursorTimeout = 1000; +NumberInput.__defaultMin = -Infinity; +NumberInput.__defaultMax = Infinity; +NumberInput.__defaultStep = 1; +// Address each important key to a specific handler method +NumberInput.__keyCodes = [ + { + code: /Digit([0-9])/, + name: "number" + }, + { + code: "ArrowUp", + name: "add" + }, + { + code: "ArrowDown", + name: "sub" + }, + { + code: "ArrowRight", + name: "next" + }, + { + code: "ArrowLeft", + name: "previous" + } +]; +NumberInput.__keyPressed = false; + + +NumberInput.prototype.keyHandlers = { + number(number) { + + number = new Number(number); + + + // If length of 4 is reached, clear value + if (this.digits.length >= this.maxlength) { + this.value = ""; + } + + this.value = this.digits.concat(number).join(""); + }, + add() { + this.value += this.step; + }, + sub() { + this.value -= this.step; + }, + next() { + if (!NumberInput.__keyPressed && this.nextElementSibling instanceof NumberInput) { + this.focus = false; + this.nextElementSibling.focus = true; + } + }, + previous() { + if (!NumberInput.__keyPressed && this.previousElementSibling instanceof NumberInput) { + this.focus = false; + this.previousElementSibling.focus = true; + } + } +}; + + +customElements.define("number-input", NumberInput); + +module.exports = NumberInput; diff --git a/dist/PhotonNumberInput/README.md b/dist/PhotonNumberInput/README.md new file mode 100644 index 0000000..60953dd --- /dev/null +++ b/dist/PhotonNumberInput/README.md @@ -0,0 +1,73 @@ +# Number Input + +![Number Input](https://dev.maurice-conrad.eu/img/photon/numberinput.png) + +This component is a static numeric input that does not provide a cursor as a classically input field would do. You can type in your digits and after a certain timeout your typed digits are interpreted as a number. A new typed digit starts a new number. You also can go up and down with arrows. If your `` is part of a *group*, you can navigate from each to the next or previous one with arrow keys. + +## Layout + +```html + +``` + +The `value` attribute represents the current value. + +### Maxlength + +To define the maximum amount of digits, use the `maxlength` attribute or property of your ``. + +```html + +``` + +### Minimum & Maximum + +```html + +``` + +If a minimum **and** a maximum value are defined both, a *key up* or *key down* will jump to the reverse one (minimum or maximum). + +### Step + +The step size of the steps that will be gone up and down when pressing *key up* or *key down* are represented by the attribute `step` of your ``. + +### Grouping + +To make a group of ``'s related to each other, just use them in a common parent element like a `
    `. + +```html +
    + + + +
    +``` + +## API + +Every attribute is related to a property of your ``. + +```javascript +// Set value +myNumberInput.value = 100; + +// Set maximum +myNumberInput.max = 300; + +// Set minimum +myNumberInput.min = 25; + +// Set step +myNumberInput.step = 5; +``` + +### Input Event + +To recognize when a ``'s value gets changed by user, listen to the `input` event on your element or globally. (Event is bubbling up). + +```javascript +myNumberInput.addEventListener("input", function(event) { + console.log(event); +}); +``` diff --git a/dist/PhotonNumberInput/number-input.css b/dist/PhotonNumberInput/number-input.css new file mode 100644 index 0000000..53e6c56 --- /dev/null +++ b/dist/PhotonNumberInput/number-input.css @@ -0,0 +1,50 @@ +number-input { + padding: 2px 2px; + border-radius: 4px; +} +number-input.focus { + background-color: rgba(138, 191, 254, 0.8); +} + +number-input { + display: inline-block; + min-width: calc(var(--length) * 9.25px); + overflow: hidden; + text-align: right; +} +number-input[maxlength="1"] { + --length: 1; +} +number-input[maxlength="2"] { + --length: 2; +} +number-input[maxlength="3"] { + --length: 3; +} +number-input[maxlength="4"] { + --length: 4; +} +number-input[maxlength="5"] { + --length: 5; +} +number-input[maxlength="6"] { + --length: 6; +} +number-input[maxlength="7"] { + --length: 7; +} +number-input[maxlength="8"] { + --length: 8; +} +number-input[maxlength="9"] { + --length: 9; +} +number-input[maxlength="10"] { + --length: 10; +} +number-input[maxlength="11"] { + --length: 11; +} +number-input[maxlength="12"] { + --length: 12; +} diff --git a/dist/PhotonNumberInput/package.json b/dist/PhotonNumberInput/package.json new file mode 100644 index 0000000..acfcd7b --- /dev/null +++ b/dist/PhotonNumberInput/package.json @@ -0,0 +1,15 @@ +{ + "name": "photonnumberinput", + "version": "0.0.1", + "description": "Number Input controller", + "keywords": [ + "number", + "input" + ], + "license": "ISC", + "author": "Maurice Conrad", + "main": "Number.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + } +} diff --git a/dist/PhotonOriginal/package.json b/dist/PhotonOriginal/package.json new file mode 100644 index 0000000..29e3c6e --- /dev/null +++ b/dist/PhotonOriginal/package.json @@ -0,0 +1,15 @@ +{ + "name": "photonoriginal", + "version": "1.0.0", + "description": "Original photon dependencies", + "main": "photon.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "photon", + "original" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonOriginal/photon-original.css b/dist/PhotonOriginal/photon-original.css new file mode 100644 index 0000000..2ac2e2b --- /dev/null +++ b/dist/PhotonOriginal/photon-original.css @@ -0,0 +1,2363 @@ +/*! + * ===================================================== + * Photon v0.1.2 + * Copyright 2016 Connor Sears + * Licensed under MIT (https://github.com/connors/proton/blob/master/LICENSE) + * + * v0.1.2 designed by @connors. + * ===================================================== + */ + +@charset "UTF-8"; +audio, +canvas, +progress, +video { + vertical-align: baseline; +} + +audio:not([controls]) { + display: none; +} + +a:active, +a:hover { + outline: 0; +} + +abbr[title] { + border-bottom: 1px dotted; +} + +b, +strong { + font-weight: bold; +} + +dfn { + font-style: italic; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +pre { + overflow: auto; +} + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +button, +input, +optgroup, +select, +textarea { + color: inherit; + font: inherit; + margin: 0; +} + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +input[type="search"] { + -webkit-appearance: textfield; + box-sizing: content-box; +} + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +legend { + border: 0; + padding: 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} + +* { + cursor: default; + -webkit-user-select: none; +} + +input, +textarea { + -webkit-user-select: text; +} + +form, +input, +optgroup, +select, +textarea { + -webkit-user-select: text; + -webkit-app-region: no-drag; +} + +* { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html { + height: 100%; + width: 100%; + overflow: hidden; +} + +body { + height: 100%; + padding: 0; + margin: 0; + font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif; + font-size: 13px; + line-height: 1.6; + color: #333; + background-color: transparent; +} + +hr { + margin: 15px 0; + overflow: hidden; + background: transparent; + border: 0; + border-bottom: 1px solid #ddd; +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 20px; + margin-bottom: 10px; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +h1 { + font-size: 36px; +} + +h2 { + font-size: 30px; +} + +h3 { + font-size: 24px; +} + +h4 { + font-size: 18px; +} + +h5 { + font-size: 14px; +} + +h6 { + font-size: 12px; +} + +window-content { + position: relative; + overflow-y: auto; + display: flex; + flex: 1; +} + +.selectable-text { + cursor: text; + -webkit-user-select: text; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.text-left { + text-align: left; +} + +.pull-left { + float: left; +} + +.pull-right { + float: right; +} + +.padded { + padding: 10px; +} + +.padded-less { + padding: 5px; +} + +.padded-more { + padding: 20px; +} + +.padded-vertically { + padding-top: 10px; + padding-bottom: 10px; +} + +.padded-vertically-less { + padding-top: 5px; + padding-bottom: 5px; +} + +.padded-vertically-more { + padding-top: 20px; + padding-bottom: 20px; +} + +.padded-horizontally { + padding-right: 10px; + padding-left: 10px; +} + +.padded-horizontally-less { + padding-right: 5px; + padding-left: 5px; +} + +.padded-horizontally-more { + padding-right: 20px; + padding-left: 20px; +} + +.padded-top { + padding-top: 10px; +} + +.padded-top-less { + padding-top: 5px; +} + +.padded-top-more { + padding-top: 20px; +} + +.padded-bottom { + padding-bottom: 10px; +} + +.padded-bottom-less { + padding-bottom: 5px; +} + +.padded-bottom-more { + padding-bottom: 20px; +} + +.sidebar { + background-color: #f5f5f4; +} + +.draggable { + -webkit-app-region: drag; +} + +.not-draggable { + -webkit-app-region: no-drag; +} + +.clearfix:before, .clearfix:after { + display: table; + content: " "; +} +.clearfix:after { + clear: both; +} + +.btn { + display: inline-block; + padding: 3px 8px; + margin-bottom: 0; + font-size: 12px; + line-height: 1.4; + text-align: center; + white-space: nowrap; + vertical-align: middle; + cursor: default; + background-image: none; + border: 1px solid transparent; + border-radius: 4px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06); + -webkit-app-region: no-drag; +} +.btn:focus { + outline: none; + box-shadow: none; +} + +.btn-mini { + padding: 2px 6px; +} + +.btn-large { + padding: 6px 12px; +} + +.btn-form { + padding-right: 20px; + padding-left: 20px; +} + +.btn-default { + color: #333; + border-top-color: rgb(205, 205, 205); + border-right-color: rgb(205, 205, 205); + border-bottom-color: rgb(177, 177, 177); + border-left-color: rgb(205, 205, 205); + background-image: linear-gradient(rgb(255, 255, 255), rgb(252, 252, 252) 1px, rgb(241, 241, 241)); +} +.btn-default:active { + background-color: #ddd; + background-image: none; +} + +.btn-primary, +.btn-positive, +.btn-negative, +.btn-warning { + color: #fff; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); +} + +.btn-primary { + border-color: #388df8; + border-bottom-color: #0866dc; + background-color: #6eb4f7; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6eb4f7), color-stop(100%, #1a82fb)); + background-image: -webkit-linear-gradient(top, #6eb4f7 0%, #1a82fb 100%); + background-image: linear-gradient(to bottom, #6eb4f7 0%, #1a82fb 100%); +} +.btn-primary:active { + background-color: #3e9bf4; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9bf4), color-stop(100%, #0469de)); + background-image: -webkit-linear-gradient(top, #3e9bf4 0%, #0469de 100%); + background-image: linear-gradient(to bottom, #3e9bf4 0%, #0469de 100%); +} + +.btn-positive { + border-color: #29a03b; + border-bottom-color: #248b34; + background-color: #5bd46d; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bd46d), color-stop(100%, #29a03b)); + background-image: -webkit-linear-gradient(top, #5bd46d 0%, #29a03b 100%); + background-image: linear-gradient(to bottom, #5bd46d 0%, #29a03b 100%); +} +.btn-positive:active { + background-color: #34c84a; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #34c84a), color-stop(100%, #248b34)); + background-image: -webkit-linear-gradient(top, #34c84a 0%, #248b34 100%); + background-image: linear-gradient(to bottom, #34c84a 0%, #248b34 100%); +} + +.btn-negative { + border-color: #fb2f29; + border-bottom-color: #fb1710; + background-color: #fd918d; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd918d), color-stop(100%, #fb2f29)); + background-image: -webkit-linear-gradient(top, #fd918d 0%, #fb2f29 100%); + background-image: linear-gradient(to bottom, #fd918d 0%, #fb2f29 100%); +} +.btn-negative:active { + background-color: #fc605b; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fc605b), color-stop(100%, #fb1710)); + background-image: -webkit-linear-gradient(top, #fc605b 0%, #fb1710 100%); + background-image: linear-gradient(to bottom, #fc605b 0%, #fb1710 100%); +} + +.btn-warning { + border-color: #fcaa0e; + border-bottom-color: #ee9d02; + background-color: #fece72; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fece72), color-stop(100%, #fcaa0e)); + background-image: -webkit-linear-gradient(top, #fece72 0%, #fcaa0e 100%); + background-image: linear-gradient(to bottom, #fece72 0%, #fcaa0e 100%); +} +.btn-warning:active { + background-color: #fdbc40; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdbc40), color-stop(100%, #ee9d02)); + background-image: -webkit-linear-gradient(top, #fdbc40 0%, #ee9d02 100%); + background-image: linear-gradient(to bottom, #fdbc40 0%, #ee9d02 100%); +} + +.btn .icon { + float: left; + width: 14px; + height: 14px; + margin-top: 1px; + margin-bottom: 1px; + color: #737475; + font-size: 14px; + line-height: 1; +} + +.btn .icon-text { + margin-right: 5px; +} + +.btn-dropdown:after { + font-family: "photon-entypo"; + margin-left: 5px; + content: '\e873'; +} +btn-group, +.btn-group { + position: relative; + display: inline-block; + vertical-align: middle; + -webkit-app-region: no-drag; +} +btn-group .btn, +.btn-group .btn { + position: relative; + float: left; +} +btn-group .btn-default.active, +.btn-group .btn-default.active { + border-top-color: rgb(105, 105, 105); + border-bottom: 1px solid rgb(94, 94, 94); + border-right: 1px solid rgb(105, 105, 105) !important; + border-left: 1px solid rgb(105, 105, 105) !important; + +} +btn-group .btn:focus, btn-group .btn:active, +.btn-group .btn:focus, .btn-group .btn:active { + z-index: 2; +} +btn-group .btn.active, +.btn-group .btn.active { + z-index: 3; +} + +btn-group .btn + .btn, +btn-group .btn + btn-group, +btn-group btn-group + .btn, +btn-group btn-group + btn-group, +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { + margin-left: -1px; +} +btn-group > .btn:first-child, +.btn-group > .btn:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +btn-group > .btn:last-child, +.btn-group > .btn:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +btn-group > .btn:not(:first-child):not(:last-child), +.btn-group > .btn:not(:first-child):not(:last-child) { + border-radius: 0; +} +btn-group .btn + .btn, +.btn-group .btn + .btn { + border-left: 1px solid #c2c0c2; +} +btn-group .btn + .btn.active, +.btn-group .btn + .btn.active { + border-left: 0; +} +btn-group .btn.active, +.btn-group .active { + color: #fff; + border: 1px solid transparent; + background-color: #6d6c6d; + background-image: none; +} +btn-group .active .icon, +.btn-group .active .icon { + color: #fff; +} + +tool-bar { + min-height: 22px; + box-shadow: inset 0 1px 0 #f5f4f5; + background-color: #e8e6e8; + background-image: linear-gradient(rgb(233, 233, 233), rgb(233, 233, 233)); + background-image: linear-gradient(rgb(216, 216, 216), rgb(216, 216, 216)); +} +tool-bar:before, tool-bar:after { + display: table; + content: " "; +} +tool-bar:after { + clear: both; +} + +tool-bar[type="header"] { + border-bottom: 1px solid #c2c0c2; +} +tool-bar[type="header"] .title { + margin-top: 1px; +} + +tool-bar[type="footer"] { + border-top: 1px solid #c2c0c2; + -webkit-app-region: drag; +} + +.title { + margin: 0; + font-size: 12px; + font-weight: 400; + text-align: center; + color: #555; + cursor: default; +} + +tool-bar .borderless { + border-top: 0; + border-bottom: 0; +} + +.toolbar-actions { + margin-top: 4px; + margin-bottom: 3px; + padding-right: 3px; + padding-left: 3px; + padding-bottom: 3px; + -webkit-app-region: drag; +} +.toolbar-actions:before, .toolbar-actions:after { + display: table; + content: " "; +} +.toolbar-actions:after { + clear: both; +} +.toolbar-actions > .btn, +.toolbar-actions > .btn-group { + margin-left: 4px; + margin-right: 4px; +} + +label { + display: inline-block; + font-size: 13px; + margin-bottom: 5px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +input[type="search"] { + box-sizing: border-box; +} + +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + line-height: normal; +} + +.form-control { + display: inline-block; + width: 100%; + min-height: 25px; + padding: 5px 10px; + font-size: 13px; + line-height: 1.6; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 4px; + outline: none; +} +.form-control:focus { + border-color: #6db3fd; + box-shadow: 0 0 0 3px #6db3fd; +} + +textarea { + height: auto; +} + +.form-group { + margin-bottom: 10px; +} + +.radio, +.checkbox { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; +} +.radio label, +.checkbox label { + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; +} + +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + position: absolute; + margin-left: -20px; + margin-top: 4px; +} + +.form-actions .btn { + margin-right: 10px; +} +.form-actions .btn:last-child { + margin-right: 0; +} + +.pane-group { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; +} + +.pane { + position: relative; + overflow-y: auto; + flex: 1; + border-left: 1px solid #ddd; +} +.pane:first-child { + border-left: 0; +} + +.pane-sm { + max-width: 220px; + min-width: 150px; +} + +.pane-mini { + width: 80px; + flex: none; +} + +.pane-one-fourth { + width: 25%; + flex: none; +} + +.pane-one-third { + width: 33.3%; + flex: none; +} + +img { + -webkit-user-drag: text; +} + +.img-circle { + border-radius: 50%; +} + +.img-rounded { + border-radius: 4px; +} +/* +list-group { + width: 100%; + list-style: none; + margin: 0; + padding: 0; + display: block; +} +list-group * { + margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +list-item { + display: block; + padding: 10px; + font-size: 12px; + color: #414142; + border-top: 1px solid #ddd; +} +list-item:first-child { + border-top: 0; +} +list-item.active, .list-group-item.selected { + color: #fff; + background-color: #116cd6; +} + +list-header { + padding: 10px; +}*/ + +.media-object { + margin-top: 3px; +} + +.media-object.pull-left { + margin-right: 10px; +} + +.media-object.pull-right { + margin-left: 10px; +} + +.media-body { + overflow: hidden; +} + +nav-group { + font-size: 14px; +} + +nav-item { + padding: 2px 10px 2px 25px; + display: block; + color: #333; + text-decoration: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +nav-item:active, nav-item.active { + background-color: #dcdfe1; +} +nav-item .icon { + width: 19px; + height: 18px; + float: left; + color: #737475; + margin-top: -3px; + margin-right: 7px; + font-size: 18px; + text-align: center; +} + +.nav-group-title { + margin: 0; + padding: 10px 10px 2px; + font-size: 12px; + font-weight: 500; + color: #666666; +} + +@font-face { + font-family: "photon-entypo"; + src: url("../fonts/photon-entypo.eot"); + src: url("../fonts/photon-entypo.eot?#iefix") format("eot"), url("../fonts/photon-entypo.woff") format("woff"), url("../fonts/photon-entypo.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} +.icon:before { + position: relative; + display: inline-block; + font-family: "photon-entypo"; + speak: none; + font-size: 100%; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-note:before { + content: '\e800'; +} + +/* '' */ +.icon-note-beamed:before { + content: '\e801'; +} + +/* '' */ +.icon-music:before { + content: '\e802'; +} + +/* '' */ +.icon-search:before { + content: '\e803'; +} + +/* '' */ +.icon-flashlight:before { + content: '\e804'; +} + +/* '' */ +.icon-mail:before { + content: '\e805'; +} + +/* '' */ +.icon-heart:before { + content: '\e806'; +} + +/* '' */ +.icon-heart-empty:before { + content: '\e807'; +} + +/* '' */ +.icon-star:before { + content: '\e808'; +} + +/* '' */ +.icon-star-empty:before { + content: '\e809'; +} + +/* '' */ +.icon-user:before { + content: '\e80a'; +} + +/* '' */ +.icon-users:before { + content: '\e80b'; +} + +/* '' */ +.icon-user-add:before { + content: '\e80c'; +} + +/* '' */ +.icon-video:before { + content: '\e80d'; +} + +/* '' */ +.icon-picture:before { + content: '\e80e'; +} + +/* '' */ +.icon-camera:before { + content: '\e80f'; +} + +/* '' */ +.icon-layout:before { + content: '\e810'; +} + +/* '' */ +.icon-menu:before { + content: '\e811'; +} + +/* '' */ +.icon-check:before { + content: '\e812'; +} + +/* '' */ +.icon-cancel:before { + content: '\e813'; +} + +/* '' */ +.icon-cancel-circled:before { + content: '\e814'; +} + +/* '' */ +.icon-cancel-squared:before { + content: '\e815'; +} + +/* '' */ +.icon-plus:before { + content: '\e816'; +} + +/* '' */ +.icon-plus-circled:before { + content: '\e817'; +} + +/* '' */ +.icon-plus-squared:before { + content: '\e818'; +} + +/* '' */ +.icon-minus:before { + content: '\e819'; +} + +/* '' */ +.icon-minus-circled:before { + content: '\e81a'; +} + +/* '' */ +.icon-minus-squared:before { + content: '\e81b'; +} + +/* '' */ +.icon-help:before { + content: '\e81c'; +} + +/* '' */ +.icon-help-circled:before { + content: '\e81d'; +} + +/* '' */ +.icon-info:before { + content: '\e81e'; +} + +/* '' */ +.icon-info-circled:before { + content: '\e81f'; +} + +/* '' */ +.icon-back:before { + content: '\e820'; +} + +/* '' */ +.icon-home:before { + content: '\e821'; +} + +/* '' */ +.icon-link:before { + content: '\e822'; +} + +/* '' */ +.icon-attach:before { + content: '\e823'; +} + +/* '' */ +.icon-lock:before { + content: '\e824'; +} + +/* '' */ +.icon-lock-open:before { + content: '\e825'; +} + +/* '' */ +.icon-eye:before { + content: '\e826'; +} + +/* '' */ +.icon-tag:before { + content: '\e827'; +} + +/* '' */ +.icon-bookmark:before { + content: '\e828'; +} + +/* '' */ +.icon-bookmarks:before { + content: '\e829'; +} + +/* '' */ +.icon-flag:before { + content: '\e82a'; +} + +/* '' */ +.icon-thumbs-up:before { + content: '\e82b'; +} + +/* '' */ +.icon-thumbs-down:before { + content: '\e82c'; +} + +/* '' */ +.icon-download:before { + content: '\e82d'; +} + +/* '' */ +.icon-upload:before { + content: '\e82e'; +} + +/* '' */ +.icon-upload-cloud:before { + content: '\e82f'; +} + +/* '' */ +.icon-reply:before { + content: '\e830'; +} + +/* '' */ +.icon-reply-all:before { + content: '\e831'; +} + +/* '' */ +.icon-forward:before { + content: '\e832'; +} + +/* '' */ +.icon-quote:before { + content: '\e833'; +} + +/* '' */ +.icon-code:before { + content: '\e834'; +} + +/* '' */ +.icon-export:before { + content: '\e835'; +} + +/* '' */ +.icon-pencil:before { + content: '\e836'; +} + +/* '' */ +.icon-feather:before { + content: '\e837'; +} + +/* '' */ +.icon-print:before { + content: '\e838'; +} + +/* '' */ +.icon-retweet:before { + content: '\e839'; +} + +/* '' */ +.icon-keyboard:before { + content: '\e83a'; +} + +/* '' */ +.icon-comment:before { + content: '\e83b'; +} + +/* '' */ +.icon-chat:before { + content: '\e83c'; +} + +/* '' */ +.icon-bell:before { + content: '\e83d'; +} + +/* '' */ +.icon-attention:before { + content: '\e83e'; +} + +/* '' */ +.icon-alert:before { + content: '\e83f'; +} + +/* '' */ +.icon-vcard:before { + content: '\e840'; +} + +/* '' */ +.icon-address:before { + content: '\e841'; +} + +/* '' */ +.icon-location:before { + content: '\e842'; +} + +/* '' */ +.icon-map:before { + content: '\e843'; +} + +/* '' */ +.icon-direction:before { + content: '\e844'; +} + +/* '' */ +.icon-compass:before { + content: '\e845'; +} + +/* '' */ +.icon-cup:before { + content: '\e846'; +} + +/* '' */ +.icon-trash:before { + content: '\e847'; +} + +/* '' */ +.icon-doc:before { + content: '\e848'; +} + +/* '' */ +.icon-docs:before { + content: '\e849'; +} + +/* '' */ +.icon-doc-landscape:before { + content: '\e84a'; +} + +/* '' */ +.icon-doc-text:before { + content: '\e84b'; +} + +/* '' */ +.icon-doc-text-inv:before { + content: '\e84c'; +} + +/* '' */ +.icon-newspaper:before { + content: '\e84d'; +} + +/* '' */ +.icon-book-open:before { + content: '\e84e'; +} + +/* '' */ +.icon-book:before { + content: '\e84f'; +} + +/* '' */ +.icon-folder:before { + content: '\e850'; +} + +/* '' */ +.icon-archive:before { + content: '\e851'; +} + +/* '' */ +.icon-box:before { + content: '\e852'; +} + +/* '' */ +.icon-rss:before { + content: '\e853'; +} + +/* '' */ +.icon-phone:before { + content: '\e854'; +} + +/* '' */ +.icon-cog:before { + content: '\e855'; +} + +/* '' */ +.icon-tools:before { + content: '\e856'; +} + +/* '' */ +.icon-share:before { + content: '\e857'; +} + +/* '' */ +.icon-shareable:before { + content: '\e858'; +} + +/* '' */ +.icon-basket:before { + content: '\e859'; +} + +/* '' */ +.icon-bag:before { + content: '\e85a'; +} + +/* '' */ +.icon-calendar:before { + content: '\e85b'; +} + +/* '' */ +.icon-login:before { + content: '\e85c'; +} + +/* '' */ +.icon-logout:before { + content: '\e85d'; +} + +/* '' */ +.icon-mic:before { + content: '\e85e'; +} + +/* '' */ +.icon-mute:before { + content: '\e85f'; +} + +/* '' */ +.icon-sound:before { + content: '\e860'; +} + +/* '' */ +.icon-volume:before { + content: '\e861'; +} + +/* '' */ +.icon-clock:before { + content: '\e862'; +} + +/* '' */ +.icon-hourglass:before { + content: '\e863'; +} + +/* '' */ +.icon-lamp:before { + content: '\e864'; +} + +/* '' */ +.icon-light-down:before { + content: '\e865'; +} + +/* '' */ +.icon-light-up:before { + content: '\e866'; +} + +/* '' */ +.icon-adjust:before { + content: '\e867'; +} + +/* '' */ +.icon-block:before { + content: '\e868'; +} + +/* '' */ +.icon-resize-full:before { + content: '\e869'; +} + +/* '' */ +.icon-resize-small:before { + content: '\e86a'; +} + +/* '' */ +.icon-popup:before { + content: '\e86b'; +} + +/* '' */ +.icon-publish:before { + content: '\e86c'; +} + +/* '' */ +.icon-window:before { + content: '\e86d'; +} + +/* '' */ +.icon-arrow-combo:before { + content: '\e86e'; +} + +/* '' */ +.icon-down-circled:before { + content: '\e86f'; +} + +/* '' */ +.icon-left-circled:before { + content: '\e870'; +} + +/* '' */ +.icon-right-circled:before { + content: '\e871'; +} + +/* '' */ +.icon-up-circled:before { + content: '\e872'; +} + +/* '' */ +.icon-down-open:before { + content: '\e873'; +} + +/* '' */ +.icon-left-open:before { + content: '\e874'; +} + +/* '' */ +.icon-right-open:before { + content: '\e875'; +} + +/* '' */ +.icon-up-open:before { + content: '\e876'; +} + +/* '' */ +.icon-down-open-mini:before { + content: '\e877'; +} + +/* '' */ +.icon-left-open-mini:before { + content: '\e878'; +} + +/* '' */ +.icon-right-open-mini:before { + content: '\e879'; +} + +/* '' */ +.icon-up-open-mini:before { + content: '\e87a'; +} + +/* '' */ +.icon-down-open-big:before { + content: '\e87b'; +} + +/* '' */ +.icon-left-open-big:before { + content: '\e87c'; +} + +/* '' */ +.icon-right-open-big:before { + content: '\e87d'; +} + +/* '' */ +.icon-up-open-big:before { + content: '\e87e'; +} + +/* '' */ +.icon-down:before { + content: '\e87f'; +} + +/* '' */ +.icon-left:before { + content: '\e880'; +} + +/* '' */ +.icon-right:before { + content: '\e881'; +} + +/* '' */ +.icon-up:before { + content: '\e882'; +} + +/* '' */ +.icon-down-dir:before { + content: '\e883'; +} + +/* '' */ +.icon-left-dir:before { + content: '\e884'; +} + +/* '' */ +.icon-right-dir:before { + content: '\e885'; +} + +/* '' */ +.icon-up-dir:before { + content: '\e886'; +} + +/* '' */ +.icon-down-bold:before { + content: '\e887'; +} + +/* '' */ +.icon-left-bold:before { + content: '\e888'; +} + +/* '' */ +.icon-right-bold:before { + content: '\e889'; +} + +/* '' */ +.icon-up-bold:before { + content: '\e88a'; +} + +/* '' */ +.icon-down-thin:before { + content: '\e88b'; +} + +/* '' */ +.icon-left-thin:before { + content: '\e88c'; +} + +/* '' */ +.icon-right-thin:before { + content: '\e88d'; +} + +/* '' */ +.icon-up-thin:before { + content: '\e88e'; +} + +/* '' */ +.icon-ccw:before { + content: '\e88f'; +} + +/* '' */ +.icon-cw:before { + content: '\e890'; +} + +/* '' */ +.icon-arrows-ccw:before { + content: '\e891'; +} + +/* '' */ +.icon-level-down:before { + content: '\e892'; +} + +/* '' */ +.icon-level-up:before { + content: '\e893'; +} + +/* '' */ +.icon-shuffle:before { + content: '\e894'; +} + +/* '' */ +.icon-loop:before { + content: '\e895'; +} + +/* '' */ +.icon-switch:before { + content: '\e896'; +} + +/* '' */ +.icon-play:before { + content: '\e897'; +} + +/* '' */ +.icon-stop:before { + content: '\e898'; +} + +/* '' */ +.icon-pause:before { + content: '\e899'; +} + +/* '' */ +.icon-record:before { + content: '\e89a'; +} + +/* '' */ +.icon-to-end:before { + content: '\e89b'; +} + +/* '' */ +.icon-to-start:before { + content: '\e89c'; +} + +/* '' */ +.icon-fast-forward:before { + content: '\e89d'; +} + +/* '' */ +.icon-fast-backward:before { + content: '\e89e'; +} + +/* '' */ +.icon-progress-0:before { + content: '\e89f'; +} + +/* '' */ +.icon-progress-1:before { + content: '\e8a0'; +} + +/* '' */ +.icon-progress-2:before { + content: '\e8a1'; +} + +/* '' */ +.icon-progress-3:before { + content: '\e8a2'; +} + +/* '' */ +.icon-target:before { + content: '\e8a3'; +} + +/* '' */ +.icon-palette:before { + content: '\e8a4'; +} + +/* '' */ +.icon-list:before { + content: '\e8a5'; +} + +/* '' */ +.icon-list-add:before { + content: '\e8a6'; +} + +/* '' */ +.icon-signal:before { + content: '\e8a7'; +} + +/* '' */ +.icon-trophy:before { + content: '\e8a8'; +} + +/* '' */ +.icon-battery:before { + content: '\e8a9'; +} + +/* '' */ +.icon-back-in-time:before { + content: '\e8aa'; +} + +/* '' */ +.icon-monitor:before { + content: '\e8ab'; +} + +/* '' */ +.icon-mobile:before { + content: '\e8ac'; +} + +/* '' */ +.icon-network:before { + content: '\e8ad'; +} + +/* '' */ +.icon-cd:before { + content: '\e8ae'; +} + +/* '' */ +.icon-inbox:before { + content: '\e8af'; +} + +/* '' */ +.icon-install:before { + content: '\e8b0'; +} + +/* '' */ +.icon-globe:before { + content: '\e8b1'; +} + +/* '' */ +.icon-cloud:before { + content: '\e8b2'; +} + +/* '' */ +.icon-cloud-thunder:before { + content: '\e8b3'; +} + +/* '' */ +.icon-flash:before { + content: '\e8b4'; +} + +/* '' */ +.icon-moon:before { + content: '\e8b5'; +} + +/* '' */ +.icon-flight:before { + content: '\e8b6'; +} + +/* '' */ +.icon-paper-plane:before { + content: '\e8b7'; +} + +/* '' */ +.icon-leaf:before { + content: '\e8b8'; +} + +/* '' */ +.icon-lifebuoy:before { + content: '\e8b9'; +} + +/* '' */ +.icon-mouse:before { + content: '\e8ba'; +} + +/* '' */ +.icon-briefcase:before { + content: '\e8bb'; +} + +/* '' */ +.icon-suitcase:before { + content: '\e8bc'; +} + +/* '' */ +.icon-dot:before { + content: '\e8bd'; +} + +/* '' */ +.icon-dot-2:before { + content: '\e8be'; +} + +/* '' */ +.icon-dot-3:before { + content: '\e8bf'; +} + +/* '' */ +.icon-brush:before { + content: '\e8c0'; +} + +/* '' */ +.icon-magnet:before { + content: '\e8c1'; +} + +/* '' */ +.icon-infinity:before { + content: '\e8c2'; +} + +/* '' */ +.icon-erase:before { + content: '\e8c3'; +} + +/* '' */ +.icon-chart-pie:before { + content: '\e8c4'; +} + +/* '' */ +.icon-chart-line:before { + content: '\e8c5'; +} + +/* '' */ +.icon-chart-bar:before { + content: '\e8c6'; +} + +/* '' */ +.icon-chart-area:before { + content: '\e8c7'; +} + +/* '' */ +.icon-tape:before { + content: '\e8c8'; +} + +/* '' */ +.icon-graduation-cap:before { + content: '\e8c9'; +} + +/* '' */ +.icon-language:before { + content: '\e8ca'; +} + +/* '' */ +.icon-ticket:before { + content: '\e8cb'; +} + +/* '' */ +.icon-water:before { + content: '\e8cc'; +} + +/* '' */ +.icon-droplet:before { + content: '\e8cd'; +} + +/* '' */ +.icon-air:before { + content: '\e8ce'; +} + +/* '' */ +.icon-credit-card:before { + content: '\e8cf'; +} + +/* '' */ +.icon-floppy:before { + content: '\e8d0'; +} + +/* '' */ +.icon-clipboard:before { + content: '\e8d1'; +} + +/* '' */ +.icon-megaphone:before { + content: '\e8d2'; +} + +/* '' */ +.icon-database:before { + content: '\e8d3'; +} + +/* '' */ +.icon-drive:before { + content: '\e8d4'; +} + +/* '' */ +.icon-bucket:before { + content: '\e8d5'; +} + +/* '' */ +.icon-thermometer:before { + content: '\e8d6'; +} + +/* '' */ +.icon-key:before { + content: '\e8d7'; +} + +/* '' */ +.icon-flow-cascade:before { + content: '\e8d8'; +} + +/* '' */ +.icon-flow-branch:before { + content: '\e8d9'; +} + +/* '' */ +.icon-flow-tree:before { + content: '\e8da'; +} + +/* '' */ +.icon-flow-line:before { + content: '\e8db'; +} + +/* '' */ +.icon-flow-parallel:before { + content: '\e8dc'; +} + +/* '' */ +.icon-rocket:before { + content: '\e8dd'; +} + +/* '' */ +.icon-gauge:before { + content: '\e8de'; +} + +/* '' */ +.icon-traffic-cone:before { + content: '\e8df'; +} + +/* '' */ +.icon-cc:before { + content: '\e8e0'; +} + +/* '' */ +.icon-cc-by:before { + content: '\e8e1'; +} + +/* '' */ +.icon-cc-nc:before { + content: '\e8e2'; +} + +/* '' */ +.icon-cc-nc-eu:before { + content: '\e8e3'; +} + +/* '' */ +.icon-cc-nc-jp:before { + content: '\e8e4'; +} + +/* '' */ +.icon-cc-sa:before { + content: '\e8e5'; +} + +/* '' */ +.icon-cc-nd:before { + content: '\e8e6'; +} + +/* '' */ +.icon-cc-pd:before { + content: '\e8e7'; +} + +/* '' */ +.icon-cc-zero:before { + content: '\e8e8'; +} + +/* '' */ +.icon-cc-share:before { + content: '\e8e9'; +} + +/* '' */ +.icon-cc-remix:before { + content: '\e8ea'; +} + +/* '' */ +.icon-github:before { + content: '\e8eb'; +} + +/* '' */ +.icon-github-circled:before { + content: '\e8ec'; +} + +/* '' */ +.icon-flickr:before { + content: '\e8ed'; +} + +/* '' */ +.icon-flickr-circled:before { + content: '\e8ee'; +} + +/* '' */ +.icon-vimeo:before { + content: '\e8ef'; +} + +/* '' */ +.icon-vimeo-circled:before { + content: '\e8f0'; +} + +/* '' */ +.icon-twitter:before { + content: '\e8f1'; +} + +/* '' */ +.icon-twitter-circled:before { + content: '\e8f2'; +} + +/* '' */ +.icon-facebook:before { + content: '\e8f3'; +} + +/* '' */ +.icon-facebook-circled:before { + content: '\e8f4'; +} + +/* '' */ +.icon-facebook-squared:before { + content: '\e8f5'; +} + +/* '' */ +.icon-gplus:before { + content: '\e8f6'; +} + +/* '' */ +.icon-gplus-circled:before { + content: '\e8f7'; +} + +/* '' */ +.icon-pinterest:before { + content: '\e8f8'; +} + +/* '' */ +.icon-pinterest-circled:before { + content: '\e8f9'; +} + +/* '' */ +.icon-tumblr:before { + content: '\e8fa'; +} + +/* '' */ +.icon-tumblr-circled:before { + content: '\e8fb'; +} + +/* '' */ +.icon-linkedin:before { + content: '\e8fc'; +} + +/* '' */ +.icon-linkedin-circled:before { + content: '\e8fd'; +} + +/* '' */ +.icon-dribbble:before { + content: '\e8fe'; +} + +/* '' */ +.icon-dribbble-circled:before { + content: '\e8ff'; +} + +/* '' */ +.icon-stumbleupon:before { + content: '\e900'; +} + +/* '' */ +.icon-stumbleupon-circled:before { + content: '\e901'; +} + +/* '' */ +.icon-lastfm:before { + content: '\e902'; +} + +/* '' */ +.icon-lastfm-circled:before { + content: '\e903'; +} + +/* '' */ +.icon-rdio:before { + content: '\e904'; +} + +/* '' */ +.icon-rdio-circled:before { + content: '\e905'; +} + +/* '' */ +.icon-spotify:before { + content: '\e906'; +} + +/* '' */ +.icon-spotify-circled:before { + content: '\e907'; +} + +/* '' */ +.icon-qq:before { + content: '\e908'; +} + +/* '' */ +.icon-instagram:before { + content: '\e909'; +} + +/* '' */ +.icon-dropbox:before { + content: '\e90a'; +} + +/* '' */ +.icon-evernote:before { + content: '\e90b'; +} + +/* '' */ +.icon-flattr:before { + content: '\e90c'; +} + +/* '' */ +.icon-skype:before { + content: '\e90d'; +} + +/* '' */ +.icon-skype-circled:before { + content: '\e90e'; +} + +/* '' */ +.icon-renren:before { + content: '\e90f'; +} + +/* '' */ +.icon-sina-weibo:before { + content: '\e910'; +} + +/* '' */ +.icon-paypal:before { + content: '\e911'; +} + +/* '' */ +.icon-picasa:before { + content: '\e912'; +} + +/* '' */ +.icon-soundcloud:before { + content: '\e913'; +} + +/* '' */ +.icon-mixi:before { + content: '\e914'; +} + +/* '' */ +.icon-behance:before { + content: '\e915'; +} + +/* '' */ +.icon-google-circles:before { + content: '\e916'; +} + +/* '' */ +.icon-vkontakte:before { + content: '\e917'; +} + +/* '' */ +.icon-smashing:before { + content: '\e918'; +} + +/* '' */ +.icon-sweden:before { + content: '\e919'; +} + +/* '' */ +.icon-db-shape:before { + content: '\e91a'; +} + +/* '' */ +.icon-logo-db:before { + content: '\e91b'; +} + +/* '' */ +table { + width: 100%; + border: 0; + border-collapse: separate; + font-size: 12px; + text-align: left; +} + +thead { + background-color: #f5f5f4; +} + +tbody { + background-color: #fff; +} + +.table-striped tr:nth-child(even) { + background-color: #f5f5f4; +} + +tr:active, +.table-striped tr:active:nth-child(even) { + color: #fff; + background-color: #116cd6; +} + +thead tr:active { + color: #333; + background-color: #f5f5f4; +} + +th { + font-weight: normal; + border-right: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} + +th, +td { + padding: 2px 15px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +th:last-child, +td:last-child { + border-right: 0; +} + +.tab-group, tab-group { + margin-top: -1px; + display: flex; + border-top: 1px solid #989698; + border-bottom: 1px solid #989698; +} + +.tab-item, tab-item { + position: relative; + flex: 1; + padding: 3px; + font-size: 12px; + text-align: center; + border-left: 1px solid #989698; + background-color: #b8b6b8; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8b6b8), color-stop(100%, #b0aeb0)); + background-image: -webkit-linear-gradient(top, #b8b6b8 0%, #b0aeb0 100%); + background-image: linear-gradient(to bottom, #b8b6b8 0%, #b0aeb0 100%); +} +.tab-item:first-child, tab-item:first-child { + border-left: 0; +} +.tab-item.active, tab-item.active { + background-color: #d4d2d4; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4d2d4), color-stop(100%, #cccacc)); + background-image: -webkit-linear-gradient(top, #d4d2d4 0%, #cccacc 100%); + background-image: linear-gradient(to bottom, #d4d2d4 0%, #cccacc 100%); +} +.tab-item .icon-close-tab, tab-item button[action="close"] { + position: absolute; + top: 50%; + left: 5px; + width: 15px; + height: 15px; + font-size: 15px; + line-height: 15px; + text-align: center; + color: #666; + opacity: 0; + transition: opacity .1s linear, background-color .1s linear; + border-radius: 3px; + transform: translateY(-50%); + z-index: 10; +} +.tab-item:after, tab-item:after{ + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + content: ""; + background-color: rgba(0, 0, 0, 0.08); + opacity: 0; + transition: opacity .1s linear; + z-index: 1; +} +.tab-item:hover:not(.active):after, tab-item:hover:not(.active):after { + opacity: 1; +} +.tab-item:hover .icon-close-tab, tab-item:hover button[action="close"] { + opacity: 1; +} +.tab-item .icon-close-tab:hover, tab-item button[action="close"]:hover { + background-color: rgba(0, 0, 0, 0.08); +} + +.tab-item-fixed, tab-item[type="fixed"] { + flex: none; + padding: 3px 10px; +} diff --git a/dist/PhotonOriginal/photon.js b/dist/PhotonOriginal/photon.js new file mode 100644 index 0000000..e69de29 diff --git a/dist/PhotonPanes/README.md b/dist/PhotonPanes/README.md new file mode 100644 index 0000000..e0642ed --- /dev/null +++ b/dist/PhotonPanes/README.md @@ -0,0 +1,70 @@ +# Panes + +This component provides graphical panes and a JS controller for sizing them. + +![Paned Layout](https://dev.maurice-conrad.eu/img/photon/paned1.png) + +## Pane Group + +```html +
    + +
    +``` + +## Pane + +```html +
    + +
    ...
    +
    ...
    +
    ...
    + +
    +``` + +### Sidebar Pane + +```html +
    + +
    ...
    + +
    ...
    +
    +``` + +## Sizing + +Every *pane* is sizeable. + +### Min Width + +To set a *pane*'s minimal width, just use the CSS property `min-width`. + +```html +
    + +
    ...
    +
    ...
    + +
    +``` + +### Max Width + +To set a *pane*'s maximal width, just use the CSS property `max-width`. + +```html +
    + +
    ...
    +
    ...
    + +
    +``` + +## API + +To recognize when a pane is used to be resized, just listen to the `resize` event on your pane or its parents. (Event is bubbling up). diff --git a/dist/PhotonPanes/package.json b/dist/PhotonPanes/package.json new file mode 100644 index 0000000..a5d0c89 --- /dev/null +++ b/dist/PhotonPanes/package.json @@ -0,0 +1,15 @@ +{ + "name": "photonpanesize", + "version": "0.0.1", + "description": "Pane sizing controller", + "main": "sizer.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "pane", + "size" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonPanes/panes.css b/dist/PhotonPanes/panes.css new file mode 100644 index 0000000..3eeac8c --- /dev/null +++ b/dist/PhotonPanes/panes.css @@ -0,0 +1,3 @@ +.sizing-pane * { + cursor: ew-resize; +} diff --git a/dist/PhotonPanes/sizer.js b/dist/PhotonPanes/sizer.js new file mode 100644 index 0000000..64eba84 --- /dev/null +++ b/dist/PhotonPanes/sizer.js @@ -0,0 +1,105 @@ +const __prototypeExtensions = require('./../PrototypeExtensions'); +const { parseCSSProperty } = require('./../../helper'); + +const PaneSizer = { + toleranceDiff: 15, + mouseDown(event) { + const position = { + x: event.pageX, + y: event.pageY + }; + const nextPaneBorder = this.getNextPaneBorder(position); + if (nextPaneBorder && nextPaneBorder.positionRel < this.toleranceDiff) { + this.drag = Object.assign({ + start: Object.assign({}, position), + get diff() { + return { + x: this.curr.x - this.start.x, + y: this.curr.y - this.start.y + }; + }, + curr: Object.assign({}, position) + }, nextPaneBorder); + this.drag.pane.__staticStyle = Object.assign({}, window.getComputedStyle(this.drag.pane)); + } + }, + mouseUp(event) { + this.drag = null; + }, + mouseMove(event) { + const position = { + x: event.pageX, + y: event.pageY + }; + const nextPaneBorder = this.getNextPaneBorder(position); + if (nextPaneBorder && nextPaneBorder.positionRel < this.toleranceDiff) { + const windowElement = nextPaneBorder.pane.closest("window-content"); + windowElement.classList.add("sizing-pane"); + } + else { + const windowContents = document.querySelectorAll("window-content"); + for (let content of windowContents) { + content.classList.remove("sizing-pane"); + } + } + + if (this.drag) { + this.drag.curr = position; + const originalWidth = parseCSSProperty(this.drag.pane.__staticStyle["width"], "number"); + const newWidth = originalWidth + this.drag.diff.x; + this.drag.pane.style.width = newWidth + "px"; + this.drag.pane.style.flex = "none"; + + const resizeEvent = new Event("resize", { + bubbles: true, + detail: { + newWidth: newWidth + } + }); + this.drag.pane.dispatchEvent(resizeEvent); + } + }, + get panes() { + const panes = [ + document.getElementsByClassName('pane-sm'), + document.getElementsByClassName('pane') + ]; + return Array.merge(panes.map(nodePaneList => Array.from(nodePaneList))); + }, + getPanesBorders(pane) { + const nodePos = __prototypeExtensions.nodePos(pane); + return { + left: pane.previousElementSibling ? pane.getBoundingClientRect().left : null, + right: pane.nextElementSibling ? pane.getBoundingClientRect().right : null + }; + }, + getAllBorders(position) { + const candiates = this.panes.filter(function(pane) { + let boundings = pane.getBoundingClientRect(); + return position.y >= boundings.top && position.y <= boundings.bottom; + }); + return Array.merge(candiates.map((pane) => { + return Object.values(this.getPanesBorders(pane)).filter(border => border).map(function(pos) { + return { + position: pos, + positionRel: Math.abs(position.x - pos), + pane: pane + }; + }); + })); + }, + getNextPaneBorder(position) { + const borders = this.getAllBorders(position); + + const border = borders[borders.indexOfKey(Math.min.apply(Math, borders.map(borderRecord => borderRecord.positionRel)), "positionRel")]; + + return border; + + } +}; + +window.addEventListener("mousedown", event => PaneSizer.mouseDown(event)); +window.addEventListener("mouseup", event => PaneSizer.mouseUp(event)); +window.addEventListener("mousemove", event => PaneSizer.mouseMove(event)); + +module.exports = PaneSizer; diff --git a/dist/PhotonProgress/progress.css b/dist/PhotonProgress/progress.css new file mode 100644 index 0000000..29350cd --- /dev/null +++ b/dist/PhotonProgress/progress.css @@ -0,0 +1,213 @@ +progress { + -webkit-appearance: none; + border-radius: 3px 3px 3px 3px; + overflow: hidden; + height: 6px; +} +progress::-webkit-progress-bar { + background-color: rgba(0, 0, 0, 0.09); + box-sizing: border-box; + height: 6px; + border-radius: 3px; + background-image: url('data:image/svg+xml;utf8,'); + overflow: hidden; +} +progress::-webkit-progress-value { + height: 100%; + border-radius: 3px 0px 0px 3px; + background-color: #3b99fc; + background-image: url('data:image/svg+xml;utf8,'); +} +progress:not([value])::-webkit-progress-bar { + display: none; +} +progress:not([value]) { + background-color: #429bf8; + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, rgba(66, 155, 249, 0) 0%, #73b9fc 50%, rgba(66, 155, 249, 0) 100%); + animation: progressIndeterminate 2s infinite; +} +/*@keyframes progressIndeterminate { + 0% { + background-position: 0px 0px, -100% 0px; + } + 100% { + background-position: 0px 0px, 500px 0px; + } +}*/ + +@keyframes progressIndeterminate { + 0% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -100%, #73b9fc -50%, #429bf8 0%); + } + 2.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -95%, #73b9fc -45%, #429bf8 5%); + } + 5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -90%, #73b9fc -40%, #429bf8 10%); + } + 7.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -85%, #73b9fc -35%, #429bf8 15%); + } + 10% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -80%, #73b9fc -30%, #429bf8 20%); + } + 12.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -75%, #73b9fc -25%, #429bf8 25%); + } + 15% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -70%, #73b9fc -20%, #429bf8 30%); + } + 17.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -65%, #73b9fc -15%, #429bf8 35%); + } + 20% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -60%, #73b9fc -10%, #429bf8 40%); + } + 22.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -55%, #73b9fc -5%, #429bf8 45%); + } + 25% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -50%, #73b9fc 0%, #429bf8 50%); + } + 27.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -45%, #73b9fc 5%, #429bf8 55%); + } + 30% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -40%, #73b9fc 10%, #429bf8 60%); + } + 32.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -35%, #73b9fc 15%, #429bf8 65%); + } + 35% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -30%, #73b9fc 20%, #429bf8 70%); + } + 37.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -25%, #73b9fc 25%, #429bf8 75%); + } + 40% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -20%, #73b9fc 30%, #429bf8 80%); + } + 42.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -15%, #73b9fc 35%, #429bf8 85%); + } + 45% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -10%, #73b9fc 40%, #429bf8 90%); + } + 47.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 -5%, #73b9fc 45%, #429bf8 95%); + } + 50% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 0%, #73b9fc 50%, #429bf8 100%); + } + 52.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 5%, #73b9fc 55%, #429bf8 105%); + } + 55% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 10%, #73b9fc 60%, #429bf8 110%); + } + 57.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 15%, #73b9fc 65%, #429bf8 115%); + } + 60% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 20%, #73b9fc 70%, #429bf8 120%); + } + 62.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 25%, #73b9fc 75%, #429bf8 125%); + } + 65% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 30%, #73b9fc 80%, #429bf8 130%); + } + 67.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 35%, #73b9fc 85%, #429bf8 135%); + } + 70% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 40%, #73b9fc 90%, #429bf8 140%); + } + 72.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 45%, #73b9fc 95%, #429bf8 145%); + } + 75% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 50%, #73b9fc 100%, #429bf8 150%); + } + 77.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 55%, #73b9fc 105%, #429bf8 155%); + } + 80% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 60%, #73b9fc 110%, #429bf8 160%); + } + 82.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 65%, #73b9fc 115%, #429bf8 165%); + } + 85% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 70%, #73b9fc 120%, #429bf8 170%); + } + 87.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 75%, #73b9fc 125%, #429bf8 175%); + } + 90% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 80%, #73b9fc 130%, #429bf8 180%); + } + 92.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 85%, #73b9fc 135%, #429bf8 185%); + } + 95% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 90%, #73b9fc 140%, #429bf8 190%); + } + 97.5% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 95%, #73b9fc 145%, #429bf8 195%); + } + 100% { + background-image: url('data:image/svg+xml;utf8,'), + linear-gradient(to right, #429bf8 100%, #73b9fc 150%, #429bf8 200%); + } +} + + + +/* +Animation created by: +var defaultColor = "#429bf8"; +var focusColor = "#73b9fc"; +var step = 5; var startPos = -100; var endPos = 0; var middlePos = -50; var cssStr = ""; var defaultColor = "#429bf8"; var focusColor = "#73b9fc"; for (var i = 0; i <= 200; i = i + step) { var percentStep = (100 / (200 / step)) * (i / step); var str = "(to right, " + defaultColor + " " + (startPos + i) + "%, " + focusColor + " " + (middlePos + i) + "%, " + defaultColor + " " + (endPos + i) + "%)"; var completeStr = percentStep + '% {\n background-image: url(\'data:image/svg+xml;utf8,\'),\n linear-gradient' + str + ';\n}'; cssStr += completeStr + "\n"; } console.log(cssStr); +*/ diff --git a/dist/PhotonProgressCircle/README.md b/dist/PhotonProgressCircle/README.md new file mode 100644 index 0000000..9b6013c --- /dev/null +++ b/dist/PhotonProgressCircle/README.md @@ -0,0 +1,21 @@ +# Progress Circle + +![Progress Circle](https://camo.githubusercontent.com/3ed0dfb5ab01ce1ebd6ae06acf1b86214d038281/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f72647063706c6f772f62696c6473636869726d666f746f323031362d31312d3132756d31352e332e706e67) + +## Layout + +```html + +``` + +`value` is between `0` and `1`. + +## API + +### Get Value + +```javascript +const val = myProgressCircle.value; + +console.log(val); +``` diff --git a/dist/PhotonProgressCircle/circularProgress.js b/dist/PhotonProgressCircle/circularProgress.js new file mode 100644 index 0000000..6a1f03f --- /dev/null +++ b/dist/PhotonProgressCircle/circularProgress.js @@ -0,0 +1,78 @@ +const { setSVGAttributes } = require('./../../helper'); + + +class ProgressCircle extends HTMLElement { + constructor() { + super(); + + const shadow = this.attachShadow({ + mode: 'open' + }); + + const radius = ProgressCircle.__radius; + + const svg = document.createElementNS(ProgressCircle.__svgNameSpace, "svg"); + setSVGAttributes(svg, { + style: 'width: 100%; height: 100%;', + viewBox: -50 + " " + -50 + " " + (100) + " " + (100) + }); + this.pathElement = document.createElementNS(ProgressCircle.__svgNameSpace, "path"); + setSVGAttributes(this.pathElement, { + style: "fill: #555;" + }); + svg.append(this.pathElement); + + const circleBorder = document.createElementNS(ProgressCircle.__svgNameSpace, "circle"); + setSVGAttributes(circleBorder, { + style: "fill: none; stroke: #555; stroke-width: 5px;", + cx: 0, + cy: 0, + r: radius + }); + svg.append(circleBorder); + + + shadow.appendChild(svg); + } + attributeChangedCallback(attribute, oldValue, newValue) { + const attributeHandlers = { + value: value => this.__visualCalc(value), + }; + if (attribute in attributeHandlers) { + attributeHandlers[attribute](newValue); + } + } + get value() { + return parseFloat(this.getAttribute("value")); + } + __visualCalc(value) { + const progress = Math.PI * 2 * (value === 1 ? 0.99999999 : value); + this.coords = { + x: Math.sin(progress) * ProgressCircle.__radius, + y: Math.cos(progress) * ProgressCircle.__radius + }; + } + set value(value) { + this.__visualCalc(value); + this.setAttribute("value", value); + } + set coords(coords) { + const radius = ProgressCircle.__radius; + this.path = "M 0,0 l 0," + -radius + " A " + radius + " " + radius + " 0 " + (coords.x < 0 & 1) + " 1 " + coords.x + "," + -coords.y; + } + set path(value) { + this.pathElement.setAttributeNS(null, "d", value); + } +} +ProgressCircle.observedAttributes = ["value"]; +ProgressCircle.__svgNameSpace = "http://www.w3.org/2000/svg"; +ProgressCircle.__radius = 50; + + + + +customElements.define("progress-circle", ProgressCircle); + + + +module.exports = ProgressCircle; diff --git a/dist/PhotonProgressCircle/package.json b/dist/PhotonProgressCircle/package.json new file mode 100644 index 0000000..de8b893 --- /dev/null +++ b/dist/PhotonProgressCircle/package.json @@ -0,0 +1,14 @@ +{ + "name": "photonprogresscircle", + "version": "0.0.1", + "keywords": [ + "circular", + "progress" + ], + "license": "ISC", + "author": "Maurice Conrad", + "main": "circularProgress.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + } +} diff --git a/dist/PhotonProgressCircle/progress-circle.css b/dist/PhotonProgressCircle/progress-circle.css new file mode 100644 index 0000000..12b19ff --- /dev/null +++ b/dist/PhotonProgressCircle/progress-circle.css @@ -0,0 +1,9 @@ +progress-circle { + height: 20px; + width: 20px; + border-radius: 50%; + background-size: 100% 100%; + background-position: 0px 0px; + display: inline-block; + overflow: hidden; +} diff --git a/dist/PhotonSlider/README.md b/dist/PhotonSlider/README.md new file mode 100644 index 0000000..4321f70 --- /dev/null +++ b/dist/PhotonSlider/README.md @@ -0,0 +1,43 @@ +# Slider + +![Slider](https://camo.githubusercontent.com/d4635dbfc74c802b7b6dac1edb65d68c1490850b/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f726469706f7077612f62696c6473636869726d666f746f323031362d31312d3036756d32312e312e706e67) + +## Layout + +### Default + +![Default Slider](https://camo.githubusercontent.com/b7c13556f123878ae99fa0811ef24e712f7e4474/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f726469706c72646f2f62696c6473636869726d666f746f323031362d31312d3036756d32312e322e706e67) + +```html + +``` + +### Slider-Round with colors + +```html + + + + +``` + +![Sliders](https://camo.githubusercontent.com/c0c6be5a5b312310018a0f6a7c4eeea3863300d8/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f726469706c7264772f62696c6473636869726d666f746f323031362d31312d3036756d32312e322e706e67) + +### Slider Squared + +![Slider Squared](https://camo.githubusercontent.com/283941ab56b00325f13072b63386bef85a89d61f/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f726469706c7261702f62696c6473636869726d666f746f323031362d31312d3036756d32312e322e706e67) + +```html + + + + +``` + +### Slider Vertical + +![Slider Vertical](https://camo.githubusercontent.com/b49a437150b150f408cb1f2af028f47c7f3b76c9/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f726469706c726c772f62696c6473636869726d666f746f323031362d31312d3036756d32312e322e706e67) + +```html + +``` diff --git a/dist/PhotonSlider/RangeSlider.js b/dist/PhotonSlider/RangeSlider.js new file mode 100644 index 0000000..f18aac4 --- /dev/null +++ b/dist/PhotonSlider/RangeSlider.js @@ -0,0 +1,39 @@ +const inputValueDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value"); + +const RangeSlider = { + inputHandle(event) { + const inputRange = event.target.closest("input[type='range']"); + if (inputRange) { + RangeSlider.sliderVisualCalc(inputRange); + } + }, + sliderVisualCalc(slider) { + const min = parseFloat(slider.min) || 0; + const max = parseFloat(slider.max) || 100; + const value = parseFloat(slider.value) || 0; + + + slider.style.backgroundSize = (100 * ((value - min) / (max - min))) + "% 100%"; + + if (slider.classList.contains("slider-vertical")) { + slider.style.marginBottom = slider.getBoundingClientRect().width + "px"; + } + + }, + __inputValuePropertySetter(value) { + inputValueDescriptor.set.apply(this, [value]); + if (this.type === "range") { + RangeSlider.sliderVisualCalc(this); + return true; + } + } +}; + +Object.defineProperty(HTMLInputElement.prototype, "value", { + get: inputValueDescriptor.get, + set: RangeSlider.__inputValuePropertySetter +}); + +window.addEventListener("input", RangeSlider.inputHandle); + +module.exports = RangeSlider; diff --git a/dist/PhotonSlider/package.json b/dist/PhotonSlider/package.json new file mode 100644 index 0000000..81c3fd2 --- /dev/null +++ b/dist/PhotonSlider/package.json @@ -0,0 +1,16 @@ +{ + "name": "photonslider", + "version": "0.0.1", + "description": "slider controller", + "main": "slider.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "slider", + "controller", + "range" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonSlider/slider.css b/dist/PhotonSlider/slider.css new file mode 100644 index 0000000..6c5bff2 --- /dev/null +++ b/dist/PhotonSlider/slider.css @@ -0,0 +1,128 @@ +.slider { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #bababa; + width: auto; + height: 3px; + border-radius: 5px; + outline: none; +} +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; +} +.slider.slider-bold { + height: 4px; + border-radius: 10px; +} +.slider.slider-square, .slider.slider-square-inverted { + margin-bottom: 7px; +} +.slider.slider-square::-webkit-slider-thumb, .slider.slider-square-inverted::-webkit-slider-thumb { + height: 23px; + width: 20px; + border: 1px solid #BABABA; + border: none; + background-image: url('data:image/svg+xml;utf8,');/*In Chrome dunkler!*/ + background-size: 98% 98%; + -webkit-filter: drop-shadow(0px 1px 1px rgba(100, 100, 100, 0.2)); + filter: drop-shadow(0px 1px 1px rgba(100, 100, 100, 0.2)); + background-position: 0.5px 2px; + background-repeat: no-repeat; +} +.slider.slider-square::-webkit-slider-thumb:active, .slider.slider-square-inverted::-webkit-slider-thumb:active { + background-image: url('data:image/svg+xml;utf8,');/*In Chrome dunkler!*/ +} +.slider.slider-square-inverted::-webkit-slider-thumb { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + -webkit-filter: drop-shadow(0px -1px 1px rgba(100, 100, 100, 0.2)); + filter: drop-shadow(0px -1px 1px rgba(100, 100, 100, 0.2)); +} +.slider.slider-round { + background-size: 50% 100%; + background-repeat: no-repeat; + background-image: url('data:image/svg+xml;utf8,'); +} +.slider-round.blue { + background-image: url('data:image/svg+xml;utf8,'); +} +.slider-round.gray { + background-image: url('data:image/svg+xml;utf8,'); +} +.slider.slider-round::-webkit-slider-thumb { + height: 17px; + width: 17px; + border: 1px solid rgb(190, 190, 190); + background-color: #fff; + border-radius: 50%; + -webkit-filter: drop-shadow(0px 1px 1px rgba(150, 150, 150, 0.4)); + filter: drop-shadow(0px 1px 1px rgba(150, 150, 150, 0.4)); +} +.slider.slider-round.slider-small::-webkit-slider-thumb { + height: 14px; + width: 14px; +} +.slider.slider-round::-webkit-slider-thumb:active { + background-color: #f0f0f0; +} +.slider.slider-round.gray::-webkit-slider-thumb:active { + background-color: #f0f0f0; +} + +/*Vertical Settings*/ + +.slider-vertical { + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; + -webkit-transform-origin: 0% 50%; + transform-origin: 0% 50%; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + /*appearance: slider-vertical; + width: 5px; + height: auto;*/ + +} +@media only screen and (min--moz-device-pixel-ratio: 2), +only screen and (-o-min-device-pixel-ratio: 2/1), +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and (min-device-pixel-ratio: 2) { + .slider.slider-square::-webkit-slider-thumb, .slider.slider-square-inverted::-webkit-slider-thumb { + background-image: url('data:image/svg+xml;utf8,'); + } + .slider.slider-square::-webkit-slider-thumb:active, .slider.slider-square-inverted::-webkit-slider-thumb:active { + background-image: url('data:image/svg+xml;utf8,'); + } + .slider.slider-vertical::-webkit-slider-thumb { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + -webkit-filter: drop-shadow(0px -1px 1px rgba(100, 100, 100, 0.2)); + filter: drop-shadow(0px -1px 1px rgba(100, 100, 100, 0.2)); + } + /*Here is a Data-URL used because Chrome (Blink) don't support rendering 0.1px for retina displays. The borders would be too thick. To use a background-image isn't a clean solution but it's the only way*/ + .slider.slider-round::-webkit-slider-thumb { + border: none; + background-image: url('data:image/svg+xml;utf8,'); + background-size: 100%; + border-radius: 0px; + background-color: transparent; + height: 18px; + width: 18px; + } + .slider.slider-round::-webkit-slider-thumb:active { + background-color: transparent; + background-image: url('data:image/svg+xml;utf8,'); + } + .slider.slider-round.gray::-webkit-slider-thumb:active { + background-color: transparent; + } + .slider.slider-round.slider-bold::-webkit-slider-thumb { + background-image: url('data:image/svg+xml;utf8,'); + } + .slider.slider-round.slider-bold::-webkit-slider-thumb:active { + background-color: transparent; + background-image: url('data:image/svg+xml;utf8,'); + } +} diff --git a/dist/PhotonSlider/slider.js b/dist/PhotonSlider/slider.js new file mode 100644 index 0000000..f51ef08 --- /dev/null +++ b/dist/PhotonSlider/slider.js @@ -0,0 +1,6 @@ +const Slider = { + RangeSlider: require('./RangeSlider') +}; + + +module.exports = Slider.RangeSlider; diff --git a/dist/PhotonSwipe/ActionList.js b/dist/PhotonSwipe/ActionList.js new file mode 100644 index 0000000..1193804 --- /dev/null +++ b/dist/PhotonSwipe/ActionList.js @@ -0,0 +1,16 @@ +class PhotonSwipeActionList extends HTMLElement { + constructor() { + super(); + } + get actions() { + return this.getElementsByTagName("swipe-action"); + } + get innerWidth() { + return Array.from(this.actions).map(action => action.__staticBoundings.width).reduce((acc, value) => acc + value); + } + get role() { + return this.getAttribute("role"); + } +} + +module.exports = PhotonSwipeActionList; diff --git a/dist/PhotonSwipe/ListGroup.js b/dist/PhotonSwipe/ListGroup.js new file mode 100644 index 0000000..f794dd9 --- /dev/null +++ b/dist/PhotonSwipe/ListGroup.js @@ -0,0 +1,7 @@ +class PhotonListGroup extends HTMLElement { + constructor() { + super(); + } +} + +module.exports = PhotonListGroup; diff --git a/dist/PhotonSwipe/ListInner.js b/dist/PhotonSwipe/ListInner.js new file mode 100644 index 0000000..ff7e547 --- /dev/null +++ b/dist/PhotonSwipe/ListInner.js @@ -0,0 +1,7 @@ +class PhotonListItemInner extends HTMLElement { + constructor() { + super(); + } +} + +module.exports = PhotonListItemInner; diff --git a/dist/PhotonSwipe/ListItem.js b/dist/PhotonSwipe/ListItem.js new file mode 100644 index 0000000..69145b7 --- /dev/null +++ b/dist/PhotonSwipe/ListItem.js @@ -0,0 +1,357 @@ +const { hasParentSelector, getTransDur, parseCSSProperty } = require('./../../helper'); + +var electron = require('electron'); +var mainWindow = electron.remote.getCurrentWindow(); + +mainWindow.on("scroll-touch-begin", function(event) { + PhotonListItem.__gestureTouch = true; +}); +mainWindow.on("scroll-touch-end", function(event) { + PhotonListItem.__gestureTouch = false; +}); + +class PhotonListItem extends HTMLElement { + constructor() { + super(); + + const self = this; + + this.addEventListener("wheel", this.__wheelHandler); + + this.__dragStart = null; + + this.addEventListener("mousedown", this.__mouseDownHandler); + window.addEventListener("mouseup", event => this.__mouseUpHandler(event)); + window.addEventListener("mousemove", event => this.__mouseMoveHandler(event)); + + this.addEventListener("mousemove", event => event.preventDefault()); + + // Current scrolling difference + this.currScroll = 0; + // Wether scrolling has begon already + // Used to determine wether a "wheel" event is the first time fired while a single gesture + this.gesture = { + direction: null, + // Get the index of the direction + get dirName() { + return PhotonListItem.__directions.keyFromValue(this.direction); + }, + get actionList() { + // Return action-list element from action lists within this list item + return self.actionLists[this.dirName]; + }, + // Return the type of gesture + get type() { + // If the gesture's direction and the touch direction are equal, the user is opening the swipe actions, otherwise closing + return (this.direction === this.touch.direction || this.overscroll) ? "open" : "close"; + }, + // Return the theoretically candidate for being s smart action + get smartCandidate() { + return this.actionList.actions[this.direction < 0 ? 0 : (this.actionList.actions.length - 1)] + }, + // Return wether smart action is streched (smartness) + get smartAction() { + return false; + const totalActionsWidth = this.scrollDiff; + const listItemTotalWidth = self.getBoundingClientRect().width; + + return totalActionsWidth >= listItemTotalWidth; + }, + // Touch data + touch: null, + // Theoretically scroll of mousewheel that is performed in this gesture (Everything is interpreted 1:1) + scroll: 0, + // Real scroll that is used (Overscoll is not interpreted 1:1) and absoluted + get scrollDiff() { + const scrollAbs = Math.abs(this.scroll); + return this.overscroll ? PhotonListItem.__overscrollCalc(this.actionList.innerWidth, this.overscroll) : scrollAbs; + }, + // Theoretically overscroll (Overscoll is interpreted 1:1) + get overscroll() { + const overscroll = Math.abs(this.scroll) - this.actionList.innerWidth; + return overscroll > 0 ? overscroll : 0; + }, + // Real overscroll that is rendered (Not 1:1) + get overscrollPx() { + const overscrollPx = this.scrollDiff - this.actionList.innerWidth; + return overscrollPx > 0 ? overscrollPx : 0; + }, + speed: 0 + }; + + mainWindow.on("scroll-touch-end", (event) => { + if (this.gesture.direction && this.gesture.touch) { + this.__touchEndHandler(event); + } + }); + } + /*get actionLists() { + const actionLists = Array.from(this.getElementsByTagName("action-list")); + return [ + actionLists.filter(list => list.role === "left")[0], + actionLists.filter(list => list.role === "right")[0] + ]; + }*/ + get actionLists() { + const actionLists = Array.from(this.getElementsByTagName("action-list")); + return { + left: actionLists.filter(list => list.role === "left")[0], + right: actionLists.filter(list => list.role === "right")[0] + }; + } + get inner() { + return this.getElementsByTagName("item-inner")[0]; + } + __touchEndHandler(event) { + const self = this; + // User is not touching anymore, handle this case's CSS specifications without the class 'touching' + this.classList.remove("touching"); + // Get gesture's type + const type = this.gesture.type; + // Get the last speed + const speed = this.gesture.speed; + // Calculate the transition duration that is relative to the speed + { + // General calulcation + let transDur = 1.5 / speed; + // Define minimum and maxiumum of duration + let min = 0.2; + let max = 0.6; + // Apply minimum and maxiumum value to the transition duration + transDur = transDur > min ? transDur : min; + transDur = transDur < max ? transDur : max; + // Set the duration as CSS property to action list, all actions and the list inner + { + this.gesture.actionList.style.transitionDuration = transDur + "s"; + for (let action of this.gesture.actionList.actions) { + action.style.transitionDuration = transDur + "s"; + } + this.inner.style.transitionDuration = transDur + "s"; + } + } + // Quit gesture (Call some resetting stuff) + this.__quitGesture(); + // Handle a different type of action with a different handler + const actionTypeHandlers = { + open() { + self.__openActions(); + }, + close() { + self.__closeActions(); + } + }; + // Handle type of interaction with its handler ("open" || "close") + actionTypeHandlers[type](); + } + // Open wrapper for external openings + open(direction) { + // Try to close a possible open swipe + try { + this.close(); + } + catch (e) {} + // Set direction + this.gesture.direction = direction; + // Intitialize gesture + this.__initGesture(); + // Open swipes internaly + this.__openActions(); + } + close() { + // Try to close a possible open swipe + try { + this.__closeActions(); + } + // There seems to be no open swipe + catch (e) { + throw new Error("No open swipe"); + } + } + __openActions() { + // Set scroll position to the full width of current action list of current gesture (Multiplied with the direction's sign) + this.gesture.scroll = this.gesture.actionList.innerWidth * Math.sign(this.gesture.direction); + // Render the new scroll position + this.__render(); + + this.gesture.actionList.dispatchEvent(new CustomEvent("swipe", { + bubbles: true, + detail: { + action: "open", + swipe: this.gesture.actionList + } + })); + } + __closeActions() { + const actionList = this.gesture.actionList; + // Set scroll position + this.gesture.scroll = 0; + // Render the new scroll position + this.__render(); + // Reset the gesture because we are in the normal situation now and both directions can be swiped to + this.gesture.direction = null; + + actionList.dispatchEvent(new CustomEvent("swipe", { + bubbles: true, + detail: { + action: "close", + swipe: actionList + } + })); + } + __initGesture() { + for (let action of this.gesture.actionList.actions) { + // Freeze CSS properties to get original CSS values later (e.g. they become changed) + action.__staticCSSProperties = Object.assign({}, window.getComputedStyle(action)); + // Freeze boundings to get original boundings when they are already changed later + action.__staticBoundings = action.getBoundingClientRect(); + } + } + __quitGesture() { + this.gesture.scroll = Math.abs(this.gesture.scroll) > this.gesture.actionList.innerWidth ? this.gesture.actionList.innerWidth : this.gesture.scroll; + for (let action of this.gesture.actionList.actions) { + action.style.removeProperty("width"); + } + } + __wheelHandler(event) { + const self = this; + + const delta = event.deltaX; + + if (PhotonListItem.__gestureTouch) { + this.scrollDelta(delta); + } + + } + scrollDelta(delta) { + const direction = delta * Infinity; + const swipeIsValid = !!this.actionLists[PhotonListItem.__directions.keyFromValue(direction)]; + // Determine wether the user is really touching now and swiping to this direction is abled + // Swiping in this direction is abled if there exist a action list or, if not, a gesture is active which means we can scroll back + if (true && (swipeIsValid || this.gesture.direction)) { + this.classList.add("touching"); + if (!this.gesture.direction) { + // First time fired while a single gesture + this.gesture.direction = direction; + this.__initGesture(); + } + // Real touch begin event handling because global event does not refer to target, therefore the first wheel event fired while a touch is used + if (!this.gesture.touch) { + this.gesture.touch = {}; + } + // Set current touch's direction + this.gesture.touch.direction = delta * Infinity; + + this.gesture.speed = Math.abs(delta); + + // Add delta to scroll while the gesture's direction is not deceived + // In such a case, if the direction would be turned, go to 0 + this.gesture.scroll += (this.gesture.scroll + delta) * Infinity === this.gesture.direction ? delta : 0 - this.gesture.scroll; + // Render the new scroll position + this.__render(); + } + } + __mouseDownHandler(event) { + this.__dragStart = { + x: event.pageX, + y: event.pageY + }; + this.classList.add("touching"); + } + __mouseUpHandler(event) { + this.__dragStart = null; + this.__drag = null; + this.classList.remove("touching"); + + if (this.gesture.direction && this.gesture.touch) { + this.__touchEndHandler(event); + } + } + __mouseMoveHandler(event) { + /* + NOTE + Please note that the mouse controller is a fallback for the normal wheel controller. + Therefore the mouse position is interpreted as delta you know from wheel event. This is because the API is originally designed for such wheel events + */ + + if (this.__dragStart) { + const currDrag = { + x: -(event.pageX - this.__dragStart.x), + y: -(event.pageY - this.__dragStart.y) + }; + + if (this.__drag) { + const delta = currDrag.x - this.__drag.x; + + this.scrollDelta(delta); + } + + this.__drag = currDrag; + } + } + __render() { + // Get the related action list to the gesture's direction + const actionList = this.gesture.actionList; + + const scrollDiff = this.gesture.scrollDiff; + + // Global interaction with left & right swipes + + // Set each action's margin + const marginBase = (actionList.innerWidth - scrollDiff) / actionList.actions.length; + + // Render bounce effect of overscroll + if (this.gesture.overscroll) { + // Calculate bounce + let actionBounce = PhotonListItem.__calcActionBounce(this.gesture.overscrollPx / actionList.actions.length); + // Add bounce to every action + for (let action of this.gesture.actionList.actions) { + // Add bounce to orignal width (stored in '__staticWidth' which stores the original width as CSS property) + action.style.width = (parseCSSProperty(action.__staticCSSProperties["width"], "number") + actionBounce) + "px"; + } + } + // Handle each action + for (let action of this.gesture.actionList.actions) { + // Calculate the margin for current action + let margin = marginBase * action.__nodePos; + // Only use the margin if the inner width is smaller than total width + margin = margin > 0 ? margin : 0; + // Use margin as right margin for current action + action.style.right = margin + "px"; + } + + // Set action list's width to scrolled area + actionList.style.width = scrollDiff + "px"; + + const specialDirectionHandle = { + left: () => {}, + right: () => this.inner.style.marginLeft = -scrollDiff + "px" + }; + // Call special swipe calculations for the current direction + specialDirectionHandle[this.gesture.dirName](); + + + // Handle smart action + // Check wether there exist currently an action that should be used smartly + if (this.gesture.smartAction) { + this.gesture.smartCandidate.smart = true; + } + // No smart action + else { + this.gesture.smartCandidate.smart = false; + } + } + static __overscrollCalc(max, overscroll) { + return max + overscroll * 0.5; + } + static __calcActionBounce(bounce) { + return bounce / 5; + } +} +PhotonListItem.__gestureTouch = false; +PhotonListItem.__directions = { + left: -Infinity, + right: Infinity +}; + + +module.exports = PhotonListItem; diff --git a/dist/PhotonSwipe/README.md b/dist/PhotonSwipe/README.md new file mode 100644 index 0000000..7b0189f --- /dev/null +++ b/dist/PhotonSwipe/README.md @@ -0,0 +1,312 @@ +# Lists & Swipes + +![Swipe](https://dev.maurice-conrad.eu/img/photon/swipe1.png) +![Swipe](https://dev.maurice-conrad.eu/img/photon/swipe2.png) + +![Swipes Showreel](https://dev.maurice-conrad.eu/img/photon/swipes.gif) + +The `` element is theoretically independent but it is recommended to use it within a sidebar pane such as `
    ` because this is the way how the UI is meant. More about *pane* and *pane group* you can read in the documentation. + +## Layout + +The context should look like the following. + +```html +... +
    + ... +
    + + + + ... + + + ... + + ... + + + +
    + ... +
    +... +``` + +### List Group + +The list group in general is not complicated. Just use the element `` without any needed attributes. + +### List Item + +A `` shall be used within you `` as a single item. There can be so many ``'s as you want :) + +A `` has three important inner elements. +1. Action List on Left (Swipes) (Optional) +2. Item Inner +3. Action List on Right (Swipes) (Optional) + +```html +... + + + + ... + + + Swipe Action + + + ... + + + + Item Inner + + + + ... + + + Swipe Action + + + ... + + +... +``` + +As you can see, there are swipe actions used within. A swipe action has to be within a ``. Such an `` has to be left or right (before or after) the `` of a ``. In the first case it should have the *role* `left` and as list on the right side, it should have the *role* `right`. + +Within a `` you can put much ``'s as you want but more than **3** are not recommended. + +### Action List + +```html + + + ... + + + + Swipe Action + + + ... + +``` + +### Swipe Action + +A `` can contain a special **icon** container which is used for a centered icon you may use. + +```html +... + + + + +
    + + + +
    + Swipe Action +     +     +... +``` + +### Example + +```html +... + + + + + +
    + + + +
    + Action A +     +     + + +
    + + + +
    + Action B +     +     +     + + +
    + Swipe Me Both! +

    Swipe me to left or right! +

    +     + + + +
    + + + +
    + Action A +     +     + + +
    + + + +
    + Action B +     +     + + +
    + + + +
    + Action C +     +     +     +     + + + + +
    + + + +
    + Action A +     +     + + +
    + + + +
    + Action B +     +     +     + + +
    + Swipe Me Left! +

    Lorem ipsum dolor sit amet

    +
    +     +     + + + +
    + Swipe Me Right! +

    Lorem ipsum dolor sit amet dolor

    +
    +     + + + +
    + + + +
    + Action A +     +     + + +
    + + + +
    + Action B +     +     +     +     +     +... +``` + +## API + +### Methods + +All methods are provided by the `` element. + +#### open + +To open a `` list, use the method `open` of your ``. +The mathematical values `Infinity` & `-Infinity` are used here for *left* and *right* because the internal calculcations work in this way and it is much easier. + +```javascript +myListItem.open(Infinity); // Infinity for right opening or -Infinity for left opening +``` + +If you are going to open a `` which does not exist, an *Error* will occur. + +#### close + +To close the current open `` which can only be a single one, just call the `close` method on your ``. + +```javascript +myListItem.close(); +``` + +If no `` is currently open, an *Error* will occur. + + +### Events + +The `swipe` event is fired directly on the currently opened or closed `` but it is bubbling up. Therefore you are abled to listen to `swipe` event on the `` or on the whole `` instead. + +#### Local + +```javascript +myActionList.addEventListener("swipe", function(event) { + console.log(event); +}); +``` + +#### Global Level 2 + +```javascript +myListItem.addEventListener("swipe", function(event) { + console.log(event); +}); +``` + +#### Global Level 1 + +```javascript +myListGroup.addEventListener("swipe", function(event) { + console.log(event); +}); +``` + +To understand the event, just try it out :-) diff --git a/dist/PhotonSwipe/SwipeAction.js b/dist/PhotonSwipe/SwipeAction.js new file mode 100644 index 0000000..a3d8848 --- /dev/null +++ b/dist/PhotonSwipe/SwipeAction.js @@ -0,0 +1,24 @@ +const __prototypeExtensions = require('./../PrototypeExtensions'); + +class PhotonSwipeAction extends HTMLElement { + constructor() { + super(); + } + get __nodePos() { + return __prototypeExtensions.nodePos(this); + } + set smart(value) { + if (value) { + this.classList.add("smart"); + } + else { + this.classList.remove("smart"); + } + } + get smart() { + return this.classList.contains("smart"); + } +} + + +module.exports = PhotonSwipeAction; diff --git a/dist/PhotonSwipe/package.json b/dist/PhotonSwipe/package.json new file mode 100644 index 0000000..023a222 --- /dev/null +++ b/dist/PhotonSwipe/package.json @@ -0,0 +1,16 @@ +{ + "name": "photonswipe", + "version": "0.0.1", + "description": "Swipe controller for list-groups", + "keywords": [ + "swipe", + "controller", + "photon" + ], + "license": "ISC", + "author": "Maurice Conrad", + "main": "swipe.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + } +} diff --git a/dist/PhotonSwipe/swipe.css b/dist/PhotonSwipe/swipe.css new file mode 100644 index 0000000..6809599 --- /dev/null +++ b/dist/PhotonSwipe/swipe.css @@ -0,0 +1,166 @@ +list-group { + font-size: 0; + display: block; + overflow-x: hidden; +} +list-item { + display: inline-flex; + overflow: hidden; + width: 100%; +} +list-item * { + transition-duration: 0.5s; + transition-timing-function: ease-out; +} +list-item action-list { + display: inline-block; + flex: none; + white-space: nowrap; + overflow: hidden; + background-color: rgb(192, 192, 197); + transition-property: width; +} +list-item.touching action-list { + transition: none; + position: relative; +} +list-item action-list[role="left"] { + width: 0px; +} +list-item action-list[role="right"] { + width: 0px; + text-align: right; +} +list-item action-list swipe-action { + width: 65px; + display: inline-block; + height: 100%; + position: relative; + font-size: 13px; +} +list-item.touching action-list swipe-action { + transition: none; +} +list-item action-list swipe-action.smart { + transition: width 1s; + width: 95% !important; + +} +list-item action-list swipe-action:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + margin-right: -0.25em; /* Adjusts for spacing */ +} +list-item action-list swipe-action action-inner { + display: inline-block; + color: #fff; + font-weight: 300; + letter-spacing: 0.5px; + text-align: center; + width: 100%; + white-space: normal; + vertical-align: middle; +} +list-item action-list swipe-action action-inner > * { + +} +list-item action-list swipe-action action-inner .icon { + display: block; + width: 100%; + height: 24px; +} +list-item item-inner { + flex: none; + width: 100%; + font-size: 13px; + padding: 7px 0px 7px 12px; + text-align: left; + margin-left: -0px; + display: flex; + transition-property: margin-left; +} +list-item.touching item-inner { + transition: none; +} +list-item + list-item { + border-top: 1px solid rgb(225, 225, 225); +} +item-inner .media-object { + display: inline-block; + +} +item-inner .media-body { + margin: 0; + overflow: hidden; + display: inline-block; +} +item-inner .media-body p { + margin: 5px 0 0; +} +/* +item-inner .media-body { + display: inline-block; +} +.list-item-swipe .item-inner { + padding: 12px; + width: 100%; +} +.list-item-swipe .item-inner, .list-item-swipe .swipe-actions { + display: inline-block; + font-size: 12px; + vertical-align: middle; +} +.list-item-swipe.smart-action { + +} +.list-item-swipe .swipe-actions { + font-size: 0; + display: inline-block; + width: 0px; + position: relative; + background-color: #afafaf; + transition-timing-function: ; +} +.list-item-swipe .swipe-actions .action { + display: inline-block; + position: absolute; + font-size: 12px; + height: 100%; + transition-timing-function: ease-out; + width: 70px; +} +.list-item-swipe .swipe-actions-left .action { + left: 0px; +} +.list-item-swipe .swipe-actions-right .action { + right: 0px; +} +.action-inner { + vertical-align: middle; +} +.action-inner .action-center { + display: inline-block; + width: 100%; + text-align: center; + color: #fff; +} +.action-inner { + display: block; + position: absolute; + width: 100%; + text-align: center; + top: 50%; + transform: translate(0px, calc(-50%)); + font-size: 1.1em; + color: #fff; +} +.list-item-swipe.smart-action .action:first-child { + transition: width 0.3s; + width: 100%; +} +.list-item-swipe .swipe-actions-left .action:first-child { + transition-property: width; + transition-duration: 0.4s; +}*/ diff --git a/dist/PhotonSwipe/swipe.js b/dist/PhotonSwipe/swipe.js new file mode 100644 index 0000000..3a21108 --- /dev/null +++ b/dist/PhotonSwipe/swipe.js @@ -0,0 +1,17 @@ + +const Swipe = { + ListItem: require('./ListItem'), + ListGroup: require('./ListGroup'), + ListItemInner: require('./ListInner'), + SwipeActionList: require('./ActionList'), + SwipeAction: require('./SwipeAction') +}; + +customElements.define("list-group", Swipe.ListGroup); +customElements.define("list-item", Swipe.ListItem); +customElements.define("item-inner", Swipe.ListItemInner); +customElements.define("action-list", Swipe.SwipeActionList); +customElements.define("swipe-action", Swipe.SwipeAction); + + +module.exports = Swipe; diff --git a/dist/PhotonTab/README.md b/dist/PhotonTab/README.md new file mode 100644 index 0000000..8134695 --- /dev/null +++ b/dist/PhotonTab/README.md @@ -0,0 +1,248 @@ +# Tab Group + +The *Tab Group* component is completely redesigned as a much cleaner implementation. + +The component is independent but should be used after the *toolbar top* because this is the way the UI is designed. + +![Example](https://dev.maurice-conrad.eu/img/photon/tab1.png) + +![Activate Tab](https://dev.maurice-conrad.eu/img/photon/tab2.gif) + +![Move Tab](https://dev.maurice-conrad.eu/img/photon/tab1.gif) + + + +## Context + +```html +... + + + + + + ... + + ... + +... +``` + +## Layout + +```html + + + ... + + + + Tab Name + + + ... + + +``` + +This shall be self-explaining. The `` is optional but of course, if it does not exist, there will be no close button. + +### tab-group + +The `` element does not need any specific attributes. It is recommended to listen for events on the *tab-group*. More about events you will see in [API](#api) + +### tab-item + +#### Fixed + +To fix a tab item, just set its `type` to `fixed`. + +```html +... + + Fixed Tab + +... +``` + +#### Special Adding Tab + +A tab item can also have an `action` which is recommended for the tab on the right side. This tab would be used to add tabs using the UI. + +```html +... + +... +``` + +### Example + +```html + + + Fixed Tab + + + + Tab 2 + + + + Tab 3 + + + +``` + +## API + +### Methods + +#### Add Tab + +To add a tab to a `` you should call the `addTab` method on the *tab group* element. + +```javascript +const myNewTab = myTabGroup.addTab({ + position: "last", // "last" or "first" + closeBtn: true, // Wether the tab can be closed using a button within it + isActive: true, // Wether the tab item will be the active one + animated: true, // Wether an animation will be shown when adding the tab item + content: document.createTextNode("New Tab") // Node or string +}); +// Log the new tab item +console.log(myNewTab); +``` + +#### Close Tab + +To close a tab you can use the method `closeTab` on your `` or the method `close` on the `` instead. + +##### closeTab + +```javascript +myTabGroup.closeTab(myTabItem, { + animated: true // Wether an animation will be shown when closing the tab item +}); +``` + +##### close + +```javascript +myTabItem.close({ + animated: true // Wether an animation will be shown when closing the tab item +}); +``` + +#### Move Tab + +To move a tab item you can use the method `moveTab` on your `` or the method `move` on the `` instead. + +##### moveTab + +```javascript +const index = 1; +// Moves 'myTabItem' to position 1 (2nd). +myTabGroup.moveTab(myTabItem, index); +``` + +##### move + +```javascript +const index = 1; +// Moves 'myTabItem' to position 1 (2nd). +myTabItem.move(index); +``` + +#### Activate Tab + +To activate a tab item you can use the method `activateTab` on your `` or the method `activate` on the `` tab element instead. + +##### activateTab + +```javascript +myTabGroup.activateTab(myTabItem); +``` + +##### activate + +```javascript +myTabItem.activate(); +``` + +### Events + +All events that are connected to an existing `` are fired on the `` but they will bubble up to the ``. Only the event `tabAdd` will still be fired on the `` because it does not make sense to dire an event for a `` we actually do not know. + +Therefore all events can be handled on the `` directly. + +#### tabActivate + +##### Global + +```javascript +// Handle all tab activations for the whole group +myTabGroup.addEventListener("tabActivate", function(event) { + console.log(event); +}); +``` + +##### Local + +```javascript +// Handle tab activations for a specific tab-item +myTabItem.addEventListener("tabActivate", function(event) { + console.log(event); +}); +``` + +#### tabClose + +##### Global + +```javascript +// Handle all tab closings for the whole group +myTabGroup.addEventListener("tabClose", function(event) { + console.log(event); +}); +``` + +##### Local + +```javascript +// Handle tab closing for a specific tab-item +myTabItem.addEventListener("tabClose", function(event) { + console.log(event); +}); +``` + +#### tabAdd + +##### Global + +```javascript +// Handle all tab additions for the whole group +myTabGroup.addEventListener("tabAdd", function(event) { + console.log(event); +}); +``` + +#### tabMove + +##### Global + +```javascript +// Handle all tab movements for the whole group +myTabGroup.addEventListener("tabMove", function(event) { + console.log(event); +}); +``` + +##### Local + +```javascript +// Handle tab movements for a specific tab-item +myTabItem.addEventListener("tabMove", function(event) { + console.log(event); +}); +``` diff --git a/dist/PhotonTab/TabGroup.js b/dist/PhotonTab/TabGroup.js new file mode 100644 index 0000000..e28e094 --- /dev/null +++ b/dist/PhotonTab/TabGroup.js @@ -0,0 +1,151 @@ +const { hasParentSelector, getTransDur } = require('./../../helper'); + +class PhotonTabGroup extends HTMLElement { + constructor() { + super(); + //this.addEventListener(""); + } + get items() { + return this.getElementsByTagName("tab-item"); + } + get itemsDraggable() { + return Array.from(this.items).filter(item => item.dragability); + } + get itemsEnableable() { + return Array.from(this.items).filter(item => !item.isButton); + } + moveTab(item, index) { + // If tab moves really and does not remain on its old position + if (index != item.__nodePos) { + var posBefore = item.__nodePos; + this.insertBefore(item, this.items[index + (posBefore >= index ? 0 : 1)]); + item.dispatchEvent(new CustomEvent("tabMove", { + bubbles: true, + detail: { + tab: item, + position: index + } + })); + } + } + activateTab(item) { + // If the tab is enableable (no button itself!) and not still active + if (!item.isButton && !item.active) { + for (let item of this.items) { + item.classList.remove("active"); + } + item.classList.add("active"); + item.dispatchEvent(new CustomEvent("tabActivate", { + bubbles: true, + detail: { + tab: item + } + })); + return true; + } + return false; + } + closeTab(item, options) { + options = options.fillDefaults({ + animated: false + }); + // If the tab that will be closed, is the active one + if (item.active) { + // Get the index of this tab in the list of possible enableable tabs + let currItemIndexEnableable = this.itemsEnableable.indexOf(item); + // Use the tab before or the tab behind this one as the next one + let nextActiveItem = this.itemsEnableable[currItemIndexEnableable - 1] || this.itemsEnableable[currItemIndexEnableable + 1]; + // Activate this next tab + this.activateTab(nextActiveItem); + } + if (options.animated) { + item.classList.add("adding"); + item.style.width = item.__staticBoundings.width + "px"; + setTimeout(function() { + item.style.removeProperty("width"); + }, 10); + setTimeout(() => { + this.removeChild(item); + }, getTransDur(item) * 1000); + } + else { + this.removeChild(item); + } + item.dispatchEvent(new CustomEvent("tabClose", { + bubbles: true, + detail: { + tab: item, + options: options + } + })); + } + addTab(options = {}) { + options = options.fillDefaults({ + position: "last", + closeBtn: true, + isActive: true, + animated: true, + content: document.createTextNode("New Tab") + }); + var newTab = document.createElement("tab-item"); + if (options.closeBtn) { + var closeBtn = document.createElement("button"); + closeBtn.setAttribute("action", "close"); + newTab.appendChild(closeBtn); + } + newTab.appendChild(typeof options.content === "string" ? document.createTextNode(options.content) : options.content); + if (this.itemsDraggable.length > 0) { + var appendRefItem = options.position === "first" ? this.itemsDraggable[0] : this.items[this.itemsDraggable.last.__nodePos + 1]; + } + else { + var appendRefItem = this.items.last; + } + // Calculate new tab's width to perform transition + //const newTabWidth = this.itemsDraggable[0].getBoundingClientRect().width * this.itemsDraggable.length / (this.itemsDraggable.length + 1); + const newTabWidth = this.getTabWidth(this.itemsDraggable.length + 1); + if (appendRefItem) { + this.insertBefore(newTab, appendRefItem); + } + else { + this.appendChild(newTab); + } + if (options.animated) { + newTab.classList.add("adding"); + setTimeout(() => { + if (this.itemsDraggable.length > 0) { + newTab.style.width = newTabWidth + "px"; + } + }, 10); + setTimeout(function() { + newTab.classList.remove("adding"); + newTab.style.removeProperty("width"); + }, this.itemsDraggable.length > 0 ? (getTransDur(newTab) * 1000) : 0); + } + this.dispatchEvent(new CustomEvent("tabAdd", { + detail: { + tab: newTab, + options: options + } + })); + if (options.isActive) this.activateTab(newTab); + } + get __activeDraggingItem() { + for (let item of this.items) { + if (item.classList.contains("dragging")) { + return item + } + } + } + getTabWidth(count = 1) { + const fixedWidth = Array.from(this.items).filter(item => !item.dragability).reduce((a, b) => a.getBoundingClientRect().width + b.getBoundingClientRect().width); + + const totalWidth = this.getBoundingClientRect().width; + + return (totalWidth - fixedWidth) / count; + } + static __handleMouseDown() { + + } +} + +module.exports = PhotonTabGroup; diff --git a/dist/PhotonTab/TabItem.js b/dist/PhotonTab/TabItem.js new file mode 100644 index 0000000..61abd66 --- /dev/null +++ b/dist/PhotonTab/TabItem.js @@ -0,0 +1,205 @@ +const { getTransDur, hasParentSelector } = require('./../../helper'); +const __prototypeExtensions = require('./../PrototypeExtensions'); + +class PhotonTabItem extends HTMLElement { + constructor() { + super(); + const self = this; + + // Mouse down hanlder for this item + this.addEventListener("mousedown", PhotonTabItem.__handleMouseDown); + + //this.addEventListener("mousemove", PhotonTabItem.__handleMouseMove); + // Global mouseup handling for this element (Mouseup outside of window) + window.addEventListener("mouseup", (event) => { + // If this item is the current one that's be dragged + if (this.dragging) { + PhotonTabItem.__handleMouseUp.apply(this, [event]); + } + }); + // Global mousemove handling for this element (Mousemove outside of window) + window.addEventListener("mousemove", (event) => { + // If this item is the current one that's be dragged + if (this.dragging) { + PhotonTabItem.__handleMouseMove.apply(this, [event]); + } + }); + + this.addEventListener("click", (event) => { + // Get target path to a button + var btnTarget = hasParentSelector(event.target, "button"); + // If button exist, the click was on a button + if (btnTarget) { + var btnClose = btnTarget.last; + this.actions[btnClose.getAttribute("action")](this); + } + if (this.isButton) { + this.actions[this.action](this); + } + }); + this.actions = { + close(item) { + const group = self.parentNode; + group.closeTab(item, { + animated: true + }); + }, + add(item) { + const group = self.parentNode; + group.addTab({ + animated: true, + position: "last", + closeBtn: true, + isActive: true, + content: "New Tab" + }); + } + }; + } + + attributeChangedCallback(attr, oldValue, newValue) { + + } + move(index) { + const group = this.parentNode; + return group.moveTab(this, index); + } + close(options = {}) { + const group = this.parentNode; + return group.closeTab(this, options); + } + activate() { + const group = this.parentNode; + group.activateTab(this); + } + static __handleMouseDown(event) { + // Get target path to a button + var btnTarget = hasParentSelector(event.target, "button"); + const group = this.parentNode; + for (let item of group.items) { + item.__staticBoundings = item.getBoundingClientRect(); + } + + this.__dragStart = { + x: event.pageX, + y: event.pageY + }; + if (!btnTarget) { + if (this.dragability) { + // Add a 'dragging' class to the item + this.classList.add("dragging"); + // Add a 'in-drag' class to the tab group to determine this state + group.classList.add("in-drag"); + // Activate this item + } + // Activate this item + group.activateTab(this); + } + } + static __handleMouseUp(event) { + const group = this.parentNode; + if (this.dragging) { + // Dragging is over, remove "dragging" class from item but keep "in-drag" class on group in general because the animation after a succesfull drag is not finished and therefore, the current active tab needs special CSS rules + this.classList.remove("dragging"); + this.style.removeProperty("transform"); + const pos = { + x: event.pageX, + y: event.pageY + }; + var newPos = (function(x) { + for (let i = 0; i < group.items.length; i++) { + let item = group.items[i]; + // If current drag position is within the boundings of the tab item we ware looking for and this position can be achived because the item there is draggable + if (item.__staticBoundings.left <= x && item.__staticBoundings.right > x && item.dragability) { + // Seems to be exactly this new position + return i; + } + } + // Mouse pointer is outside of tab group (E.g. out of window) + // Therefore, use the most left or morst right item that draggable (Excludes fixed items) + return Math.abs(x - group.itemsDraggable[0].__staticBoundings.left) >= Math.abs(x - group.itemsDraggable.last.__staticBoundings.right) ? group.itemsDraggable.last.__nodePos : group.itemsDraggable[0].__nodePos; + })(pos.x); + // Calculate difference between old and new position + var diffX = group.items[newPos].__staticBoundings.left - this.__staticBoundings.left; + diffX += diffX >= 0 ? -2 : 2; + // If the new position is different from the old one, move the item to it + if (this.__nodePos != newPos) { + this.style.transform = "translate(" + diffX + "px, 0px)"; + } + // Wait for transition to be finished (Animating the dragged item to its target position) + setTimeout(function(group, currItem) { + // Move item in DOM context + currItem.move(newPos); + // Remove all tab item's 'transform' style property + for (let item of group.items) { + item.style.removeProperty("transform"); + } + // Remove classes 'in-drag' because dragging process is completly over + group.classList.remove("in-drag"); + }, getTransDur(this) * 1000, group, this); + } + } + static __handleMouseMove(event) { + const group = this.parentNode; + if (this.dragging) { + const pos = { + x: event.pageX, + y: event.pageY + }; + var dragDiff = pos.x - this.__dragStart.x; + this.style.transform = "translate(" + (dragDiff) + "px, 0px)"; + for (let i = 0; i < group.items.length; i++) { + let item = group.items[i]; + let leftX = item.__staticBoundings.left; + let rightX = item.__staticBoundings.right; + // If current item is before the dragged one + if (i < this.__nodePos) { + if (pos.x < rightX && item.dragability) { + item.style.transform = "translate(" + (this.__staticBoundings.width) + "px, 0px)"; + } + else item.style.removeProperty("transform"); + } + // If current item is after the dragged one + if (i > this.__nodePos) { + if (pos.x > leftX && item.dragability) { + item.style.transform = "translate(" + (-this.__staticBoundings.width) + "px, 0px)"; + } + else item.style.removeProperty("transform"); + } + } + } + } + get active() { + return this.classList.contains("active"); + } + get dragging() { + return this.classList.contains("dragging"); + } + get isButton() { + return !!this.action; + } + get __nodePos() { + return __prototypeExtensions.nodePos(this); + } + get action() { + return this.getAttribute("action"); + } + set action(value) { + this.setAttribute("action", value); + } + get type() { + return this.getAttribute("type"); + } + set type(value) { + this.setAttribute("type", value); + } + // Computed property that returns wether the item is draggable + get dragability() { + // Just check for a fixed type property + return this.type != "fixed"; + } +} +PhotonTabItem.observedAttributes = ["action"]; + + +module.exports = PhotonTabItem; diff --git a/dist/PhotonTab/package.json b/dist/PhotonTab/package.json new file mode 100644 index 0000000..a119d6d --- /dev/null +++ b/dist/PhotonTab/package.json @@ -0,0 +1,15 @@ +{ + "name": "photontab", + "version": "0.0.1", + "description": "Tab Group component", + "keywords": [ + "tab", + "tabgroup" + ], + "license": "ISC", + "author": "Maurice Conrad", + "main": "tab.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + } +} diff --git a/dist/PhotonTab/tab.css b/dist/PhotonTab/tab.css new file mode 100644 index 0000000..32b6b28 --- /dev/null +++ b/dist/PhotonTab/tab.css @@ -0,0 +1,128 @@ +tab-group { + border-top: 1px solid #a5a3a5; + border-bottom: 1px solid #a5a3a5; + background-image: linear-gradient(to bottom, #bdbaba 0%, #b0adb0 100%); + min-height: 22px; + z-index: 2; + width: 100%; +} +tab-item { + padding: 3px 3px 2px 3px; + font-size: 11px; + color: #4c4c52; + border-top: 1px solid #a5a3a5; + background-image: linear-gradient(to bottom, #c1bfc1 0%, #b8b6b8 100%); + margin-top: -1px; + border-right: 1px solid #989698; + margin-right: -1px; + box-sizing: border-box; +} +tab-item:first-child { + border-left: 1px solid #989698; + margin-left: -1px; +} +tab-item:not(.active):hover { + background-image: linear-gradient(rgb(182, 182, 182), rgb(177, 177, 177)); +} +tab-item:hover:not(.active):after { + opacity: 0; +} +tab-item.active { + background-image: linear-gradient(to bottom, #dedcde 0%, #d5d4d5 100%); + color: #202020; + border-top-color: #babbbe; +} + +tab-item button[action="close"] { + height: 16px; + width: 16px; + transition: opacity .3s linear; + border-radius: 2px; + background-color: transparent; +} +tab-item button[action="close"]:hover { + background-color: #9d9d9d; +} +tab-item:hover button[action="close"] { + background-image: url('data:image/svg+xml;utf8,'); +} +tab-item.active button[action="close"]:hover { + background-color: #c3c3c3; +} +tab-item.active:hover button[action="close"] { + background-image: url('data:image/svg+xml;utf8,'); +} +tab-item[type="fixed"][action="add"] { + width: 25px; + transition: border-color 0.2s; + background-image: url('data:image/svg+xml;utf8,'); + background-size: 100%; + box-sizing: border-box; +} +tab-item[type="fixed"][action="add"]:hover { + border-top-color: #858585; + border-left-color: #858585; + background-image: url('data:image/svg+xml;utf8,'), linear-gradient(to bottom, #b6b6b6 0%, #adadad 100%); +} +tab-item[type="fixed"][action="add"]:active:hover { + background-color: #a2a2a2; + background-image: url('data:image/svg+xml;utf8,'); +} +tab-item button[action="close"]:active { + background-color: #919191; +} +tab-item.active button[action="close"]:active { + background-color: #bababa; +} + + + + + + +tab-item { + transition-property: none; + transition-duration: .4s; +} +tab-item button { + outline: none; + border: none; + -webkit-appearance: none; + background-color: transparent; +} +.in-drag tab-item, tab-item.active:not(.dragging) { + transition-property: transform; + transition-timing-function: ease-out; +} + +tab-item.active { + z-index: 1; +} +tab-item.dragging { + transition-property: none; + +} + +tab-item.dragging.active.active-in-transition { + transition-property: left; + +} + +tab-item.adding { + flex: none; + width: 0px; + padding: normal 0px; + transition-property: width !important; + overflow: hidden; + max-height: 23px; +} + +tab-item[type="fixed"] { + + overflow: hidden; + border-bottom: none; + +} +tab-item[type="fixed"].btn { + border-radius: 0; +} diff --git a/dist/PhotonTab/tab.js b/dist/PhotonTab/tab.js new file mode 100644 index 0000000..8ee268a --- /dev/null +++ b/dist/PhotonTab/tab.js @@ -0,0 +1,13 @@ + +const Tab = { + TabGroup: require('./TabGroup'), + TabItem: require("./TabItem") +}; + + +customElements.define("tab-group", Tab.TabGroup); +customElements.define("tab-item", Tab.TabItem); + + + +module.exports = Tab; diff --git a/dist/PhotonTable/README.md b/dist/PhotonTable/README.md new file mode 100644 index 0000000..51bb52c --- /dev/null +++ b/dist/PhotonTable/README.md @@ -0,0 +1,38 @@ +# Table View + +![Table View](https://dev.maurice-conrad.eu/img/photon/table1.png) + +```html + + + + + + + + + + + + + + + + + + + + + + + + + ... + + + + + + +
    NameKindFile Size
    photon.cssCSS28K
    photon.cssCSS28K
    photon.cssCSS28K
    photon.cssCSS28K
    +``` diff --git a/dist/PhotonToolbar/README.md b/dist/PhotonToolbar/README.md new file mode 100644 index 0000000..92b6ad7 --- /dev/null +++ b/dist/PhotonToolbar/README.md @@ -0,0 +1,37 @@ +# Toolbar + +![Toolbars](https://dev.maurice-conrad.eu/img/photon/toolbar1.png) + +## Toolbar Header + +```html + + ... + +

    Toolbar Header

    + ... +     +``` + +### Toolbar Actions + +```html + + ... +
    + +
    + ... +     +``` + +## Toolbar Footer + +```html + + ... + +

    Toolbar Footer

    + ... +     +``` diff --git a/dist/PhotonToolbar/package.json b/dist/PhotonToolbar/package.json new file mode 100644 index 0000000..778603c --- /dev/null +++ b/dist/PhotonToolbar/package.json @@ -0,0 +1,16 @@ +{ + "name": "photontoolbar", + "version": "0.0.1", + "description": "Photon toolbar controller", + "main": "toolbar.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "toolbar", + "header", + "footer" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonToolbar/toolbar.css b/dist/PhotonToolbar/toolbar.css new file mode 100644 index 0000000..599d7cc --- /dev/null +++ b/dist/PhotonToolbar/toolbar.css @@ -0,0 +1,7 @@ +tool-bar { + +} +tool-bar[type="footer"] { + border-radius: 0px 0px 4px 4px; + background-image: linear-gradient(rgb(232, 232, 232), rgb(213, 213, 213)) !important; +} diff --git a/dist/PhotonToolbar/toolbar.js b/dist/PhotonToolbar/toolbar.js new file mode 100644 index 0000000..0cf45c5 --- /dev/null +++ b/dist/PhotonToolbar/toolbar.js @@ -0,0 +1,7 @@ +class Toolbar extends HTMLElement { + constructor() { + super(); + } +} + +customElements.define("tool-bar", Toolbar); diff --git a/dist/PhotonWindow/README.md b/dist/PhotonWindow/README.md new file mode 100644 index 0000000..56e4712 --- /dev/null +++ b/dist/PhotonWindow/README.md @@ -0,0 +1,37 @@ +# Window + +The `` element is the main element for each application. + +```html + + ... + +``` + +To make a macOS vibrancy effect appear, set the *vibrancy*'s type in the `data-vibrancy` attribute. The possible types depend on electron. The are listed on [Electron Browser Window](https://electronjs.org/docs/api/browser-window#class-browserwindow). + +## Context + +A `` itself does not look very interesting. To make the magic happen, you should combine it with `` & ``'s. + +In this example, you see both ``'s and ``. + +```html + + +

    Toolbar Header

    +     + + + ... + + + +

    Toolbar Footer

    +     +     +``` + +## Vibrancy + +The `data-vibrancy` attribute makes your window supporting macOS vibrancy. This means that the `` is basically transparent expect in the case you define your own background color. And some elements such as `` are semi-transparent and look like you know from *macOS*. diff --git a/dist/PhotonWindow/package.json b/dist/PhotonWindow/package.json new file mode 100644 index 0000000..3dbe497 --- /dev/null +++ b/dist/PhotonWindow/package.json @@ -0,0 +1,14 @@ +{ + "name": "photonwindow", + "version": "0.0.1", + "description": "Photon window controller", + "main": "window.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "window" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonWindow/window.css b/dist/PhotonWindow/window.css new file mode 100644 index 0000000..f7a9f60 --- /dev/null +++ b/dist/PhotonWindow/window.css @@ -0,0 +1,10 @@ +.window, ph-window { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + flex-direction: column; + background-color: #fff; +} diff --git a/dist/PhotonWindow/window.js b/dist/PhotonWindow/window.js new file mode 100644 index 0000000..4f23620 --- /dev/null +++ b/dist/PhotonWindow/window.js @@ -0,0 +1,37 @@ +const electron = require('electron'); + + +class PhotonWindow extends HTMLElement { + constructor() { + super(); + //console.log(this); + this.addEventListener("blur", function(event) { + //console.log("!!!"); + }); + + + } + attributeChangedCallback(attr, oldValue, newValue) { + if (attr in this.__attributeHandlers) { + this.__attributeHandlers[attr](oldValue, newValue); + } + } + get toolbars() { + return this.getElementsByTagName("tool-bar"); + } + get tabGroup() { + return this.getElementsByTagName("tab-group")[0]; + } + get content() { + return this.getElementsByTagName("window-content")[0]; + } +} +PhotonWindow.observedAttributes = ["data-vibrancy"]; +PhotonWindow.prototype.__attributeHandlers = { + ["data-vibrancy"](oldValue, newValue) { + const browserWindow = electron.remote.getCurrentWindow(); + browserWindow.setVibrancy(newValue); + } +}; + +customElements.define("ph-window", PhotonWindow); diff --git a/dist/PhotonWindowContent/README.md b/dist/PhotonWindowContent/README.md new file mode 100644 index 0000000..a289abf --- /dev/null +++ b/dist/PhotonWindowContent/README.md @@ -0,0 +1,14 @@ +# Window Content + +The `` element is used to define the window's real content after the header toolbar and before the footer toolbar. +It is recommended to use it within the `` element. + +```html + + ... + + ... + + ... + +``` diff --git a/dist/PhotonWindowContent/package.json b/dist/PhotonWindowContent/package.json new file mode 100644 index 0000000..39b6583 --- /dev/null +++ b/dist/PhotonWindowContent/package.json @@ -0,0 +1,15 @@ +{ + "name": "photonwindowcontent", + "version": "0.0.1", + "description": "window content controller", + "main": "window-content.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "window", + "content" + ], + "author": "Maurice Conrad", + "license": "ISC" +} diff --git a/dist/PhotonWindowContent/window-content.js b/dist/PhotonWindowContent/window-content.js new file mode 100644 index 0000000..ed97f43 --- /dev/null +++ b/dist/PhotonWindowContent/window-content.js @@ -0,0 +1,9 @@ +class WindowContent extends HTMLElement { + constructor() { + super(); + //console.log(this); + + } +} + +customElements.define("window-content", WindowContent); diff --git a/dist/PhotonWindowContent/windowcontent.css b/dist/PhotonWindowContent/windowcontent.css new file mode 100644 index 0000000..21414c0 --- /dev/null +++ b/dist/PhotonWindowContent/windowcontent.css @@ -0,0 +1,3 @@ +window-content { + top: 100px !important; +} diff --git a/dist/PrototypeExtensions.js b/dist/PrototypeExtensions.js new file mode 100644 index 0000000..3f0b203 --- /dev/null +++ b/dist/PrototypeExtensions.js @@ -0,0 +1,9 @@ +module.exports = { + nodePos(e) { + for (var i = 0; i < e.parentNode.children.length; i++) { + if (e.parentNode.children[i] === e) { + return i; + } + } + } +}; diff --git a/dist/fonts/photon-entypo.eot b/dist/fonts/photon-entypo.eot deleted file mode 100644 index f70d126..0000000 Binary files a/dist/fonts/photon-entypo.eot and /dev/null differ diff --git a/dist/fonts/photon-entypo.svg b/dist/fonts/photon-entypo.svg deleted file mode 100644 index 9256ea8..0000000 --- a/dist/fonts/photon-entypo.svg +++ /dev/null @@ -1,295 +0,0 @@ - - - -Copyright (C) 2015 by original authors @ fontello.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/dist/fonts/photon-entypo.ttf b/dist/fonts/photon-entypo.ttf deleted file mode 100644 index 7f765b3..0000000 Binary files a/dist/fonts/photon-entypo.ttf and /dev/null differ diff --git a/dist/fonts/photon-entypo.woff b/dist/fonts/photon-entypo.woff deleted file mode 100644 index 87860e5..0000000 Binary files a/dist/fonts/photon-entypo.woff and /dev/null differ diff --git a/dist/photon.css b/dist/photon.css new file mode 100644 index 0000000..5d5af89 --- /dev/null +++ b/dist/photon.css @@ -0,0 +1,18 @@ +@import "./PhotonOriginal/photon-original.css"; + +@import "./PhotonWindow/window.css"; +@import "./PhotonButton/button.css"; +@import "./PhotonTab/tab.css"; +@import "./PhotonSwipe/swipe.css"; +@import "./PhotonBtnGroup/segment.css"; +@import "./PhotonContent/content.css"; +@import "./PhotonInput/input.css"; +@import "./PhotonCircularSlider/circular-slider.css"; +@import "./PhotonProgressCircle/progress-circle.css"; +@import "./PhotonSlider/slider.css"; +@import "./PhotonCustom/custom.css"; +@import "./PhotonProgress/progress.css"; +@import "./PhotonPanes/panes.css"; +@import "./PhotonMessages/messages.css"; +@import "./PhotonNumberInput/number-input.css"; +@import "./PhotonDialog/dialog.css"; diff --git a/dist/template-app/app.js b/dist/template-app/app.js deleted file mode 100644 index 6a80701..0000000 --- a/dist/template-app/app.js +++ /dev/null @@ -1,45 +0,0 @@ -// {app} Module to control application life. -// {BrowserWindow} Module to create native browser window. -const {app, BrowserWindow} = require('electron') - -// Keep a global reference of the window object, if you don't, the window will -// be closed automatically when the JavaScript object is garbage collected. -var mainWindow = null; - -// Quit when all windows are closed. -app.on('window-all-closed', function() { - // On OS X it is common for applications and their menu bar - // to stay active until the user quits explicitly with Cmd + Q - if (process.platform != 'darwin') { - app.quit(); - } -}); - -// This method will be called when Electron has finished -// initialization and is ready to create browser windows. -app.on('ready', function() { - // Create the browser window. - mainWindow = new BrowserWindow({ - width: 800, - height: 600, - minWidth: 500, - minHeight: 200, - acceptFirstMouse: true, - titleBarStyle: 'hidden', - frame: false - }); - - // and load the index.html of the app. - mainWindow.loadURL('file://' + __dirname + '/index.html'); - - // Open the DevTools. - //mainWindow.openDevTools(); - - // Emitted when the window is closed. - mainWindow.on('closed', function() { - // Dereference the window object, usually you would store windows - // in an array if your app supports multi windows, this is the time - // when you should delete the corresponding element. - mainWindow = null; - }); -}); diff --git a/dist/template-app/index.html b/dist/template-app/index.html deleted file mode 100644 index 037df97..0000000 --- a/dist/template-app/index.html +++ /dev/null @@ -1,183 +0,0 @@ - - - - Photon - - - - - - - - -
    - - -
    -

    Photon

    -
    - - -
    -
    -
    - -
    - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NameKindDate ModifiedAuthor
    bars.scssDocumentOct 13, 2015connors
    base.scssDocumentOct 13, 2015connors
    button-groups.scssDocumentOct 13, 2015connors
    buttons.scssDocumentOct 13, 2015connors
    docs.scssDocumentOct 13, 2015connors
    forms.scssDocumentOct 13, 2015connors
    grid.scssDocumentOct 13, 2015connors
    icons.scssDocumentOct 13, 2015connors
    images.scssDocumentOct 13, 2015connors
    lists.scssDocumentOct 13, 2015connors
    mixins.scssDocumentOct 13, 2015connors
    navs.scssDocumentOct 13, 2015connors
    normalize.scssDocumentOct 13, 2015connors
    photon.scssDocumentOct 13, 2015connors
    tables.scssDocumentOct 13, 2015connors
    tabs.scssDocumentOct 13, 2015connors
    utilities.scssDocumentOct 13, 2015connors
    variables.scssDocumentOct 13, 2015connors
    -
    -
    -
    -
    - - diff --git a/dist/template-app/js/menu.js b/dist/template-app/js/menu.js deleted file mode 100644 index fc86b7c..0000000 --- a/dist/template-app/js/menu.js +++ /dev/null @@ -1,35 +0,0 @@ -// var remote = require('remote') -// var Menu = remote.require('menu') -// var MenuItem = remote.require('menu-item') -const {remote} = require('electron') -const {Menu,MenuItem} = remote - -// Build our new menu -var menu = new Menu() -menu.append(new MenuItem({ - label: 'Delete', - click: function() { - // Trigger an alert when menu item is clicked - alert('Deleted') - } -})) -menu.append(new MenuItem({ - label: 'More Info...', - click: function() { - // Trigger an alert when menu item is clicked - alert('Here is more information') - } -})) - -// Add the listener -document.addEventListener('DOMContentLoaded', function () { - - let filesContext = document.querySelectorAll('.file_arq'); - - filesContext.forEach(function(el){ - el.addEventListener('click', function (event) { - event.preventDefault() - menu.popup(remote.getCurrentWindow()); - }) - }) -}) diff --git a/dist/template-app/package.json b/dist/template-app/package.json deleted file mode 100644 index 865a3ca..0000000 --- a/dist/template-app/package.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "name": "proton-template-app", - "version": "1.0.0", - "description": "A simple template app for Proton", - "main": "app.js", - "author": "Connor Sears", - "scripts": { - "start": "electron ." - } -} diff --git a/fonts/photon-entypo.eot b/fonts/photon-entypo.eot deleted file mode 100644 index f70d126..0000000 Binary files a/fonts/photon-entypo.eot and /dev/null differ diff --git a/fonts/photon-entypo.svg b/fonts/photon-entypo.svg deleted file mode 100644 index 9256ea8..0000000 --- a/fonts/photon-entypo.svg +++ /dev/null @@ -1,295 +0,0 @@ - - - -Copyright (C) 2015 by original authors @ fontello.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/fonts/photon-entypo.ttf b/fonts/photon-entypo.ttf deleted file mode 100644 index 7f765b3..0000000 Binary files a/fonts/photon-entypo.ttf and /dev/null differ diff --git a/fonts/photon-entypo.woff b/fonts/photon-entypo.woff deleted file mode 100644 index 87860e5..0000000 Binary files a/fonts/photon-entypo.woff and /dev/null differ diff --git a/helper.js b/helper.js new file mode 100644 index 0000000..c15a157 --- /dev/null +++ b/helper.js @@ -0,0 +1,114 @@ +module.exports = { + hasParentSelector(e, selector) { + var children = []; + while (e && "matches" in e && !e.matches(selector)) { + children.push(e); + e = e.parentNode; + } + children.push(e); + return (e && "matches" in e && e.matches(selector)) ? children : false; + }, + getTransDur(e) { + return parseFloat(window.getComputedStyle(e, null).getPropertyValue("transition-duration").replace(/[a-z]/g, "").replace(/,/g, ".")) + }, + parseCSSProperty(value, type) { + const typeParsers = { + number(value) { + return parseFloat(value.replace(/[^0-9\.,]/g, "")); + } + }; + return typeParsers[type](value); + }, + objFillDefaults(obj, defaults) { + for (let key in defaults) { + if (defaults.hasOwnProperty(key)) { + if (!(key in obj)) { + obj[key] = defaults[key]; + } + else if (typeof defaults[key] === "object" && defaults[key] != null) { + obj[key] = this.objFillDefaults(obj[key], defaults[key]); + } + } + } + return obj; + }, + setSVGAttributes(e, attributes = {}) { + for (let name in attributes) { + if (attributes.hasOwnProperty(name)) { + e.setAttributeNS(null, name, attributes[name]); + } + } + }, + arrayMerge(arrays) { + return [].concat.apply([], arrays); + }, + argumentsSort(argumentsList = [], order = {}) { + const result = {}; + for (let arg of argumentsList) { + let type = typeof arg; + let key = order.keyFromValue(type); + result[key] = arg; + delete order[key]; + } + return result; + }, + getTemplate(templateScript) { + return new Promise(function(resolve, reject) { + if (templateScript.__templateChache) { + resolve(templateScript.__templateChache); + } + else if (templateScript.src) { + const templateRequest = new XMLHttpRequest(); + templateRequest.open("GET", templateScript.src, true); + templateRequest.addEventListener("load", function(event) { + templateScript.__templateChache = this.responseText; + resolve(this.responseText); + }); + templateRequest.addEventListener("error", function(event) { + reject(event); + }); + templateRequest.send(); + } + else { + resolve(templateScript.innerHTML); + } + }); + } +}; + +Array.merge = module.exports.arrayMerge; + + +Object.defineProperty(Array.prototype, "last", { + get() { + return this.lastFrom(0); + } +}); +Object.prototype.keyFromValue = function(value) { + for (var key in this) { + if (this.hasOwnProperty(key)) { + if (this[key] === value) { + return key; + } + } + } +}; +Array.prototype.indexOfKey = function(value, key, start = 0) { + for (var i = start; i < this.length; i++) { + if (this[i][key] === value) { + return i; + } + } + return -1; +} +Array.prototype.lastFrom = function(pos = 0) { + return this[this.length - 1 - pos]; +} + +Math.roundDeep = function(number, deepness = 0) { + const multi = Math.pow(10, deepness); + return Math.round(number * multi) / multi; +}; +Object.prototype.fillDefaults = function(defaults) { + return module.exports.objFillDefaults(this, defaults); +}; diff --git a/package.json b/package.json index d3380ed..3141600 100644 --- a/package.json +++ b/package.json @@ -1,44 +1,23 @@ { - "name": "photon", - "version": "0.1.2", - "author": "Connor Sears", - "keywords": [ - "photon", - "html", - "css", - "electron" - ], - "style": "dist/css/photon.css", - "sass": "sass/photon.scss", - "repository": { - "type": "git", - "url": "https://github.com/connors/photon.git" - }, - "bugs": { - "url": "https://github.com/connors/photon/issues" - }, - "scripts": { - "start": "electron dist/template-app", - "build": "grunt" - }, - "license": "MIT", - "devDependencies": { - "electron-prebuilt": "^0.36.0", - "grunt": "~0.4.5", - "grunt-banner": "~0.5.0", - "grunt-cli": "^0.1.13", - "grunt-contrib-clean": "~0.6.0", - "grunt-contrib-compress": "~0.13.0", - "grunt-contrib-concat": "~0.5.1", - "grunt-contrib-connect": "~0.11.2", - "grunt-contrib-copy": "~0.8.0", - "grunt-contrib-cssmin": "~0.13.0", - "grunt-contrib-sass": "~0.9.2", - "grunt-contrib-watch": "~0.6.1", - "grunt-html": "~5.0.0", - "grunt-jekyll": "~0.4.2", - "grunt-sed": "twbs/grunt-sed#v0.2.0", - "load-grunt-tasks": "~3.2.0", - "time-grunt": "~1.2.0" - } + "name": "electron-photon", + "version": "0.1.0", + "description": "Photon UI for macOS, windows & linux", + "keywords": [ + "ui", + "native", + "mac", + "windows", + "linux" + ], + "license": "ISC", + "author": "Maurice Conrad", + "main": "photon.js", + "repository": { + "type": "git", + "url": "git://github.com/MauriceConrad/Photon.git" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "dependencies": {} } diff --git a/photon.js b/photon.js new file mode 100644 index 0000000..b8a0b14 --- /dev/null +++ b/photon.js @@ -0,0 +1,129 @@ +(function() { + const fs = require('fs'); + + const componentsBasePath = "./components"; + + const Photon = {}; + + + const components = { + "Original": { + path: "dist/PhotonOriginal", + style: "photon-original.css" + }, + Button: { + path: "dist/PhotonButton", + style: "button.css" + }, + "Custom": { + path: "dist/PhotonCustom", + style: "custom.css" + }, + "Window": { + path: "dist/PhotonWindow", + style: "window.css" + }, + "WindowContent": { + path: "dist/PhotonWindowContent" + }, + "Toolbar": { + path: "dist/PhotonToolbar", + style: "toolbar.css" + }, + "ButtonGroup": { + path: "dist/PhotonBtnGroup", + style: "segment.css" + }, + "Tab": { + path: "dist/PhotonTab", + style: "tab.css" + }, + "List": { + path: "dist/PhotonSwipe", + style: "swipe.css" + }, + "Content": { + path: "dist/PhotonContent", + style: "content.css" + }, + "Input": { + path: "dist/PhotonInput", + style: "input.css" + }, + "ProgressCircle": { + path: "dist/PhotonProgressCircle", + style: "progress-circle.css" + }, + "CircularSlider": { + path: "dist/PhotonCircularSlider", + style: "circular-slider.css" + }, + "Slider": { + path: "dist/PhotonSlider", + style: "slider.css" + }, + "Panes": { + path: "dist/PhotonPanes", + style: "panes.css" + }, + "Messages": { + path: "dist/PhotonMessages", + style: "messages.css" + }, + "NumberInput": { + path: "dist/PhotonNumberInput", + style: "number-input.css" + }, + "Dialog": { + path: "dist/PhotonDialog", + style: "dialog.css" + }, + "DropDown": { + path: "dist/PhotonMenu", + //style: "dropdown.css" + }, + "PhotonNavigation": { + path: "dist/PhotonNavigation", + style: "navigation.css" + } + }; + + const photonStyleSheetPath = __dirname + "/dist/photon.css"; + + const photonStyle = document.createElement("style"); + document.head.append(photonStyle); + + + // Loop trough compontents + for (let componentName in components) { + // If the key name relates to a real property + if (components.hasOwnProperty(componentName)) { + // Get the compontents full path + let componentBaseDir = __dirname + "/" + components[componentName].path; + // Require te compontent with CommonJS + let component = require(componentBaseDir); + // Set a back reference to Photon class to the component + component.__self = Photon; + // Set component as property of Photon class + Object.defineProperty(Photon, componentName, { + value: component, + configurable: false, + enumerable: true, + writeable: false + }); + // If the compontent has a related stylesheet + if (components[componentName].style) { + // Get the stylesheet's full path + let styleSheetPath = componentBaseDir + "/" + components[componentName].style; + // Append an @import statement to the styleheet of photon that refers to the components stylesheet + photonStyle.append('@import "' + styleSheetPath + '";'); + } + } + } + + if (window) { + window.Photon = Photon; + } + module.exports = Photon; + +})(); diff --git a/sass/appify.scss b/sass/appify.scss deleted file mode 100644 index 92089ec..0000000 --- a/sass/appify.scss +++ /dev/null @@ -1,23 +0,0 @@ -// -// Basic styles that make web elements behave more like native applications -// ------------------------------------------------------------------------ - -* { - cursor: default; - -webkit-user-select: none; -} - -// Forms -input, -textarea { - -webkit-user-select: text; -} - -form, -input, -optgroup, -select, -textarea { - -webkit-user-select: text; - -webkit-app-region: no-drag; -} diff --git a/sass/bars.scss b/sass/bars.scss deleted file mode 100644 index 88eaaa8..0000000 --- a/sass/bars.scss +++ /dev/null @@ -1,56 +0,0 @@ -// -// Bars.css -// -------------------------------------------------- - -.toolbar { - min-height: 22px; - box-shadow: inset 0 1px 0 #f5f4f5; - @include linear-gradient(#e8e6e8, #d1cfd1); - @include clearfix; -} - -.toolbar-header { - border-bottom: 1px solid $dark-border-color; - - .title { - margin-top: 1px; - } -} - -.toolbar-footer { - border-top: 1px solid $dark-border-color; - -webkit-app-region: drag; -} - -// Simple centered title to go in the toolbar -.title { - margin: 0; - font-size: 12px; - font-weight: 400; - text-align: center; - color: #555; - cursor: default; -} - -// Borderless toolbar for the clean look -.toolbar-borderless { - border-top: 0; - border-bottom: 0; -} - -// Buttons in toolbars -.toolbar-actions { - margin-top: 4px; - margin-bottom: 3px; - padding-right: 3px; - padding-left: 3px; - padding-bottom: 3px; - -webkit-app-region: drag; - @include clearfix; - - > .btn, - > .btn-group { - margin-left: 4px; - margin-right: 4px; - } -} diff --git a/sass/base.scss b/sass/base.scss deleted file mode 100644 index c397d64..0000000 --- a/sass/base.scss +++ /dev/null @@ -1,69 +0,0 @@ -// -// Base styles -// -------------------------------------------------- - -* { - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -html { - height: 100%; - width: 100%; - overflow: hidden; -} - -body { - height: 100%; - padding: 0; - margin: 0; - font-family: $font-family-default; - font-size: $font-size-default; - line-height: $line-height-default; - color: $gray-color; - background-color: transparent; -} - -hr { - margin: 15px 0; - overflow: hidden; - background: transparent; - border: 0; - border-bottom: 1px solid $border-color; -} - -// Typography -h1, h2, h3, h4, h5, h6 { - margin-top: 20px; - margin-bottom: 10px; - font-weight: 500; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -h1 { font-size: 36px; } -h2 { font-size: 30px; } -h3 { font-size: 24px; } -h4 { font-size: 18px; } -h5 { font-size: 14px; } -h6 { font-size: 12px; } - -// Basic app structure -.window { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: flex; - flex-direction: column; - background-color: $chrome-color; -} - -.window-content { - position: relative; - overflow-y: auto; - display: flex; - flex: 1; -} diff --git a/sass/button-groups.scss b/sass/button-groups.scss deleted file mode 100644 index 4cfb970..0000000 --- a/sass/button-groups.scss +++ /dev/null @@ -1,72 +0,0 @@ -// -// Button-groups.css -// Adapted from Bootstrap's button-groups.less (https://github.com/twbs/bootstrap/blob/master/less/button-groups.less) -// -------------------------------------------------- - -// Button groups -.btn-group { - position: relative; - display: inline-block; - vertical-align: middle; // match .btn alignment given font-size hack above - -webkit-app-region: no-drag; - - .btn { - position: relative; - float: left; - - // Bring the "active" button to the front - &:focus, - &:active{ - z-index: 2; - } - - &.active { - z-index: 3; - } - } -} - -// Prevent double borders when buttons are next to each other -.btn-group { - .btn + .btn, - .btn + .btn-group, - .btn-group + .btn, - .btn-group + .btn-group { - margin-left: -1px; - } - - > .btn:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - > .btn:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - > .btn:not(:first-child):not(:last-child) { - border-radius: 0; - } - - .btn + .btn { - border-left: 1px solid $dark-border-color; - } - - .btn + .btn.active { - border-left: 0; - } - - // Selected state - .active { - color: #fff; - border: 1px solid transparent; - background-color: #6d6c6d; - background-image: none; - } - - // Invert the icon in the active button - .active .icon { - color: #fff; - } -} diff --git a/sass/buttons.scss b/sass/buttons.scss deleted file mode 100644 index 63d8198..0000000 --- a/sass/buttons.scss +++ /dev/null @@ -1,130 +0,0 @@ -// -// Buttons.css -// -------------------------------------------------- - -.btn { - display: inline-block; - padding: 3px 8px; - margin-bottom: 0; - font-size: 12px; - line-height: 1.4; - text-align: center; - white-space: nowrap; - vertical-align: middle; - cursor: default; - background-image: none; - border: 1px solid transparent; - border-radius: $default-border-radius; - box-shadow: 0 1px 1px rgba(0,0,0,.06); - -webkit-app-region: no-drag; - - &:focus { - outline: none; - box-shadow: none; - } -} - -.btn-mini { - padding: 2px 6px; -} - -.btn-large { - padding: 6px 12px; -} - -.btn-form { - padding-right: 20px; - padding-left: 20px; -} - -// Normal buttons -.btn-default { - color: $gray-color; - border-top-color: $dark-border-color; - border-right-color: $dark-border-color; - border-bottom-color: $darker-bottom-border-color; - border-left-color: $dark-border-color; - @include linear-gradient(#fcfcfc, #f1f1f1); - - &:active { - background-color: #ddd; - background-image: none; - } -} - -// Button variations -.btn-primary, -.btn-positive, -.btn-negative, -.btn-warning { - color: #fff; - text-shadow: 0 1px 1px rgba(0,0,0,.1); -} - -// For primary buttons -.btn-primary { - border-color: #388df8; - border-bottom-color: darken(#388df8, 15%); - @include linear-gradient(#6eb4f7, #1a82fb); - - &:active { - @include linear-gradient(darken(#6eb4f7, 10%), darken(#1a82fb, 10%)); - } -} - -// For positive buttons -.btn-positive { - border-color: darken($positive-color, 10%); - border-bottom-color: darken($positive-color, 15%); - @include linear-gradient(lighten($positive-color, 10%), darken($positive-color, 10%)); - - &:active { - @include linear-gradient($positive-color, darken($positive-color, 15%)); - } -} - -// For negative actions -.btn-negative { - border-color: darken($negative-color, 10%); - border-bottom-color: darken($negative-color, 15%); - @include linear-gradient(lighten($negative-color, 10%), darken($negative-color, 10%)); - - &:active { - @include linear-gradient($negative-color, darken($negative-color, 15%)); - } -} - -// For warning actions -.btn-warning { - border-color: darken($warning-color, 10%); - border-bottom-color: darken($warning-color, 15%); - @include linear-gradient(lighten($warning-color, 10%), darken($warning-color, 10%)); - - &:active { - @include linear-gradient($warning-color, darken($warning-color, 15%)); - } -} - -// Icons in buttons -.btn .icon { - float: left; - width: 14px; - height: 14px; - margin-top: 1px; - margin-bottom: 1px; - color: #737475; - font-size: 14px; - line-height: 1; -} - -// Add the margin next to the icon if there is text in the button too -.btn .icon-text { - margin-right: 5px; -} - -// This utility class add a down arrow icon to the button -.btn-dropdown:after { - font-family: "photon-entypo"; - margin-left: 5px; - content: '\e873'; -} diff --git a/sass/docs.scss b/sass/docs.scss deleted file mode 100644 index a8363ae..0000000 --- a/sass/docs.scss +++ /dev/null @@ -1,557 +0,0 @@ -// -// Docs.css -// -------------------------------------------------- - -//Imports -@import "mixins.scss"; - -// Docs variables -$desktop-spacing: 3rem; -$mobile-spacing: 1rem; - -//Base styles -* { - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -body { - font: 16px/1.7 "Roboto", "Helvetica Neue", Helvetica, arial, sans-serif; - font-weight: 300; - color: #333; -} - -// Typography -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - font-weight: 300; -} - -h2 { - margin-bottom: .18em; - font-size: 1.6em; -} - -h3 { - margin-bottom: .15em; - font-size: 1.3em; -} - -h5 { - font-weight: 400; -} - -p { - margin-top: .5em; - margin-bottom: .5em; - font-size: 1em; - color: #555; -} - -.download-decription { - margin-bottom: 1em; -} - -.lead { - font-size: 1.1em; - color: #777; -} - -a { - color: #4b92c6; - text-decoration: none; -} - -// Code -.highlight { - margin: 0; - font-size: .9em; -} - -// Buttons -.btn { - display: inline-block; - padding: 10px 15px; - margin-bottom: 0; - font-size: 14px; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: middle; - text-decoration: none; - color: #666; - background-image: none; - border: 1px solid #ddd; - border-radius: 4px; - transition: all .2s linear; - - &:hover { - border-color: #999; - } -} - -.btn-components, -.btn-download { - margin-right: $mobile-spacing; - margin-left: $mobile-spacing; - padding: 12px 30px; - display: block; -} - -.btn-download { - margin-bottom: 1rem; - color: #0f2b3c; - border-color: transparent; - background-color: rgba(255,255,255,.9); - - &:hover { - border-color: transparent; - background-color: #fff; - } -} - -@media (min-width: 32em) { - .btn-components, - .btn-download { - margin-right: 0; - margin-left: 0; - display: inline-block; - } - - .btn-download { - margin-right: 1rem; - margin-bottom: 0; - margin-left: 0; - } -} - -.btn-inversed { - color: #fff; - border-color: rgba(255,255,255,.7); - - &:hover { - border-color: #fff; - } -} - -// Use a simple flexbox grid -.container { - margin-left: auto; - margin-right: auto; - padding-left: $mobile-spacing; - padding-right: $mobile-spacing; - @include clearfix; -} -.col { - position: relative; - padding: 3rem $mobile-spacing; -} - -@media (min-width: 32em) { - .container { - padding-left: 0; - padding-right: 0; - max-width: 65rem; - } - - .col-group { - display: -webkit-flex; // Make the grid work in older Safari browsers - display: -ms-flex; // Make the grid work in older IE browsers - display: flex - } - - .col { - min-width: 0; // Fixes everything for firefox - padding-right: $desktop-spacing; - padding-left: $desktop-spacing; - flex: 1; - } - - .col-one-third { - max-width: 33.333%; - } -} - -// Masthead Jumbotron -.masthead { - position: relative; - padding-bottom: 80px; - color: #fff; - background-image: url('/assets/img/photo-couch.png'); - background-size: cover; - - &:after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - content: ""; - background-color: #000; - opacity: .25; - z-index: 1; - } -} - -.masthead-content { - position: relative; - margin-top: 50px; - z-index: 10; -} - -.masthead-title { - margin: 0; - padding: 0 1rem 1.5rem; - font-size: 1.5em; - text-shadow: 0 0 3px rgba(0,0,0,.3); -} - -@media (min-width: 32em) { - .masthead { - background-position: center; - - &:after { - display: none; - } - } - - .masthead-title { - padding: 0 8rem 3rem; - font-size: 2.1em; - } -} - -.photo-credit { - position: absolute; - left: 50%; - bottom: 1em; - font-size: .8em; - color: #fff; - white-space: nowrap; - transform: translatex(-50%); - transition: opacity .15s linear; - opacity: .5; - z-index: 10; - - &:hover { - opacity: .9; - } -} - -// Sub page masthead -.sub-masthead { - color: #fff; - text-shadow: 0 0 3px rgba(0,0,0,.3); - @include directional-gradient(#000, #0f2b3c); -} - -.subpage-header-content { - padding: 2.5rem 1rem 3rem; -} - -@media (min-width: 32em) { - .subpage-header-content { - padding: 3rem 3rem 4rem; - } -} - -.subpage-title { - margin-top: 0; - margin-bottom: 0; - font-weight: 300; -} - -.subpage-lead { - margin-top: 0; - margin-bottom: 0; - color: #fff; - font-size: 1.3em; - font-weight: 300; - opacity: .8; -} - -// Navbar inside each masthead and sub masthead -.nav { - position: relative; - padding-top: 1.2rem; - padding-bottom: 1.2rem; - margin-left: $mobile-spacing; - margin-right: $mobile-spacing; - display: block; - font-weight: 500; - border-bottom: 1px solid rgba(255,255,255,.2); - z-index: 10; - @include clearfix; -} - -.title { - display: block; - font-size: 1em; - color: #fff; -} - -.nav-item { - margin-right: .7rem; - font-size: .8em; - color: #fff; - line-height: 1; - opacity: .7; - transition: opacity .15s linear; - - &:hover { - opacity: 1; - } -} - -.nav-group { - display: block; -} - -@media (min-width: 32em) { - .nav { - margin-left: $desktop-spacing; - margin-right: $desktop-spacing; - } - - .title { - float: left; - } - - .nav-group { - margin-top: .5em; - float: right; - } - - .nav-item { - margin-right: $desktop-spacing; - float: left; - } - - .nav-item:last-child { - margin-right: 0; - } -} - -// Wrap the example in window style (border and box-shadow) -.example-component-window { - height: 300px; - overflow: hidden; - box-shadow: 0 0 30px rgba(0,0,0,.1); - border: 1px solid #bebebe; - border-radius: 6px; -} - -// The demo is useless on mobile -@media (min-width: 32em) { - .example-component-container { - position: -webkit-sticky; - position: -moz-sticky; - position: -ms-sticky; - position: -o-sticky; - position: sticky; - top: $desktop-spacing; - min-width: 310px; - margin-bottom: $desktop-spacing; - } -} - -// This is the homepage's demo -.demo-app-container { - height: 450px; - margin-right: $desktop-spacing; - margin-bottom: $desktop-spacing; - margin-left: $desktop-spacing; - display: none; - border-radius: 6px; - overflow: hidden; - box-shadow: 0 0 60px rgba(0,0,0,.3); -} - -// The demo is useless on mobile -@media (min-width: 32em) { - .demo-app-container { - display: block; - } -} - -.demo-app, -.component-example { - width: 100%; - height: 100%; - display: block; - border: 0; -} - -// Sections -.docs-section { - border-bottom: 1px solid #ddd; -} - -.docs-section-gray { - background-color: #f8f8f8; -} - -@media (min-width: 32em) { - .basic-template-section { - border-top: 1px solid #ddd; - } -} - -.oss-section { - position: relative; - color: #fff; - text-shadow: 0 0 3px rgba(0,0,0,.3); - @include directional-gradient(#000, #0f2b3c); - - a:not(.btn) { - color: #fff; - } - - p { - color: darken(#ffffff, 20%); - } - - .btn { - margin-top: 20px; - } - - .col:last-child { - padding-top: 0; // Give the two sections consistent spaceing on mobile - } -} - -@media (min-width: 32em) { - .oss-section .col:last-child { - padding-top: $desktop-spacing; - } -} - -.component-section { - margin-bottom: $mobile-spacing; - border-bottom: 1px solid #ddd; - - &.last-component-section { - margin-bottom: 0; - } - - .col:last-child { - padding-top: 0; - } -} - -// Component section (split) -@media (min-width: 32em) { - .component-section { - margin-bottom: 0; - border-bottom: 0; - @include split-linear-gradient(#fff, #f5f5f5); - - .col { - padding-top: $desktop-spacing; - border-left: 1px solid #ddd; - - &:first-child { - border-left: 0; - } - - &:last-child { - padding-top: $desktop-spacing; - padding-bottom: 0; - } - } - } -} - -.component-description { - margin-bottom: 2rem; -} - -// Footer -.footer { - margin-top: -1px; // Remove the double border - border-top: 1px solid #ddd; -} - -.footer-content { - font-size: .8em; - font-weight: 500; - opacity: .8; -} - -.footer-links { - padding-left: 0; - list-style: none; - - li { - display: inline-block; - } -} - -@media (min-width: 32em) { - .footer-content { - margin-right: 5rem; - margin-left: 5rem; - } -} - -// Utilities -.text-centered { - text-align: center; -} - -.docs-hr { - margin-top: 2rem; - margin-bottom: 2rem; - background: 0 0; - border: 0; - border-bottom: 1px solid #ddd; -} - -// Icons -@font-face { - font-family: "photon-entypo"; - src: url('/dist/fonts/photon-entypo.eot'); - src: url('/dist/fonts/photon-entypo.eot?#iefix') format('eot'), - url('/dist/fonts/photon-entypo.woff') format('woff'), - url('/dist/fonts/photon-entypo.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -.icon:before { - position: relative; - display: inline-block; - font-family: "photon-entypo"; - speak: none; - font-size: 100%; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-bucket:before { content: '\e8d5'; } /* '' */ -.icon-code:before { content: '\e834'; } /* '' */ -.icon-window:before { content: '\e86d'; } /* '' */ - - -// Component specific CSS -.buttons-component { - height: 80px; -} - -.button-groups-component { - height: 110px; -} - -.forms-component { - height: 430px; -} - -.icons-component { - height: 700px; - overflow: hidden; -} diff --git a/sass/forms.scss b/sass/forms.scss deleted file mode 100644 index f24e7e8..0000000 --- a/sass/forms.scss +++ /dev/null @@ -1,91 +0,0 @@ -// -// Forms.css -// Adapted from Bootstrap's forms.less (https://github.com/twbs/bootstrap/blob/master/less/forms.less) -// -------------------------------------------------- - -label { - display: inline-block; - font-size: $font-size-default; - margin-bottom: 5px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -input[type="search"] { - box-sizing: border-box; -} - -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - line-height: normal; -} - -.form-control { - display: inline-block; - width: 100%; - min-height: 25px; - padding: $padding-less $padding; - font-size: $font-size-default; - line-height: $line-height-default; - background-color: $chrome-color; - border: 1px solid $border-color; - border-radius: $default-border-radius; - outline: none; - - &:focus { - border-color: $focus-input-color; - box-shadow: 0 0 0 3px $focus-input-color; - } -} - -// Reset height for `textarea`s -textarea { - height: auto; -} - -// Form groups -// -// Designed to help with the organization and spacing of vertical forms. For -// horizontal forms, use the predefined grid classes. - -.form-group { - margin-bottom: 10px; -} - -// Checkboxes and radios -// -// Indent the labels to position radios/checkboxes as hanging controls. - -.radio, -.checkbox { - position: relative; - display: block; - margin-top: 10px; - margin-bottom: 10px; - - label { - padding-left: 20px; - margin-bottom: 0; - font-weight: normal; - } -} - -.radio input[type="radio"], -.radio-inline input[type="radio"], -.checkbox input[type="checkbox"], -.checkbox-inline input[type="checkbox"] { - position: absolute; - margin-left: -20px; - margin-top: 4px; -} - -// Form actions -.form-actions .btn { - margin-right: 10px; - - &:last-child { - margin-right: 0; - } -} diff --git a/sass/grid.scss b/sass/grid.scss deleted file mode 100644 index 3760057..0000000 --- a/sass/grid.scss +++ /dev/null @@ -1,43 +0,0 @@ -// -// The Grid.css -// -------------------------------------------------- - -.pane-group { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: flex; -} - -.pane { - position: relative; - overflow-y: auto; - flex: 1; - border-left: 1px solid $border-color; - - &:first-child { - border-left: 0; - } -} - -.pane-sm { - max-width: 220px; - min-width: 150px; -} - -.pane-mini { - width: 80px; - flex: none; -} - -.pane-one-fourth { - width: 25%; - flex: none; -} - -.pane-one-third { - width: 33.3%; - flex: none; -} diff --git a/sass/icons.scss b/sass/icons.scss deleted file mode 100644 index ee32820..0000000 --- a/sass/icons.scss +++ /dev/null @@ -1,309 +0,0 @@ -@font-face { - font-family: "photon-entypo"; - src: url($font-path + 'photon-entypo.eot'); - src: url($font-path + 'photon-entypo.eot?#iefix') format('eot'), - url($font-path + 'photon-entypo.woff') format('woff'), - url($font-path + 'photon-entypo.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -.icon:before { - position: relative; - display: inline-block; - font-family: "photon-entypo"; - speak: none; - font-size: 100%; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-note:before { content: '\e800'; } /* '' */ -.icon-note-beamed:before { content: '\e801'; } /* '' */ -.icon-music:before { content: '\e802'; } /* '' */ -.icon-search:before { content: '\e803'; } /* '' */ -.icon-flashlight:before { content: '\e804'; } /* '' */ -.icon-mail:before { content: '\e805'; } /* '' */ -.icon-heart:before { content: '\e806'; } /* '' */ -.icon-heart-empty:before { content: '\e807'; } /* '' */ -.icon-star:before { content: '\e808'; } /* '' */ -.icon-star-empty:before { content: '\e809'; } /* '' */ -.icon-user:before { content: '\e80a'; } /* '' */ -.icon-users:before { content: '\e80b'; } /* '' */ -.icon-user-add:before { content: '\e80c'; } /* '' */ -.icon-video:before { content: '\e80d'; } /* '' */ -.icon-picture:before { content: '\e80e'; } /* '' */ -.icon-camera:before { content: '\e80f'; } /* '' */ -.icon-layout:before { content: '\e810'; } /* '' */ -.icon-menu:before { content: '\e811'; } /* '' */ -.icon-check:before { content: '\e812'; } /* '' */ -.icon-cancel:before { content: '\e813'; } /* '' */ -.icon-cancel-circled:before { content: '\e814'; } /* '' */ -.icon-cancel-squared:before { content: '\e815'; } /* '' */ -.icon-plus:before { content: '\e816'; } /* '' */ -.icon-plus-circled:before { content: '\e817'; } /* '' */ -.icon-plus-squared:before { content: '\e818'; } /* '' */ -.icon-minus:before { content: '\e819'; } /* '' */ -.icon-minus-circled:before { content: '\e81a'; } /* '' */ -.icon-minus-squared:before { content: '\e81b'; } /* '' */ -.icon-help:before { content: '\e81c'; } /* '' */ -.icon-help-circled:before { content: '\e81d'; } /* '' */ -.icon-info:before { content: '\e81e'; } /* '' */ -.icon-info-circled:before { content: '\e81f'; } /* '' */ -.icon-back:before { content: '\e820'; } /* '' */ -.icon-home:before { content: '\e821'; } /* '' */ -.icon-link:before { content: '\e822'; } /* '' */ -.icon-attach:before { content: '\e823'; } /* '' */ -.icon-lock:before { content: '\e824'; } /* '' */ -.icon-lock-open:before { content: '\e825'; } /* '' */ -.icon-eye:before { content: '\e826'; } /* '' */ -.icon-tag:before { content: '\e827'; } /* '' */ -.icon-bookmark:before { content: '\e828'; } /* '' */ -.icon-bookmarks:before { content: '\e829'; } /* '' */ -.icon-flag:before { content: '\e82a'; } /* '' */ -.icon-thumbs-up:before { content: '\e82b'; } /* '' */ -.icon-thumbs-down:before { content: '\e82c'; } /* '' */ -.icon-download:before { content: '\e82d'; } /* '' */ -.icon-upload:before { content: '\e82e'; } /* '' */ -.icon-upload-cloud:before { content: '\e82f'; } /* '' */ -.icon-reply:before { content: '\e830'; } /* '' */ -.icon-reply-all:before { content: '\e831'; } /* '' */ -.icon-forward:before { content: '\e832'; } /* '' */ -.icon-quote:before { content: '\e833'; } /* '' */ -.icon-code:before { content: '\e834'; } /* '' */ -.icon-export:before { content: '\e835'; } /* '' */ -.icon-pencil:before { content: '\e836'; } /* '' */ -.icon-feather:before { content: '\e837'; } /* '' */ -.icon-print:before { content: '\e838'; } /* '' */ -.icon-retweet:before { content: '\e839'; } /* '' */ -.icon-keyboard:before { content: '\e83a'; } /* '' */ -.icon-comment:before { content: '\e83b'; } /* '' */ -.icon-chat:before { content: '\e83c'; } /* '' */ -.icon-bell:before { content: '\e83d'; } /* '' */ -.icon-attention:before { content: '\e83e'; } /* '' */ -.icon-alert:before { content: '\e83f'; } /* '' */ -.icon-vcard:before { content: '\e840'; } /* '' */ -.icon-address:before { content: '\e841'; } /* '' */ -.icon-location:before { content: '\e842'; } /* '' */ -.icon-map:before { content: '\e843'; } /* '' */ -.icon-direction:before { content: '\e844'; } /* '' */ -.icon-compass:before { content: '\e845'; } /* '' */ -.icon-cup:before { content: '\e846'; } /* '' */ -.icon-trash:before { content: '\e847'; } /* '' */ -.icon-doc:before { content: '\e848'; } /* '' */ -.icon-docs:before { content: '\e849'; } /* '' */ -.icon-doc-landscape:before { content: '\e84a'; } /* '' */ -.icon-doc-text:before { content: '\e84b'; } /* '' */ -.icon-doc-text-inv:before { content: '\e84c'; } /* '' */ -.icon-newspaper:before { content: '\e84d'; } /* '' */ -.icon-book-open:before { content: '\e84e'; } /* '' */ -.icon-book:before { content: '\e84f'; } /* '' */ -.icon-folder:before { content: '\e850'; } /* '' */ -.icon-archive:before { content: '\e851'; } /* '' */ -.icon-box:before { content: '\e852'; } /* '' */ -.icon-rss:before { content: '\e853'; } /* '' */ -.icon-phone:before { content: '\e854'; } /* '' */ -.icon-cog:before { content: '\e855'; } /* '' */ -.icon-tools:before { content: '\e856'; } /* '' */ -.icon-share:before { content: '\e857'; } /* '' */ -.icon-shareable:before { content: '\e858'; } /* '' */ -.icon-basket:before { content: '\e859'; } /* '' */ -.icon-bag:before { content: '\e85a'; } /* '' */ -.icon-calendar:before { content: '\e85b'; } /* '' */ -.icon-login:before { content: '\e85c'; } /* '' */ -.icon-logout:before { content: '\e85d'; } /* '' */ -.icon-mic:before { content: '\e85e'; } /* '' */ -.icon-mute:before { content: '\e85f'; } /* '' */ -.icon-sound:before { content: '\e860'; } /* '' */ -.icon-volume:before { content: '\e861'; } /* '' */ -.icon-clock:before { content: '\e862'; } /* '' */ -.icon-hourglass:before { content: '\e863'; } /* '' */ -.icon-lamp:before { content: '\e864'; } /* '' */ -.icon-light-down:before { content: '\e865'; } /* '' */ -.icon-light-up:before { content: '\e866'; } /* '' */ -.icon-adjust:before { content: '\e867'; } /* '' */ -.icon-block:before { content: '\e868'; } /* '' */ -.icon-resize-full:before { content: '\e869'; } /* '' */ -.icon-resize-small:before { content: '\e86a'; } /* '' */ -.icon-popup:before { content: '\e86b'; } /* '' */ -.icon-publish:before { content: '\e86c'; } /* '' */ -.icon-window:before { content: '\e86d'; } /* '' */ -.icon-arrow-combo:before { content: '\e86e'; } /* '' */ -.icon-down-circled:before { content: '\e86f'; } /* '' */ -.icon-left-circled:before { content: '\e870'; } /* '' */ -.icon-right-circled:before { content: '\e871'; } /* '' */ -.icon-up-circled:before { content: '\e872'; } /* '' */ -.icon-down-open:before { content: '\e873'; } /* '' */ -.icon-left-open:before { content: '\e874'; } /* '' */ -.icon-right-open:before { content: '\e875'; } /* '' */ -.icon-up-open:before { content: '\e876'; } /* '' */ -.icon-down-open-mini:before { content: '\e877'; } /* '' */ -.icon-left-open-mini:before { content: '\e878'; } /* '' */ -.icon-right-open-mini:before { content: '\e879'; } /* '' */ -.icon-up-open-mini:before { content: '\e87a'; } /* '' */ -.icon-down-open-big:before { content: '\e87b'; } /* '' */ -.icon-left-open-big:before { content: '\e87c'; } /* '' */ -.icon-right-open-big:before { content: '\e87d'; } /* '' */ -.icon-up-open-big:before { content: '\e87e'; } /* '' */ -.icon-down:before { content: '\e87f'; } /* '' */ -.icon-left:before { content: '\e880'; } /* '' */ -.icon-right:before { content: '\e881'; } /* '' */ -.icon-up:before { content: '\e882'; } /* '' */ -.icon-down-dir:before { content: '\e883'; } /* '' */ -.icon-left-dir:before { content: '\e884'; } /* '' */ -.icon-right-dir:before { content: '\e885'; } /* '' */ -.icon-up-dir:before { content: '\e886'; } /* '' */ -.icon-down-bold:before { content: '\e887'; } /* '' */ -.icon-left-bold:before { content: '\e888'; } /* '' */ -.icon-right-bold:before { content: '\e889'; } /* '' */ -.icon-up-bold:before { content: '\e88a'; } /* '' */ -.icon-down-thin:before { content: '\e88b'; } /* '' */ -.icon-left-thin:before { content: '\e88c'; } /* '' */ -.icon-right-thin:before { content: '\e88d'; } /* '' */ -.icon-up-thin:before { content: '\e88e'; } /* '' */ -.icon-ccw:before { content: '\e88f'; } /* '' */ -.icon-cw:before { content: '\e890'; } /* '' */ -.icon-arrows-ccw:before { content: '\e891'; } /* '' */ -.icon-level-down:before { content: '\e892'; } /* '' */ -.icon-level-up:before { content: '\e893'; } /* '' */ -.icon-shuffle:before { content: '\e894'; } /* '' */ -.icon-loop:before { content: '\e895'; } /* '' */ -.icon-switch:before { content: '\e896'; } /* '' */ -.icon-play:before { content: '\e897'; } /* '' */ -.icon-stop:before { content: '\e898'; } /* '' */ -.icon-pause:before { content: '\e899'; } /* '' */ -.icon-record:before { content: '\e89a'; } /* '' */ -.icon-to-end:before { content: '\e89b'; } /* '' */ -.icon-to-start:before { content: '\e89c'; } /* '' */ -.icon-fast-forward:before { content: '\e89d'; } /* '' */ -.icon-fast-backward:before { content: '\e89e'; } /* '' */ -.icon-progress-0:before { content: '\e89f'; } /* '' */ -.icon-progress-1:before { content: '\e8a0'; } /* '' */ -.icon-progress-2:before { content: '\e8a1'; } /* '' */ -.icon-progress-3:before { content: '\e8a2'; } /* '' */ -.icon-target:before { content: '\e8a3'; } /* '' */ -.icon-palette:before { content: '\e8a4'; } /* '' */ -.icon-list:before { content: '\e8a5'; } /* '' */ -.icon-list-add:before { content: '\e8a6'; } /* '' */ -.icon-signal:before { content: '\e8a7'; } /* '' */ -.icon-trophy:before { content: '\e8a8'; } /* '' */ -.icon-battery:before { content: '\e8a9'; } /* '' */ -.icon-back-in-time:before { content: '\e8aa'; } /* '' */ -.icon-monitor:before { content: '\e8ab'; } /* '' */ -.icon-mobile:before { content: '\e8ac'; } /* '' */ -.icon-network:before { content: '\e8ad'; } /* '' */ -.icon-cd:before { content: '\e8ae'; } /* '' */ -.icon-inbox:before { content: '\e8af'; } /* '' */ -.icon-install:before { content: '\e8b0'; } /* '' */ -.icon-globe:before { content: '\e8b1'; } /* '' */ -.icon-cloud:before { content: '\e8b2'; } /* '' */ -.icon-cloud-thunder:before { content: '\e8b3'; } /* '' */ -.icon-flash:before { content: '\e8b4'; } /* '' */ -.icon-moon:before { content: '\e8b5'; } /* '' */ -.icon-flight:before { content: '\e8b6'; } /* '' */ -.icon-paper-plane:before { content: '\e8b7'; } /* '' */ -.icon-leaf:before { content: '\e8b8'; } /* '' */ -.icon-lifebuoy:before { content: '\e8b9'; } /* '' */ -.icon-mouse:before { content: '\e8ba'; } /* '' */ -.icon-briefcase:before { content: '\e8bb'; } /* '' */ -.icon-suitcase:before { content: '\e8bc'; } /* '' */ -.icon-dot:before { content: '\e8bd'; } /* '' */ -.icon-dot-2:before { content: '\e8be'; } /* '' */ -.icon-dot-3:before { content: '\e8bf'; } /* '' */ -.icon-brush:before { content: '\e8c0'; } /* '' */ -.icon-magnet:before { content: '\e8c1'; } /* '' */ -.icon-infinity:before { content: '\e8c2'; } /* '' */ -.icon-erase:before { content: '\e8c3'; } /* '' */ -.icon-chart-pie:before { content: '\e8c4'; } /* '' */ -.icon-chart-line:before { content: '\e8c5'; } /* '' */ -.icon-chart-bar:before { content: '\e8c6'; } /* '' */ -.icon-chart-area:before { content: '\e8c7'; } /* '' */ -.icon-tape:before { content: '\e8c8'; } /* '' */ -.icon-graduation-cap:before { content: '\e8c9'; } /* '' */ -.icon-language:before { content: '\e8ca'; } /* '' */ -.icon-ticket:before { content: '\e8cb'; } /* '' */ -.icon-water:before { content: '\e8cc'; } /* '' */ -.icon-droplet:before { content: '\e8cd'; } /* '' */ -.icon-air:before { content: '\e8ce'; } /* '' */ -.icon-credit-card:before { content: '\e8cf'; } /* '' */ -.icon-floppy:before { content: '\e8d0'; } /* '' */ -.icon-clipboard:before { content: '\e8d1'; } /* '' */ -.icon-megaphone:before { content: '\e8d2'; } /* '' */ -.icon-database:before { content: '\e8d3'; } /* '' */ -.icon-drive:before { content: '\e8d4'; } /* '' */ -.icon-bucket:before { content: '\e8d5'; } /* '' */ -.icon-thermometer:before { content: '\e8d6'; } /* '' */ -.icon-key:before { content: '\e8d7'; } /* '' */ -.icon-flow-cascade:before { content: '\e8d8'; } /* '' */ -.icon-flow-branch:before { content: '\e8d9'; } /* '' */ -.icon-flow-tree:before { content: '\e8da'; } /* '' */ -.icon-flow-line:before { content: '\e8db'; } /* '' */ -.icon-flow-parallel:before { content: '\e8dc'; } /* '' */ -.icon-rocket:before { content: '\e8dd'; } /* '' */ -.icon-gauge:before { content: '\e8de'; } /* '' */ -.icon-traffic-cone:before { content: '\e8df'; } /* '' */ -.icon-cc:before { content: '\e8e0'; } /* '' */ -.icon-cc-by:before { content: '\e8e1'; } /* '' */ -.icon-cc-nc:before { content: '\e8e2'; } /* '' */ -.icon-cc-nc-eu:before { content: '\e8e3'; } /* '' */ -.icon-cc-nc-jp:before { content: '\e8e4'; } /* '' */ -.icon-cc-sa:before { content: '\e8e5'; } /* '' */ -.icon-cc-nd:before { content: '\e8e6'; } /* '' */ -.icon-cc-pd:before { content: '\e8e7'; } /* '' */ -.icon-cc-zero:before { content: '\e8e8'; } /* '' */ -.icon-cc-share:before { content: '\e8e9'; } /* '' */ -.icon-cc-remix:before { content: '\e8ea'; } /* '' */ -.icon-github:before { content: '\e8eb'; } /* '' */ -.icon-github-circled:before { content: '\e8ec'; } /* '' */ -.icon-flickr:before { content: '\e8ed'; } /* '' */ -.icon-flickr-circled:before { content: '\e8ee'; } /* '' */ -.icon-vimeo:before { content: '\e8ef'; } /* '' */ -.icon-vimeo-circled:before { content: '\e8f0'; } /* '' */ -.icon-twitter:before { content: '\e8f1'; } /* '' */ -.icon-twitter-circled:before { content: '\e8f2'; } /* '' */ -.icon-facebook:before { content: '\e8f3'; } /* '' */ -.icon-facebook-circled:before { content: '\e8f4'; } /* '' */ -.icon-facebook-squared:before { content: '\e8f5'; } /* '' */ -.icon-gplus:before { content: '\e8f6'; } /* '' */ -.icon-gplus-circled:before { content: '\e8f7'; } /* '' */ -.icon-pinterest:before { content: '\e8f8'; } /* '' */ -.icon-pinterest-circled:before { content: '\e8f9'; } /* '' */ -.icon-tumblr:before { content: '\e8fa'; } /* '' */ -.icon-tumblr-circled:before { content: '\e8fb'; } /* '' */ -.icon-linkedin:before { content: '\e8fc'; } /* '' */ -.icon-linkedin-circled:before { content: '\e8fd'; } /* '' */ -.icon-dribbble:before { content: '\e8fe'; } /* '' */ -.icon-dribbble-circled:before { content: '\e8ff'; } /* '' */ -.icon-stumbleupon:before { content: '\e900'; } /* '' */ -.icon-stumbleupon-circled:before { content: '\e901'; } /* '' */ -.icon-lastfm:before { content: '\e902'; } /* '' */ -.icon-lastfm-circled:before { content: '\e903'; } /* '' */ -.icon-rdio:before { content: '\e904'; } /* '' */ -.icon-rdio-circled:before { content: '\e905'; } /* '' */ -.icon-spotify:before { content: '\e906'; } /* '' */ -.icon-spotify-circled:before { content: '\e907'; } /* '' */ -.icon-qq:before { content: '\e908'; } /* '' */ -.icon-instagram:before { content: '\e909'; } /* '' */ -.icon-dropbox:before { content: '\e90a'; } /* '' */ -.icon-evernote:before { content: '\e90b'; } /* '' */ -.icon-flattr:before { content: '\e90c'; } /* '' */ -.icon-skype:before { content: '\e90d'; } /* '' */ -.icon-skype-circled:before { content: '\e90e'; } /* '' */ -.icon-renren:before { content: '\e90f'; } /* '' */ -.icon-sina-weibo:before { content: '\e910'; } /* '' */ -.icon-paypal:before { content: '\e911'; } /* '' */ -.icon-picasa:before { content: '\e912'; } /* '' */ -.icon-soundcloud:before { content: '\e913'; } /* '' */ -.icon-mixi:before { content: '\e914'; } /* '' */ -.icon-behance:before { content: '\e915'; } /* '' */ -.icon-google-circles:before { content: '\e916'; } /* '' */ -.icon-vkontakte:before { content: '\e917'; } /* '' */ -.icon-smashing:before { content: '\e918'; } /* '' */ -.icon-sweden:before { content: '\e919'; } /* '' */ -.icon-db-shape:before { content: '\e91a'; } /* '' */ -.icon-logo-db:before { content: '\e91b'; } /* '' */ diff --git a/sass/images.scss b/sass/images.scss deleted file mode 100644 index aab74e5..0000000 --- a/sass/images.scss +++ /dev/null @@ -1,15 +0,0 @@ -// -// Images.scss -// -------------------------------------------------- - -img { - -webkit-user-drag: text; -} - -.img-circle { - border-radius: 50%; -} - -.img-rounded { - border-radius: $default-border-radius; -} diff --git a/sass/lists.scss b/sass/lists.scss deleted file mode 100644 index 5e5c16b..0000000 --- a/sass/lists.scss +++ /dev/null @@ -1,61 +0,0 @@ -// -// Lists.scss -// -------------------------------------------------- - -// List groups -// These are to be used when shows list items that contain -// more substanstial amounts of information. (headings, images, text, etc.) - -.list-group { - width: 100%; - list-style: none; - margin: 0; - padding: 0; - - - * { - margin: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.list-group-item { - padding: 10px; - font-size: 12px; - color: #414142; - border-top: 1px solid $border-color; - - &:first-child { - border-top: 0; - } - - &.active, - // `.selected` is deprecated. Use `.active` instead. - &.selected { - color: #fff; - background-color: $active-color; - } -} - -.list-group-header { - padding: 10px; -} - -// Media objects in lists -.media-object { - margin-top: 3px; -} - -.media-object.pull-left { - margin-right: 10px -} - -.media-object.pull-right { - margin-left: 10px -} - -.media-body { - overflow: hidden; -} diff --git a/sass/mixins.scss b/sass/mixins.scss deleted file mode 100644 index 17e8657..0000000 --- a/sass/mixins.scss +++ /dev/null @@ -1,60 +0,0 @@ -// -// Mixins -// -------------------------------------------------- - -// General -// -------------------------------------------------- - -// Clearfix -// Source: http://nicolasgallagher.com/micro-clearfix-hack/ -// -// For modern browsers -// 1. The space content is one way to avoid an Opera bug when the -// contenteditable attribute is included anywhere else in the document. -// Otherwise it causes space to appear at the top and bottom of elements -// that are clearfixed. -// 2. The use of `table` rather than `block` is only necessary if using -// `:before` to contain the top-margins of child elements. -@mixin clearfix() { - &:before, - &:after { - display: table; // 2 - content: " "; // 1 - } - &:after { - clear: both; - } -} - -// Box shadow -@mixin box-shadow($shadow...) { - -webkit-box-shadow: $shadow; - box-shadow: $shadow; -} - -// Gradients - -// From top to bottom -@mixin linear-gradient($color-from, $color-to) { - background-color: $color-from; // Old browsers - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color-from), color-stop(100%,$color-to)); // Chrome, Safari4+ - background-image: -webkit-linear-gradient(top, $color-from 0%, $color-to 100%); // Chrome10+, Safari5.1+ - background-image: linear-gradient(to bottom, $color-from 0%, $color-to 100%); // W3C -} - -// From left to right -@mixin split-linear-gradient($color-from, $color-to) { - background-color: $color-from; // Old browsers - background-image: -webkit-gradient(linear, left top, right top, color-stop(50%,$color-from), color-stop(50%,$color-to)); // Chrome, Safari4+ - background-image: -webkit-linear-gradient(left, $color-from 50%, $color-to 50%); // Chrome10+, Safari5.1+ - background-image: linear-gradient(to right, $color-from 50%, $color-to 50%); // W3C -} - -// From bottom left to top right -@mixin directional-gradient($color-from, $color-to, $deg: 45deg) { - background-color: $color-from; // Old browsers - background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,$color-from), color-stop(100%,$color-to)); // Chrome, Safari4+ - background-image: -webkit-linear-gradient($deg, $color-from 0%, $color-to 100%); // Chrome10+, Safari5.1+ - background-image: -moz-linear-gradient($deg, $color-from 0%, $color-to 100%); // FF3.6+ - background-image: linear-gradient($deg, $color-from 0%, $color-to 100%); // W3C -} diff --git a/sass/navs.scss b/sass/navs.scss deleted file mode 100644 index 67641e8..0000000 --- a/sass/navs.scss +++ /dev/null @@ -1,41 +0,0 @@ -// -// Navs.scss -// -------------------------------------------------- - -.nav-group { - font-size: 14px; -} - -.nav-group-item { - padding: 2px 10px 2px 25px; - display: block; - color: $gray-color; - text-decoration: none; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:active, - &.active { - background-color: #dcdfe1; - } - - .icon { - width: 19px; // Prevents a one pixel cutoff - height: 18px; - float: left; - color: #737475; - margin-top: -3px; - margin-right: 7px; - font-size: 18px; - text-align: center; - } -} - -.nav-group-title { - margin: 0; - padding: 10px 10px 2px; - font-size: 12px; - font-weight: 500; - color: lighten($gray-color, 20%); -} diff --git a/sass/normalize.scss b/sass/normalize.scss deleted file mode 100644 index d0b28e3..0000000 --- a/sass/normalize.scss +++ /dev/null @@ -1,215 +0,0 @@ -// Based on normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css -// This normalize aims to reduce the number of rules and focus on Chrome. - -// -// 1. Normalize vertical alignment of `progress` in Chrome. -// - -audio, -canvas, -progress, -video { - vertical-align: baseline; // 1 -} - -// -// Prevent modern browsers from displaying `audio` without controls. -// - -audio:not([controls]) { - display: none; -} - -// Links -// ========================================================================== - -// -// Improve readability of focused elements when they are also in an -// active/hover state. -// - -a:active, -a:hover { - outline: 0; -} - -// Text-level semantics -// ========================================================================== - -// -// Address styling not present in IE 8/9/10/11, Safari, and Chrome. -// - -abbr[title] { - border-bottom: 1px dotted; -} - -// -// Address style set to `bolder` in Chrome. -// - -b, -strong { - font-weight: bold; -} - -// -// Address styling not present in Chrome. -// - -dfn { - font-style: italic; -} - -// -// Address variable `h1` font-size and margin within `section` and `article` -// contexts in Chrome. -// - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -// -// Address inconsistent and variable font size. -// - -small { - font-size: 80%; -} - -// -// Prevent `sub` and `sup` affecting `line-height`. -// - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -// Grouping content -// ========================================================================== - -// -// Contain overflow. -// - -pre { - overflow: auto; -} - -// -// Address odd `em`-unit font size rendering. -// - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -// Forms -// ========================================================================== - -// -// Known limitation: by default, Chrome allows very limited -// styling of `select`, unless a `border` property is set. -// - -// -// 1. Correct color not being inherited. -// Known issue: affects color of disabled elements. -// 2. Correct font properties not being inherited. -// 3. Resets margin -// - -button, -input, -optgroup, -select, -textarea { - color: inherit; // 1 - font: inherit; // 2 - margin: 0; // 3 -} - -// -// Fix the cursor style for Chrome's increment/decrement buttons. For certain -// `font-size` values of the `input`, it causes the cursor style of the -// decrement button to change from `default` to `text`. -// - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -// -// 1. Address `appearance` set to `searchfield` in Chrome. -// 2. Address `box-sizing` set to `border-box` in Chrome. -// - -input[type="search"] { - -webkit-appearance: textfield; // 1 - box-sizing: content-box; // 2 -} - -// -// Remove inner padding and search cancel button in Chrome on OS X. -// - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -// -// Define consistent border, margin, and padding. -// - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -// -// 1. Correct `color` not being inherited in IE 8/9/10/11. -// 2. Remove padding so people aren't caught out if they zero out fieldsets. -// - -legend { - border: 0; // 1 - padding: 0; // 2 -} - -// Tables -// ========================================================================== - -// -// Remove most spacing between table cells. -// - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} diff --git a/sass/photon.scss b/sass/photon.scss deleted file mode 100644 index 0bfecce..0000000 --- a/sass/photon.scss +++ /dev/null @@ -1,24 +0,0 @@ -// Variables -@import "variables.scss"; - -// Mixins -@import "mixins.scss"; - -// Normalize, Appify, Base, & Utilities CSS -@import "normalize.scss"; -@import "appify.scss"; -@import "base.scss"; -@import "utilities.scss"; - -// Components -@import "buttons.scss"; -@import "button-groups.scss"; -@import "bars.scss"; -@import "forms.scss"; -@import "grid.scss"; -@import "images.scss"; -@import "lists.scss"; -@import "navs.scss"; -@import "icons.scss"; -@import "tables.scss"; -@import "tabs.scss"; diff --git a/sass/tables.scss b/sass/tables.scss deleted file mode 100644 index 8ac8088..0000000 --- a/sass/tables.scss +++ /dev/null @@ -1,52 +0,0 @@ -// -// Navs.scss -// -------------------------------------------------- - -table { - width: 100%; - border: 0; - border-collapse: separate; - font-size: 12px; - text-align: left; -} - -thead { - background-color: #f5f5f4; -} - -tbody { - background-color: #fff; -} - -.table-striped tr:nth-child(even) { - background-color: #f5f5f4; -} - -tr:active, -.table-striped tr:active:nth-child(even) { - color: #fff; - background-color: $active-color; -} - -thead tr:active { - color: $gray-color; - background-color: #f5f5f4; -} - -th { - font-weight: normal; - border-right: 1px solid $border-color; - border-bottom: 1px solid $border-color; -} - -th, -td { - padding: 2px 15px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:last-child { - border-right: 0; - } -} diff --git a/sass/tabs.scss b/sass/tabs.scss deleted file mode 100644 index e97e778..0000000 --- a/sass/tabs.scss +++ /dev/null @@ -1,74 +0,0 @@ -// Tabs - -.tab-group { - margin-top: -1px; - display: flex; - border-top: 1px solid #989698; - border-bottom: 1px solid #989698; -} - -.tab-item { - position: relative; - flex: 1; - padding: 3px; - font-size: 12px; - text-align: center; - border-left: 1px solid #989698; - @include linear-gradient(#b8b6b8, #b0aeb0); - - &:first-child { - border-left: 0; - } - - &.active { - @include linear-gradient(#d4d2d4, #cccacc); - } - - .icon-close-tab { - position: absolute; - top: 50%; - left: 5px; - width: 15px; - height: 15px; - font-size: 15px; - line-height: 15px; - text-align: center; - color: #666; - opacity: 0; - transition: opacity .1s linear, background-color .1s linear; - border-radius: 3px; - transform: translateY(-50%); - z-index: 10; - } - - &:after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - content: ""; - background-color: rgba(0,0,0,.08); - opacity: 0; - transition: opacity .1s linear; - z-index: 1; - } - - // Okay, I know... this is nuts but... - &:hover:not(.active):after { - opacity: 1; - } - - &:hover .icon-close-tab { - opacity: 1; - } - - .icon-close-tab:hover { - background-color: rgba(0,0,0,.08); - } -} - -.tab-item-fixed { - flex: none; - padding: 3px 10px; -} diff --git a/sass/utilities.scss b/sass/utilities.scss deleted file mode 100644 index 341bb11..0000000 --- a/sass/utilities.scss +++ /dev/null @@ -1,122 +0,0 @@ -// -// Utilities styles -// -------------------------------------------------- - -// Utility classes -.selectable-text { - cursor: text; - -webkit-user-select: text; -} - -// Text alignment -.text-center { - text-align: center; -} - -.text-right { - text-align: right; -} - -.text-left { - text-align: left; -} - -// Floats -.pull-left { - float: left; -} - -.pull-right { - float: right; -} - -// Padding -.padded { - padding: $padding; -} - -.padded-less { - padding: $padding-less; -} - -.padded-more { - padding: $padding-more; -} - -// Vertical Padding -.padded-vertically { - padding-top: $padding; - padding-bottom: $padding; -} - -.padded-vertically-less { - padding-top: $padding-less; - padding-bottom: $padding-less; -} - -.padded-vertically-more { - padding-top: $padding-more; - padding-bottom: $padding-more; -} - -// Horizontal Padding -.padded-horizontally { - padding-right: $padding; - padding-left: $padding; -} - -.padded-horizontally-less { - padding-right: $padding-less; - padding-left: $padding-less; -} - -.padded-horizontally-more { - padding-right: $padding-more; - padding-left: $padding-more; -} - -// Padding top -.padded-top { - padding-top: $padding; -} - -.padded-top-less { - padding-top: $padding-less; -} - -.padded-top-more { - padding-top: $padding-more; -} - -// Padding bottom -.padded-bottom { - padding-bottom: $padding; -} - -.padded-bottom-less { - padding-bottom: $padding-less; -} - -.padded-bottom-more { - padding-bottom: $padding-more; -} - -// Set the background-color to set a sidebar back a bit. -.sidebar { - background-color: #f5f5f4; -} - -// Allow the window to be dragged around the desktop by any element in the application. -.draggable { - -webkit-app-region: drag; -} - -// within draggable regions, allow specific elements to be exempted. -.not-draggable { - -webkit-app-region: no-drag; -} - -// Clearfix -.clearfix { - @include clearfix(); -} diff --git a/sass/variables.scss b/sass/variables.scss deleted file mode 100644 index da35145..0000000 --- a/sass/variables.scss +++ /dev/null @@ -1,57 +0,0 @@ -// -// Variables -// -------------------------------------------------- - -// Type -// -------------------------------------------------- - -$font-path: '../fonts/' !default; -// Try to use the system's font on whatever platform the user is on. -$font-family-default: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif !default; -$font-size-default: 13px !default; -$font-weight: 500 !default; -$font-weight-bold: 700 !default; -$font-weight-light: 300 !default; -$line-height-default: 1.6 !default; - - -// Colors -// -------------------------------------------------- - -// Main colors -$primary-color: #3b99fc !default; -$chrome-color: #fff !default; - -// Copy -$gray-color: #333 !default; - -// Borders -$border-color: #ddd !default; -$dark-border-color: #c2c0c2 !default; -$darker-bottom-border-color: #a19fa1 !default; -$toolbar-border-color: #939293 !default; - -// Action colors -$default-color: #fff !default; -$positive-color: #34c84a !default; -$negative-color: #fc605b !default; -$warning-color: #fdbc40 !default; - -// Shades -$dark-color: #57acf5 !default; - -// Focus and active colors -$active-color: #116cd6; -$focus-input-color: lighten($primary-color, 10%) !default; - -// Other -// -------------------------------------------------- - -// Border radius -$default-border-radius: 4px; - -// Padding -$padding: 10px; -$padding-mini: 3px; -$padding-less: 5px; -$padding-more: 20px; diff --git a/templater.js b/templater.js new file mode 100644 index 0000000..e69de29