diff --git a/README.md b/README.md index fbd0daf9..311965be 100644 --- a/README.md +++ b/README.md @@ -12,43 +12,43 @@ microservices when appropriate. ## Installation ### Requirements -See the [scriptz](https://github.com/dod-ccpo/scriptz) repository for the shared +See the [scriptz](https://github.com/dod-ccpo/scriptz) repository for the shared requirements and guidelines for all ATAT applications. -Additionally, ATST requires a redis instance for session management. Have redis -installed and running. By default, ATST will try to connect to a redis instance +Additionally, ATST requires a redis instance for session management. Have redis +installed and running. By default, ATST will try to connect to a redis instance running on localhost on its default port, 6379. ### Cloning -This project contains git submodules. Here is an example clone command that will +This project contains git submodules. Here is an example clone command that will automatically initialize and update those modules: git clone --recurse-submodules git@github.com:dod-ccpo/atst.git -If you have an existing clone that does not yet contain the submodules, you can +If you have an existing clone that does not yet contain the submodules, you can set them up with the following command: git submodule update --init --recursive ### Setup This application uses Pipenv to manage Python dependencies and a virtual -environment. Instead of the classic `requirements.txt` file, pipenv uses a -Pipfile and Pipfile.lock, making it more similar to other modern package managers +environment. Instead of the classic `requirements.txt` file, pipenv uses a +Pipfile and Pipfile.lock, making it more similar to other modern package managers like yarn or mix. To perform the installation, run the setup script: script/setup -The setup script creates the virtual environment, and then calls script/bootstrap +The setup script creates the virtual environment, and then calls script/bootstrap to install all of the Python and Node dependencies. To enter the virtualenv manually (a la `source .venv/bin/activate`): pipenv shell -If you want to automatically load the virtual environment whenever you enter the -project directory, take a look at [direnv](https://direnv.net/). An `.envrc` -file is included in this repository. direnv will activate and deactivate +If you want to automatically load the virtual environment whenever you enter the +project directory, take a look at [direnv](https://direnv.net/). An `.envrc` +file is included in this repository. direnv will activate and deactivate virtualenvs for you when you enter and leave the directory. @@ -79,3 +79,10 @@ following to `~/.vim/filetype.vim` for syntax highlighting: :au BufRead *.html.to set filetype=mustache + +## Icons +To render an icon use `{% module Icon('name') %}` in a template, where `name` is the filename of an svg file in `static/icons`. + +All icons used should be from the Noun Project, specifically [this collection](https://thenounproject.com/monstercritic/collection/tinicons-a-set-of-tiny-icons-perfect-for-ui-elemen/) if possible. + +SVG markup should be cleaned an minified, [Svgsus](http://www.svgs.us/) works well. diff --git a/atst/app.py b/atst/app.py index f36b4c23..07f40411 100644 --- a/atst/app.py +++ b/atst/app.py @@ -15,10 +15,10 @@ from atst.handlers.dev import Dev from atst.home import home from atst.api_client import ApiClient from atst.sessions import RedisSessions +from atst import ui_modules ENV = os.getenv("TORNADO_ENV", "dev") - def make_app(config, deps, **kwargs): routes = [ @@ -100,6 +100,7 @@ def make_app(config, deps, **kwargs): static_path=home.child("static"), cookie_secret=config["default"]["COOKIE_SECRET"], debug=config["default"].getboolean("DEBUG"), + ui_modules=ui_modules, **kwargs, ) app.config = config diff --git a/atst/ui_modules.py b/atst/ui_modules.py new file mode 100644 index 00000000..ec197bcd --- /dev/null +++ b/atst/ui_modules.py @@ -0,0 +1,7 @@ +from tornado.web import UIModule + +class Icon(UIModule): + def render(self, name, classes=''): + with open('static/icons/%s.svg' % name) as svg: + return self.render_string( + "components/icon.html.to", svg=svg.read(), name=name, classes=classes) diff --git a/scss/atat.scss b/scss/atat.scss index 8f73326c..532330bb 100644 --- a/scss/atat.scss +++ b/scss/atat.scss @@ -3,6 +3,7 @@ @import 'core/base'; @import 'core/grid'; +@import 'core/util'; @import 'elements/typography'; @import 'elements/inputs'; @@ -10,6 +11,7 @@ @import 'elements/panels'; @import 'elements/block_lists'; @import 'elements/tables'; +@import 'elements/icons'; @import 'components/site_action'; @import 'components/empty_state'; diff --git a/scss/core/_util.scss b/scss/core/_util.scss new file mode 100644 index 00000000..101ddcf4 --- /dev/null +++ b/scss/core/_util.scss @@ -0,0 +1,3 @@ +.nowrap { + white-space: nowrap; +} diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss index 5dbdb23a..266065e8 100644 --- a/scss/core/_variables.scss +++ b/scss/core/_variables.scss @@ -3,10 +3,9 @@ * =================================================== */ -$gap: .8rem; // 8px at 10px $em-base -$topbar-height: 4.8rem; - - +$gap: .8rem; // 8px at 10px $em-base +$topbar-height: 4.8rem; +$icon-size-small: 2.4rem; /* * USWDS Variables diff --git a/scss/elements/_icons.scss b/scss/elements/_icons.scss new file mode 100644 index 00000000..95f7fb46 --- /dev/null +++ b/scss/elements/_icons.scss @@ -0,0 +1,28 @@ +@mixin icon { + display: inline-block; + vertical-align: bottom; + + > svg { + width: 100%; + height: 100%; + } +} + +@mixin icon-size($size) { + $icon-size: $size * .1rem; + width: $icon-size; + height: $icon-size; + margin: $icon-size / 4; +} + +@mixin icon-style-default { + > svg * { + fill: $color-black; + } +} + +.icon { + @include icon; + @include icon-size(16); + @include icon-style-default; +} diff --git a/static/icons/alert.svg b/static/icons/alert.svg new file mode 100644 index 00000000..b2bfe5d1 --- /dev/null +++ b/static/icons/alert.svg @@ -0,0 +1 @@ + diff --git a/static/icons/avatar.svg b/static/icons/avatar.svg new file mode 100644 index 00000000..a3b68837 --- /dev/null +++ b/static/icons/avatar.svg @@ -0,0 +1 @@ + diff --git a/static/icons/bell.svg b/static/icons/bell.svg new file mode 100644 index 00000000..dd06bb78 --- /dev/null +++ b/static/icons/bell.svg @@ -0,0 +1 @@ + diff --git a/static/icons/briefcase.svg b/static/icons/briefcase.svg new file mode 100644 index 00000000..efae9533 --- /dev/null +++ b/static/icons/briefcase.svg @@ -0,0 +1 @@ + diff --git a/static/icons/caret_down.svg b/static/icons/caret_down.svg new file mode 100644 index 00000000..12f6381b --- /dev/null +++ b/static/icons/caret_down.svg @@ -0,0 +1 @@ + diff --git a/static/icons/caret_left.svg b/static/icons/caret_left.svg new file mode 100644 index 00000000..b0711348 --- /dev/null +++ b/static/icons/caret_left.svg @@ -0,0 +1 @@ + diff --git a/static/icons/caret_right.svg b/static/icons/caret_right.svg new file mode 100644 index 00000000..96e7419c --- /dev/null +++ b/static/icons/caret_right.svg @@ -0,0 +1 @@ + diff --git a/static/icons/caret_up.svg b/static/icons/caret_up.svg new file mode 100644 index 00000000..d2bec294 --- /dev/null +++ b/static/icons/caret_up.svg @@ -0,0 +1 @@ + diff --git a/static/icons/chart.svg b/static/icons/chart.svg new file mode 100644 index 00000000..5b8cf399 --- /dev/null +++ b/static/icons/chart.svg @@ -0,0 +1 @@ + diff --git a/static/icons/cloud.svg b/static/icons/cloud.svg new file mode 100644 index 00000000..5e568d43 --- /dev/null +++ b/static/icons/cloud.svg @@ -0,0 +1 @@ + diff --git a/static/icons/document.svg b/static/icons/document.svg new file mode 100644 index 00000000..74cf4cef --- /dev/null +++ b/static/icons/document.svg @@ -0,0 +1 @@ + diff --git a/static/icons/download.svg b/static/icons/download.svg new file mode 100644 index 00000000..6b68bae8 --- /dev/null +++ b/static/icons/download.svg @@ -0,0 +1 @@ + diff --git a/static/icons/folder.svg b/static/icons/folder.svg new file mode 100644 index 00000000..99b1e9a2 --- /dev/null +++ b/static/icons/folder.svg @@ -0,0 +1 @@ + diff --git a/static/icons/help.svg b/static/icons/help.svg new file mode 100644 index 00000000..1e669549 --- /dev/null +++ b/static/icons/help.svg @@ -0,0 +1 @@ + diff --git a/static/icons/info.svg b/static/icons/info.svg new file mode 100644 index 00000000..828ebbe6 --- /dev/null +++ b/static/icons/info.svg @@ -0,0 +1 @@ + diff --git a/static/icons/link.svg b/static/icons/link.svg new file mode 100644 index 00000000..14a65ba1 --- /dev/null +++ b/static/icons/link.svg @@ -0,0 +1 @@ + diff --git a/static/icons/ok.svg b/static/icons/ok.svg new file mode 100644 index 00000000..d4f61f78 --- /dev/null +++ b/static/icons/ok.svg @@ -0,0 +1 @@ + diff --git a/static/icons/search.svg b/static/icons/search.svg new file mode 100644 index 00000000..4d22f4df --- /dev/null +++ b/static/icons/search.svg @@ -0,0 +1 @@ + diff --git a/static/icons/shield.svg b/static/icons/shield.svg new file mode 100644 index 00000000..ae782b54 --- /dev/null +++ b/static/icons/shield.svg @@ -0,0 +1 @@ + diff --git a/static/icons/trash.svg b/static/icons/trash.svg new file mode 100644 index 00000000..950c23d2 --- /dev/null +++ b/static/icons/trash.svg @@ -0,0 +1 @@ + diff --git a/static/icons/x.svg b/static/icons/x.svg new file mode 100644 index 00000000..0ed75ae4 --- /dev/null +++ b/static/icons/x.svg @@ -0,0 +1 @@ + diff --git a/templates/components/icon.html.to b/templates/components/icon.html.to new file mode 100644 index 00000000..99e74b40 --- /dev/null +++ b/templates/components/icon.html.to @@ -0,0 +1,2 @@ +{% autoescape None %} +
diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index 4439a21d..62231d8e 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -24,11 +24,6 @@ {% end %} {% block content %} -This is a panel
-This is a paragraph. 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.
+