osdir.com

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: Web-App (Angular 6): Choice of Design Framework - Angular Material vs bootswatch and ng-bootstrap)


Hello,

There is an official *material design colour tool* using which we can
generate themes based on the official material palette as well as our
custom colour choices here:
https://material.io/tools/color/
(*Ref:* https://material.io/design/color/#tools-for-picking-colors)

I have created a few examples of themes using it and would request you to
give your opinion regarding them as to which theme we should use as the
official default theme for the new MifosX web app. You could also use the
material design colour tool to generate any other theme and share with us
if I missed something.

*Based on the new skin of community app:*
https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=082331&primary.text.color=ffffff&secondary.color=4f99ed&secondary.text.color=000000

*Based on the logo of Mifos:*
Blue theme -
https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=1074b9&primary.text.color=ffffff&secondary.color=1daeec&secondary.text.color=000000
Green theme -
https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=1fb050&primary.text.color=000000&secondary.color=b4d575&secondary.text.color=000000
Blue/Green theme combinations -
https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=1074b9&secondary.color=1fb050&secondary.text.color=000000&primary.text.color=ffffff
https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=1074b9&secondary.color=b4d575&secondary.text.color=000000&primary.text.color=ffffff
https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=1daeec&secondary.color=b4d575&secondary.text.color=000000&primary.text.color=000000
https://material.io/tools/color/#!/?view.left=0&view.right=1&primary.color=1daeec&secondary.color=1fb050&secondary.text.color=000000&primary.text.color=000000

*Based on the material palette:*
Blue theme -
https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=2196F3&secondary.color=00BCD4&secondary.text.color=000000
Green theme -
https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=2E7D32&secondary.color=00E676&primary.text.color=ffffff&secondary.text.color=000000
Blue/Green theme -
https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3D5AFE&secondary.color=00E676&primary.text.color=ffffff&secondary.text.color=000000
https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=00E676&secondary.color=3D5AFE&primary.text.color=000000&secondary.text.color=ffffff

Thanks
Abhay.

On Fri, Jun 22, 2018 at 12:30 AM Abhay Chawla <abhay.chawla97@xxxxxxxxx>
wrote:

> Hello Ed and Gaurav,
>
> Yes, I will deploy the code to the main repository positively by tomorrow.
> We have the 4 default themes officially provided by angular-material.
> Apart from that, we can also create our own custom theme based on the
> current skin colour of the community app.
>
> *Reference:*
> https://material.angular.io/guide/theming
> https://material.io/design/color/#
>
> I will have a look and see if more themes are available and also would try
> to create a custom theme based on the current skin and share as soon as
> possible over the weekend.
>
> Thanks
> Abhay.
>
>
> On Fri, Jun 22, 2018 at 12:11 AM Gaurav Saini <gauravsaini03@xxxxxxxxx>
> wrote:
>
>> I think we can choose from material color pallet there are many more
>> color themes available. Abhay you can suggest some or drop a link if there
>> any on official angular material site where all colors can be seen.
>>
>> On Fri 22 Jun, 2018, 00:08 Ed Cable, <edcable@xxxxxxxxx> wrote:
>>
>>> Abhay,
>>>
>>> That is coming along nicely. Are we going to soon deploy that to the
>>> main web-app github repo?
>>>
>>> I'm glad that we made the choice to switch over to Angular Material as
>>> it does look more familiar and I think will be of benefit to our user base
>>> who will also recognize it from other web apps they use consistently.
>>>
>>> I believe a comment of mine previously might have been misheard as I
>>> didn't like the old skin color scheme and do like the recent color scheme
>>> of the recent re-skin we deployed. Are you able to change the default color
>>> scheme away from the blue/purple color?
>>>
>>> Are there more than just those 4 default colors for themes?
>>>
>>> On Thu, Jun 21, 2018 at 3:30 AM Abhay Chawla <abhay.chawla97@xxxxxxxxx>
>>> wrote:
>>>
>>>> Hello Everyone,
>>>>
>>>> Here is a glimpse of the initial shell structure of the new web app
>>>> currently in development:
>>>> https://abhaychawla.github.io/angular-app-shell/
>>>> We would appreciate any reviews you all have on the same.
>>>>
>>>> Thank you
>>>> Abhay.
>>>>
>>>> On Wed, Jun 20, 2018 at 1:06 PM Gaurav Saini <gauravsaini03@xxxxxxxxx>
>>>> wrote:
>>>>
>>>>> Hello Everyone,
>>>>>
>>>>> Just to update on the latest activity going on the new web-app. Abhay,
>>>>> Anwesh and me had a call on weekend where we discussed what was currently
>>>>> built and shared my concerns with the approach we were following by not
>>>>> using official Angular Material. There were multiple UI/UX concerns also
>>>>> and some component level discussions and at the end we came to conclusion
>>>>> that we will be going to use:
>>>>>
>>>>>    - Angular Material for the new web-application
>>>>>    - Another important point finalised was that we will be first
>>>>>    preparing a shell structure of the application and then start working on
>>>>>    each component.
>>>>>    - We also took a look on to some dashboard themes for ideation on
>>>>>    UI/UX and finalised it also.
>>>>>
>>>>> Abhay just shared with initial structure he started and it's looking
>>>>> really good now and he will soon deploy that for demo also once he
>>>>> integrate and push it.
>>>>>
>>>>> @Abhay Chawla <abhay.chawla97@xxxxxxxxx> @Anwesh Krishna Nayak
>>>>> <anweshknayak@xxxxxxxxx> Also, some of the points that you should
>>>>> take care while working from starting is:
>>>>>
>>>>>    - Follow javascript style guidelines -
>>>>>    https://github.com/airbnb/javascript
>>>>>    - Proper code commenting, Indentation & formatting (use ESLint)
>>>>>    - Proper code directory structure in feature base modularity
>>>>>    - Try best not to write own custom/internal CSS if we can use
>>>>>    helper classes in library
>>>>>    - Naming convention of classes, function, variable (this will be
>>>>>    part of airbnb styleguide)
>>>>>    - Documentation should be done in parallel as we tend to miss this
>>>>>    everytime
>>>>>    - Responsiveness - When building a new component or page do test
>>>>>    it should be responsive. Although by default ,most of material components
>>>>>    take care of this, just in case you write anything custom do test this.
>>>>>    - Webpack build process should be there so that project builds
>>>>>    properly.
>>>>>
>>>>>
>>>>> @Mentors: I request you all again to give your inputs so that we have
>>>>> more pair of eyes looking onto the project, that way we can have most of
>>>>> the basic things correct from start.
>>>>> @Mohit I need your feedback on the offline support also, if we need to
>>>>> setup anything from starting itself so our new application can work as PWA
>>>>> installable app also. :)
>>>>>
>>>>> Thanks
>>>>> Gaurav
>>>>>
>>>>> On Sat, Jun 16, 2018 at 6:20 PM Anwesh Krishna Nayak <
>>>>> anweshknayak@xxxxxxxxx> wrote:
>>>>>
>>>>>> Hi all,
>>>>>>
>>>>>> There was some error we faced so that material UI was not consistent
>>>>>> yesterday. Its back up again.
>>>>>> Please recheck https://openmf.github.io/web-app/
>>>>>>
>>>>>>
>>>>>> https://docs.google.com/document/d/1H9w7QWenox9M0nb29WR4RmvV94Jsjj0LglUZ3wCzbw8/edit?usp=sharing
>>>>>> Feel free to provide feedback in the doc.
>>>>>>
>>>>>> Thanks
>>>>>>
>>>>>> On Sat, Jun 16, 2018 at 2:24 AM, Gaurav Saini <
>>>>>> gauravsaini03@xxxxxxxxx> wrote:
>>>>>>
>>>>>>> As suggested by Abhay lets get on a call. I will fo my best to
>>>>>>> schedule it in weekend itself.
>>>>>>>
>>>>>>> Also, i saw the doc with screenshots there are really basic UI/UX
>>>>>>> mistakes done in new designs ideas shared that is the main reason to use
>>>>>>> angular material as you will stick to exact component designs.
>>>>>>>
>>>>>>> Let's have a call and discuss about all these in weekend itself.
>>>>>>>
>>>>>>> Thanks
>>>>>>> Gaurav
>>>>>>>
>>>>>>> On Fri 15 Jun, 2018, 21:42 Anwesh Krishna Nayak, <
>>>>>>> anweshknayak@xxxxxxxxx> wrote:
>>>>>>>
>>>>>>>> I have attached below the doc containing redesigning of all UI and
>>>>>>>> links respectively
>>>>>>>>
>>>>>>>> Link :
>>>>>>>> https://docs.google.com/document/d/1H9w7QWenox9M0nb29WR4RmvV94Jsjj0LglUZ3wCzbw8/edit?usp=sharing
>>>>>>>>
>>>>>>>> Thanks
>>>>>>>>
>>>>>>>> --
>>>>>>>> You received this message because you are subscribed to the Google
>>>>>>>> Groups "Mifos Google Summer of Code 2018" group.
>>>>>>>> To unsubscribe from this group and stop receiving emails from it,
>>>>>>>> send an email to gsoc-2018+unsubscribe@xxxxxxxxx.
>>>>>>>>
>>>>>>> --
>>>>>>> You received this message because you are subscribed to the Google
>>>>>>> Groups "Mifos Google Summer of Code 2018" group.
>>>>>>> To unsubscribe from this group and stop receiving emails from it,
>>>>>>> send an email to gsoc-2018+unsubscribe@xxxxxxxxx.
>>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>> --
>>>>> Regards,
>>>>> *Gaurav Saini*
>>>>>
>>>>
>>>
>>> --
>>> *Ed Cable*
>>> President/CEO, Mifos Initiative
>>> edcable@xxxxxxxxx | Skype: edcable | Mobile: +1.484.477.8649
>>>
>>> *Collectively Creating a World of 3 Billion Maries | *http://mifos.org
>>> <http://facebook.com/mifos>  <http://www.twitter.com/mifos>
>>>
>>>