at-point / mtl Goto Github PK

When clicking the browser back button turbolinks loads the HTML from it's internal cache. In this internal cache the DOM is already modified and thus any select boxes are already built. Thus clicking browser back leads to duplicate select boxes...

Support rendering of avatars with fallback initials / shortname:

• CSS support as standalone, link, inline and as a block
• Generic mtl_avatar helper, that should generate initials et all

Proposing the following markup:

<{tag} class="avatar">
  <img src="https://secure.gravatar.com/avatar/7ddce11d4d274ea7ef93c34f67cbacef"/>
  XY
</{tag}>

https://jsfiddle.net/nxxLwwjv/3/

OT: There already is a .avatar class from materialize-css, but this is only active via .collection-item.avatar

/cc @lgavillet

Right now, the file cards don't support long file names, for example for automated generated names. Example:

As discussed, we're more in favour of an ellipsing, rather than a multiline version. This actually tells the user the filename has been shortened. The filename can be fully read using the title tooltip or when displaying the file in preview mode, using the file modals

MTL should support properly formatting field errors as rendered by the included simple_form settings.

    b.use :hint,  wrap_with: { tag: :span, class: 'help-block' }
    b.use :error, wrap_with: { tag: :span, class: 'error-block' }

At the moment the markup looks as follows, see trigger .has-error and span.error-block.

<div class="input-field col s12 string optional has-error">
  <input class="string optional" type="text" value="0" name="abc" id="abc" pattern="\d*">
  <label class="string optional active" for="abc">Label</label>
  <span class="error-block">muss größer als 0 sein</span>
</div>

The expected formatting should look like:

/cc @lgavillet

I often come around the following:

<i class="material-icons">some_icon</i>
<span> Some text after the icon</span>

At the moment, the text sticks really close to the icon, so I need to either add some spacing by CSS or a   which is uncool.

What I started to use is something like:

i + span {
  text-indent: 0.5em;
}

Should we integrate something like this into MTL?

Possibly the simple form plugin for materializeCSS generates wrong markup, i.e form submit buttons are only clickable on the text label:

@sled: I started the implementation in

• #22
• https://github.com/at-point/cam/pull/561 (for testing over here)

The main idea is to toggle between the ul's, by showing it (could not do that with css only as you could not click through the second element with opacity 0) and toggling the class compressed on it.

Useful for currency inputs for example

Integrate alert/confirm modal helpers into the app. Goal is to redefine the default browser dialogs in the MTL namespace, which should be semantically the same. Sadly, active waiting isn't possible... Question is how to handle the callbacks?
a. The method returns a Promise? https://promisesaplus.com/
b. Methods arguments accepts callbacks in options, such as: { success: -> ..., cancel: -> ... }

Example:

alert('hello');
MTL.alert('its me');
confirm('I was wondering if after all these years youd like to meet ');
MTL.confirm('to go over everything?');

The MTL.alert should display the following

Same goes for confirm().

Additional options

As an added value, methods should accept an option hash to configure the look & feel of the modal.

Alert

Method alert(message, options = {})
Arguments

• message - The message to display, as is in the default behaviour
• options optional - an options hash, for the following values
  • title optional - The modal title. Defaults to null (not shown)
  • button optional - Button text. Defaults to 'OK'

Confirm

Method confirm(message, options = {})
Arguments

• message - The message to display, as is in the default behaviour
• options optional - an options hash, for the following values
  • title optional - The modal title. Defaults to null (not shown)
  • confirmButton optional - Confirm button text. Defaults to 'OK'
  • cancelButton optional - Cancel button text. Defaults to 'Cancel'

🔧 Tasks/open points

• Define the callback solution -> Promises
• Integrate the proper helpers, according to the above documentation
• Provide a solution to override the default methods provided by Rails and use those dialogs instead. Should be non-destructive, so only as an option and available when activated.

@sled @philiplehmann inputs?

Materialize changed the markup for fixed headers and added support for tabs in navbar. Question is now how to integrate a proper DSL for this. Some proposals:

Fixed header

http://materializecss.com/navbar.html#navbar-fixed

V1

= mtl_header fixed: true do 
  %p this is a fixed header

V2

= mtl_fixed_header do 
  %p this is a fixed header

Extended header (= with tabs)

http://materializecss.com/navbar.html#navbar-tabs

V1

= mtl_header extended: true do 
  = mtl_header_nav do 
    the nav
  = mtl_header_content do 
    %ul.tabs
      %li Abcd

V2

= mtl_header_extended do 
  = mtl_header_nav do 
    the nav
  = mtl_header_content do 
    %ul.tabs
      %li Abcd

V3

= mtl_extended_header do |nav|
  = nav.header do 
    the nav
  = nav.content do 
    %ul.tabs
      %li Abcd

V4

= mtl_extended_header do
  = header do 
    the nav
  = content do 
    %ul.tabs
      %li Abcd

@philiplehmann @sled @ruinunes inputs?

The form labels currently don't support ellipsing, which can end in a funny looking form:

As discussed, the idea is to add an ellipsing, if possible, to be safe from failure.

Had a quick discussion with @sled regarding the name, as we are now going to prefix our helper methods et all with materializer_... and CSS classes at the moment with mtl-, I think we should agree on a unified way of nameing.

• vote with a 👍 for materializer
• and with 🎉 for mtl

Impacts this might have:

1. Renaming the repo and project
2. Ensuring we have a proper an consistent naming all over the place, e.g. also mtl.scss as main include etc.

Merci, @marcopluess @sled @JorisM @florianwestermann @ruinunes @philiplehmann

Select's width constraint is always set, 'false' isn't allowed. Materialize bug, workaround possible

In order to display forms as a structured and read-only information, we need to display the form labels as a simple text label. Right now, this typography is only available from within a label, inside a form. The goal is to reuse an existing title tag, like h5 or h6, which is for now not used.

🔧 Tasks:

• Define which tag to use: h5 or h6?
• Implement CSS
• Update corresponding changes/references

/cc @sled @marcopluess

As we need a message form in several places, it might make sense to add a message box component, containing the following structure:

As this is quite restrictive, the actual implementation could be just a simple JS behaviour, to maintain the button disabled as long as no message is provided.

Open to discussion

The navbar-fixed causes some problems due to position: fixed;. We could provide an alternative using flex box, i.e the content area stretches from the end of the header to the bottom of the page and is scrollable.

As discussed, the plan is to apply a standard / comment set of typography to headers et all.

• h1: Title style, 1.429rem (20sp, medium)
• h2: Headline style, 1.714rem (24sp, regular)
• h3 & span.card-title: Subheading style, 1.143rem (16sp, regular)
• h4: Body 2 / strong. 1rem (14sp, bold)
• buttons / tabs: Button style, 1rem (14sp, medium, all caps)
• small: Caption style, relative: 0.857em (12sp)

These should correspond to:

The MTL helper mtl_avatar and mtl_avatar_link clashes with materialize css avatar collection item.

I'd suggest to rename our avatar class here to something like mtl-avatar, user-avatar, avatar-circle or similar.

The notifications used at the moment, disrupt the layout of our backends:

One way of solving this, would be to put them inside the header:
... from where I could easily optimize the spacings later.

But I don't think that this is the best option. So I wanted to propose something similat to the toasts as a long term solution, but I don't know what the technical implications of this would be:
http://materializecss.com/dialogs.html

Let's have a discussion!

The dropdown disappear once the click is initiated on IE11, which makes it impossible to use using the mouse.