search

heron-mc / heron-mc

Heron Mapping Client (formerly geoext-viewer on Google Code)
http://heron-mc.org
GNU General Public License v3.0
31 stars 28 forks source link

Reorganize and bundle all CSS files #251

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
When using any other style than the default (ExtJS) Blue style, a user needs to 
gather and include quite some CSS files (4). Also all CSS files are somewhat 
spread out.

This should be made easier:

- reorganize the file/directory structure and image resources to integrate 
ExtJS and Heron, and possibly OpenLayers and GeoExt. 
- include combining and minimizing in CSS

As a result a user should be able to include just one CSS file like 
themes/blue/all-min.css,  themes/gray/all-min.css

Original issue reported on code.google.com by jus...@gmail.com on 8 Jul 2013 at 12:10

GoogleCodeExporter commented 9 years ago

Original comment by jus...@gmail.com on 8 Sep 2013 at 7:59

GoogleCodeExporter commented 9 years ago 
Here is a short inventory for the starting point of this issue:

Typical style definition in 'index.html' for heron 0.75 - gray app version:
===========================================================================
...
<!-- ExtJS 3.4.x -->
<link rel="stylesheet" type="text/css" 
href="/LIB/ExtJS-3.4.1.1/resources/css/ext-all.css"/>
...
<!-- ExtJs - Color Theme -->
<link rel="stylesheet" type="text/css" title="gray" 
href="/LIB/ExtJS-3.4.1.1/resources/css/xtheme-gray.css" />
...
<!-- OpenLayers 2.12 -->
<link rel="stylesheet" href="/LIB/OpenLayers-2.12/theme/default/style.css" 
type="text/css" />
...
<!-- Heron -->
<link rel="stylesheet" type="text/css" 
href="/LIB/heron/resources/css/default.css"/>
...
<!-- Heron - Color Theme -->
<link rel="stylesheet" type="text/css" 
href="/LIB/heron/resources/css/default-theme-gray.css"/>
...
<!-- Heron: ux -->
<!-- Resources for ux.printpreview -->
<link rel="stylesheet" type="text/css" 
href="/LIB/heron/ux/printpreview/resources/css/printpreview.css" />
...
<!-- App styles -->
<link rel="stylesheet" type="text/css" href="MyAppStyles.css"/>
...

There are four default css files in heron:
- default.css - containing all default style information (with blue version 
styles!!!)
- default-theme-blue.css - containing all blue style information changes
- default-theme-gray.css - containing all gray style information changes
- default-theme-greenery.css - containing all greenery style information changes

ATTENTION
=========
The struct / contents of the 'default-theme-xxx.css' must be identical over all 
xxx files to insure the lossless representation!!!

Original comment by wolfram.winter on 11 Sep 2013 at 7:05

GoogleCodeExporter commented 9 years ago 
The color css files 'default-theme-xxx.css' are greatly revised and extended. A 
new dark color version was added - the folder of the theming example now 
contains green, blue, gray and dark app versions  (nearly one week of 
investigation...) - please have a try!
To test the css of the four color themes I put our own geo app in all these 
colors - just a little bit crazy, but it works - see attached pics. 

After this cleanup we can now start a discussion how to go on further!

Original comment by wolfram.winter on 13 Sep 2013 at 12:08

Attachments:

GoogleCodeExporter commented 9 years ago 
Those look quite good. I particularly like the dark one.
We have our own style, but it may be implemented in a different way (it works 
for us :-) ). We're still tweaking it in a couple of places, but I'll share 
here when done.
Attached is what it looks like.

Original comment by jonathan...@warwickshire.gov.uk on 13 Sep 2013 at 12:17

Attachments:

GoogleCodeExporter commented 9 years ago 
Nice too!! 
The 'default-theme-xxx.css' files are stage two of the css cascade - they are 
the basic scaffolding for the main color and handling things - stage three is 
app css where your tweaks should be done.

Original comment by wolfram.winter on 13 Sep 2013 at 1:26

GoogleCodeExporter commented 9 years ago 
Wolfram, thanks for your hard work. I am going through the examples. One thing 
I noticed is a slight shift (1 or 2 pixels) of the Panel and Toolbar headers. 
See these two images (original and new.jpg) , first the original and next the 
new/latest version, from you check-ins.

Original comment by jus...@gmail.com on 13 Sep 2013 at 1:45

Attachments:

GoogleCodeExporter commented 9 years ago 
Here's our's, all tweaked up. You're welcome to add it if it's compatible.
We load it as the last file so it over-rides the other ones.

(It was done by our e-services team, not me - took a while for them to get 
around to it, but I'm happy with the results).

Original comment by jonathan...@warwickshire.gov.uk on 13 Sep 2013 at 2:22

Attachments:

GoogleCodeExporter commented 9 years ago 
Hi - thanks for your response!
@just: its no css issue - but the way you define the border layout in your 
config - the center area in the DefaultConfig.js was defined with a border - 
I-ve fixed this - see pic.
@jonathan: thanks a lot - I'll have a look on it next week...

BTW: when integrating the 'all.css' from GXP we have some side effects caused 
by different css definitions - how should we handle this - overwrite by our 
default css?

Original comment by wolfram.winter on 14 Sep 2013 at 10:19

Attachments:

GoogleCodeExporter commented 9 years ago 
Ok thanks Wolfram, you're becoming the expert in this! I have done some small 
fixing on top with just DefaultConfig and LayerTreePanel.js (it had 
border:false hardcoded which is never a good idea) : see 
http://lib.heron-mc.org/heron/latest/examples/defaultnl which is as original. 
Only the inner Panels like LayerLegendPanel etc now have border: true, no 
change to CSS, One can now play with border: true for others if required. I 
like this continuous top bar and fine border lining. See img.

Original comment by jus...@gmail.com on 14 Sep 2013 at 11:05

Attachments:

GoogleCodeExporter commented 9 years ago 
Yep - this was the intention of rev1056 with setting 'borders=false' - we 
should change your way in deleting the borders line in 'ActiveLayersPanel.js' 
and 'ActiveThemesPanel.js' too - will you check in this?!

Original comment by wolfram.winter on 14 Sep 2013 at 11:38

GoogleCodeExporter commented 9 years ago 
Bad english!! ...we should change TO yours in deleting the borders line ...

Original comment by wolfram.winter on 14 Sep 2013 at 11:40

GoogleCodeExporter commented 9 years ago 
Just done.

Original comment by wolfram.winter on 14 Sep 2013 at 1:27

GoogleCodeExporter commented 9 years ago 
Moving out of 0.76, for now unplanned.

Original comment by jus...@gmail.com on 1 Nov 2013 at 12:46

GoogleCodeExporter commented 9 years ago 
Moving out of 0.76, for now unplanned. now label removed.

Original comment by jus...@gmail.com on 1 Nov 2013 at 12:48