From efb5a7bc651d14161b945aff50fc7d43423c0b94 Mon Sep 17 00:00:00 2001 From: Maicol Battistini Date: Fri, 6 Aug 2021 12:30:51 +0200 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=F0=9F=92=84=20Aggiunti=20com?= =?UTF-8?q?ponenti=20MDC=20e=20relativi=20stili?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In particolare: - Aggiunti i seguenti componenti: Card (e tutti sottocomponenti), Layout a griglia (righe, colonne e celle), Icone Material Design. - Stili SCSS: Aggiunti stili globali, Cards, FAB. Aggiunti nuovi colori e nuovi font per intestazioni e corpo --- .idea/inspectionProfiles/Project_Default.xml | 3 +- package.json | 12 ++ resources/js/Components/Card/Actions.js | 11 ++ resources/js/Components/Card/Card.js | 27 +++ resources/js/Components/Card/Content.js | 11 ++ resources/js/Components/Card/Media.js | 14 ++ resources/js/Components/Card/PrimaryAction.js | 12 ++ resources/js/Components/Grid/Cell.js | 20 +++ resources/js/Components/Grid/LayoutGrid.js | 15 ++ resources/js/Components/Grid/Row.js | 7 + resources/js/Components/Mdi.js | 14 ++ resources/scss/_material.scss | 162 ++++++++++++++++++ resources/scss/_variables.scss | 9 + resources/scss/app.scss | 48 ++++++ 14 files changed, 364 insertions(+), 1 deletion(-) create mode 100644 resources/js/Components/Card/Actions.js create mode 100644 resources/js/Components/Card/Card.js create mode 100644 resources/js/Components/Card/Content.js create mode 100644 resources/js/Components/Card/Media.js create mode 100644 resources/js/Components/Card/PrimaryAction.js create mode 100644 resources/js/Components/Grid/Cell.js create mode 100644 resources/js/Components/Grid/LayoutGrid.js create mode 100644 resources/js/Components/Grid/Row.js create mode 100644 resources/js/Components/Mdi.js create mode 100644 resources/scss/_material.scss create mode 100644 resources/scss/_variables.scss diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml index 7fe0903b7..e5cf010ac 100644 --- a/.idea/inspectionProfiles/Project_Default.xml +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -74,9 +74,10 @@ diff --git a/package.json b/package.json index f177e634f..7fda2ee93 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,18 @@ "dependencies": { "@inertiajs/inertia": "^0.10.0", "@maicol07/inertia-mithril": "^0.3.3", + "@material/card": "^12.0.0", + "@material/layout-grid": "^12.0.0", + "@material/mwc-button": "^0.22.1", + "@material/mwc-checkbox": "^0.22.1", + "@material/mwc-fab": "^0.22.1", + "@material/mwc-formfield": "^0.22.1", + "@material/mwc-select": "^0.22.1", + "@material/mwc-textarea": "^0.22.1", + "@material/mwc-textfield": "^0.22.1", + "@material/ripple": "^12.0.0", + "@material/theme": "^12.0.0", + "@mdi/font": "^5.9.55", "jquery": "^3.6.0", "mithril": "^2.0.4" }, diff --git a/resources/js/Components/Card/Actions.js b/resources/js/Components/Card/Actions.js new file mode 100644 index 000000000..b86cb11bb --- /dev/null +++ b/resources/js/Components/Card/Actions.js @@ -0,0 +1,11 @@ +import Component from '../Component'; + +export default class Actions extends Component { + view(vnode) { + return ( +
+ {vnode.children} +
+ ); + } +} diff --git a/resources/js/Components/Card/Card.js b/resources/js/Components/Card/Card.js new file mode 100644 index 000000000..545d8fb78 --- /dev/null +++ b/resources/js/Components/Card/Card.js @@ -0,0 +1,27 @@ +import {MDCRipple} from '@material/ripple'; +import Mithril from 'mithril'; +import Component from '../Component'; + +export default class Card extends Component { + view(vnode) { + return
+ {vnode.children} +
; + } + + oncreate(vnode: Mithril.VnodeDOM) { + super.oncreate(vnode); + $('.mdc-card__primary-action').each((index, element) => new MDCRipple(element)); + } +} diff --git a/resources/js/Components/Card/Content.js b/resources/js/Components/Card/Content.js new file mode 100644 index 000000000..b53997333 --- /dev/null +++ b/resources/js/Components/Card/Content.js @@ -0,0 +1,11 @@ +import Component from '../Component'; + +export default class Content extends Component { + view(vnode) { + return ( +
+ {vnode.children} +
+ ); + } +} diff --git a/resources/js/Components/Card/Media.js b/resources/js/Components/Card/Media.js new file mode 100644 index 000000000..d030d01b4 --- /dev/null +++ b/resources/js/Components/Card/Media.js @@ -0,0 +1,14 @@ +import Component from '../Component'; + +export default class Media extends Component { + view(vnode) { + return ( +
+
{vnode.attrs.title ?? ''}
+
+ ); + } +} diff --git a/resources/js/Components/Card/PrimaryAction.js b/resources/js/Components/Card/PrimaryAction.js new file mode 100644 index 000000000..49483fe8f --- /dev/null +++ b/resources/js/Components/Card/PrimaryAction.js @@ -0,0 +1,12 @@ +import Component from '../Component'; + +export default class PrimaryAction extends Component { + view(vnode) { + return ( +
+
+ {vnode.children} +
+ ); + } +} diff --git a/resources/js/Components/Grid/Cell.js b/resources/js/Components/Grid/Cell.js new file mode 100644 index 000000000..46ed62eeb --- /dev/null +++ b/resources/js/Components/Grid/Cell.js @@ -0,0 +1,20 @@ +import Component from '../Component'; + +export default class Cell extends Component { + view(vnode) { + return
+ {vnode.children} +
; + } +} diff --git a/resources/js/Components/Grid/LayoutGrid.js b/resources/js/Components/Grid/LayoutGrid.js new file mode 100644 index 000000000..748edce6b --- /dev/null +++ b/resources/js/Components/Grid/LayoutGrid.js @@ -0,0 +1,15 @@ +import Component from '../Component'; + +export default class LayoutGrid extends Component { + view(vnode) { + return
+ {vnode.children} +
; + } +} diff --git a/resources/js/Components/Grid/Row.js b/resources/js/Components/Grid/Row.js new file mode 100644 index 000000000..793a0f840 --- /dev/null +++ b/resources/js/Components/Grid/Row.js @@ -0,0 +1,7 @@ +import Component from '../Component'; + +export default class Row extends Component { + view(vnode) { + return
{vnode.children}
; + } +} diff --git a/resources/js/Components/Mdi.js b/resources/js/Components/Mdi.js new file mode 100644 index 000000000..2fde80ca2 --- /dev/null +++ b/resources/js/Components/Mdi.js @@ -0,0 +1,14 @@ +import Component from './Component'; + +export default class Mdi extends Component { + view(vnode) { + return ; + /* + Quando MWC supporterà pienamente le icone SVG potremo + import * as mdi from '@mdi/js'; + import {camelCase} from 'lodash/string'; + return + + ; */ + } +} diff --git a/resources/scss/_material.scss b/resources/scss/_material.scss new file mode 100644 index 000000000..1e10088f2 --- /dev/null +++ b/resources/scss/_material.scss @@ -0,0 +1,162 @@ +@use "variables"; +@use '~@material/theme' with ( + $primary: variables.$primary, + $secondary: variables.$secondary +); +@use "~@material/card"; +@use "~@material/layout-grid/mdc-layout-grid"; +@use "~@mdi/font"; + +@include card.core-styles; + +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--mdc-theme-text-primary-on-background, black); + font-family: #{variables.$headings_font}; +} + +p, +small { + color: var(--mdc-theme-text-primary-on-background, black); + font-family: #{variables.$body_font}; +} + +body { + background-color: var(--mdc-theme-background, #fff); +} + +/* --------------------------- + MDC Cards +--------------------------- */ +.mdc-card { + padding: 16px; +} + +.mdc-card__thumbnail { + padding-right: 16px; + font-size: 24px; +} + +.mdc-card__title { + margin-top: 0; + margin-bottom: 0; + font-family: var(--mdc-typography-headline1-font-family, variables.$body_font); + font-size: 1.25rem; + font-weight: 500; + letter-spacing: 0.0125em; + line-height: 2rem; +} + +.mdc-card__subhead { + display: block; + font-family: var(--mdc-typography-subtitle1-font-family, variables.$body_font); +} + +.mdc-card__supporting-text { + display: block; + padding-top: 16px; + font-family: var(--mdc-typography-font-family, variables.$body_font); +} + +.mdc-card__title, +.mdc-card__subhead, +.mdc-card__supporting-text { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-decoration: inherit; + text-transform: inherit; +} + +.mdc-card__subhead, +.mdc-card__supporting-text { + font-size: 0.875rem; + font-weight: 400; + letter-spacing: 0.0178571429em; + line-height: 1.25rem; + opacity: 0.6; +} + +/* --------------------------- + MDC Sticky FABs +--------------------------- */ + +mwc-fab.sticky { + position: fixed; + right: 16px; + bottom: 16px; +} + +/* --------------------------- + MDC Theme and Typography +--------------------------- */ +:root { + --mdc-theme-primary: #{variables.$primary}; + --mdc-theme-primary2: #{variables.$primary}; // Fix for MWC Drawer styling + --mdc-theme-secondary: #{variables.$secondary}; + --mdc-theme-background: #fff; + --mdc-theme-surface: #fff; + --mdc-theme-error: #b00020; + --mdc-theme-text-primary-on-background: #000d; + --mdc-theme-text-icon-on-background: #00000060; + --mdc-theme-outline-color: #e0e0e0; + --mdc-typography-font-family: #{variables.$body_font}; + --mdc-typography-button-font-family: #{variables.$headings_font}; + + @each $type in headline1, headline2, headline3, headline4, headline5, headline6, subtitle1, subtitle2 { + --mdc-typography-#{$type}-font-family: #{variables.$body_font}; + --mdc-typography-#{$type}-font-weight: 500; + } +} + +.mdc-high-contrast { + --mdc-theme-primary: #{lighten(variables.$primary, 100%)}; + --mdc-theme-primary2: #{lighten(variables.$primary, 50%)}; // Fix for MWC Drawer styling + --mdc-theme-secondary: #{variables.$secondary}; + --mdc-theme-on-primary: #000; + --mdc-theme-on-secondary: #000; + --mdc-theme-error: #cf6679; + --mdc-theme-text-primary-on-background: #fff; + --mdc-theme-text-secondary-on-background: #b9b9b989; + --mdc-theme-text-icon-on-background: #e7e7e7; + --mdc-theme-background: #121212; + --mdc-theme-surface: #121212; + --mdc-ripple-color: #fff; + --mdc-button-outline-color: #e0e0e0; + --mdc-dialog-heading-ink-color: #fff; + --mdc-dialog-content-ink-color: #fff; + --mdc-checkbox-unchecked-color: #fff; + --mdc-text-field-idle-line-color: #fff; + + [slot="appContent"] { + color: var(--mdc-theme-on-primary, #{variables.$primary}); + } + + a { + color: var(--mdc-theme-primary, #{variables.$primary}); + } + + mwc-textfield { + --mdc-theme-primary: var(--mdc-theme-secondary, #{variables.$secondary}); + } + + mwc-icon-button, + i.mdi:not(.light-bg) { + color: var(--mdc-theme-text-icon-on-background, #000d); + } + + mwc-button { + --mdc-ripple-color: var(--mdc-theme-primary, #{variables.$primary}); + + &[raised] { + --mdc-ripple-color: unset; + + i.mdi { + color: unset; + } + } + } +} diff --git a/resources/scss/_variables.scss b/resources/scss/_variables.scss new file mode 100644 index 000000000..0fca095dc --- /dev/null +++ b/resources/scss/_variables.scss @@ -0,0 +1,9 @@ +// Colori +$primary: #3f3f3f; +$secondary: #e8a80f; + +// Font +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Nunito:wght@400;700&display=swap'); + +$headings_font: 'Montserrat, sans-serif'; +$body_font: 'Nunito, sans-serif'; diff --git a/resources/scss/app.scss b/resources/scss/app.scss index e69de29bb..234921457 100644 --- a/resources/scss/app.scss +++ b/resources/scss/app.scss @@ -0,0 +1,48 @@ +@import "variables"; +@import 'material'; + +hr { + border-color: rgba(0, 0, 0, 0.12); + margin: 16px 0; +} + +.mdi { + //width: 24px; + line-height: 1; +} + +.center { + display: block; + width: 50%; + margin-right: auto; + margin-left: auto; +} + +.vcenter { + position: absolute; + top: 50%; + margin: 0; + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + +mwc-fab#contrast-switcher { + &.contrast-light { + --mdc-theme-secondary: black; + --mdc-theme-on-secondary: white; + } + + &.contrast-dark { + --mdc-theme-secondary: white; + --mdc-theme-on-secondary: black; + } +} + +.logo-bg-sticky { + position: fixed; + z-index: 1; + top: 60%; + right: -15%; + width: 500px; + opacity: 0.1; +}