You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@cloudstack.apache.org by Maximilian Weber <M....@ewerk.com> on 2019/07/01 14:47:03 UTC
UI adjustments and refactoring css code
We want to contribute our work on a new iconset and styles for the existing UI.
The User Interface of Cloudstack has (relatively to web technology and design history of the past years) a pretty outdated state. Thus it’s necessary to scrutinize if several techniques and styles are still state of the art and replace them step by step.
Now out target of UI works is to do optical UI improvements will perhaps help to increase the number of audience of Cloudstack community users as well and of cause improves the user experience for general.
In addition UI enhancements we should refactoring css-code until it’s easier to maintain, read, organize, extend, simplify and automatize.
Here you can find a list of general UI enhancements:
* improve or unify icons and vectorize them as well
* replace hard gradients and hard drop shadows with more flat designs (hard means very obvious visible, which was on no time best practice)
* unify and modernize some hover effects and transitions, as well as colors and paddings etc.
For the initial step we already made a screenshot of the improved Cloudstack UI frame (header and navigation).
Open this screenshot to see it
––––––––– https://ibb.co/F3LT7jL –––––––––––––––
We adjusted the menu icons, the sizes of the header and made the design more flat.
And we will allocate the Illustrator file next to the new svg icons to provide the possibility of a file versioning via GIT and to make it possible for the community to do icon changes faster. In future we could advance this Illustrator file with all icons used on Cloudstack.
Let’s face the css-code quality now. Writing css may appear more complex than expected for most developer, especially if the main css-file is over 10000 lines large.
It’s almost impossible to prevent redundancies or outdated css-hacks and prefixes as well as importance, specificity and source order of css rules in such a huge file!
Therefor we need a tool that automate most of this tasks. A technology stack of Node, Gulp and SCSS will do it here. Node package manager NPM can provide powerful packages that are executable in Gulp task and SCSS allows us to use features like variables and linters and organize our rules more professional.
Here you can find a list of general refactoring enhancements
* split 10000+ lines css-file into many modular scss files and organize them inside folders.
* remove outdated css rules or rules that are no longer supported by almost all modern browser
* create a possibility to minify final transpiled css file
* add a linter-tool that warns the developer from doing bad practices
* add a autofix-tool that unifies some parts css-code automatically
We are happy to contribute this enhancements to the community.
Max
__
Maximilian Weber
Frontend Developer
EWERK IT GmbH
Brühl 24, D-04109 Leipzig
P +49 341 42649 - 99
F +49 341 42649 - 98
m.weber@ewerk.com
www.ewerk.com
Geschäftsführer:
Dr. Erik Wende, Hendrik Schubert, Frank Richter
Registergericht: Leipzig HRB 9065
Zertifiziert nach:
ISO/IEC 27001:2013
DIN EN ISO 9001:2015
EWERK-Blog<https://blog.ewerk.com/> | LinkedIn<https://www.linkedin.com/company/ewerk-group> | Xing<https://www.xing.com/company/ewerk> | Twitter<https://twitter.com/EWERK_Group> | Facebook<https://de-de.facebook.com/EWERK.IT/>
Auskünfte und Angebote per Mail sind freibleibend und unverbindlich.
Disclaimer Privacy:
Der Inhalt dieser E-Mail (einschließlich etwaiger beigefügter Dateien) ist vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung, Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt. Bitte informieren Sie in diesem Fall unverzüglich den Absender und löschen Sie die E-Mail (einschließlich etwaiger beigefügter Dateien) von Ihrem System. Vielen Dank.
The contents of this e-mail (including any attachments) are confidential and may be legally privileged. If you are not the intended recipient of this e-mail, any disclosure, copying, distribution or use of its contents is strictly prohibited, and you should please notify the sender immediately and then delete it (including any attachments) from your system. Thank you.
Re: UI adjustments and refactoring css code
Posted by Ivan Kudryavtsev <ku...@bw-sw.com>.
That's ok. Just addressing the:
>> Sounds good. If there is a OpenSource alternative why they is not open
so that community can work on it? ;) We would support it but if you don’t
see it we can not help. We are a part of the community I think.
We are open. Nobody wants to participate. Everything else is just fine.
вт, 2 июл. 2019 г. в 16:10, Maximilian Weber <M....@ewerk.com>:
> Hey Ivan,
>
> we already heard of your CloudStack-UI and it's really beautiful, good job!
> But we don't plan to fully replace the existing UI yet, we just want to
> improve some general styles. This is possible only if we do some
> css-refactoring.
>
> Best wishes
> Max
>
>
>
>
>
> __
>
> Maximilian Weber
> Frontend Developer
>
> EWERK IT GmbH
> Brühl 24, D-04109 Leipzig
> P +49 341 42649 - 99
> F +49 341 42649 - 98
> m.weber@ewerk.com
> www.ewerk.com
>
> Geschäftsführer:
> Dr. Erik Wende, Hendrik Schubert, Frank Richter
> Registergericht: Leipzig HRB 9065
>
> Zertifiziert nach:
> ISO/IEC 27001:2013
> DIN EN ISO 9001:2015
>
> EWERK-Blog | LinkedIn | Xing | Twitter | Facebook
>
> Auskünfte und Angebote per Mail sind freibleibend und unverbindlich.
>
> Disclaimer Privacy:
> Der Inhalt dieser E-Mail (einschließlich etwaiger beigefügter Dateien) ist
> vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der
> bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung,
> Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt. Bitte
> informieren Sie in diesem Fall unverzüglich den Absender und löschen Sie
> die E-Mail (einschließlich etwaiger beigefügter Dateien) von Ihrem System.
> Vielen Dank.
>
> The contents of this e-mail (including any attachments) are confidential
> and may be legally privileged. If you are not the intended recipient of
> this e-mail, any disclosure, copying, distribution or use of its contents
> is strictly prohibited, and you should please notify the sender immediately
> and then delete it (including any attachments) from your system. Thank you.
> On 02.07.19, 10:53, "Ivan Kudryavtsev" <ku...@bw-sw.com> wrote:
>
> Maybe, guys, you are speaking about our CloudStack-UI?
>
> https://github.com/bwsw/cloudstack-ui
>
> It's published, used by us and other companies in prod, but there is a
> limited feature set. Currently, the community doesn't participate in
> the
> development, so we develop it on our own mostly for the needs of our
> public
> cloud. Contributors are welcome but not sure that small, medium-size
> users
> have enough will to sponsor even one-two typescript engineers who will
> work
> on it fulltime.
>
> Best wishes, Ivan
>
>
>
> вт, 2 июл. 2019 г. в 15:34, Sven Vogel <S....@ewerk.com>:
>
> > Hi Erik,
> >
> > Sounds good. If there is a OpenSource alternative why they is not
> open so
> > that community can work on it? ;) We would support it but if you
> don’t see
> > it we can not help. We are a part of the community I think.
> >
> > Sven
> >
> >
> >
> >
> > __
> >
> > Sven Vogel
> > Teamlead Platform
> >
> > EWERK RZ GmbH
> > Brühl 24, D-04109 Leipzig
> > P +49 341 42649 - 11
> > F +49 341 42649 - 18
> > S.Vogel@ewerk.com
> > www.ewerk.com
> >
> > Geschäftsführer:
> > Dr. Erik Wende, Hendrik Schubert, Frank Richter
> > Registergericht: Leipzig HRB 17023
> >
> > Zertifiziert nach:
> > ISO/IEC 27001:2013
> > DIN EN ISO 9001:2015
> > DIN ISO/IEC 20000-1:2011
> >
> > EWERK-Blog<https://blog.ewerk.com/> | LinkedIn<
> > https://www.linkedin.com/company/ewerk-group> | Xing<
> > https://www.xing.com/company/ewerk> | Twitter<
> > https://twitter.com/EWERK_Group> | Facebook<
> > https://de-de.facebook.com/EWERK.IT/>
> >
> > Auskünfte und Angebote per Mail sind freibleibend und unverbindlich.
> >
> > Disclaimer Privacy:
> > Der Inhalt dieser E-Mail (einschließlich etwaiger beigefügter
> Dateien) ist
> > vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der
> > bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung,
> > Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt.
> Bitte
> > informieren Sie in diesem Fall unverzüglich den Absender und löschen
> Sie
> > die E-Mail (einschließlich etwaiger beigefügter Dateien) von Ihrem
> System.
> > Vielen Dank.
> >
> > The contents of this e-mail (including any attachments) are
> confidential
> > and may be legally privileged. If you are not the intended recipient
> of
> > this e-mail, any disclosure, copying, distribution or use of its
> contents
> > is strictly prohibited, and you should please notify the sender
> immediately
> > and then delete it (including any attachments) from your system.
> Thank you.
> >
> > Am 01.07.2019 um 23:50 schrieb Erik Weber <terbolous@gmail.com
> <mailto:
> > terbolous@gmail.com>>:
> >
> > I don’t recall their name, but there’s a company that works on an
> open
> > sourced alternative ui.
> >
> > I’m not sure of the state, but last I looked it was promising. I’d be
> > tempted to suggest a total switch if the other ui is close enough to
> > feature alike.
> >
> > Erik
> >
> > man. 1. jul. 2019 kl. 16:47 skrev Maximilian Weber <
> M.Weber@ewerk.com
> > <ma...@ewerk.com>>:
> >
> > We want to contribute our work on a new iconset and styles for the
> > existing UI.
> > The User Interface of Cloudstack has (relatively to web technology
> and
> > design history of the past years) a pretty outdated state. Thus it’s
> > necessary to scrutinize if several techniques and styles are still
> state of
> > the art and replace them step by step.
> > Now out target of UI works is to do optical UI improvements will
> perhaps
> > help to increase the number of audience of Cloudstack community
> users as
> > well and of cause improves the user experience for general.
> > In addition UI enhancements we should refactoring css-code until it’s
> > easier to maintain, read, organize, extend, simplify and automatize.
> >
> >
> > Here you can find a list of general UI enhancements:
> >
> > * improve or unify icons and vectorize them as well
> > * replace hard gradients and hard drop shadows with more flat
> designs
> > (hard means very obvious visible, which was on no time best practice)
> > * unify and modernize some hover effects and transitions, as well
> as
> > colors and paddings etc.
> >
> > For the initial step we already made a screenshot of the improved
> > Cloudstack UI frame (header and navigation).
> > Open this screenshot to see it
> > ––––––––– https://ibb.co/F3LT7jL –––––––––––––––
> >
> > We adjusted the menu icons, the sizes of the header and made the
> design
> > more flat.
> > And we will allocate the Illustrator file next to the new svg icons
> to
> > provide the possibility of a file versioning via GIT and to make it
> > possible for the community to do icon changes faster. In future we
> could
> > advance this Illustrator file with all icons used on Cloudstack.
> >
> >
> > Let’s face the css-code quality now. Writing css may appear more
> complex
> > than expected for most developer, especially if the main css-file is
> over
> > 10000 lines large.
> > It’s almost impossible to prevent redundancies or outdated css-hacks
> and
> > prefixes as well as importance, specificity and source order of css
> rules
> > in such a huge file!
> > Therefor we need a tool that automate most of this tasks. A
> technology
> > stack of Node, Gulp and SCSS will do it here. Node package manager
> NPM can
> > provide powerful packages that are executable in Gulp task and SCSS
> allows
> > us to use features like variables and linters and organize our rules
> more
> > professional.
> >
> > Here you can find a list of general refactoring enhancements
> >
> > * split 10000+ lines css-file into many modular scss files and
> > organize them inside folders.
> > * remove outdated css rules or rules that are no longer supported
> by
> > almost all modern browser
> > * create a possibility to minify final transpiled css file
> > * add a linter-tool that warns the developer from doing bad
> practices
> > * add a autofix-tool that unifies some parts css-code
> automatically
> >
> >
> >
> > We are happy to contribute this enhancements to the community.
> > Max
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> > __
> >
> > Maximilian Weber
> > Frontend Developer
> >
> > EWERK IT GmbH
> > Brühl 24, D-04109 Leipzig
> > <
> >
> https://www.google.com/maps/search/Br%C3%BChl+24,+D-04109+Leipzig?entry=gmail&source=g
> > >
> > P +49 341 42649 - 99
> > F +49 341 42649 - 98
> > m.weber@ewerk.com<ma...@ewerk.com>
> > www.ewerk.com<http://www.ewerk.com>
> >
> > Geschäftsführer:
> > Dr. Erik Wende, Hendrik Schubert, Frank Richter
> > Registergericht: Leipzig HRB 9065
> >
> > Zertifiziert nach:
> > ISO/IEC 27001:2013
> > DIN EN ISO 9001:2015
> >
> > EWERK-Blog<https://blog.ewerk.com/> | LinkedIn<
> > https://www.linkedin.com/company/ewerk-group> | Xing<
> > https://www.xing.com/company/ewerk> | Twitter<
> > https://twitter.com/EWERK_Group> | Facebook<
> > https://de-de.facebook.com/EWERK.IT/>
> >
> > Auskünfte und Angebote per Mail sind freibleibend und unverbindlich.
> >
> > Disclaimer Privacy:
> > Der Inhalt dieser E-Mail (einschließlich etwaiger beigefügter
> Dateien) ist
> > vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der
> > bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung,
> > Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt.
> Bitte
> > informieren Sie in diesem Fall unverzüglich den Absender und löschen
> Sie
> > die E-Mail (einschließlich etwaiger beigefügter Dateien) von Ihrem
> System.
> > Vielen Dank.
> >
> > The contents of this e-mail (including any attachments) are
> confidential
> > and may be legally privileged. If you are not the intended recipient
> of
> > this e-mail, any disclosure, copying, distribution or use of its
> contents
> > is strictly prohibited, and you should please notify the sender
> immediately
> > and then delete it (including any attachments) from your system.
> Thank you.
> >
> >
>
> --
> With best regards, Ivan Kudryavtsev
> Bitworks LLC
> Cell RU: +7-923-414-1515
> Cell USA: +1-201-257-1512
> WWW: http://bitworks.software/ <http://bw-sw.com/>
>
>
>
--
With best regards, Ivan Kudryavtsev
Bitworks LLC
Cell RU: +7-923-414-1515
Cell USA: +1-201-257-1512
WWW: http://bitworks.software/ <http://bw-sw.com/>
Re: UI adjustments and refactoring css code
Posted by Maximilian Weber <M....@ewerk.com>.
Hey Ivan,
we already heard of your CloudStack-UI and it's really beautiful, good job!
But we don't plan to fully replace the existing UI yet, we just want to improve some general styles. This is possible only if we do some css-refactoring.
Best wishes
Max
__
Maximilian Weber
Frontend Developer
EWERK IT GmbH
Brühl 24, D-04109 Leipzig
P +49 341 42649 - 99
F +49 341 42649 - 98
m.weber@ewerk.com
www.ewerk.com
Geschäftsführer:
Dr. Erik Wende, Hendrik Schubert, Frank Richter
Registergericht: Leipzig HRB 9065
Zertifiziert nach:
ISO/IEC 27001:2013
DIN EN ISO 9001:2015
EWERK-Blog | LinkedIn | Xing | Twitter | Facebook
Auskünfte und Angebote per Mail sind freibleibend und unverbindlich.
Disclaimer Privacy:
Der Inhalt dieser E-Mail (einschließlich etwaiger beigefügter Dateien) ist vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung, Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt. Bitte informieren Sie in diesem Fall unverzüglich den Absender und löschen Sie die E-Mail (einschließlich etwaiger beigefügter Dateien) von Ihrem System. Vielen Dank.
The contents of this e-mail (including any attachments) are confidential and may be legally privileged. If you are not the intended recipient of this e-mail, any disclosure, copying, distribution or use of its contents is strictly prohibited, and you should please notify the sender immediately and then delete it (including any attachments) from your system. Thank you.
On 02.07.19, 10:53, "Ivan Kudryavtsev" <ku...@bw-sw.com> wrote:
Maybe, guys, you are speaking about our CloudStack-UI?
https://github.com/bwsw/cloudstack-ui
It's published, used by us and other companies in prod, but there is a
limited feature set. Currently, the community doesn't participate in the
development, so we develop it on our own mostly for the needs of our public
cloud. Contributors are welcome but not sure that small, medium-size users
have enough will to sponsor even one-two typescript engineers who will work
on it fulltime.
Best wishes, Ivan
вт, 2 июл. 2019 г. в 15:34, Sven Vogel <S....@ewerk.com>:
> Hi Erik,
>
> Sounds good. If there is a OpenSource alternative why they is not open so
> that community can work on it? ;) We would support it but if you don’t see
> it we can not help. We are a part of the community I think.
>
> Sven
>
>
>
>
> __
>
> Sven Vogel
> Teamlead Platform
>
> EWERK RZ GmbH
> Brühl 24, D-04109 Leipzig
> P +49 341 42649 - 11
> F +49 341 42649 - 18
> S.Vogel@ewerk.com
> www.ewerk.com
>
> Geschäftsführer:
> Dr. Erik Wende, Hendrik Schubert, Frank Richter
> Registergericht: Leipzig HRB 17023
>
> Zertifiziert nach:
> ISO/IEC 27001:2013
> DIN EN ISO 9001:2015
> DIN ISO/IEC 20000-1:2011
>
> EWERK-Blog<https://blog.ewerk.com/> | LinkedIn<
> https://www.linkedin.com/company/ewerk-group> | Xing<
> https://www.xing.com/company/ewerk> | Twitter<
> https://twitter.com/EWERK_Group> | Facebook<
> https://de-de.facebook.com/EWERK.IT/>
>
> Auskünfte und Angebote per Mail sind freibleibend und unverbindlich.
>
> Disclaimer Privacy:
> Der Inhalt dieser E-Mail (einschließlich etwaiger beigefügter Dateien) ist
> vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der
> bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung,
> Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt. Bitte
> informieren Sie in diesem Fall unverzüglich den Absender und löschen Sie
> die E-Mail (einschließlich etwaiger beigefügter Dateien) von Ihrem System.
> Vielen Dank.
>
> The contents of this e-mail (including any attachments) are confidential
> and may be legally privileged. If you are not the intended recipient of
> this e-mail, any disclosure, copying, distribution or use of its contents
> is strictly prohibited, and you should please notify the sender immediately
> and then delete it (including any attachments) from your system. Thank you.
>
> Am 01.07.2019 um 23:50 schrieb Erik Weber <terbolous@gmail.com<mailto:
> terbolous@gmail.com>>:
>
> I don’t recall their name, but there’s a company that works on an open
> sourced alternative ui.
>
> I’m not sure of the state, but last I looked it was promising. I’d be
> tempted to suggest a total switch if the other ui is close enough to
> feature alike.
>
> Erik
>
> man. 1. jul. 2019 kl. 16:47 skrev Maximilian Weber <M.Weber@ewerk.com
> <ma...@ewerk.com>>:
>
> We want to contribute our work on a new iconset and styles for the
> existing UI.
> The User Interface of Cloudstack has (relatively to web technology and
> design history of the past years) a pretty outdated state. Thus it’s
> necessary to scrutinize if several techniques and styles are still state of
> the art and replace them step by step.
> Now out target of UI works is to do optical UI improvements will perhaps
> help to increase the number of audience of Cloudstack community users as
> well and of cause improves the user experience for general.
> In addition UI enhancements we should refactoring css-code until it’s
> easier to maintain, read, organize, extend, simplify and automatize.
>
>
> Here you can find a list of general UI enhancements:
>
> * improve or unify icons and vectorize them as well
> * replace hard gradients and hard drop shadows with more flat designs
> (hard means very obvious visible, which was on no time best practice)
> * unify and modernize some hover effects and transitions, as well as
> colors and paddings etc.
>
> For the initial step we already made a screenshot of the improved
> Cloudstack UI frame (header and navigation).
> Open this screenshot to see it
> ––––––––– https://ibb.co/F3LT7jL –––––––––––––––
>
> We adjusted the menu icons, the sizes of the header and made the design
> more flat.
> And we will allocate the Illustrator file next to the new svg icons to
> provide the possibility of a file versioning via GIT and to make it
> possible for the community to do icon changes faster. In future we could
> advance this Illustrator file with all icons used on Cloudstack.
>
>
> Let’s face the css-code quality now. Writing css may appear more complex
> than expected for most developer, especially if the main css-file is over
> 10000 lines large.
> It’s almost impossible to prevent redundancies or outdated css-hacks and
> prefixes as well as importance, specificity and source order of css rules
> in such a huge file!
> Therefor we need a tool that automate most of this tasks. A technology
> stack of Node, Gulp and SCSS will do it here. Node package manager NPM can
> provide powerful packages that are executable in Gulp task and SCSS allows
> us to use features like variables and linters and organize our rules more
> professional.
>
> Here you can find a list of general refactoring enhancements
>
> * split 10000+ lines css-file into many modular scss files and
> organize them inside folders.
> * remove outdated css rules or rules that are no longer supported by
> almost all modern browser
> * create a possibility to minify final transpiled css file
> * add a linter-tool that warns the developer from doing bad practices
> * add a autofix-tool that unifies some parts css-code automatically
>
>
>
> We are happy to contribute this enhancements to the community.
> Max
>
>
>
>
>
>
>
>
>
>
>
> __
>
> Maximilian Weber
> Frontend Developer
>
> EWERK IT GmbH
> Brühl 24, D-04109 Leipzig
> <
> https://www.google.com/maps/search/Br%C3%BChl+24,+D-04109+Leipzig?entry=gmail&source=g
> >
> P +49 341 42649 - 99
> F +49 341 42649 - 98
> m.weber@ewerk.com<ma...@ewerk.com>
> www.ewerk.com<http://www.ewerk.com>
>
> Geschäftsführer:
> Dr. Erik Wende, Hendrik Schubert, Frank Richter
> Registergericht: Leipzig HRB 9065
>
> Zertifiziert nach:
> ISO/IEC 27001:2013
> DIN EN ISO 9001:2015
>
> EWERK-Blog<https://blog.ewerk.com/> | LinkedIn<
> https://www.linkedin.com/company/ewerk-group> | Xing<
> https://www.xing.com/company/ewerk> | Twitter<
> https://twitter.com/EWERK_Group> | Facebook<
> https://de-de.facebook.com/EWERK.IT/>
>
> Auskünfte und Angebote per Mail sind freibleibend und unverbindlich.
>
> Disclaimer Privacy:
> Der Inhalt dieser E-Mail (einschließlich etwaiger beigefügter Dateien) ist
> vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der
> bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung,
> Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt. Bitte
> informieren Sie in diesem Fall unverzüglich den Absender und löschen Sie
> die E-Mail (einschließlich etwaiger beigefügter Dateien) von Ihrem System.
> Vielen Dank.
>
> The contents of this e-mail (including any attachments) are confidential
> and may be legally privileged. If you are not the intended recipient of
> this e-mail, any disclosure, copying, distribution or use of its contents
> is strictly prohibited, and you should please notify the sender immediately
> and then delete it (including any attachments) from your system. Thank you.
>
>
--
With best regards, Ivan Kudryavtsev
Bitworks LLC
Cell RU: +7-923-414-1515
Cell USA: +1-201-257-1512
WWW: http://bitworks.software/ <http://bw-sw.com/>
Re: UI adjustments and refactoring css code
Posted by Ivan Kudryavtsev <ku...@bw-sw.com>.
Maybe, guys, you are speaking about our CloudStack-UI?
https://github.com/bwsw/cloudstack-ui
It's published, used by us and other companies in prod, but there is a
limited feature set. Currently, the community doesn't participate in the
development, so we develop it on our own mostly for the needs of our public
cloud. Contributors are welcome but not sure that small, medium-size users
have enough will to sponsor even one-two typescript engineers who will work
on it fulltime.
Best wishes, Ivan
вт, 2 июл. 2019 г. в 15:34, Sven Vogel <S....@ewerk.com>:
> Hi Erik,
>
> Sounds good. If there is a OpenSource alternative why they is not open so
> that community can work on it? ;) We would support it but if you don’t see
> it we can not help. We are a part of the community I think.
>
> Sven
>
>
>
>
> __
>
> Sven Vogel
> Teamlead Platform
>
> EWERK RZ GmbH
> Brühl 24, D-04109 Leipzig
> P +49 341 42649 - 11
> F +49 341 42649 - 18
> S.Vogel@ewerk.com
> www.ewerk.com
>
> Geschäftsführer:
> Dr. Erik Wende, Hendrik Schubert, Frank Richter
> Registergericht: Leipzig HRB 17023
>
> Zertifiziert nach:
> ISO/IEC 27001:2013
> DIN EN ISO 9001:2015
> DIN ISO/IEC 20000-1:2011
>
> EWERK-Blog<https://blog.ewerk.com/> | LinkedIn<
> https://www.linkedin.com/company/ewerk-group> | Xing<
> https://www.xing.com/company/ewerk> | Twitter<
> https://twitter.com/EWERK_Group> | Facebook<
> https://de-de.facebook.com/EWERK.IT/>
>
> Auskünfte und Angebote per Mail sind freibleibend und unverbindlich.
>
> Disclaimer Privacy:
> Der Inhalt dieser E-Mail (einschließlich etwaiger beigefügter Dateien) ist
> vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der
> bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung,
> Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt. Bitte
> informieren Sie in diesem Fall unverzüglich den Absender und löschen Sie
> die E-Mail (einschließlich etwaiger beigefügter Dateien) von Ihrem System.
> Vielen Dank.
>
> The contents of this e-mail (including any attachments) are confidential
> and may be legally privileged. If you are not the intended recipient of
> this e-mail, any disclosure, copying, distribution or use of its contents
> is strictly prohibited, and you should please notify the sender immediately
> and then delete it (including any attachments) from your system. Thank you.
>
> Am 01.07.2019 um 23:50 schrieb Erik Weber <terbolous@gmail.com<mailto:
> terbolous@gmail.com>>:
>
> I don’t recall their name, but there’s a company that works on an open
> sourced alternative ui.
>
> I’m not sure of the state, but last I looked it was promising. I’d be
> tempted to suggest a total switch if the other ui is close enough to
> feature alike.
>
> Erik
>
> man. 1. jul. 2019 kl. 16:47 skrev Maximilian Weber <M.Weber@ewerk.com
> <ma...@ewerk.com>>:
>
> We want to contribute our work on a new iconset and styles for the
> existing UI.
> The User Interface of Cloudstack has (relatively to web technology and
> design history of the past years) a pretty outdated state. Thus it’s
> necessary to scrutinize if several techniques and styles are still state of
> the art and replace them step by step.
> Now out target of UI works is to do optical UI improvements will perhaps
> help to increase the number of audience of Cloudstack community users as
> well and of cause improves the user experience for general.
> In addition UI enhancements we should refactoring css-code until it’s
> easier to maintain, read, organize, extend, simplify and automatize.
>
>
> Here you can find a list of general UI enhancements:
>
> * improve or unify icons and vectorize them as well
> * replace hard gradients and hard drop shadows with more flat designs
> (hard means very obvious visible, which was on no time best practice)
> * unify and modernize some hover effects and transitions, as well as
> colors and paddings etc.
>
> For the initial step we already made a screenshot of the improved
> Cloudstack UI frame (header and navigation).
> Open this screenshot to see it
> ––––––––– https://ibb.co/F3LT7jL –––––––––––––––
>
> We adjusted the menu icons, the sizes of the header and made the design
> more flat.
> And we will allocate the Illustrator file next to the new svg icons to
> provide the possibility of a file versioning via GIT and to make it
> possible for the community to do icon changes faster. In future we could
> advance this Illustrator file with all icons used on Cloudstack.
>
>
> Let’s face the css-code quality now. Writing css may appear more complex
> than expected for most developer, especially if the main css-file is over
> 10000 lines large.
> It’s almost impossible to prevent redundancies or outdated css-hacks and
> prefixes as well as importance, specificity and source order of css rules
> in such a huge file!
> Therefor we need a tool that automate most of this tasks. A technology
> stack of Node, Gulp and SCSS will do it here. Node package manager NPM can
> provide powerful packages that are executable in Gulp task and SCSS allows
> us to use features like variables and linters and organize our rules more
> professional.
>
> Here you can find a list of general refactoring enhancements
>
> * split 10000+ lines css-file into many modular scss files and
> organize them inside folders.
> * remove outdated css rules or rules that are no longer supported by
> almost all modern browser
> * create a possibility to minify final transpiled css file
> * add a linter-tool that warns the developer from doing bad practices
> * add a autofix-tool that unifies some parts css-code automatically
>
>
>
> We are happy to contribute this enhancements to the community.
> Max
>
>
>
>
>
>
>
>
>
>
>
> __
>
> Maximilian Weber
> Frontend Developer
>
> EWERK IT GmbH
> Brühl 24, D-04109 Leipzig
> <
> https://www.google.com/maps/search/Br%C3%BChl+24,+D-04109+Leipzig?entry=gmail&source=g
> >
> P +49 341 42649 - 99
> F +49 341 42649 - 98
> m.weber@ewerk.com<ma...@ewerk.com>
> www.ewerk.com<http://www.ewerk.com>
>
> Geschäftsführer:
> Dr. Erik Wende, Hendrik Schubert, Frank Richter
> Registergericht: Leipzig HRB 9065
>
> Zertifiziert nach:
> ISO/IEC 27001:2013
> DIN EN ISO 9001:2015
>
> EWERK-Blog<https://blog.ewerk.com/> | LinkedIn<
> https://www.linkedin.com/company/ewerk-group> | Xing<
> https://www.xing.com/company/ewerk> | Twitter<
> https://twitter.com/EWERK_Group> | Facebook<
> https://de-de.facebook.com/EWERK.IT/>
>
> Auskünfte und Angebote per Mail sind freibleibend und unverbindlich.
>
> Disclaimer Privacy:
> Der Inhalt dieser E-Mail (einschließlich etwaiger beigefügter Dateien) ist
> vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der
> bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung,
> Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt. Bitte
> informieren Sie in diesem Fall unverzüglich den Absender und löschen Sie
> die E-Mail (einschließlich etwaiger beigefügter Dateien) von Ihrem System.
> Vielen Dank.
>
> The contents of this e-mail (including any attachments) are confidential
> and may be legally privileged. If you are not the intended recipient of
> this e-mail, any disclosure, copying, distribution or use of its contents
> is strictly prohibited, and you should please notify the sender immediately
> and then delete it (including any attachments) from your system. Thank you.
>
>
--
With best regards, Ivan Kudryavtsev
Bitworks LLC
Cell RU: +7-923-414-1515
Cell USA: +1-201-257-1512
WWW: http://bitworks.software/ <http://bw-sw.com/>
Re: UI adjustments and refactoring css code
Posted by Sven Vogel <S....@ewerk.com>.
Hi Erik,
Sounds good. If there is a OpenSource alternative why they is not open so that community can work on it? ;) We would support it but if you don’t see it we can not help. We are a part of the community I think.
Sven
__
Sven Vogel
Teamlead Platform
EWERK RZ GmbH
Brühl 24, D-04109 Leipzig
P +49 341 42649 - 11
F +49 341 42649 - 18
S.Vogel@ewerk.com
www.ewerk.com
Geschäftsführer:
Dr. Erik Wende, Hendrik Schubert, Frank Richter
Registergericht: Leipzig HRB 17023
Zertifiziert nach:
ISO/IEC 27001:2013
DIN EN ISO 9001:2015
DIN ISO/IEC 20000-1:2011
EWERK-Blog<https://blog.ewerk.com/> | LinkedIn<https://www.linkedin.com/company/ewerk-group> | Xing<https://www.xing.com/company/ewerk> | Twitter<https://twitter.com/EWERK_Group> | Facebook<https://de-de.facebook.com/EWERK.IT/>
Auskünfte und Angebote per Mail sind freibleibend und unverbindlich.
Disclaimer Privacy:
Der Inhalt dieser E-Mail (einschließlich etwaiger beigefügter Dateien) ist vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung, Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt. Bitte informieren Sie in diesem Fall unverzüglich den Absender und löschen Sie die E-Mail (einschließlich etwaiger beigefügter Dateien) von Ihrem System. Vielen Dank.
The contents of this e-mail (including any attachments) are confidential and may be legally privileged. If you are not the intended recipient of this e-mail, any disclosure, copying, distribution or use of its contents is strictly prohibited, and you should please notify the sender immediately and then delete it (including any attachments) from your system. Thank you.
Am 01.07.2019 um 23:50 schrieb Erik Weber <te...@gmail.com>>:
I don’t recall their name, but there’s a company that works on an open
sourced alternative ui.
I’m not sure of the state, but last I looked it was promising. I’d be
tempted to suggest a total switch if the other ui is close enough to
feature alike.
Erik
man. 1. jul. 2019 kl. 16:47 skrev Maximilian Weber <M....@ewerk.com>>:
We want to contribute our work on a new iconset and styles for the
existing UI.
The User Interface of Cloudstack has (relatively to web technology and
design history of the past years) a pretty outdated state. Thus it’s
necessary to scrutinize if several techniques and styles are still state of
the art and replace them step by step.
Now out target of UI works is to do optical UI improvements will perhaps
help to increase the number of audience of Cloudstack community users as
well and of cause improves the user experience for general.
In addition UI enhancements we should refactoring css-code until it’s
easier to maintain, read, organize, extend, simplify and automatize.
Here you can find a list of general UI enhancements:
* improve or unify icons and vectorize them as well
* replace hard gradients and hard drop shadows with more flat designs
(hard means very obvious visible, which was on no time best practice)
* unify and modernize some hover effects and transitions, as well as
colors and paddings etc.
For the initial step we already made a screenshot of the improved
Cloudstack UI frame (header and navigation).
Open this screenshot to see it
––––––––– https://ibb.co/F3LT7jL –––––––––––––––
We adjusted the menu icons, the sizes of the header and made the design
more flat.
And we will allocate the Illustrator file next to the new svg icons to
provide the possibility of a file versioning via GIT and to make it
possible for the community to do icon changes faster. In future we could
advance this Illustrator file with all icons used on Cloudstack.
Let’s face the css-code quality now. Writing css may appear more complex
than expected for most developer, especially if the main css-file is over
10000 lines large.
It’s almost impossible to prevent redundancies or outdated css-hacks and
prefixes as well as importance, specificity and source order of css rules
in such a huge file!
Therefor we need a tool that automate most of this tasks. A technology
stack of Node, Gulp and SCSS will do it here. Node package manager NPM can
provide powerful packages that are executable in Gulp task and SCSS allows
us to use features like variables and linters and organize our rules more
professional.
Here you can find a list of general refactoring enhancements
* split 10000+ lines css-file into many modular scss files and
organize them inside folders.
* remove outdated css rules or rules that are no longer supported by
almost all modern browser
* create a possibility to minify final transpiled css file
* add a linter-tool that warns the developer from doing bad practices
* add a autofix-tool that unifies some parts css-code automatically
We are happy to contribute this enhancements to the community.
Max
__
Maximilian Weber
Frontend Developer
EWERK IT GmbH
Brühl 24, D-04109 Leipzig
<https://www.google.com/maps/search/Br%C3%BChl+24,+D-04109+Leipzig?entry=gmail&source=g>
P +49 341 42649 - 99
F +49 341 42649 - 98
m.weber@ewerk.com<ma...@ewerk.com>
www.ewerk.com<http://www.ewerk.com>
Geschäftsführer:
Dr. Erik Wende, Hendrik Schubert, Frank Richter
Registergericht: Leipzig HRB 9065
Zertifiziert nach:
ISO/IEC 27001:2013
DIN EN ISO 9001:2015
EWERK-Blog<https://blog.ewerk.com/> | LinkedIn<
https://www.linkedin.com/company/ewerk-group> | Xing<
https://www.xing.com/company/ewerk> | Twitter<
https://twitter.com/EWERK_Group> | Facebook<
https://de-de.facebook.com/EWERK.IT/>
Auskünfte und Angebote per Mail sind freibleibend und unverbindlich.
Disclaimer Privacy:
Der Inhalt dieser E-Mail (einschließlich etwaiger beigefügter Dateien) ist
vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der
bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung,
Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt. Bitte
informieren Sie in diesem Fall unverzüglich den Absender und löschen Sie
die E-Mail (einschließlich etwaiger beigefügter Dateien) von Ihrem System.
Vielen Dank.
The contents of this e-mail (including any attachments) are confidential
and may be legally privileged. If you are not the intended recipient of
this e-mail, any disclosure, copying, distribution or use of its contents
is strictly prohibited, and you should please notify the sender immediately
and then delete it (including any attachments) from your system. Thank you.
Re: UI adjustments and refactoring css code
Posted by Erik Weber <te...@gmail.com>.
I don’t recall their name, but there’s a company that works on an open
sourced alternative ui.
I’m not sure of the state, but last I looked it was promising. I’d be
tempted to suggest a total switch if the other ui is close enough to
feature alike.
Erik
man. 1. jul. 2019 kl. 16:47 skrev Maximilian Weber <M....@ewerk.com>:
> We want to contribute our work on a new iconset and styles for the
> existing UI.
> The User Interface of Cloudstack has (relatively to web technology and
> design history of the past years) a pretty outdated state. Thus it’s
> necessary to scrutinize if several techniques and styles are still state of
> the art and replace them step by step.
> Now out target of UI works is to do optical UI improvements will perhaps
> help to increase the number of audience of Cloudstack community users as
> well and of cause improves the user experience for general.
> In addition UI enhancements we should refactoring css-code until it’s
> easier to maintain, read, organize, extend, simplify and automatize.
>
>
> Here you can find a list of general UI enhancements:
>
> * improve or unify icons and vectorize them as well
> * replace hard gradients and hard drop shadows with more flat designs
> (hard means very obvious visible, which was on no time best practice)
> * unify and modernize some hover effects and transitions, as well as
> colors and paddings etc.
>
> For the initial step we already made a screenshot of the improved
> Cloudstack UI frame (header and navigation).
> Open this screenshot to see it
> ––––––––– https://ibb.co/F3LT7jL –––––––––––––––
>
> We adjusted the menu icons, the sizes of the header and made the design
> more flat.
> And we will allocate the Illustrator file next to the new svg icons to
> provide the possibility of a file versioning via GIT and to make it
> possible for the community to do icon changes faster. In future we could
> advance this Illustrator file with all icons used on Cloudstack.
>
>
> Let’s face the css-code quality now. Writing css may appear more complex
> than expected for most developer, especially if the main css-file is over
> 10000 lines large.
> It’s almost impossible to prevent redundancies or outdated css-hacks and
> prefixes as well as importance, specificity and source order of css rules
> in such a huge file!
> Therefor we need a tool that automate most of this tasks. A technology
> stack of Node, Gulp and SCSS will do it here. Node package manager NPM can
> provide powerful packages that are executable in Gulp task and SCSS allows
> us to use features like variables and linters and organize our rules more
> professional.
>
> Here you can find a list of general refactoring enhancements
>
> * split 10000+ lines css-file into many modular scss files and
> organize them inside folders.
> * remove outdated css rules or rules that are no longer supported by
> almost all modern browser
> * create a possibility to minify final transpiled css file
> * add a linter-tool that warns the developer from doing bad practices
> * add a autofix-tool that unifies some parts css-code automatically
>
>
>
> We are happy to contribute this enhancements to the community.
> Max
>
>
>
>
>
>
>
>
>
>
>
> __
>
> Maximilian Weber
> Frontend Developer
>
> EWERK IT GmbH
> Brühl 24, D-04109 Leipzig
> <https://www.google.com/maps/search/Br%C3%BChl+24,+D-04109+Leipzig?entry=gmail&source=g>
> P +49 341 42649 - 99
> F +49 341 42649 - 98
> m.weber@ewerk.com
> www.ewerk.com
>
> Geschäftsführer:
> Dr. Erik Wende, Hendrik Schubert, Frank Richter
> Registergericht: Leipzig HRB 9065
>
> Zertifiziert nach:
> ISO/IEC 27001:2013
> DIN EN ISO 9001:2015
>
> EWERK-Blog<https://blog.ewerk.com/> | LinkedIn<
> https://www.linkedin.com/company/ewerk-group> | Xing<
> https://www.xing.com/company/ewerk> | Twitter<
> https://twitter.com/EWERK_Group> | Facebook<
> https://de-de.facebook.com/EWERK.IT/>
>
> Auskünfte und Angebote per Mail sind freibleibend und unverbindlich.
>
> Disclaimer Privacy:
> Der Inhalt dieser E-Mail (einschließlich etwaiger beigefügter Dateien) ist
> vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der
> bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung,
> Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt. Bitte
> informieren Sie in diesem Fall unverzüglich den Absender und löschen Sie
> die E-Mail (einschließlich etwaiger beigefügter Dateien) von Ihrem System.
> Vielen Dank.
>
> The contents of this e-mail (including any attachments) are confidential
> and may be legally privileged. If you are not the intended recipient of
> this e-mail, any disclosure, copying, distribution or use of its contents
> is strictly prohibited, and you should please notify the sender immediately
> and then delete it (including any attachments) from your system. Thank you.
>