In the past I have incorporated some images that exist on the Rally server into my Apps-- for example I made a more generic "picker" menu that displays checkboxes, which of course rely on images for the checks and boxes.
Of course I would expect to have to check if any images I am using persist when the SDK version changes, but it never-the-less allows for some additional functionality and style you could not have without the images that exist on the server.
My question is: since there is no way to put our own images into Rally*, is there a way to find all the images possible that might be at our disposal on the server? I've used the "resources" tab in chrome and can find what is used by particular pages, but it is not complete, only what is used.
My specific need is that I'm trying to make a grid that shows metric, and I want a column that shows a green up/down arrow if the trend is good, and a red up/down arrow if the trend is bad.
*: Second answer below shows this is incorrect: you can put attachments into rally and then refer to them in apps
When I attach an image to a Rally artifact in my workspace it gives me a unique URL that I can use as follows:
var myPanel = Ext.create('Ext.panel.Panel',{
layout: 'hbox',
itemId: 'p',
items:[{
xtype: 'image',
autoRender: true,
src: 'https://rally1.rallydev.com/slm/attachment/12345678/pic.png',
width: 1000,
height: 200
}
]
});
An easy way to incorporate icons is to use the icon classes:
<span class="icon-NAME"></span>
You could customize the colors by changing the font color in the CSS:
<span class="icon-arrow-down" style="color:red"></span>
Here are the available icons I've been able to find:
icon-add
icon-add-column
icon-addTag
icon-admin
icon-archive
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-attachment
icon-back
icon-bars
icon-bell
icon-blocked
icon-board
icon-box
icon-calendar
icon-cancel
icon-change-set
icon-chat
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up
icon-children
icon-circle
icon-close
icon-collapse
icon-color
icon-comment
icon-cone
icon-cross
icon-dashboard
icon-defect
icon-defectSuite
icon-delete
icon-deploy
icon-donut
icon-dots
icon-down
icon-down_full
icon-down_hollow
icon-download
icon-drag
icon-dropdown
icon-edit
icon-embed
icon-empty
icon-enlarge
icon-expand
icon-export
icon-favorite
icon-feedback
icon-file
icon-filter
icon-fiveDots
icon-flag
icon-folder
icon-full-arrow-down
icon-full-arrow-left
icon-full-arrow-right
icon-full-arrow-up
icon-gear
icon-graph
icon-grid
icon-help
icon-hierarchy
icon-history
icon-home
icon-hourglass
icon-idea
icon-images
icon-infinity
icon-info
icon-info-circle
icon-leaf
icon-leave
icon-left
icon-line
icon-link
icon-lock
icon-lock-open
icon-mail
icon-minus
icon-more
icon-next
icon-none
icon-not-favorite
icon-ok
icon-partial
icon-pie
icon-plus
icon-popup
icon-portfolio
icon-post
icon-predecessor
icon-previous
icon-print
icon-program
icon-progress
icon-question
icon-ready
icon-recycle
icon-refresh
icon-reply-all
icon-right
icon-right_full
icon-right_hollow
icon-rss
icon-save
icon-scope-down
icon-scope-up
icon-scope-up-down
icon-search
icon-setup
icon-share
icon-shrink
icon-small-chevron-down
icon-small-chevron-left
icon-small-chevron-right
icon-small-chevron-up
icon-snapshot
icon-split
icon-square
icon-story
icon-successor
icon-tag
icon-task
icon-test
icon-test-run
icon-testCase
icon-testSet
icon-threeDots
icon-thumbs-down
icon-thumbs-up
icon-to-do
icon-triangle
icon-up
icon-upload
icon-user
icon-user-add
icon-users
icon-visible
icon-warning
icon-workspace
Related
I'm having an issue with owlcarousel. When I use large images with items:1 everything works well and each slide contains 1 image. But when I use smaller images the items:1 option is ignored and the images display 4 per slide.
owlcarousel is version 2.3.4 as are the corresponding CSS files.
$(document).ready(function(){
$(".news-post-gallery").owlCarousel({
navigation : false, // Show next and prev buttons
autoplay:false,
items: 1,
loop:false,
margin: 10,
center: true,
nav: true,
navText: [
"<div>Left</div>",
"<div>Right</div>"
],
responsive:{
0:{
items:1,
}
}
});
});
My first guess is that this is a CSS issue. Mind you even the small images are not that "small", the large images that I used were like half my screen width.
Edit: navText is being ignored as well when small images are used.
The issue was another carousel being initialized targeting the owl-carousel class. This ended up initializing the one I needed with the wrong settings. The carousels initializations were coming from different templates so the result was only visible in the source once the page was loaded.
Adding $(...).owlCarousel('destroy'); before i initialized mine solved the problem.
I made an observation with Cytoscape Layout and I am wondering how to change it. The layout manager CoSe produces different results depending on the length of the label name. I encountered this when I changed the node label from a long to a short id and also to no id. The best result is produced with no id.
How to deactivate this label layout effect ?
There is a planned feature to specify how the bounding box is calculated for nodes in a layout: https://github.com/cytoscape/cytoscape.js/issues/1626
Before that's implemented, you'll have to hide labels while the layout is running.
E.g.
cy.nodes().addClass('no-labels');
cy.one('layoutstop', () => cy.nodes().removeClass('no-labels'));
cy.makeLayout({ ... }).run();
Where node.no-labels { label: '' } is defined in your stylesheet.
Created a graph using cytoscape.js. Need to add image as a label on edge.
After examination of
CanvasRenderer.drawElements in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-redraw.js#L406-L412
CanvasRenderer.drawEdgeText in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-label-text.js#L6-L31
CanvasRenderer.drawEdge in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-edges.js
it seems that image label on edge is not supported right now.
One candidate where this feature might be added seems to be the CanvasRenderer.drawEdgeText function. The implementation might examine the text contained in the edge's content and if it looks like reference to an image (e.g. url) then draw it as image...
https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/README.md
Contributing to Cytoscape.js
Cytoscape.js is an open source project, and anyone interested is encouraged to contribute to Cytoscape.js. We gladly accept pull requests. If you are interested in regular contributions to Cytoscape.js, then we can arrange granting you permission to the repository by contacting us.
If your pull request is a bugfix, please make changes to the master branch. Otherwise, please make changes to the next version's branch (i.e. unstable).
I know this is a late answer. but this will help somebody who looks for an answer as like me.
We can use icon fonts or fontawesome for this.
set the edges data as
edges = {
data:
id: "3f5cb5c4-43aa-4f4d-b816-fb4f279585c7"
label: "1 A \uf023 \uf022" //this is the fontawesome unicode chars for lock and notes icons
source: "1"
sourceName: "shipping"
target: "4"
targetName: "twilio.com"
value: 2
}
next in your cytoscape style, mention the font as fontawesome
{
selector: '.autorotate',
style: {
'edge-text-rotation': 'autorotate',
'font-size': '8px',
// 'color': '#000000',
'color': '#333333',
'font-family': 'FontAwesome, helvetica neue Cantarell',
'text-margin-x':'5px',
'text-margin-y':'5px',
// 'source-text-margin-x':'5px',
// 'source-text-margin-y':'5px'
}
}
Now your cytoscape graph will show edges with images as like this
I have an dojo enhanced grid inside a title pane which inturn in Tabcontainer. I am creating a tab container dynamically and painting the title pane which contains grid. For the first time the grid is painted properly but if i close the tab and again try it to open a tabcontainer title pane is painted but grid inside the titlepane is not painted (or rather its not visible) until i do a browser resize.
So anybody have faced similar kind of issue? Please let me know the solution for this.
I tried resize(), update() & startup() methods on grid nothing worked out.
I am kind of stuck please share your thoughts on this.
Thanks,
Vikram
I had the same problem and found a workaround by doing a dojo connect like:
dojo.connect(Datagrid,"_onFetchComplete",DataGrid,"_resize");
So it should automatically be resized, when DataGrid finished loading data.
Hope I could help.
Greeting, Simon
Have you tried setting an absolute height on the Grid?
Which browsers did you try? (I experienced various problems with DataGrid in TabCointainer using IE)
You must call the TabContainer.layout() each time its container is changing size. For doing this, you could 1) monitor DOMEvents onunderflow and onoverflow on containing DOMNode or 2) when container becomes visible (once-n-forall).
Reason why a window.onresize event fixes it is, that the TabContainer hooks on said event and calls its own layout.
In your situation, where the TabController fiddles with TabContainer's panes, there may be missing a 'layoutChildren' somewhere. Optimally, you should place the grid as the first on only child to tab.
After the grid is deployed, it will take an absolute, calculated height - 'inherited' from the TabContainer. This is fired once the TabContainer chooses to resize or instructed to do so.
Manually, you should be able to implement these lines - after re-opening a tab. The script is taken from _Grid.js to illustrate
var grid = dijit.byId('MYGRIDID');
require(["dijit/layout/utils"], function(layerUtils) {
layoutUtils.layoutChildren(grid.domNode,
grid._contentBox,
[grid.tablist, {
domNode: grid.tablistSpacer,
layoutAlign: titleAlign
}, {
domNode: grid.containerNode,
layoutAlign: "client"
}]);
grid._containerContentBox = layoutUtils.marginBox2contentBox(grid.containerNode,
{
domNode: grid.containerNode,
layoutAlign: "client"
});
// note this line in particular
grid.selectedChildWidget.resize(grid._containerContentBox);
}
My issue
I had a similar situation as yours:
Grid is in a titlepane (closed by default).
Grid can be destroyed and re-created on the fly.
Issue appears when user:
opens the pane.
closes the pane.
re-creates the grid.
re-opens the pane.
grid is not visible, until browser window is resized!
My solution
My approach was to force a resize() on my grid whenever the title pane was being opened.
I used code like this, in a place where I had access to both the grid and the panes:
var titlePane = registry.byId("title-pane-id");
var handle = aspect.after(titlePane, "toggle", function(deferred) {
if (titlePane.open) {
grid.resize();
}
});
The dojo/aspect doc
Don't forget to remove the aspect from your grid if you destroy it.
I did this on dojo v1.8.1
My solution is too easy: define on declaration of grid the bold parameter write here:
grid = new EnhancedGrid({id: 'MyIDgrid',
store: dataStore = new ObjectStore({objectStore: myStore}),
structure: structureGrid,
plugins: pluginGrid,
style : 'width: 725px; height: 350px',
autoWidth : true,
**autoHeight : false,height:'200px',**
elasticView : '2'
}, document.createElement('div'));
this resolve all!
Enjoy!
style="height: auto;" will fit the purpose.
I have an metro style app which has a few tiles in the home page in some random order. If I remove one of those tiles all the other tiles should rearrange themselves to fill the gap created by removing a single tile. You can observe the same phenomenon in Windows 8 desktop view. Is it possible to achieve it using either WinJS or WinRT.
If I correctly understood your needs, if you use a ListView or a GridView which is bound to an IObservableCollection, the items will automatically fit correctly when deleting / adding items.
Using IObservableCollection (or ObservableList) allow you to add a ChildrenTransitions (Choose the AddRemoveTransitions to automatically add the "correct" animation for adding / removing item.
I have not tested this in JS/Html, but in Xaml/C# it's working great.
You can do it by modifying the ListView data source directly.
For example,
// create a reference of your data source so that it can be accessed
// when you need to modify it
var yourBindingList;
...
// code where you bind your data to your list view
yourBindingList = WinJS.Binding.List([{id: 1, name: 'one'},
{id: 2, name: 'two'}, {id: 3, name: 'three'}]);
var listViewControl = document.getElementById('yourListViewDiv').winControl;
WinJS.UI.setOptions(listViewControl, {
selectionMode: 'single',
itemDataSource: yourBindingList.dataSource,
itemTemplate: yourItemTemplate,
});
...
// code where you remove the first item in your list view
yourBindingList.splice(0, 1);
Hope this helps.