hotelsdotcom / fibos Goto Github PK
View Code? Open in Web Editor NEWBookmarklet UI Tool for easily check layout implementations
License: Apache License 2.0
Bookmarklet UI Tool for easily check layout implementations
License: Apache License 2.0
Improve the readme file with simplier bookmarklet informations:
keep the prompt one and remove all the others.
Step to reproduce:
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].
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.
Make the GUI usable using just keyboard shortcuts
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.
Analyze each background-image
value separately (so to check each one to be a real image).
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.
The selection now works only from top left corner.
Improve this feature allowing selecting from every corner.
Clicking on export/import it returns undefined
.
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 the tool loader is executed, checks for jQuery and loads it if needed.
various improvements..
none
displayedSomething 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!
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.
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.
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.
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.
Document the Widgets API using the wiki pages
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.
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.
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
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.
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.
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.
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.
If no spacers are selected, style the UISpacerPanel
as disabled.
Make the gui draggable
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.