diff --git a/app/helpers.php b/app/helpers.php index c087e3509..d801edb1a 100644 --- a/app/helpers.php +++ b/app/helpers.php @@ -155,6 +155,9 @@ function theme_path($path = '') */ function icon($name, $attrs = []) { + $attrs = array_merge($attrs, [ + 'class' => 'svg-icon' + ]); $attrString = ' '; foreach ($attrs as $attrName => $attr) { $attrString .= $attrName . '="' . $attr . '" '; diff --git a/readme.md b/readme.md index 97438d4bf..d3013eca4 100644 --- a/readme.md +++ b/readme.md @@ -104,6 +104,7 @@ These are the great open-source projects used to help build BookStack: * [Axios](https://github.com/mzabriskie/axios) * [jQuery Sortable](https://johnny.github.io/jquery-sortable/) * [Material Design Iconic Font](http://zavoloklom.github.io/material-design-iconic-font/icons.html) +* [Google Material Icons](https://material.io/icons/) * [Dropzone.js](http://www.dropzonejs.com/) * [clipboard.js](https://clipboardjs.com/) * [TinyColorPicker](http://www.dematte.at/tinyColorPicker/index.html) diff --git a/resources/assets/icons/add.svg b/resources/assets/icons/add.svg new file mode 100644 index 000000000..75e3753dc --- /dev/null +++ b/resources/assets/icons/add.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/resources/assets/icons/azure.svg b/resources/assets/icons/auth/azure.svg similarity index 100% rename from resources/assets/icons/azure.svg rename to resources/assets/icons/auth/azure.svg diff --git a/resources/assets/icons/facebook.svg b/resources/assets/icons/auth/facebook.svg similarity index 100% rename from resources/assets/icons/facebook.svg rename to resources/assets/icons/auth/facebook.svg diff --git a/resources/assets/icons/github.svg b/resources/assets/icons/auth/github.svg similarity index 100% rename from resources/assets/icons/github.svg rename to resources/assets/icons/auth/github.svg diff --git a/resources/assets/icons/gitlab.svg b/resources/assets/icons/auth/gitlab.svg similarity index 100% rename from resources/assets/icons/gitlab.svg rename to resources/assets/icons/auth/gitlab.svg diff --git a/resources/assets/icons/google.svg b/resources/assets/icons/auth/google.svg similarity index 100% rename from resources/assets/icons/google.svg rename to resources/assets/icons/auth/google.svg diff --git a/resources/assets/icons/okta.svg b/resources/assets/icons/auth/okta.svg similarity index 100% rename from resources/assets/icons/okta.svg rename to resources/assets/icons/auth/okta.svg diff --git a/resources/assets/icons/slack.svg b/resources/assets/icons/auth/slack.svg similarity index 100% rename from resources/assets/icons/slack.svg rename to resources/assets/icons/auth/slack.svg diff --git a/resources/assets/icons/twitch.svg b/resources/assets/icons/auth/twitch.svg similarity index 100% rename from resources/assets/icons/twitch.svg rename to resources/assets/icons/auth/twitch.svg diff --git a/resources/assets/icons/twitter.svg b/resources/assets/icons/auth/twitter.svg similarity index 100% rename from resources/assets/icons/twitter.svg rename to resources/assets/icons/auth/twitter.svg diff --git a/resources/assets/icons/book.svg b/resources/assets/icons/book.svg new file mode 100644 index 000000000..ce6cd5d94 --- /dev/null +++ b/resources/assets/icons/book.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/resources/assets/icons/chapter.svg b/resources/assets/icons/chapter.svg new file mode 100644 index 000000000..199917db7 --- /dev/null +++ b/resources/assets/icons/chapter.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/resources/assets/icons/delete.svg b/resources/assets/icons/delete.svg new file mode 100644 index 000000000..fdaba0111 --- /dev/null +++ b/resources/assets/icons/delete.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/resources/assets/icons/edit.svg b/resources/assets/icons/edit.svg new file mode 100644 index 000000000..d4be98b38 --- /dev/null +++ b/resources/assets/icons/edit.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/resources/assets/icons/login.svg b/resources/assets/icons/login.svg new file mode 100644 index 000000000..b122b44a2 --- /dev/null +++ b/resources/assets/icons/login.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/resources/assets/icons/new-user.svg b/resources/assets/icons/new-user.svg new file mode 100644 index 000000000..b58fcd548 --- /dev/null +++ b/resources/assets/icons/new-user.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/resources/assets/icons/page.svg b/resources/assets/icons/page.svg new file mode 100644 index 000000000..1df12d85d --- /dev/null +++ b/resources/assets/icons/page.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/resources/assets/icons/search.svg b/resources/assets/icons/search.svg new file mode 100644 index 000000000..490937044 --- /dev/null +++ b/resources/assets/icons/search.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/resources/assets/icons/time.svg b/resources/assets/icons/time.svg new file mode 100644 index 000000000..2b6e2820e --- /dev/null +++ b/resources/assets/icons/time.svg @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss index c277de99a..ff5322774 100644 --- a/resources/assets/sass/_blocks.scss +++ b/resources/assets/sass/_blocks.scss @@ -192,6 +192,7 @@ margin: 0; font-size: $fs-s; color: #888; + fill: #888; font-weight: 400; text-transform: uppercase; } diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss index f9c6d9b9a..7dd1c6410 100644 --- a/resources/assets/sass/_buttons.scss +++ b/resources/assets/sass/_buttons.scss @@ -2,6 +2,7 @@ @mixin generate-button-colors($textColor, $backgroundColor) { background-color: $backgroundColor; color: $textColor; + fill: $textColor; text-transform: uppercase; border: 1px solid $backgroundColor; vertical-align: top; diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss index b9d9d68ef..9efff7774 100644 --- a/resources/assets/sass/_header.scss +++ b/resources/assets/sass/_header.scss @@ -8,6 +8,7 @@ header { top: 0; background-color: $primary-dark; color: #fff; + fill: #fff; .padded { padding: $-m; } @@ -24,6 +25,7 @@ header { display: inline-block; padding: $-m $-l; color: #FFF; + fill: #FFF; &:last-child { padding-right: 0; } @@ -93,6 +95,7 @@ header .search-box { } button { color: #EEE; + fill: #EEE; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #DDD; @@ -149,6 +152,7 @@ header .search-box { .faded { a, button, span, span > div { color: #666; + fill: #666; } .text-button { opacity: 0.5; @@ -167,6 +171,7 @@ header .search-box { .faded-small { color: #000; + fill: #000; font-size: 0.9em; background-color: $primary-faded; } @@ -230,6 +235,7 @@ header .search-box { padding: $-m; display: inline-block; color: #666; + fill: #666; cursor: pointer; &.selected { border-bottom: 2px solid $primary; diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss index 5f06e1da9..986edc5c7 100644 --- a/resources/assets/sass/_lists.scss +++ b/resources/assets/sass/_lists.scss @@ -37,6 +37,7 @@ border-left: 5px solid $color-page-draft; .text-page { color: $color-page-draft; + fill: $color-page-draft; } } .chapter { @@ -119,6 +120,7 @@ } a.bold { color: #EEE !important; + fill: #EEE !important; } ul { list-style: none; @@ -126,16 +128,26 @@ } .book { color: $color-book !important; + fill: $color-book !important; &.selected { background-color: rgba($color-book, 0.29); } } .chapter { color: $color-chapter !important; + fill: $color-chapter !important; &.selected { background-color: rgba($color-chapter, 0.12); } } + .page { + color: $color-page !important; + fill: $color-page !important; + border-bottom: none; + &.selected { + background-color: rgba($color-page, 0.1); + } + } [chapter-toggle] { padding-left: $-s; } @@ -149,18 +161,12 @@ border-left: 5px solid $color-page; margin: 10px 10px; } - .page { - color: $color-page !important; - border-bottom: none; - &.selected { - background-color: rgba($color-page, 0.1); - } - } .list-item-page.draft { border-left: 5px solid $color-page-draft; } .page.draft .page, .list-item-page.draft a.page { color: $color-page-draft !important; + fill: $color-page-draft !important; } .sub-menu { display: none; @@ -217,6 +223,7 @@ .activity-list-item { padding: $-s 0; color: #888; + fill: #888; border-bottom: 1px solid #EEE; font-size: 0.9em; .left { @@ -254,6 +261,7 @@ ul.pagination { border: 1px solid #CCC; margin-left: -1px; color: #888; + fill: #888; user-select: none; &.disabled { cursor: not-allowed; @@ -262,10 +270,12 @@ ul.pagination { li.active span { background-color: rgba($primary, 0.8); color: #EEE; + fill: #EEE; border-color: rgba($primary, 0.8); } a { color: $primary; + fill: $primary; } } @@ -293,6 +303,7 @@ ul.pagination { } .page.draft .text-page { color: $color-page-draft; + fill: $color-page-draft; } } @@ -346,12 +357,14 @@ ul.pagination { min-width: 180px; padding: $-xs 0; color: #555; + fill: #555; text-align: left !important; &.wide { min-width: 220px; } .text-muted { color: #999; + fill: #999; } li.padded { padding: $-xs $-m; @@ -361,6 +374,7 @@ ul.pagination { display: block; padding: $-xs $-m; color: #555; + fill: #555; &:hover { text-decoration: none; background-color: #EEE; @@ -411,6 +425,7 @@ ul.pagination { width: 100%; line-height: 1.2; color: #009688;; + fill: #009688;; text-decoration: none; } p { diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss index 4309acc21..ec389286e 100644 --- a/resources/assets/sass/_text.scss +++ b/resources/assets/sass/_text.scss @@ -220,71 +220,92 @@ pre code { */ p.pos, p .pos, span.pos, .text-pos { color: $positive; + fill: $positive; &:hover { color: $positive; + fill: $positive; } } p.neg, p .neg, span.neg, .text-neg { color: $negative; + fill: $negative; &:hover { color: $negative; + fill: $negative; } } p.muted, p .muted, span.muted, .text-muted { color: lighten($text-dark, 26%); + fill: lighten($text-dark, 26%); &.small, .small { color: lighten($text-dark, 32%); + fill: lighten($text-dark, 32%); } } p.primary, p .primary, span.primary, .text-primary { color: $primary; + fill: $primary; &:hover { color: $primary; + fill: $primary; } } p.secondary, p .secondary, span.secondary, .text-secondary { color: $secondary; + fill: $secondary; &:hover { color: $secondary; + fill: $secondary; } } .text-book { color: $color-book; + fill: $color-book; &:hover { color: $color-book; + fill: $color-book; } } .text-page { color: $color-page; + fill: $color-page; &:hover { color: $color-page; + fill: $color-page; } &.draft { color: $color-page-draft; + fill: $color-page-draft; } &.draft:hover { color: $color-page-draft; + fill: $color-page-draft; } } .text-chapter { color: $color-chapter; + fill: $color-chapter; &:hover { color: $color-chapter; + fill: $color-chapter; } } .faded .text-book:hover { color: $color-book !important; + fill: $color-book !important; } .faded .text-chapter:hover { color: $color-chapter !important; + fill: $color-chapter !important; } .faded .text-page:hover { color: $color-page !important; + fill: $color-page !important; } span.highlight { @@ -390,3 +411,11 @@ i { padding-right: $-xs; } +.svg-icon { + width: 1em; + display: inline-block; + position: relative; + bottom: -0.105em; + margin-right: $-xs; +} + diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index dda733645..f3847bb04 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -2,7 +2,7 @@ @section('header-buttons') @if(setting('registration-enabled', false)) - {{ trans('auth.sign_up') }} + @icon('new-user') {{ trans('auth.sign_up') }} @endif @stop @@ -10,13 +10,12 @@