samtimalsina / matter Goto Github PK

View Code? Open in Web Editor NEW

6.0 6.0 1.0 246 KB

Drupal 8 admin theme built on top of Google's Material Components for the Web

Home Page: https://www.drupal.org/project/matter

JavaScript 7.40% CSS 30.04% HTML 61.62% PHP 0.95%

drupal drupal-theme material-design

matter's People

Stargazers

Watchers

Forkers

sanduhrs

matter's Issues

Update tables to follow the data-tables guidelines

Spec reference: https://www.google.com/design/spec/components/data-tables.html
MDC Blocker: material-components/material-components-web#57

MDC is missing the Data Table component. This is sad because Drupal uses tables extensively. The blocker is not going away for a few months. For the time-being, I have a custom css+js solution in place. This does not conform to MDC component design (which is out of the scope for this project anyways.)

In any case, the data-table look pretty much like the guidelines except for a few issues:

Cosmetic Issues:

Table content should be 13sp Roboto Regular.
The ripple on Filter button should be smaller and above the other content.
Column name hover (Desktop) has not been implemented.
The footer control sets (pagination), differs from the the guidelines in certain ways. For example, in Drupal tables, you don't the ability to choose rows per page. Also, the guideline doesn't have page numbers. This should probably be a separate issue and communicate with the MDC team for guidance.
Css issue in the footer control sets.
The action menu looks out of place because of the font-size, but need to confirm with the MDC team to make sure changing the font size here is ok. This has implications on smaller devices.

Behavior

Action buttons (the node bulk form) can go to the alternate header.

Update the look and feel of core field: CKEditor

problem with build

Hi,

I was install theme via composer, run npm install and npm run build but there is some error during building:

$ npm run build

> [email protected] build /Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter
> mkdirp build && webpack --progress --colors

[1] Hash: 018190fd1730e3cf94c0a3f8c0fc17019279c76b                                     
Version: webpack 2.7.0
Child js-components:
    Hash: 018190fd1730e3cf94c0
    Time: 17832ms
        Asset     Size  Chunks             Chunk Names
    matter.js  4.85 kB       0  [emitted]  main
       [0] ./app/matter.js 2.16 kB {0} [built]
Child css:
    Hash: a3f8c0fc17019279c76b
    Time: 18598ms
               Asset     Size  Chunks             Chunk Names
    matter.css-entry  4.49 kB       0  [emitted]  matter
       [0] ./scss/matter.scss 1.68 kB {0} [built] [failed] [1 error]
       [1] multi ./scss/matter.scss 28 bytes {0} [built]
       [2] ./~/css-loader?{"sourceMap":true}!./~/postcss-loader/lib?{"sourceMap":false}!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/animation","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/auto-init","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/base","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/button","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/card","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/checkbox","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/dialog","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/drawer","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/elevation","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/fab","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/form-field","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/grid-list","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/icon-toggle","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/layout-grid","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/list","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/menu","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/radio","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/ripple","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/rtl","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/select","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/selection-control","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/snackbar","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/switch","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/tabs","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/textfield","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/theme","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/toolbar","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/typography"]}!./scss/matter.scss 425 bytes [built] [failed] [1 error]
       [3] ./~/style-loader/addStyles.js 9.15 kB [built]
       [4] ./~/style-loader/fixUrls.js 3.01 kB [built]
    
    ERROR in ./~/css-loader?{"sourceMap":true}!./~/postcss-loader/lib?{"sourceMap":false}!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/animation","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/auto-init","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/base","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/button","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/card","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/checkbox","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/dialog","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/drawer","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/elevation","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/fab","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/form-field","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/grid-list","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/icon-toggle","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/layout-grid","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/list","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/menu","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/radio","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/ripple","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/rtl","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/select","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/selection-control","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/snackbar","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/switch","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/tabs","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/textfield","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/theme","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/toolbar","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/typography"]}!./scss/matter.scss
    Module build failed: 
    $mdc-elevation-transition-timing-function: $mdc-animation-standard-curve-timing-function !default;
                                              ^
          Undefined variable: "$mdc-animation-standard-curve-timing-function".
          in /Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules/@material/elevation/_variables.scss (line 122, column 44)
     @ ./scss/matter.scss 4:14-192
     @ multi ./scss/matter.scss
    
    ERROR in ./scss/matter.scss
    Module build failed: ModuleBuildError: Module build failed: 
    $mdc-elevation-transition-timing-function: $mdc-animation-standard-curve-timing-function !default;
                                              ^
          Undefined variable: "$mdc-animation-standard-curve-timing-function".
          in /Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules/@material/elevation/_variables.scss (line 122, column 44)
        at runLoaders (/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules/webpack/lib/NormalModule.js:192:19)
        at /Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules/loader-runner/lib/LoaderRunner.js:364:11
        at /Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules/loader-runner/lib/LoaderRunner.js:230:18
        at context.callback (/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
        at Object.asyncSassJobQueue.push [as callback] (/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules/sass-loader/lib/loader.js:55:13)
        at Object.<anonymous> (/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules/async/dist/async.js:2257:31)
        at Object.callback (/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules/async/dist/async.js:958:16)
        at options.error (/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules/node-sass/lib/index.js:294:32)
    Child extract-text-webpack-plugin:
           [0] ./~/css-loader?{"sourceMap":true}!./~/postcss-loader/lib?{"sourceMap":false}!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/animation","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/auto-init","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/base","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/button","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/card","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/checkbox","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/dialog","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/drawer","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/elevation","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/fab","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/form-field","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/grid-list","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/icon-toggle","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/layout-grid","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/list","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/menu","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/radio","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/ripple","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/rtl","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/select","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/selection-control","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/snackbar","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/switch","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/tabs","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/textfield","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/theme","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/toolbar","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/typography"]}!./scss/matter.scss 425 bytes {0} [built] [failed] [1 error]
        
        ERROR in ./~/css-loader?{"sourceMap":true}!./~/postcss-loader/lib?{"sourceMap":false}!./~/sass-loader/lib/loader.js?{"sourceMap":true,"includePaths":["/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/animation","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/auto-init","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/base","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/button","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/card","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/checkbox","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/dialog","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/drawer","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/elevation","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/fab","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/form-field","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/grid-list","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/icon-toggle","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/layout-grid","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/list","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/menu","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/radio","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/ripple","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/rtl","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/select","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/selection-control","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/snackbar","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/switch","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/tabs","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/textfield","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/theme","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/toolbar","/Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/~/@material/typography"]}!./scss/matter.scss
        Module build failed: 
        $mdc-elevation-transition-timing-function: $mdc-animation-standard-curve-timing-function !default;
                                                  ^
              Undefined variable: "$mdc-animation-standard-curve-timing-function".
              in /Users/michal.landsman/localhost/marianne-thunder/docroot/themes/contrib/matter/node_modules/@material/elevation/_variables.scss (line 122, column 44)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `mkdirp build && webpack --progress --colors`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/michal.landsman/.npm/_logs/2018-01-09T19_48_12_410Z-debug.log

what do you suggest?

Update the look and feel of core field: Multiple Field

Align primary local tasks (tabs) to the bottom of toolbar

Selectively apply drop button.

Drop buttons are useful to hide away complexity on a page, but should be used sparingly and thoughtfully. The downside of introducing drop buttons are they invite an extra step in getting to a task.

Revise and refactor the drop buttons so they are used only when needed.

Allow adding of Material icons to menu items

Provide default icons to common menus out of the box. For example, logout.
Provide a way to add icons to menu in the menu UI.

Find the "Material" way to display the breadcrumbs.

The breadcrumbs in Drupal admin is useful in deep nested pages (eg. field settings on a node type) and I use it often. Breadcrumb, at least for me, is a power-tool-of-sorts.

However, there's a few problems with the breadcrumb:

Doesn't fit the Material Design Language. I have yet to see an example that uses it.
Hard to tap on links on smaller devices.

The breadcrumb needs a rethink. This could be potential enhancement.

Form elements are missing classes that is used by Drupal core

Update the look and feel of core field: file field

Entity Creation Form

This is perhaps the most important page in Drupal.

The biggest complaint with the node edit page has been how bloated the form feels and how un-modern. A famous example is If Gmail were built with Drupal, which sums up my sentiments exactly. Recently, there have been many attempts to spruce up the node edit form. The Drupal 8 seven theme does look a lot better than it's predecessor, but the bloat hasn't gone away.

Material has some opinions about how form elements should look like and behave, and I do think Drupal can benefit greatly from these guidelines.

I'm working on the node edit form, that will look something like this. I'm still working on/debating/researching the broader web for inspiration while following the Material guidelines and this layout can easily change.

The general idea is that creating a node or any other entity should be simple and easy.

Until this is fixed in MDC, use labels and custom style.

Also, potential techdebt if they change the DOM.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.