fgpv-vpgf / fgpv-vpgf Goto Github PK

Live reload assumed source files; need to run jsbuild on file changes.

Wait for gulp-i18n-csv 1.1.0 release.

Create locales.csv file in src/locales with two languages (en, fr), fill it with whatever strings are used in the code base at the moment, use gulp-i18n-csv to break it into en-CA/translation.json and fr-CA/translation.json files in src/locales.

similar to morp directive

Just a a reminder to do this at some point.

subj.

Try using icon sprites (https://github.com/google/material-design-icons/tree/master/sprites).
Font icons look fuzzy when scaled.

needed to truncate the long layer names. The portion of the string should be removed from the middle, leaving its ending intact.

Here's some existing truncate directives to look at:
https://github.com/sparkalow/angular-truncate/blob/master/src/truncate.js
https://github.com/dibari/angular-ellipsis/blob/master/src/angular-ellipsis.js

with tests

Add some placeholder text to it as well.

Keyboard driven pan and zoom should be enabled for accessibility. Allowing users to tab through to the navigation panel does not count. Need to wait until some tab order issues are sorted out.

Update dependency;
make sure there is no conflicts between old and new rule sets;
fix any style errors;

#28

If technically possible, it would be helpful to display a notification in the basemap selector that a particular basemap is broken and won't load. It might even make more sense to completely remove broken basemaps from the selector list.

#13 breaks Protractor tests.

Looks like ng-annotate fails when trying to parse ES6 code.

function zoomIn(by = 1) {
    // FIXME: user proper call
}

http://www.sitepoint.com/angular-testing-tips-testing-directives/
http://www.sitepoint.com/unit-testing-angularjs-services-controllers-providers/

Async:
http://stackoverflow.com/questions/29488133/angularjs-unit-test-with-timeout
http://stackoverflow.com/questions/15477370/unit-testing-an-asynchronous-service-in-angularjs

• Build stepper
• Build layer import from a local file part
• Build layer import from a network file / service part
• Add trigger to the app bar

Exposed easings and durations from common/*.animation.js through a (constant) service.

Also hook them up through translation service.

Use get function; read more here: https://reviewable.io/reviews/fgpv-vpgf/fgpv-vpgf/53#-K1KyQZYcl5rvw4AkkuK

• add uglify
• turn on strict dependency injection

Need to re-inject index page on file change; otherwise need to serve again after making changes to index pages.

We might want to switch the entire (or most of it) build process to jspm when adopting Angular 2 and ES6 modules.

Turned out CSS animations are not enough for the transitions we want to have. Will need to replace them with JS-based animation (GSAP or Popmotion or something else entirely).

Some info: https://css-tricks.com/rems-ems/

Add an index page with a WET wrapper (maybe several - one for each theme).

Nav buttons are currently decorative. As soon as the geo module / geoapi is more developed add some functionality for navigation.

This will mainly address responsive layout changes which apply to mobile devices.

Material Design suggest seven breakpoint widths to adapt to. We are going to use two: 480 and 840dp.

Small (a phone or a small tablet): 0 - 480

Up to 480dp, the main panel housing the legend can take up the whole width of the page, look nice and no produce too much wasted white space.

• each panel occupies the whole screen
  • child panels should display a back arrow instead of the close button in the top-left corner when overlaying their parent panels.
• datapanel is always maximized
  • split view is removed
  • row/column spacing can be adjusted to allow for more information to be shown in it
• Overview map is removed to free up space
• 10px gutter around panels can be removed to free up move space

Main view	Legend	Layer Import
Settings	Datapanel	Details (opend from datapanel)
Details (opened from map)

Medium (a big phone or a tablet): 480 - 840

At this size, the main panel will create lots of unused white space if it were to take the full width of the page. In this layout, all panels except the datapanel will remain their default width (350dp).

• child panels should display a back arrow instead of the close button in the top-left corner when overlaying their parent panels.
• datapanel takes takes the full width of the page
  • split view is removed
  • row/column spacing can be adjusted to allow for more information to be shown in it
  • point details panel originated from the datatable opens as an "expanded" popup
• Overview map is removed to free up space
• 10px gutter around panels can be removed to free up move space

Main view	Legend	Settings
Datapanel	Details (opened from datapanel)	Details (opened from map)
Details (opened from map; expaned view)

Large (everything larger): 840 - ∞

Done, thanks!

Material Design suggests three options for growing the layout beyond 1600dp:

• Become center aligned with increased margins
• Remain left aligned while the right margin grows
• Continue to grow while revealing additional content

Other consideration for mobile support:

• remove zoom in/out controls if touch support is detected (needs Mike's approval) (what if it's a laptop with a touch screen, do we still want to remove zoom controls?)
• provide a safeguard or a user warning when downloading large amounts of data on a mobile device (applies to all layouts)
• enlarge small icons (legend entry flags) and/or increase spacing around them to make tapping them easier (applies to all layouts)

Other notes:

• Hover tooltips can't be shown on hover on touch-only devices (for obvious reasons), but they do display on single tap and long press. This is useful for things like legend entry flags (type, user-added, etc.). Not so for for actionable controls - they will activate on both actions. Need to prevent controls from activating on long presses (which still should display a tooltip).
• Angular Dragula seem to start the drag on the long press as well when touch events are detected.

Task List:

• add mobile browser detection script
• update styles to include selected breakpoints (need to research ways to do it)
• small and medium layout: remove overview map
• touch mode: enlarge small icons (legend entry flags) and/or increase spacing around them to make tapping them easier (applies to all layouts)
• touch mode: prevent controls from activating on long presses (which still should display a tooltip).
• change basemap selector to a side navigation component
• small layout: update panels to occupy the whole screen
• small and medium layout: add back arrows instead of the close buttons in the top-left corner to child panels when overlaying their parent panels.
• small and medium layout: remove split view from datatable
• small and medium layout: datatable is maximized by default
• small layout: adjust row/column spacing to allow for more data to be visible
• medium layout: update details panel opened from the datatable to open as an "expended" popup
• touch mode[needs decision]: enable drag handles on legend entries
• more...

As implemented in GcViz. Restricts view of only one layer per group at a time (the group itself still can be turned off by the group toggle though).
Apart from switch logic, need visual clues to indicate linked layers.

After working for some time with the ui-router, I think it's not entirely suitable for our purposes because it uses a tree-like structure to describe routes with a single root state.

Say we have three panels which can be either open or closed: mainPanel, sidePanel, and filterPanel. And we create the following routes (app is an abstract root state):

"app.main": mainPanel is open
"app.main.side": mainPanel and its sidePanel is open
"app.main.side.filter": all three panels are open
"app.main.filter": mainPanel and filterPanel
"app.filter": filterPanel is open

Problems start when you want to go from "app.main.filter" to "app.filter" by closing the mainPanel but keeping the filterPanel open. When switching between states, ui-router clears views populated by the current state leaving views populated by the parent states intact. So, switching to "app.filter" will first remove filterPanel from the dom and then re-insert it back.

View's HTML structure is not cached and will be reinitialized upon insertion which may involve a lot of calculations (removing and re-inserting a large datatable for example). Even worse, when the view is cleared, its leave animation is triggered; on re-insertion, its enter animation. We want the filterPanel to stay put, not animate in and out when closing the mainPanel.

Four possible ways around it:

1. Drop animations for enter/leave transitions. We might still get flickering when components removed/re-inserted into the dom.
2. Create a separate route for all possible combinations of components: "app.main.filter.nomain" for closing the mainPanel when the filterPanel stays open for example. I fear this can get ridiculous in a jiffy.
3. Write a simple, custom state manager which let us control component's state independently of each other.
4. Wait until the new angular router comes out with Angular 1.5 as it seems to solve this problem.

Provide an indication when a service endpoint does not respond/fails. For services with a hierarchical structure (i.e. group layers) the indicator should occur at the parent level.

So it looks more like this:

Angular Material switch: https://material.angularjs.org/latest/demo/switch

☝️ December 10, 2015 9:19 AM

Hola! @AleksueiR has created a ZenHub account for the fgpv-vpgf organization. ZenHub is the leading team collaboration and project management solution built for GitHub.

How do I use ZenHub?

To get set up with ZenHub, all you have to do is download the browser extension and log in with your GitHub account. Once you do, you’ll get access to ZenHub’s complete feature-set immediately.

What can ZenHub do?

ZenHub adds a series of enhancements directly inside the GitHub UI:

• Real-time, customizable task boards for GitHub issues;
• Burndown charts, estimates, and velocity tracking based on GitHub Milestones;
• Personal to-do lists and task prioritization;
• “+1” button for GitHub issues and comments;
• Drag-and-drop file sharing;
• Time-saving shortcuts like a quick repo switcher.

Add ZenHub to GitHub

Still curious? See more ZenHub features or read user reviews. This issue was written by your friendly ZenHub bot, posted by request from @AleksueiR.

I think we need a task to deploy the current build to dev somewhere. Might be useful to quickly show the build to people.

The geoApi repo got some extra JSCS rules enabled, this is a reminder to sync the new stuff at some point.

to open the data/filter panel.