angular-xeditable compatibility with angular-material

compatibility with angular-material

Open seiyria opened this issue 9 years ago • 16 comments

https://github.com/angular/material -- it would be nice to use x-editable with this! currently, I can get the buttons, and probably the input, but there's just a lot to do.

However, it might want to wait until the select component is implemented over there.

Jan 18 '15 05:01 seiyria

:+1:

Feb 05 '15 13:02 Toilal

I'm not sure it is that hard. It seems to be possible by creating a new angular-material theme.

Feb 05 '15 16:02 Toilal

@seiyria, this seems to work nicely, without any change to sources.

angular.module('myApp').run(function(editableOptions, editableThemes) {
  editableThemes['angular-material'] = {
    formTpl:      '<form class="editable-wrap"></form>',
    noformTpl:    '<span class="editable-wrap"></span>',
    controlsTpl:  '<md-input-container class="editable-controls" ng-class="{\'md-input-invalid\': $error}"></md-input-container>',
    inputTpl:     '',
    errorTpl:     '<div ng-messages="{message: $error}"><div class="editable-error" ng-message="message">{{$error}}</div></div>',
    buttonsTpl:   '<span class="editable-buttons"></span>',
    submitTpl:    '<md-button type="submit" class="md-primary">save</md-button>',
    cancelTpl:    '<md-button type="button" class="md-warn" ng-click="$form.$cancel()">cancel</md-button>'
  };

  editableOptions.theme = 'angular-material';
});

with those styles:

md-input-container.editable-controls {
  padding: 0;
}

md-input-container.editable-controls [ng-message] {
  position: static;
}

Feb 05 '15 17:02 Toilal

@Toilal That worked ok, I had to make a few adjustments (submitTpl needed .md-primary, cancelTpl needed .md-warn) but other than that it was fine. It would still be nice to get this upstream though.

Feb 25 '15 20:02 seiyria

Problem is that there's no maintainer ... @vitalets @assisrafael Could you give some people access rights to maintain this repo ? There are many PRs pending ...

Feb 26 '15 07:02 Toilal

Another thing about this. Now that angular/material has updated, their templates have changed. The structure is a LOT different, and I wish a-xeditable was more flexible in this regard.

Basically, instead of giving it stuff like "inputTpl" I would rather just give it an entire template, structured however I want. It should be up to me to ensure the classes, etc get added correctly. In its current state, though, it's unusable AFAICT.

Nov 23 '15 20:11 seiyria

@seiyria @Toilal did you guys manage to get this working with angular material at the end? :)

Jan 25 '16 13:01 kevohagan

Yes, with the snippet i've pasted, but I don't use it now. Don't know if it still works.

Jan 25 '16 14:01 Toilal

@Toilal its not working for me... if i manage to figure this out ill post it here :)

Jan 25 '16 14:01 kevohagan

This plugin is very great and used a lot in my previous project, thanks for your great work. I am trying material design now that the official angular material has come to 1.0 version but still no luck. @Toilal did you manage to solve the snippet? May i help in some way?

Jan 26 '16 09:01 pdonorio

+1 It is nice.

May 09 '16 11:05 mostafabarmshory

@Toilal Thank you , your addition to angular

app.run

works great . I am using angular material 1.1.0 - and no bootstrap.css whatsoever

i added the following css tweaks:

md-input-container.editable-controls {
    padding: 1px ;
    padding-left: 10px ;
    margin: 1px ;
}
.editable-input.md-input {
    font-size: 18px ;
    font-weight: 600;
    color: #716e6e;
    max-width: 100px ;
    margin: 1px ;
}
.editable-wrap.editable-text {
    margin: 1px ;
}
md-input-container.editable-controls [ng-message] {
    position: static !important;
}