hotelsdotcom/fibos

Bookmarklet UI Tool for easily check layout implementations

fibos's Issues

Make the gui draggable

Make the gui draggable

[uiMarker] improve font analysis

The uiMarker widget needs to be improved enlarging its font boundaries recognition feature.
Use x-height logic found in http://brunildo.org/test/xheight.pl

Spacer still selected even when group is changed

Simplify extendability across all widgets

Minor refactor required across all widgets in order to clean code and avoid the need to reference internal methods or properties.
eg.

// now
$('body').append(myWidget.$el);

// future
myWidget.appendTo('body');

Further more, some API improvements and methods visibility (public/private) adjustments could be appreciated.

Improve multiple spacer selection on "offset group" panel

The selection now works only from top left corner.
Improve this feature allowing selecting from every corner.

Improve the readme bookmarklet informations

Improve the readme file with simplier bookmarklet informations:
keep the prompt one and remove all the others.

[bug] Adding groups (after restore or import action) won't select the first radio

When the user clicks on restore (local storage panel) or import (input string panel) the spacer groups panel opens correctly, but when it's empty before click on button it should then select the first radio.

[bug] drop new spacer when group is hidden

When the spacers group element is hidden, both with toggle spacers or when the selected group is none, if the user drops a new spacer in the page is placed with top and left values too big.

Improve the z-indexes analysis with elements highlights like fontsPanel

Create test build task

It could be useful for testing purposes to have a js to copy and paste in the browser's console so to play around a bit with FibOS' Widgets.
Create a grunt task that builds all minified widgets and some initialization code into a minified js in build/[version]/ folder.

When hide GUI make sure that the class .hidden still be visible

There is the need to override every display:none or visibility:hidden rules that could be already present in the page for the class .hidden used for FibOS GUI.

[uiRuler] Improve the ruler features to work correctly on the whole page's height

Sometimes the rulers, depending on styles already applied to the page, renders the vertical ruler only on the visible part of the page, so that scrolling down it is no longer visible.
This causes also the guidelines to be dragged not through the whole page.
This behavior should be fixed.

Improve GUI layout

various improvements..

• panels background quick fade
• avoid width excess (eg. with sprite names)
• export inside input
• spacers groups always with none displayed
• feedback on localstorage save action

[bug] uiSpacer: offset group is a buggy feature

Something weird happens on offset group panel.
After added some spacers, when mousedown on any offset input field of this panel will call uiSpacer.offsetGroup(): from here there is something that goes wrong!
Find it and solve it!

Use the tool to style the tool itself

Could be interesting to have the full GUI styled using the tool itself (ie. using fibonacci spacers).
Check what's missing, since most of the guidelines are already supported.

[uiSpriter] Make the analyze feature multi-background aware

Analyze each background-image value separately (so to check each one to be a real image).

Add font analysis in a new panel

Add a new feature to let the user analyze all elements retrieving font-family, font-weight and font-size css rules.
This feature could return in the console an Object with font-family as properties and an array of elements as each value.
Alternatively, add a new UIBasePanel extension to display those informations.

It may be needed to enhance UIMarkerWidget with new methods.

Improve bookmarklet url

Use this as example:

(function(brand,tag) {
  brand || (brand = prompt('Choose brand: [hotels | venere]\n\n(leave it blank for \'hotels\')') || 'hotels');
  tag || (tag = prompt('Choose tag: [latest | staging]\n\n(leave it blank for \'latest\')') || 'latest');
  var ghUrl = ['VenereDotCom/FibOS/',tag,'/public/fibos-latest-',brand,'.min.js'].join(''),
      rawUrl = 'https://rawgit.com/' + ghUrl,
      script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = rawUrl;
  document.getElementsByTagName('head')[0].appendChild(script);
}(null,null));

Give parameters instead of null in order to avoid prompting questions.

[uiRuler] should show a white square between rulers

In the rulers layout there is a white square between vertical and horizontal rulers, so to hide the ruler while scrolling.
This feature was already released with 0.1.0, but lost in the refactoring so to be considered as a [bug].

[uiMarker] marker feature should highlight all lines of the clicked text

After the issue #8 implementation, now the marker highlights the last line of text.
Enhance the logic in order to have ALL text lines highlighted.

Dragging GUI when the page is already scrolled results in an unintended offset

[bug] Export/import feature doesn't work

Clicking on export/import it returns undefined.

Spacer selected panel disabled state when no spacers are selected

If no spacers are selected, style the UISpacerPanel as disabled.

Full GUI css refactoring

Improve the GUI layout avoiding existing css to style FibOS components.
This issue foresee a full css classes name refactoring and eventually the use of UIBasePanel.getStyle() and FibOS.addStyle() methods.

Add z-index analysis in a new panel

Add a new feature to let the user analyze all elements retrieving z-index css rules.
This feature could return in the console an Object with z-indexes as properties and an array of elements as each value.
Alternatively, add a new UIBasePanel extension to display those informations.

Restore versioning inside the gui

Before 1.0.0 was released, there was a tiny text next to the FibOS title showing the tool's version.
Restore the feature, but use grunt task to write down the current version from package.json.

Enhance the GUI with complete use via keyboard shortcuts

Make the GUI usable using just keyboard shortcuts

Improve the prompt loader with jquery

When the tool loader is executed, checks for jQuery and loads it if needed.

Merge panels "storage" and "input"

Using offsetPanel won't update relative group

Create widgets API

Document the Widgets API using the wiki pages

Clonable spacer appears when toggle off spacers while GUI is hidden

Step to reproduce:

• hide gui (click on [«] toggle)
• hide spacers (click on spacers toggle)
• restore gui (click on [»] toggle)
• the clonable spacer now is shown (while it shouldn't)

[bug] adding new spacer while group panel is open drags the spacer with an offset

While the group panel is open and no group are selected, when a new spacer is dropped the new group is created and appended its reference to the group panel enlarging the GUI height resulting in dragging the spacer with an offset.
The fix should remove this offset.