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)


Abhay,

Sorry as I only just saw this reply.

The following blue/green combo options based on Mifos logo looked nice in
my eyes:

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

Ed

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

> 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>
>>>>
>>>>

-- 
*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>