Re: [DISCUSS] UI: New look and feel
On Fri, Sep 27, 2013 at 5:44 PM, SuichII, Christopher chris.su...@netapp.com wrote: Shiva Sebastien - What impact would this angular.js project have on UI plugins? It would definitely make it easy and offer cleaner code. I'll try to write an overview soon. In a brief way : 1. You don't have to write any API calls. They'll be taken care by the resources modules[0]. 2. You don't have to do any DOM manipulation. Angular's directives[1] that we write will take care of them. 3. There's no 'listView' or 'detailView'. Each plugin can have its own template(s)[2]. These templates must be very small if directives are used effectively. 'confirm', 'vm-state-label', 'ng-repeat' are some of the directives you can see in the template given at the end for example usage. Every tab that you see on the side nav bar in this UI is a plugin. So you can checkout any plugin to start with. Demo is running at http://students.iitmandi.ac.in:2/ . It is running on DevCloud. Feel free to play around. Username and password are the default ones: admin-password. As far as themes are concerned, I used bootstrap. So there are lots of bootstrap themes out there which can be easily added to this UI without worrying about breaking things. I am yet to add unit tests, add the functionalities to bring at par with the current UI and clean up the designs. Maybe we could have both the UIs for some time and then see how things go. If anybody is interested in joining the further development, please let me know :) [0] https://github.com/shivateja/cloudstack-ui/tree/angular-rawapi/static/js/common/resources [1] https://github.com/shivateja/cloudstack-ui/tree/angular-rawapi/static/js/common/directives [2] This is an example template : https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.tpl.html Thanks, Shiva Teja
RE: [DISCUSS] UI: New look and feel
Hi, Sorry about that. Our ISP seems to be down. I am not sure if it will be back soon. Shiva Teja On Sep 30, 2013 10:04 AM, Santhosh Edukulla santhosh.eduku...@citrix.com wrote: Hi Shiva, Iam trying to access http://students.iitmandi.ac.in:2, but couldnt. It seems there was a name resolution issue. Iam accessing it from my dev box and using dns server 10.103.128.16 to resolve the uri in your link, which is internal to citrix. May be you can provide the ip to check the link directly if it is ok? BTW, I appreciate your effort, I am ok to join the development effort. Though iam not much of a UI guy, one of our product in my earlier organization used angular js and moved away from their earlier js frameworks, They had very good views on this, it will be a good learning for me to see. Thanks! Santhosh From: Shiva Teja [shivate...@gmail.com] Sent: Sunday, September 29, 2013 2:33 PM To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel On Fri, Sep 27, 2013 at 5:44 PM, SuichII, Christopher chris.su...@netapp.com wrote: Shiva Sebastien - What impact would this angular.js project have on UI plugins? It would definitely make it easy and offer cleaner code. I'll try to write an overview soon. In a brief way : 1. You don't have to write any API calls. They'll be taken care by the resources modules[0]. 2. You don't have to do any DOM manipulation. Angular's directives[1] that we write will take care of them. 3. There's no 'listView' or 'detailView'. Each plugin can have its own template(s)[2]. These templates must be very small if directives are used effectively. 'confirm', 'vm-state-label', 'ng-repeat' are some of the directives you can see in the template given at the end for example usage. Every tab that you see on the side nav bar in this UI is a plugin. So you can checkout any plugin to start with. Demo is running at http://students.iitmandi.ac.in:2/ . It is running on DevCloud. Feel free to play around. Username and password are the default ones: admin-password. As far as themes are concerned, I used bootstrap. So there are lots of bootstrap themes out there which can be easily added to this UI without worrying about breaking things. I am yet to add unit tests, add the functionalities to bring at par with the current UI and clean up the designs. Maybe we could have both the UIs for some time and then see how things go. If anybody is interested in joining the further development, please let me know :) [0] https://github.com/shivateja/cloudstack-ui/tree/angular-rawapi/static/js/common/resources [1] https://github.com/shivateja/cloudstack-ui/tree/angular-rawapi/static/js/common/directives [2] This is an example template : https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.tpl.html Thanks, Shiva Teja
Re: [DISCUSS] UI: New look and feel
On Sep 27, 2013, at 6:52 AM, Shiva Teja shivate...@gmail.com wrote: On Fri, Sep 27, 2013 at 9:28 AM, Ian Duffy i...@ianduffy.ie wrote: I think so implementation of AngularJS like the way Shiva did it for his GSoC project would be good. I'm trying to setup a demo for my project. This should give an idea about the code. https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/common/resources/virtualmachines.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.tpl.html Thanks, Shiva Teja Thanks Shiva, I was going to mention it. Shiva has worked on an angular.js app for a cloudstack frontend. All the code has been contributed in tools/ngui This could easily be used with Brian new CSS and it would clean up all the javascript. -Sebastien
Re: [DISCUSS] UI: New look and feel
Brian - The new style looks great, but I'd like to repeat someone else's question: Are we getting rid of the icons on the nav bar? As a plugin dev, it would be really nice to keep our company logo by our UI plugin. Shiva Sebastien - What impact would this angular.js project have on UI plugins? -- Chris Suich chris.su...@netapp.com NetApp Software Engineer Data Center Platforms – Cloud Solutions Citrix, Cisco Red Hat On Sep 27, 2013, at 2:44 AM, sebgoa run...@gmail.com wrote: On Sep 27, 2013, at 6:52 AM, Shiva Teja shivate...@gmail.com wrote: On Fri, Sep 27, 2013 at 9:28 AM, Ian Duffy i...@ianduffy.ie wrote: I think so implementation of AngularJS like the way Shiva did it for his GSoC project would be good. I'm trying to setup a demo for my project. This should give an idea about the code. https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/common/resources/virtualmachines.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.tpl.html Thanks, Shiva Teja Thanks Shiva, I was going to mention it. Shiva has worked on an angular.js app for a cloudstack frontend. All the code has been contributed in tools/ngui This could easily be used with Brian new CSS and it would clean up all the javascript. -Sebastien
Re: [DISCUSS] UI: New look and feel
We should make a CSS skinning bin/repo so people can easily share their skins. This could even just be a Wiki section. I have been playing with a dark(Greys) themed flatter skin that is designed for comfortable 1920 x 1080 usage. I think us having a fairly easily skin-able UI will attract a lot more people. I always enjoy seeing these re-skin projects. I am most excited to setup and use Shiva's angular.js project with the re-skins. -Kelcey - Original Message - From: Christopher SuichII chris.su...@netapp.com To: dev@cloudstack.apache.org dev@cloudstack.apache.org Sent: Friday, September 27, 2013 5:14:10 AM Subject: Re: [DISCUSS] UI: New look and feel Brian - The new style looks great, but I'd like to repeat someone else's question: Are we getting rid of the icons on the nav bar? As a plugin dev, it would be really nice to keep our company logo by our UI plugin. Shiva Sebastien - What impact would this angular.js project have on UI plugins? -- Chris Suich chris.su...@netapp.com NetApp Software Engineer Data Center Platforms – Cloud Solutions Citrix, Cisco Red Hat On Sep 27, 2013, at 2:44 AM, sebgoa run...@gmail.com wrote: On Sep 27, 2013, at 6:52 AM, Shiva Teja shivate...@gmail.com wrote: On Fri, Sep 27, 2013 at 9:28 AM, Ian Duffy i...@ianduffy.ie wrote: I think so implementation of AngularJS like the way Shiva did it for his GSoC project would be good. I'm trying to setup a demo for my project. This should give an idea about the code. https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/common/resources/virtualmachines.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.tpl.html Thanks, Shiva Teja Thanks Shiva, I was going to mention it. Shiva has worked on an angular.js app for a cloudstack frontend. All the code has been contributed in tools/ngui This could easily be used with Brian new CSS and it would clean up all the javascript. -Sebastien
RE: [DISCUSS] UI: New look and feel
That's nice! Do you need help to setup a demo, or coding? Just finished read Mastering Web Application Development with AngularJS , so trying to mastering something:) -Original Message- From: Shiva Teja [mailto:shivate...@gmail.com] Sent: Thursday, September 26, 2013 9:53 PM To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel On Fri, Sep 27, 2013 at 9:28 AM, Ian Duffy i...@ianduffy.ie wrote: I think so implementation of AngularJS like the way Shiva did it for his GSoC project would be good. I'm trying to setup a demo for my project. This should give an idea about the code. https://github.com/shivateja/cloudstack-ui/blob/angular- rawapi/static/js/common/resources/virtualmachines.js https://github.com/shivateja/cloudstack-ui/blob/angular- rawapi/static/js/app/instances/instances.js https://github.com/shivateja/cloudstack-ui/blob/angular- rawapi/static/js/app/instances/instances.tpl.html Thanks, Shiva Teja
Re: [DISCUSS] UI: New look and feel
On Sep 27, 2013, at 2:14 PM, SuichII, Christopher chris.su...@netapp.com wrote: Brian - The new style looks great, but I'd like to repeat someone else's question: Are we getting rid of the icons on the nav bar? As a plugin dev, it would be really nice to keep our company logo by our UI plugin. Shiva Sebastien - What impact would this angular.js project have on UI plugins? honestly no idea, -- Chris Suich chris.su...@netapp.com NetApp Software Engineer Data Center Platforms – Cloud Solutions Citrix, Cisco Red Hat On Sep 27, 2013, at 2:44 AM, sebgoa run...@gmail.com wrote: On Sep 27, 2013, at 6:52 AM, Shiva Teja shivate...@gmail.com wrote: On Fri, Sep 27, 2013 at 9:28 AM, Ian Duffy i...@ianduffy.ie wrote: I think so implementation of AngularJS like the way Shiva did it for his GSoC project would be good. I'm trying to setup a demo for my project. This should give an idea about the code. https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/common/resources/virtualmachines.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.tpl.html Thanks, Shiva Teja Thanks Shiva, I was going to mention it. Shiva has worked on an angular.js app for a cloudstack frontend. All the code has been contributed in tools/ngui This could easily be used with Brian new CSS and it would clean up all the javascript. -Sebastien
RE: [DISCUSS] UI: New look and feel
Yeah, I am definitely planning on JS cleanup, though not for 4.3. That will be a much more complex project, and needs to be a more iterative refactor since we have innumerable lines of complex business logic to take account for in there. I've been learning about AngularJS as well, and it would definitely solve a lot of problems in the architecture. I wish a library like that existed 2 1/2 years ago when I started writing the UI :) For JS cleanup, I'm thinking of it in this order right now: 1.) Add unit tests for existing widget functionality 2.) Add full documentation for UI 'API' (i.e., all options supported for widget). This is to cater to both plugin writers and CloudStack UI devs 3.) Start refactoring widget code (in /ui/scripts/ui/widgets). Ideally I would like to use AngularJS for this, but it depends on how well it will integrate with our existing jQuery-based interface. It seems flexible enough, though I'll need to get much more adept at the library than I am right now. 4.) Refactor implementation code in /ui/scripts. This wouldn't be migrated to AngluarJS nor be rewritten since there is simply too much code, but a good start would be reducing redundancy by centralizing common API calls into reusable libraries, etc. -Brian From: Ian Duffy [i...@ianduffy.ie] Sent: Thursday, September 26, 2013 8:58 PM To: CloudStack Dev Cc: Sonny Chhen; Animesh Chaturvedi; Jessica Wang Subject: Re: [DISCUSS] UI: New look and feel Looks good. Moving away from design and more into front-end functionality. Is there any talks about cleaning up the javascript behind the UI? I recall it being messy and hard to follow from what I recall of looking at it. The idea single page app with no URL defining a view and a broken browser back button is quite annoying. I think so implementation of AngularJS like the way Shiva did it for his GSoC project would be good. On 27 September 2013 02:09, Chip Childers chip.child...@sungard.com wrote: Looks great Brian! One request actually. I'm working on a proposed cloudstack.apache.org site redesign right now, and I'd actually love to get the relevant CSS you used for the header area (faded blue). It might be nice to have some relationship between the cs.a.o branding and the product itself. ;-) (watch the marketing list for my site redesign proposal shortly) On Thu, Sep 26, 2013 at 10:11:07PM +, Brian Federle wrote: Hi all, In addition to the CSS code cleanup I'm working on, I am planning a 'reskin' of the current UI to give a better user experience and look and feel. This will utilize SASS and a grid system as I have discussed in the previous thread. I created a task in JIRA and wiki functional spec, which has screenshots of what I've done so far and what I plan to do: https://cwiki.apache.org/confluence/display/CLOUDSTACK/Update+UI+visual+appearance https://issues.apache.org/jira/browse/CLOUDSTACK-4748 You can also checkout the ui-restyle branch on git, if you are able to manually compile the cloudstack.scss file via SASS (that will be automated in the future). I can send over instructions on how to compile SASS manually; it's pretty easy to setup. Let me know what you think so far :) I'll of course up and post more screenshots as I get more done. This reskin is only changing the CSS mainly, with minimal changes to actual usage or JS code, so it is basically a drop-in replacement for the current styling. I'm hoping to get this in by 4.3, so please give me feedback on anything from the current UI you don't like or want changed, and I can see about improving it. Thanks! Brian
RE: [DISCUSS] UI: New look and feel
Right now the plan was to remove the icons, though if people think that they are important to usability then we can definitely put them back in. I'm thinking flat icons though, which would look better with the new design. I'll play around with it and maybe post a screenshot with icons included. The action icons on the detail pages will still be there, and of course if plugins supply their own icons they will be displayed. -Brian From: SuichII, Christopher [chris.su...@netapp.com] Sent: Friday, September 27, 2013 5:14 AM To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel Brian - The new style looks great, but I'd like to repeat someone else's question: Are we getting rid of the icons on the nav bar? As a plugin dev, it would be really nice to keep our company logo by our UI plugin. Shiva Sebastien - What impact would this angular.js project have on UI plugins? -- Chris Suich chris.su...@netapp.com NetApp Software Engineer Data Center Platforms – Cloud Solutions Citrix, Cisco Red Hat On Sep 27, 2013, at 2:44 AM, sebgoa run...@gmail.com wrote: On Sep 27, 2013, at 6:52 AM, Shiva Teja shivate...@gmail.com wrote: On Fri, Sep 27, 2013 at 9:28 AM, Ian Duffy i...@ianduffy.ie wrote: I think so implementation of AngularJS like the way Shiva did it for his GSoC project would be good. I'm trying to setup a demo for my project. This should give an idea about the code. https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/common/resources/virtualmachines.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.tpl.html Thanks, Shiva Teja Thanks Shiva, I was going to mention it. Shiva has worked on an angular.js app for a cloudstack frontend. All the code has been contributed in tools/ngui This could easily be used with Brian new CSS and it would clean up all the javascript. -Sebastien
Re: [DISCUSS] UI: New look and feel
If you could use font icons, that would be really nice.. (MIT License) http://fortawesome.github.io/Font-Awesome/icons/ (Apache License) http://getbootstrap.com/components/#glyphicons On Fri, Sep 27, 2013 at 1:53 PM, Brian Federle brian.fede...@citrix.comwrote: Right now the plan was to remove the icons, though if people think that they are important to usability then we can definitely put them back in. I'm thinking flat icons though, which would look better with the new design. I'll play around with it and maybe post a screenshot with icons included. The action icons on the detail pages will still be there, and of course if plugins supply their own icons they will be displayed. -Brian From: SuichII, Christopher [chris.su...@netapp.com] Sent: Friday, September 27, 2013 5:14 AM To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel Brian - The new style looks great, but I'd like to repeat someone else's question: Are we getting rid of the icons on the nav bar? As a plugin dev, it would be really nice to keep our company logo by our UI plugin. Shiva Sebastien - What impact would this angular.js project have on UI plugins? -- Chris Suich chris.su...@netapp.com NetApp Software Engineer Data Center Platforms – Cloud Solutions Citrix, Cisco Red Hat On Sep 27, 2013, at 2:44 AM, sebgoa run...@gmail.com wrote: On Sep 27, 2013, at 6:52 AM, Shiva Teja shivate...@gmail.com wrote: On Fri, Sep 27, 2013 at 9:28 AM, Ian Duffy i...@ianduffy.ie wrote: I think so implementation of AngularJS like the way Shiva did it for his GSoC project would be good. I'm trying to setup a demo for my project. This should give an idea about the code. https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/common/resources/virtualmachines.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.tpl.html Thanks, Shiva Teja Thanks Shiva, I was going to mention it. Shiva has worked on an angular.js app for a cloudstack frontend. All the code has been contributed in tools/ngui This could easily be used with Brian new CSS and it would clean up all the javascript. -Sebastien
RE: [DISCUSS] UI: New look and feel
I can definitely look into that...and it wouldn't require Photoshopping a large sprite sheet, so much easier for maintenance :) -Brian From: Tracy Phillips [tracp...@mantoso.com] Sent: Friday, September 27, 2013 11:01 AM To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel If you could use font icons, that would be really nice.. (MIT License) http://fortawesome.github.io/Font-Awesome/icons/ (Apache License) http://getbootstrap.com/components/#glyphicons On Fri, Sep 27, 2013 at 1:53 PM, Brian Federle brian.fede...@citrix.comwrote: Right now the plan was to remove the icons, though if people think that they are important to usability then we can definitely put them back in. I'm thinking flat icons though, which would look better with the new design. I'll play around with it and maybe post a screenshot with icons included. The action icons on the detail pages will still be there, and of course if plugins supply their own icons they will be displayed. -Brian From: SuichII, Christopher [chris.su...@netapp.com] Sent: Friday, September 27, 2013 5:14 AM To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel Brian - The new style looks great, but I'd like to repeat someone else's question: Are we getting rid of the icons on the nav bar? As a plugin dev, it would be really nice to keep our company logo by our UI plugin. Shiva Sebastien - What impact would this angular.js project have on UI plugins? -- Chris Suich chris.su...@netapp.com NetApp Software Engineer Data Center Platforms – Cloud Solutions Citrix, Cisco Red Hat On Sep 27, 2013, at 2:44 AM, sebgoa run...@gmail.com wrote: On Sep 27, 2013, at 6:52 AM, Shiva Teja shivate...@gmail.com wrote: On Fri, Sep 27, 2013 at 9:28 AM, Ian Duffy i...@ianduffy.ie wrote: I think so implementation of AngularJS like the way Shiva did it for his GSoC project would be good. I'm trying to setup a demo for my project. This should give an idea about the code. https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/common/resources/virtualmachines.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.tpl.html Thanks, Shiva Teja Thanks Shiva, I was going to mention it. Shiva has worked on an angular.js app for a cloudstack frontend. All the code has been contributed in tools/ngui This could easily be used with Brian new CSS and it would clean up all the javascript. -Sebastien
RE: [DISCUSS] UI: New look and feel
Hey Chip, the BG is basically a layered background with a gradient and overlay pattern on top. I can send along the PNGs I used for those and a snippet of CSS, and you can apply them to the site. I'm also using Noto Sans for the font (ASF 2.0 licensed), if you want to use that as well. What I can do is either attach the bitmap assets I'm using (BG images, logos, font, etc.) to the wiki page, so anyone can grab them there for use in other materials, or else they are all in the ui-restyle git branch, under /ui/stylesheets/csui/ -Brian From: Chip Childers [chip.child...@sungard.com] Sent: Thursday, September 26, 2013 6:09 PM To: dev@cloudstack.apache.org Cc: Sonny Chhen; Animesh Chaturvedi; Jessica Wang Subject: Re: [DISCUSS] UI: New look and feel Looks great Brian! One request actually. I'm working on a proposed cloudstack.apache.org site redesign right now, and I'd actually love to get the relevant CSS you used for the header area (faded blue). It might be nice to have some relationship between the cs.a.o branding and the product itself. ;-) (watch the marketing list for my site redesign proposal shortly) On Thu, Sep 26, 2013 at 10:11:07PM +, Brian Federle wrote: Hi all, In addition to the CSS code cleanup I'm working on, I am planning a 'reskin' of the current UI to give a better user experience and look and feel. This will utilize SASS and a grid system as I have discussed in the previous thread. I created a task in JIRA and wiki functional spec, which has screenshots of what I've done so far and what I plan to do: https://cwiki.apache.org/confluence/display/CLOUDSTACK/Update+UI+visual+appearance https://issues.apache.org/jira/browse/CLOUDSTACK-4748 You can also checkout the ui-restyle branch on git, if you are able to manually compile the cloudstack.scss file via SASS (that will be automated in the future). I can send over instructions on how to compile SASS manually; it's pretty easy to setup. Let me know what you think so far :) I'll of course up and post more screenshots as I get more done. This reskin is only changing the CSS mainly, with minimal changes to actual usage or JS code, so it is basically a drop-in replacement for the current styling. I'm hoping to get this in by 4.3, so please give me feedback on anything from the current UI you don't like or want changed, and I can see about improving it. Thanks! Brian
RE: [DISCUSS] UI: New look and feel
Is there anybody like Win8 style UI: especially for the icons: http://aozora.github.io/bootmetro/docs/docs-advanced-components.html -Original Message- From: Brian Federle [mailto:brian.fede...@citrix.com] Sent: Friday, September 27, 2013 10:53 AM To: dev@cloudstack.apache.org; Sonny Chhen Subject: RE: [DISCUSS] UI: New look and feel Right now the plan was to remove the icons, though if people think that they are important to usability then we can definitely put them back in. I'm thinking flat icons though, which would look better with the new design. I'll play around with it and maybe post a screenshot with icons included. The action icons on the detail pages will still be there, and of course if plugins supply their own icons they will be displayed. -Brian From: SuichII, Christopher [chris.su...@netapp.com] Sent: Friday, September 27, 2013 5:14 AM To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel Brian - The new style looks great, but I'd like to repeat someone else's question: Are we getting rid of the icons on the nav bar? As a plugin dev, it would be really nice to keep our company logo by our UI plugin. Shiva Sebastien - What impact would this angular.js project have on UI plugins? -- Chris Suich chris.su...@netapp.com NetApp Software Engineer Data Center Platforms - Cloud Solutions Citrix, Cisco Red Hat On Sep 27, 2013, at 2:44 AM, sebgoa run...@gmail.com wrote: On Sep 27, 2013, at 6:52 AM, Shiva Teja shivate...@gmail.com wrote: On Fri, Sep 27, 2013 at 9:28 AM, Ian Duffy i...@ianduffy.ie wrote: I think so implementation of AngularJS like the way Shiva did it for his GSoC project would be good. I'm trying to setup a demo for my project. This should give an idea about the code. https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static /js/common/resources/virtualmachines.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static /js/app/instances/instances.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static /js/app/instances/instances.tpl.html Thanks, Shiva Teja Thanks Shiva, I was going to mention it. Shiva has worked on an angular.js app for a cloudstack frontend. All the code has been contributed in tools/ngui This could easily be used with Brian new CSS and it would clean up all the javascript. -Sebastien
Re: [DISCUSS] UI: New look and feel
On Fri, Sep 27, 2013 at 06:31:10PM +, Brian Federle wrote: Hey Chip, the BG is basically a layered background with a gradient and overlay pattern on top. I can send along the PNGs I used for those and a snippet of CSS, and you can apply them to the site. I'm also using Noto Sans for the font (ASF 2.0 licensed), if you want to use that as well. What I can do is either attach the bitmap assets I'm using (BG images, logos, font, etc.) to the wiki page, so anyone can grab them there for use in other materials, or else they are all in the ui-restyle git branch, under /ui/stylesheets/csui/ -Brian Yep - I actually found it all. I wrapped up the redesign (without the above stuff), so that we can have it ready for 4.2.0's announcement on Tuesday. I'll (or anyone else can feel free) probably look at more refinements to align with what you're up to in the project's UI at a later point. FWIW: http://cloudstack.staging.apache.org/index.html -chip
Re: [DISCUSS] UI: New look and feel
You just made my day, these look great. Most importantly it has a look that will sell to IT managers, etc. I wish you the best of luck with this and hope for rapid progress :) Again, it looks awesome! - Original Message - From: Brian Federle brian.fede...@citrix.com To: dev@cloudstack.apache.org Cc: Sonny Chhen sonny.ch...@citrix.com, Animesh Chaturvedi animesh.chaturv...@citrix.com, Jessica Wang jessica.w...@citrix.com Sent: Thursday, September 26, 2013 3:11:07 PM Subject: [DISCUSS] UI: New look and feel Hi all, In addition to the CSS code cleanup I'm working on, I am planning a 'reskin' of the current UI to give a better user experience and look and feel. This will utilize SASS and a grid system as I have discussed in the previous thread. I created a task in JIRA and wiki functional spec, which has screenshots of what I've done so far and what I plan to do: https://cwiki.apache.org/confluence/display/CLOUDSTACK/Update+UI+visual+appearance https://issues.apache.org/jira/browse/CLOUDSTACK-4748 You can also checkout the ui-restyle branch on git, if you are able to manually compile the cloudstack.scss file via SASS (that will be automated in the future). I can send over instructions on how to compile SASS manually; it's pretty easy to setup. Let me know what you think so far :) I'll of course up and post more screenshots as I get more done. This reskin is only changing the CSS mainly, with minimal changes to actual usage or JS code, so it is basically a drop-in replacement for the current styling. I'm hoping to get this in by 4.3, so please give me feedback on anything from the current UI you don't like or want changed, and I can see about improving it. Thanks! Brian
RE: [DISCUSS] UI: New look and feel
Brian, Are we no longer using icons on the left navigation menu or is this a draft? Thanks ilya -Original Message- From: Kelcey Jamison Damage [mailto:kel...@backbonetechnology.com] Sent: Thursday, September 26, 2013 6:28 PM To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel You just made my day, these look great. Most importantly it has a look that will sell to IT managers, etc. I wish you the best of luck with this and hope for rapid progress :) Again, it looks awesome! - Original Message - From: Brian Federle brian.fede...@citrix.com To: dev@cloudstack.apache.org Cc: Sonny Chhen sonny.ch...@citrix.com, Animesh Chaturvedi animesh.chaturv...@citrix.com, Jessica Wang jessica.w...@citrix.com Sent: Thursday, September 26, 2013 3:11:07 PM Subject: [DISCUSS] UI: New look and feel Hi all, In addition to the CSS code cleanup I'm working on, I am planning a 'reskin' of the current UI to give a better user experience and look and feel. This will utilize SASS and a grid system as I have discussed in the previous thread. I created a task in JIRA and wiki functional spec, which has screenshots of what I've done so far and what I plan to do: https://cwiki.apache.org/confluence/display/CLOUDSTACK/Update+UI+visu al+appearance https://issues.apache.org/jira/browse/CLOUDSTACK-4748 You can also checkout the ui-restyle branch on git, if you are able to manually compile the cloudstack.scss file via SASS (that will be automated in the future). I can send over instructions on how to compile SASS manually; it's pretty easy to setup. Let me know what you think so far :) I'll of course up and post more screenshots as I get more done. This reskin is only changing the CSS mainly, with minimal changes to actual usage or JS code, so it is basically a drop-in replacement for the current styling. I'm hoping to get this in by 4.3, so please give me feedback on anything from the current UI you don't like or want changed, and I can see about improving it. Thanks! Brian
Re: [DISCUSS] UI: New look and feel
Hmm, maybe cut 2 copies... 1 with icons, and 1 just a clean text look. - Original Message - From: Ilya Musayev imusa...@webmd.net To: dev@cloudstack.apache.org Sent: Thursday, September 26, 2013 4:08:50 PM Subject: RE: [DISCUSS] UI: New look and feel Brian, Are we no longer using icons on the left navigation menu or is this a draft? Thanks ilya -Original Message- From: Kelcey Jamison Damage [mailto:kel...@backbonetechnology.com] Sent: Thursday, September 26, 2013 6:28 PM To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel You just made my day, these look great. Most importantly it has a look that will sell to IT managers, etc. I wish you the best of luck with this and hope for rapid progress :) Again, it looks awesome! - Original Message - From: Brian Federle brian.fede...@citrix.com To: dev@cloudstack.apache.org Cc: Sonny Chhen sonny.ch...@citrix.com, Animesh Chaturvedi animesh.chaturv...@citrix.com, Jessica Wang jessica.w...@citrix.com Sent: Thursday, September 26, 2013 3:11:07 PM Subject: [DISCUSS] UI: New look and feel Hi all, In addition to the CSS code cleanup I'm working on, I am planning a 'reskin' of the current UI to give a better user experience and look and feel. This will utilize SASS and a grid system as I have discussed in the previous thread. I created a task in JIRA and wiki functional spec, which has screenshots of what I've done so far and what I plan to do: https://cwiki.apache.org/confluence/display/CLOUDSTACK/Update+UI+visu al+appearance https://issues.apache.org/jira/browse/CLOUDSTACK-4748 You can also checkout the ui-restyle branch on git, if you are able to manually compile the cloudstack.scss file via SASS (that will be automated in the future). I can send over instructions on how to compile SASS manually; it's pretty easy to setup. Let me know what you think so far :) I'll of course up and post more screenshots as I get more done. This reskin is only changing the CSS mainly, with minimal changes to actual usage or JS code, so it is basically a drop-in replacement for the current styling. I'm hoping to get this in by 4.3, so please give me feedback on anything from the current UI you don't like or want changed, and I can see about improving it. Thanks! Brian
Re: [DISCUSS] UI: New look and feel
I am a fan of Foundation's look (or Bootstrap even)... http://foundation.zurb.com/ 3d elements make it look dated, kind of like it does now. The less images, the better imo. On Thu, Sep 26, 2013 at 7:11 PM, Kelcey Jamison Damage kel...@backbonetechnology.com wrote: Hmm, maybe cut 2 copies... 1 with icons, and 1 just a clean text look. - Original Message - From: Ilya Musayev imusa...@webmd.net To: dev@cloudstack.apache.org Sent: Thursday, September 26, 2013 4:08:50 PM Subject: RE: [DISCUSS] UI: New look and feel Brian, Are we no longer using icons on the left navigation menu or is this a draft? Thanks ilya -Original Message- From: Kelcey Jamison Damage [mailto:kel...@backbonetechnology.com] Sent: Thursday, September 26, 2013 6:28 PM To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel You just made my day, these look great. Most importantly it has a look that will sell to IT managers, etc. I wish you the best of luck with this and hope for rapid progress :) Again, it looks awesome! - Original Message - From: Brian Federle brian.fede...@citrix.com To: dev@cloudstack.apache.org Cc: Sonny Chhen sonny.ch...@citrix.com, Animesh Chaturvedi animesh.chaturv...@citrix.com, Jessica Wang jessica.w...@citrix.com Sent: Thursday, September 26, 2013 3:11:07 PM Subject: [DISCUSS] UI: New look and feel Hi all, In addition to the CSS code cleanup I'm working on, I am planning a 'reskin' of the current UI to give a better user experience and look and feel. This will utilize SASS and a grid system as I have discussed in the previous thread. I created a task in JIRA and wiki functional spec, which has screenshots of what I've done so far and what I plan to do: https://cwiki.apache.org/confluence/display/CLOUDSTACK/Update+UI+visu al+appearance https://issues.apache.org/jira/browse/CLOUDSTACK-4748 You can also checkout the ui-restyle branch on git, if you are able to manually compile the cloudstack.scss file via SASS (that will be automated in the future). I can send over instructions on how to compile SASS manually; it's pretty easy to setup. Let me know what you think so far :) I'll of course up and post more screenshots as I get more done. This reskin is only changing the CSS mainly, with minimal changes to actual usage or JS code, so it is basically a drop-in replacement for the current styling. I'm hoping to get this in by 4.3, so please give me feedback on anything from the current UI you don't like or want changed, and I can see about improving it. Thanks! Brian
Re: [DISCUSS] UI: New look and feel
I don't agree. For the reference, take a look at OpenStack UI and compare it to ACS specifically version 4.2 - All mistakes in this message are not mine but Android's. Original message From: Tracy Phillips tracp...@mantoso.com Date: 09/26/2013 8:06 PM (GMT-05:00) To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel I am a fan of Foundation's look (or Bootstrap even)... http://foundation.zurb.com/ 3d elements make it look dated, kind of like it does now. The less images, the better imo. On Thu, Sep 26, 2013 at 7:11 PM, Kelcey Jamison Damage kel...@backbonetechnology.com wrote: Hmm, maybe cut 2 copies... 1 with icons, and 1 just a clean text look. - Original Message - From: Ilya Musayev imusa...@webmd.net To: dev@cloudstack.apache.org Sent: Thursday, September 26, 2013 4:08:50 PM Subject: RE: [DISCUSS] UI: New look and feel Brian, Are we no longer using icons on the left navigation menu or is this a draft? Thanks ilya -Original Message- From: Kelcey Jamison Damage [mailto:kel...@backbonetechnology.com] Sent: Thursday, September 26, 2013 6:28 PM To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel You just made my day, these look great. Most importantly it has a look that will sell to IT managers, etc. I wish you the best of luck with this and hope for rapid progress :) Again, it looks awesome! - Original Message - From: Brian Federle brian.fede...@citrix.com To: dev@cloudstack.apache.org Cc: Sonny Chhen sonny.ch...@citrix.com, Animesh Chaturvedi animesh.chaturv...@citrix.com, Jessica Wang jessica.w...@citrix.com Sent: Thursday, September 26, 2013 3:11:07 PM Subject: [DISCUSS] UI: New look and feel Hi all, In addition to the CSS code cleanup I'm working on, I am planning a 'reskin' of the current UI to give a better user experience and look and feel. This will utilize SASS and a grid system as I have discussed in the previous thread. I created a task in JIRA and wiki functional spec, which has screenshots of what I've done so far and what I plan to do: https://cwiki.apache.org/confluence/display/CLOUDSTACK/Update+UI+visu al+appearance https://issues.apache.org/jira/browse/CLOUDSTACK-4748 You can also checkout the ui-restyle branch on git, if you are able to manually compile the cloudstack.scss file via SASS (that will be automated in the future). I can send over instructions on how to compile SASS manually; it's pretty easy to setup. Let me know what you think so far :) I'll of course up and post more screenshots as I get more done. This reskin is only changing the CSS mainly, with minimal changes to actual usage or JS code, so it is basically a drop-in replacement for the current styling. I'm hoping to get this in by 4.3, so please give me feedback on anything from the current UI you don't like or want changed, and I can see about improving it. Thanks! Brian
Re: [DISCUSS] UI: New look and feel
Not to be a fanboi and all that and hating to divert this topic, but doing it anyway, I do like 'flat'. On 9/26/13 5:12 PM, Musayev, Ilya imusa...@webmd.net wrote: I don't agree. For the reference, take a look at OpenStack UI and compare it to ACS specifically version 4.2 - All mistakes in this message are not mine but Android's. Original message From: Tracy Phillips tracp...@mantoso.com Date: 09/26/2013 8:06 PM (GMT-05:00) To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel I am a fan of Foundation's look (or Bootstrap even)... http://foundation.zurb.com/ 3d elements make it look dated, kind of like it does now. The less images, the better imo. On Thu, Sep 26, 2013 at 7:11 PM, Kelcey Jamison Damage kel...@backbonetechnology.com wrote: Hmm, maybe cut 2 copies... 1 with icons, and 1 just a clean text look. - Original Message - From: Ilya Musayev imusa...@webmd.net To: dev@cloudstack.apache.org Sent: Thursday, September 26, 2013 4:08:50 PM Subject: RE: [DISCUSS] UI: New look and feel Brian, Are we no longer using icons on the left navigation menu or is this a draft? Thanks ilya -Original Message- From: Kelcey Jamison Damage [mailto:kel...@backbonetechnology.com] Sent: Thursday, September 26, 2013 6:28 PM To: dev@cloudstack.apache.org Subject: Re: [DISCUSS] UI: New look and feel You just made my day, these look great. Most importantly it has a look that will sell to IT managers, etc. I wish you the best of luck with this and hope for rapid progress :) Again, it looks awesome! - Original Message - From: Brian Federle brian.fede...@citrix.com To: dev@cloudstack.apache.org Cc: Sonny Chhen sonny.ch...@citrix.com, Animesh Chaturvedi animesh.chaturv...@citrix.com, Jessica Wang jessica.w...@citrix.com Sent: Thursday, September 26, 2013 3:11:07 PM Subject: [DISCUSS] UI: New look and feel Hi all, In addition to the CSS code cleanup I'm working on, I am planning a 'reskin' of the current UI to give a better user experience and look and feel. This will utilize SASS and a grid system as I have discussed in the previous thread. I created a task in JIRA and wiki functional spec, which has screenshots of what I've done so far and what I plan to do: https://cwiki.apache.org/confluence/display/CLOUDSTACK/Update+UI+visu al+appearance https://issues.apache.org/jira/browse/CLOUDSTACK-4748 You can also checkout the ui-restyle branch on git, if you are able to manually compile the cloudstack.scss file via SASS (that will be automated in the future). I can send over instructions on how to compile SASS manually; it's pretty easy to setup. Let me know what you think so far :) I'll of course up and post more screenshots as I get more done. This reskin is only changing the CSS mainly, with minimal changes to actual usage or JS code, so it is basically a drop-in replacement for the current styling. I'm hoping to get this in by 4.3, so please give me feedback on anything from the current UI you don't like or want changed, and I can see about improving it. Thanks! Brian
Re: [DISCUSS] UI: New look and feel
Looks great Brian! One request actually. I'm working on a proposed cloudstack.apache.org site redesign right now, and I'd actually love to get the relevant CSS you used for the header area (faded blue). It might be nice to have some relationship between the cs.a.o branding and the product itself. ;-) (watch the marketing list for my site redesign proposal shortly) On Thu, Sep 26, 2013 at 10:11:07PM +, Brian Federle wrote: Hi all, In addition to the CSS code cleanup I'm working on, I am planning a 'reskin' of the current UI to give a better user experience and look and feel. This will utilize SASS and a grid system as I have discussed in the previous thread. I created a task in JIRA and wiki functional spec, which has screenshots of what I've done so far and what I plan to do: https://cwiki.apache.org/confluence/display/CLOUDSTACK/Update+UI+visual+appearance https://issues.apache.org/jira/browse/CLOUDSTACK-4748 You can also checkout the ui-restyle branch on git, if you are able to manually compile the cloudstack.scss file via SASS (that will be automated in the future). I can send over instructions on how to compile SASS manually; it's pretty easy to setup. Let me know what you think so far :) I'll of course up and post more screenshots as I get more done. This reskin is only changing the CSS mainly, with minimal changes to actual usage or JS code, so it is basically a drop-in replacement for the current styling. I'm hoping to get this in by 4.3, so please give me feedback on anything from the current UI you don't like or want changed, and I can see about improving it. Thanks! Brian
Re: [DISCUSS] UI: New look and feel
Looks good. Moving away from design and more into front-end functionality. Is there any talks about cleaning up the javascript behind the UI? I recall it being messy and hard to follow from what I recall of looking at it. The idea single page app with no URL defining a view and a broken browser back button is quite annoying. I think so implementation of AngularJS like the way Shiva did it for his GSoC project would be good. On 27 September 2013 02:09, Chip Childers chip.child...@sungard.com wrote: Looks great Brian! One request actually. I'm working on a proposed cloudstack.apache.org site redesign right now, and I'd actually love to get the relevant CSS you used for the header area (faded blue). It might be nice to have some relationship between the cs.a.o branding and the product itself. ;-) (watch the marketing list for my site redesign proposal shortly) On Thu, Sep 26, 2013 at 10:11:07PM +, Brian Federle wrote: Hi all, In addition to the CSS code cleanup I'm working on, I am planning a 'reskin' of the current UI to give a better user experience and look and feel. This will utilize SASS and a grid system as I have discussed in the previous thread. I created a task in JIRA and wiki functional spec, which has screenshots of what I've done so far and what I plan to do: https://cwiki.apache.org/confluence/display/CLOUDSTACK/Update+UI+visual+appearance https://issues.apache.org/jira/browse/CLOUDSTACK-4748 You can also checkout the ui-restyle branch on git, if you are able to manually compile the cloudstack.scss file via SASS (that will be automated in the future). I can send over instructions on how to compile SASS manually; it's pretty easy to setup. Let me know what you think so far :) I'll of course up and post more screenshots as I get more done. This reskin is only changing the CSS mainly, with minimal changes to actual usage or JS code, so it is basically a drop-in replacement for the current styling. I'm hoping to get this in by 4.3, so please give me feedback on anything from the current UI you don't like or want changed, and I can see about improving it. Thanks! Brian
Re: [DISCUSS] UI: New look and feel
On Fri, Sep 27, 2013 at 9:28 AM, Ian Duffy i...@ianduffy.ie wrote: I think so implementation of AngularJS like the way Shiva did it for his GSoC project would be good. I'm trying to setup a demo for my project. This should give an idea about the code. https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/common/resources/virtualmachines.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.js https://github.com/shivateja/cloudstack-ui/blob/angular-rawapi/static/js/app/instances/instances.tpl.html Thanks, Shiva Teja
