12405 lines
708 KiB
JavaScript
12405 lines
708 KiB
JavaScript
(function()
|
|
{
|
|
//Adds Google Media Design shapes
|
|
Sidebar.prototype.addGMDLBottomNavigationPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;align=center;fontSize=12;shape=";
|
|
var s2 = "dashed=0;html=1;shape=mxgraph.gmdl.";
|
|
var anc = "shape=rect;fillColor=none;strokeColor=none;";
|
|
var fac = 'shape=ellipse;dashed=0;fillColor=#ffffff;strokeColor=none;shadow=1;fontSize=13;fontColor=#000000;align=center;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;html=1;aspect=fixed;';
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library bottom navigation ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'bottom navigation', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 358, 48), s + 'rect;fillColor=#ffffff;strokeColor=none;shadow=0;');
|
|
bg.vertex = true;
|
|
var text1 = new mxCell('Recents', new mxGeometry(0.15, 0.5, 20, 20), s2 + 'recents;fillColor=#808080;strokeColor=none;fontColor=#808080;verticalAlign=top;spacingLeft=0;fontSize=10;labelPosition=center;verticalLabelPosition=bottom;align=center;spacingBottom=0;spacingTop=-6;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(-10, -15);
|
|
text1.vertex = true;
|
|
bg.insert(text1);
|
|
var text2 = new mxCell('Favorites', new mxGeometry(0.5, 0.5, 20, 18), s2 + 'heart;fillColor=#00796B;strokeColor=none;fontColor=#00796B;verticalAlign=top;spacingLeft=0;fontSize=10;labelPosition=center;verticalLabelPosition=bottom;align=center;spacingBottom=0;spacingTop=-5;');
|
|
text2.geometry.offset = new mxPoint(-10, -14);
|
|
text2.geometry.relative = true;
|
|
text2.vertex = true;
|
|
bg.insert(text2);
|
|
var text3 = new mxCell('Nearby', new mxGeometry(0.85, 0.5, 20, 20), s2 + 'nearby;fillColor=#808080;strokeColor=none;fontColor=#808080;verticalAlign=top;spacingLeft=0;fontSize=10;labelPosition=center;verticalLabelPosition=bottom;align=center;spacingBottom=0;spacingTop=-6;');
|
|
text3.geometry.offset = new mxPoint(-10, -15);
|
|
text3.geometry.relative = true;
|
|
text3.vertex = true;
|
|
bg.insert(text3);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Bottom Navigation');
|
|
}),
|
|
this.addEntry(dt + 'dropdown menu', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 358, 48), s + 'rect;fillColor=#00796B;strokeColor=none;shadow=0;');
|
|
bg.vertex = true;
|
|
var text1 = new mxCell('', new mxGeometry(0.15, 0.5, 20, 16), s2 + 'video_2;fillColor=#ffffff;strokeColor=none;fontColor=#ffffff;verticalAlign=top;spacingLeft=0;fontSize=10;labelPosition=center;verticalLabelPosition=bottom;align=center;spacingBottom=0;spacingTop=-6;opacity=60;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(-10, -8);
|
|
text1.vertex = true;
|
|
bg.insert(text1);
|
|
var text2 = new mxCell('Music', new mxGeometry(0.38, 0.5, 14, 20), s2 + 'music;fillColor=#ffffff;strokeColor=none;fontColor=#ffffff;verticalAlign=top;spacingLeft=0;fontSize=10;labelPosition=center;verticalLabelPosition=bottom;align=center;spacingBottom=0;spacingTop=-5;');
|
|
text2.geometry.offset = new mxPoint(-10, -14);
|
|
text2.geometry.relative = true;
|
|
text2.vertex = true;
|
|
bg.insert(text2);
|
|
var text3 = new mxCell('', new mxGeometry(0.62, 0.5, 16, 20), s2 + 'book;fillColor=#ffffff;strokeColor=none;fontColor=#ffffff;verticalAlign=top;spacingLeft=0;fontSize=10;labelPosition=center;verticalLabelPosition=bottom;align=center;spacingBottom=0;spacingTop=-6;opacity=60;');
|
|
text3.geometry.offset = new mxPoint(-8, -10);
|
|
text3.geometry.relative = true;
|
|
text3.vertex = true;
|
|
bg.insert(text3);
|
|
var text4 = new mxCell('', new mxGeometry(0.85, 0.5, 20, 20), s2 + 'webpage;fillColor=#ffffff;strokeColor=none;fontColor=#ffffff;verticalAlign=top;spacingLeft=0;fontSize=10;labelPosition=center;verticalLabelPosition=bottom;align=center;spacingBottom=0;spacingTop=-6;opacity=60;');
|
|
text4.geometry.offset = new mxPoint(-10, -15);
|
|
text4.geometry.relative = true;
|
|
text4.vertex = true;
|
|
bg.insert(text4);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Bottom Navigation');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlBottom Navigation', 'GMDL / Bottom Navigation', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLBottomSheetsPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;align=center;fontSize=12;shape=";
|
|
var s2 = "dashed=0;html=1;shape=mxgraph.gmdl.";
|
|
var anc = "shape=rect;fillColor=none;strokeColor=none;";
|
|
var fac = 'shape=ellipse;dashed=0;fillColor=#ffffff;strokeColor=none;shadow=1;fontSize=13;fontColor=#000000;align=center;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;html=1;aspect=fixed;';
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library bottom sheets ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'bottom sheet', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 358, 320), s + 'rect;fillColor=#ffffff;strokeColor=none;shadow=0;recursiveResize=0;');
|
|
bg.vertex = true;
|
|
var text1 = new mxCell('Open in', new mxGeometry(10, 15, 200, 20), 'shape=rect;strokeColor=none;fillColor=none;align=left;fontColor=#808080;fontSize=14;');
|
|
text1.vertex = true;
|
|
bg.insert(text1);
|
|
var icon1 = new mxCell('Keep', new mxGeometry(10, 60, 20, 20), 'shape=mxgraph.gmdl.keep;strokeColor=none;fillColor=#F4B70B;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon1.vertex = true;
|
|
bg.insert(icon1);
|
|
var icon2 = new mxCell('Inbox', new mxGeometry(10, 110, 22, 20), 'shape=mxgraph.gmdl.inbox;strokeColor=none;fillColor=#F4B70B;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon2.vertex = true;
|
|
bg.insert(icon2);
|
|
var icon3 = new mxCell('Hangouts', new mxGeometry(10, 160, 20, 22), 'shape=mxgraph.gmdl.hangout;strokeColor=none;fillColor=#0F9755;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon3.vertex = true;
|
|
bg.insert(icon3);
|
|
var icon4 = new mxCell('Messenger', new mxGeometry(10, 210, 22, 20), 'shape=mxgraph.gmdl.messenger;strokeColor=none;fillColor=#F4B70B;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon4.vertex = true;
|
|
bg.insert(icon4);
|
|
var icon5 = new mxCell('Google+', new mxGeometry(10, 260, 20, 20), 'shape=mxgraph.gmdl.google_plus;strokeColor=none;fillColor=#D14235;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon5.vertex = true;
|
|
bg.insert(icon5);
|
|
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Bottom Sheet');
|
|
}),
|
|
this.addEntry(dt + 'grid style options', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#2D3986;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Ali Connors', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#394797;resizeWidth=1;fontSize=22;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 16), s2 + 'left;strokeColor=#ffffff;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(25, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'edit;strokeColor=none;fillColor=#ffffff;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, -8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-20, -8);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar8 = new mxCell('', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;');
|
|
bar8.geometry.relative = true;
|
|
bar8.geometry.offset = new mxPoint(0, 81);
|
|
bar8.vertex = true;
|
|
bg1.insert(bar8);
|
|
var icon12 = new mxCell('', new mxGeometry(0, 0.5, 20, 24), s2 + 'telephone;strokeColor=none;fillColor=#3F51B5;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(25, -12);
|
|
icon12.vertex = true;
|
|
bar8.insert(icon12);
|
|
var text8 = new mxCell('(650) 555-1234', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=14;fontColor=#000000;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, -21);
|
|
text8.vertex = true;
|
|
bar8.insert(text8);
|
|
var text9 = new mxCell('Mobile', new mxGeometry(0, 0.5, 150, 20), 'text;fontSize=13;fontColor=#504F4F;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text9.geometry.relative = true;
|
|
text9.vertex = true;
|
|
bar8.insert(text9);
|
|
var icon13 = new mxCell('', new mxGeometry(1, 0.5, 17, 20), s2 + 'hangout;strokeColor=none;fillColor=#BDBDBD;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(-40, -10);
|
|
icon13.vertex = true;
|
|
bar8.insert(icon13);
|
|
var bar9 = new mxCell('', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;');
|
|
bar9.geometry.relative = true;
|
|
bar9.geometry.offset = new mxPoint(0, 146);
|
|
bar9.vertex = true;
|
|
bg1.insert(bar9);
|
|
var text8 = new mxCell('(323) 555-6789', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=14;fontColor=#000000;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, -21);
|
|
text8.vertex = true;
|
|
bar9.insert(text8);
|
|
var text9 = new mxCell('Work', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=13;fontColor=#504F4F;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text9.geometry.relative = true;
|
|
text9.vertex = true;
|
|
bar9.insert(text9);
|
|
var icon13 = new mxCell('', new mxGeometry(1, 0.5, 17, 20), s2 + 'hangout;strokeColor=none;fillColor=#BDBDBD;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(-40, -10);
|
|
icon13.vertex = true;
|
|
bar9.insert(icon13);
|
|
var bar10 = new mxCell('', new mxGeometry(0, 0, 358, 20), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;');
|
|
bar10.geometry.relative = true;
|
|
bar10.geometry.offset = new mxPoint(0, 211);
|
|
bar10.vertex = true;
|
|
bg1.insert(bar10);
|
|
var line1 = new mxCell('', new mxGeometry(0.2011, 0.5, 286, 10), 'shape=line;strokeColor=#000000;strokeWidth=1;opacity=20;resizeWidth=1;');
|
|
line1.geometry.relative = true;
|
|
line1.geometry.offset = new mxPoint(0, -5);
|
|
line1.vertex = true;
|
|
bar10.insert(line1);
|
|
var bar11 = new mxCell('', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;');
|
|
bar11.geometry.relative = true;
|
|
bar11.geometry.offset = new mxPoint(0, 231);
|
|
bar11.vertex = true;
|
|
bg1.insert(bar11);
|
|
var icon12 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'mail;strokeColor=#ffffff;fillColor=#3F51B5;strokeWidth=2;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(24, -8);
|
|
icon12.vertex = true;
|
|
bar11.insert(icon12);
|
|
var text10 = new mxCell('aliconnors@example.com', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=14;fontColor=#000000;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(0, -21);
|
|
text10.vertex = true;
|
|
bar11.insert(text10);
|
|
var text11 = new mxCell('Personal', new mxGeometry(0, 0.5, 150, 20), 'text;fontSize=13;fontColor=#504F4F;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text11.geometry.relative = true;
|
|
text11.vertex = true;
|
|
bar11.insert(text11);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, 296);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var text12 = new mxCell('ali_connors@example.com', new mxGeometry(0, 0.5, 150, 20), 'text;fontSize=14;fontColor=#000000;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text12.geometry.relative = true;
|
|
text12.geometry.offset = new mxPoint(0, -21);
|
|
text12.vertex = true;
|
|
bar12.insert(text12);
|
|
var text13 = new mxCell('Work', new mxGeometry(0, 0.5, 150, 20), 'text;fontSize=13;fontColor=#504F4F;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text13.geometry.relative = true;
|
|
text13.vertex = true;
|
|
bar12.insert(text13);
|
|
var line2 = new mxCell('', new mxGeometry(0, 0, 358, 10), 'shape=line;strokeColor=#000000;strokeWidth=1;opacity=20;resizeWidth=1;');
|
|
line2.geometry.relative = true;
|
|
line2.geometry.offset = new mxPoint(0, 356);
|
|
line2.vertex = true;
|
|
bg1.insert(line2);
|
|
var icon13 = new mxCell('Gmail', new mxGeometry(0.148, 0, 46, 34), 'dashed=0;fontSize=10;shape=mxgraph.gmdl.gmail;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=6;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(-23, 392);
|
|
icon13.vertex = true;
|
|
bg1.insert(icon13);
|
|
var icon14 = new mxCell('Hangout', new mxGeometry(0.5, 0, 40, 46), 'dashed=0;fontSize=10;shape=mxgraph.gmdl.hangout;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=1;fillColor=#19A05E;strokeColor=none;');
|
|
icon14.geometry.relative = true;
|
|
icon14.geometry.offset = new mxPoint(-20, 386);
|
|
icon14.vertex = true;
|
|
bg1.insert(icon14);
|
|
var icon15 = new mxCell('Google+', new mxGeometry(0.8547, 0, 46, 46), 'dashed=0;fontSize=10;shape=mxgraph.gmdl.google_plus;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=1;strokeColor=none;');
|
|
icon15.geometry.relative = true;
|
|
icon15.geometry.offset = new mxPoint(-23, 386);
|
|
icon15.vertex = true;
|
|
bg1.insert(icon15);
|
|
var icon16 = new mxCell('Mail', new mxGeometry(0.148, 0, 40, 32), 'dashed=0;fontSize=10;shape=mxgraph.gmdl.mail;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=4;fillColor=#BDBDBD;strokeColor=#ffffff;strokeWidth=3;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-20, 494);
|
|
icon16.vertex = true;
|
|
bg1.insert(icon16);
|
|
var icon17 = new mxCell('Message', new mxGeometry(0.5, 0, 44, 42), 'dashed=0;fontSize=10;shape=mxgraph.gmdl.message;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=-1;fillColor=#BDBDBD;strokeColor=#ffffff;strokeWidth=4;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-22, 489);
|
|
icon17.vertex = true;
|
|
bg1.insert(icon17);
|
|
var icon18 = new mxCell('More', new mxGeometry(0.8547, 0, 40, 12), 'dashed=0;fontSize=10;shape=mxgraph.gmdl.more;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=16;fillColor=#BDBDBD;strokeColor=none;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-20, 504);
|
|
icon18.vertex = true;
|
|
bg1.insert(icon18);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Grid Style With Some Options');
|
|
}),
|
|
this.addEntry(dt + 'grid style all options', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#2D3986;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#2D3986;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Ali Connors', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#394797;resizeWidth=1;fontSize=22;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 16), s2 + 'left;strokeColor=#ffffff;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(25, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'edit;strokeColor=none;fillColor=#ffffff;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, -8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-20, -8);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar8 = new mxCell('', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;');
|
|
bar8.geometry.relative = true;
|
|
bar8.geometry.offset = new mxPoint(0, 81);
|
|
bar8.vertex = true;
|
|
bg1.insert(bar8);
|
|
var icon12 = new mxCell('', new mxGeometry(0, 0.5, 20, 24), s2 + 'telephone;strokeColor=none;fillColor=#3F51B5;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(25, -12);
|
|
icon12.vertex = true;
|
|
bar8.insert(icon12);
|
|
var text8 = new mxCell('(650) 555-1234', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, -21);
|
|
text8.vertex = true;
|
|
bar8.insert(text8);
|
|
var text9 = new mxCell('Mobile', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=13;fontColor=#504F4F;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text9.geometry.relative = true;
|
|
text9.vertex = true;
|
|
bar8.insert(text9);
|
|
var icon13 = new mxCell('', new mxGeometry(1, 0.5, 17, 20), s2 + 'hangout;strokeColor=none;fillColor=#BDBDBD;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(-40, -10);
|
|
icon13.vertex = true;
|
|
bar8.insert(icon13);
|
|
var bar9 = new mxCell('', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;');
|
|
bar9.geometry.relative = true;
|
|
bar9.geometry.offset = new mxPoint(0, 146);
|
|
bar9.vertex = true;
|
|
bg1.insert(bar9);
|
|
var text8 = new mxCell('(323) 555-6789', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=14;fontColor=#000000;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, -21);
|
|
text8.vertex = true;
|
|
bar9.insert(text8);
|
|
var text9 = new mxCell('Work', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=13;fontColor=#504F4F;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text9.geometry.relative = true;
|
|
text9.vertex = true;
|
|
bar9.insert(text9);
|
|
var icon13 = new mxCell('', new mxGeometry(1, 0.5, 17, 20), s2 + 'hangout;strokeColor=none;fillColor=#BDBDBD;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(-40, -10);
|
|
icon13.vertex = true;
|
|
bar9.insert(icon13);
|
|
var bar10 = new mxCell('', new mxGeometry(0, 0, 358, 20), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;');
|
|
bar10.geometry.relative = true;
|
|
bar10.geometry.offset = new mxPoint(0, 211);
|
|
bar10.vertex = true;
|
|
bg1.insert(bar10);
|
|
var line1 = new mxCell('', new mxGeometry(0.2011, 0.5, 286, 10), 'shape=line;strokeColor=#000000;strokeWidth=1;opacity=20;resizeWidth=1;');
|
|
line1.geometry.relative = true;
|
|
line1.geometry.offset = new mxPoint(0, -5);
|
|
line1.vertex = true;
|
|
bar10.insert(line1);
|
|
var bar11 = new mxCell('', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;');
|
|
bar11.geometry.relative = true;
|
|
bar11.geometry.offset = new mxPoint(0, 231);
|
|
bar11.vertex = true;
|
|
bg1.insert(bar11);
|
|
var icon12 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'mail;strokeColor=#ffffff;fillColor=#3F51B5;strokeWidth=2;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(24, -8);
|
|
icon12.vertex = true;
|
|
bar11.insert(icon12);
|
|
var text10 = new mxCell('aliconnors@example.com', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=14;fontColor=#000000;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(0, -21);
|
|
text10.vertex = true;
|
|
bar11.insert(text10);
|
|
var text11 = new mxCell('Personal', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=13;fontColor=#504F4F;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text11.geometry.relative = true;
|
|
text11.vertex = true;
|
|
bar11.insert(text11);
|
|
var line2 = new mxCell('', new mxGeometry(0, 0, 358, 10), 'shape=line;strokeColor=#000000;strokeWidth=1;opacity=20;resizeWidth=1;');
|
|
line2.geometry.relative = true;
|
|
line2.geometry.offset = new mxPoint(0, 291);
|
|
line2.vertex = true;
|
|
bg1.insert(line2);
|
|
var icon13 = new mxCell('Gmail', new mxGeometry(0.148, 0, 46, 34), 'dashed=0;fontSize=12;shape=mxgraph.gmdl.gmail;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=6;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(-23, 327);
|
|
icon13.vertex = true;
|
|
bg1.insert(icon13);
|
|
var icon14 = new mxCell('Hangout', new mxGeometry(0.5, 0, 40, 46), 'dashed=0;fontSize=12;shape=mxgraph.gmdl.hangout;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=1;fillColor=#19A05E;strokeColor=none;');
|
|
icon14.geometry.relative = true;
|
|
icon14.geometry.offset = new mxPoint(-20, 321);
|
|
icon14.vertex = true;
|
|
bg1.insert(icon14);
|
|
var icon15 = new mxCell('Google+', new mxGeometry(0.8547, 0, 46, 46), 'dashed=0;fontSize=12;shape=mxgraph.gmdl.google_plus;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=1;strokeColor=none;');
|
|
icon15.geometry.relative = true;
|
|
icon15.geometry.offset = new mxPoint(-23, 321);
|
|
icon15.vertex = true;
|
|
bg1.insert(icon15);
|
|
var icon16 = new mxCell('Mail', new mxGeometry(0.148, 0, 40, 32), 'dashed=0;fontSize=12;shape=mxgraph.gmdl.mail;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=4;fillColor=#BDBDBD;strokeColor=#ffffff;strokeWidth=3;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-20, 422);
|
|
icon16.vertex = true;
|
|
bg1.insert(icon16);
|
|
var icon17 = new mxCell('Message', new mxGeometry(0.5, 0, 44, 42), 'dashed=0;fontSize=12;shape=mxgraph.gmdl.message;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=-1;fillColor=#BDBDBD;strokeColor=#ffffff;strokeWidth=4;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-22, 417);
|
|
icon17.vertex = true;
|
|
bg1.insert(icon17);
|
|
var icon18 = new mxCell('Copy', new mxGeometry(0.8547, 0, 34, 40), 'dashed=0;fontSize=12;shape=mxgraph.gmdl.copy;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=2;fillColor=none;strokeColor=#BDBDBD;strokeWidth=4;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-17, 418);
|
|
icon18.vertex = true;
|
|
bg1.insert(icon18);
|
|
var icon19 = new mxCell('Facebook', new mxGeometry(0.148, 0, 46, 46), 'dashed=0;fontSize=12;shape=mxgraph.gmdl.facebook;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=1;fillColor=#BDBDBD;strokeColor=none;');
|
|
icon19.geometry.relative = true;
|
|
icon19.geometry.offset = new mxPoint(-23, 513);
|
|
icon19.vertex = true;
|
|
bg1.insert(icon19);
|
|
var icon19 = new mxCell('Twitter', new mxGeometry(0.5, 0, 46, 46), 'dashed=0;fontSize=12;shape=mxgraph.gmdl.twitter;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;align=center;fontColor=#504F4F;spacingTop=1;fillColor=#BDBDBD;strokeColor=none;');
|
|
icon19.geometry.relative = true;
|
|
icon19.geometry.offset = new mxPoint(-23, 513);
|
|
icon19.vertex = true;
|
|
bg1.insert(icon19);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Grid Style With All Options');
|
|
}),
|
|
this.addEntry(dt + 'list style', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#2D3986;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#2D3986;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('All', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#394797;resizeWidth=1;fontSize=22;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(0, 0.5, 10, 5), s2 + 'triangle;strokeColor=none;fillColor=#ffffff;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(104, -3);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, -8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, -8);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar2 = new mxCell('Janet Perkins', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 0.5, 23, 21), s2 + 'star;strokeColor=none;fillColor=#D3396E;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(16, -10);
|
|
icon5.vertex = true;
|
|
bar2.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(-50, -18);
|
|
icon6.vertex = true;
|
|
bar2.insert(icon6);
|
|
var bar3 = new mxCell('Mary Johnson', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 136);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var icon7 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(-50, -18);
|
|
icon7.vertex = true;
|
|
bar3.insert(icon7);
|
|
var bar4 = new mxCell('Peter Carlsson', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 191);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var icon8 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon8.geometry.relative = true;
|
|
icon8.geometry.offset = new mxPoint(-50, -18);
|
|
icon8.vertex = true;
|
|
bar4.insert(icon8);
|
|
var bar5 = new mxCell('Trevor Hansen', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 246);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var icon9 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon9.geometry.relative = true;
|
|
icon9.geometry.offset = new mxPoint(-50, -18);
|
|
icon9.vertex = true;
|
|
bar5.insert(icon9);
|
|
var bar6 = new mxCell('', new mxGeometry(0, 0, 358, 18), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;');
|
|
bar6.geometry.relative = true;
|
|
bar6.geometry.offset = new mxPoint(0, 301);
|
|
bar6.vertex = true;
|
|
bg1.insert(bar6);
|
|
var line1 = new mxCell('', new mxGeometry(0.2011, 0.5, 286, 8), 'shape=line;strokeColor=#000000;strokeWidth=1;opacity=20;resizeWidth=1;');
|
|
line1.geometry.relative = true;
|
|
line1.geometry.offset = new mxPoint(0, -4);
|
|
line1.vertex = true;
|
|
bar6.insert(line1);
|
|
var bar7 = new mxCell('Aaron Bennett', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 319);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var text6 = new mxCell('A', new mxGeometry(0, 0.5, 24, 24), 'text;fontSize=24;fontColor=#D3396E;verticalAlign=middle;fontStyle=0;align=center;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(16, -12);
|
|
text6.vertex = true;
|
|
bar7.insert(text6);
|
|
var icon11 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon11.geometry.relative = true;
|
|
icon11.geometry.offset = new mxPoint(-50, -18);
|
|
icon11.vertex = true;
|
|
bar7.insert(icon11);
|
|
var bar8 = new mxCell('Share', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar8.geometry.relative = true;
|
|
bar8.geometry.offset = new mxPoint(0, 374);
|
|
bar8.vertex = true;
|
|
bg1.insert(bar8);
|
|
var icon12 = new mxCell('', new mxGeometry(0, 0.5, 17, 20), s2 + 'share;strokeColor=#666666;fillColor=#666666;strokeWidth=2;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(21, -10);
|
|
icon12.vertex = true;
|
|
bar8.insert(icon12);
|
|
var bar9 = new mxCell('Upload', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar9.geometry.relative = true;
|
|
bar9.geometry.offset = new mxPoint(0, 429);
|
|
bar9.vertex = true;
|
|
bg1.insert(bar9);
|
|
var icon13 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'upload;strokeColor=none;fillColor=#666666;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(16, -8);
|
|
icon13.vertex = true;
|
|
bar9.insert(icon13);
|
|
var bar10 = new mxCell('Copy', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar10.geometry.relative = true;
|
|
bar10.geometry.offset = new mxPoint(0, 484);
|
|
bar10.vertex = true;
|
|
bg1.insert(bar10);
|
|
var icon14 = new mxCell('', new mxGeometry(0, 0.5, 17, 20), s2 + 'copy;strokeColor=#666666;fillColor=none;strokeWidth=2;');
|
|
icon14.geometry.relative = true;
|
|
icon14.geometry.offset = new mxPoint(21, -10);
|
|
icon14.vertex = true;
|
|
bar10.insert(icon14);
|
|
var bar11 = new mxCell('Print this page', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar11.geometry.relative = true;
|
|
bar11.geometry.offset = new mxPoint(0, 539);
|
|
bar11.vertex = true;
|
|
bg1.insert(bar11);
|
|
var icon15 = new mxCell('', new mxGeometry(0, 0.5, 18, 16), s2 + 'print;strokeColor=#666666;fillColor=#666666;strokeWidth=2;');
|
|
icon15.geometry.relative = true;
|
|
icon15.geometry.offset = new mxPoint(20, -8);
|
|
icon15.vertex = true;
|
|
bar11.insert(icon15);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'List Style');
|
|
}),
|
|
this.addEntry(dt + 'bottom sheet menu items subtext', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 358, 360), s + 'rect;fillColor=#ffffff;strokeColor=none;shadow=0;recursiveResize=0;');
|
|
bg.vertex = true;
|
|
var icon1 = new mxCell('Caribbean vacation<div><font style="font-size: 12px" color="#999999">August 13 - 22</font></div>', new mxGeometry(15, 25, 40, 40), 'shape=mxgraph.gmdl.image;strokeColor=#000000;fillColor=#ffffff;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=10;fontSize=14;html=1;');
|
|
icon1.vertex = true;
|
|
bg.insert(icon1);
|
|
var icon2 = new mxCell('Pablo at the beach house<div><font style="font-size: 12px" color="#999999">July 19 - 24</font></div>', new mxGeometry(15, 95, 40, 40), 'shape=mxgraph.gmdl.image;strokeColor=#000000;fillColor=#ffffff;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=10;fontSize=14;html=1;');
|
|
icon2.vertex = true;
|
|
bg.insert(icon2);
|
|
var icon3 = new mxCell('July 4th weekend at Joey\'s<div><font style="font-size: 12px" color="#999999">July 4th, 2015</font></div>', new mxGeometry(15, 165, 40, 40), 'shape=mxgraph.gmdl.image;strokeColor=#000000;fillColor=#ffffff;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=10;fontSize=14;html=1;');
|
|
icon3.vertex = true;
|
|
bg.insert(icon3);
|
|
var icon4 = new mxCell('Meg\'s Birthday<div><font style="font-size: 12px" color="#999999">June 29, 2015</font></div>', new mxGeometry(15, 235, 40, 40), 'shape=mxgraph.gmdl.image;strokeColor=#000000;fillColor=#ffffff;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=10;fontSize=14;html=1;');
|
|
icon4.vertex = true;
|
|
bg.insert(icon4);
|
|
var icon5 = new mxCell('Mike \& Kristin\'s wedding<div><font style="font-size: 12px" color="#999999">June 3, 2015</font></div>', new mxGeometry(15, 305, 40, 40), 'shape=mxgraph.gmdl.image;strokeColor=#000000;fillColor=#ffffff;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=10;fontSize=14;html=1;');
|
|
icon5.vertex = true;
|
|
bg.insert(icon5);
|
|
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Bottom Sheet (menu items with subtext)');
|
|
}),
|
|
this.addEntry(dt + 'grid style options', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#2D3986;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#2D3986;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
|
|
|
|
var item1 = new mxCell(
|
|
'Mary had liked to look at her mother from a distance and she had thought her very pretty, but as she knew very little of her she could scarcely have been expected to love her or to miss her very much when she was ' +
|
|
'gone. She did not miss her at all, in fact, and as she was a self-absorbed child she gave her entire thought to herself, as she had always done. If she had been older she would no doubt have been very anxious ' +
|
|
'at being left alone in the world, but she was very young, and as she had always been taken care of, she supposed she always would be. What she thought was that she would like to know if she was going to nice people, ' +
|
|
'who would be polite to her and give her her own way as her Ayah and the other native servants had done.\n\n She knew that she was not going to stay at the English clergyman\'s house where she was taken at first. ' +
|
|
'She did not want to stay. The English clergyman was poor and he had five children nearly all the same age and they wore shabby clothes and were always quarreling and snatching toys from each other. Mary hated their ' +
|
|
'untidy bungalow and was so disagreeable to them that after the first day or two nobody would play with her. By the second day they had given her a nickname which made her furious.',
|
|
new mxGeometry(0, 0, 358, 370), 'shape=rect;strokeColor=none;fillColor=#CFCECE;resizeWidth=1;whiteSpace=wrap;spacing=10;verticalAlign=top;align=left;');
|
|
item1.geometry.relative = true;
|
|
item1.geometry.offset = new mxPoint(0, 24);
|
|
item1.vertex = true;
|
|
bg1.insert(item1);
|
|
var item2 = new mxCell('fer·vor<div><font color="#808080" style="font-size: 16px">/\'fərvər/</font></div>', new mxGeometry(0, 1, 358, 110),
|
|
'dashed=0;align=left;fontSize=24;shape=rect;strokeColor=none;fillColor=#FFC107;resizeWidth=1;spacingLeft=15;spacingTop=10;html=1;');
|
|
item2.geometry.relative = true;
|
|
item2.geometry.offset = new mxPoint(0, -338);
|
|
item2.vertex = true;
|
|
bg1.insert(item2);
|
|
var item3 = new mxCell('<font color="#808080" style="font-size: 14px;">noun</font><div>\n</div><div>intense and passionate feeling.</div><div>"he talked with all the fervor of a new convert"</div><div>\n</div>' +
|
|
'<div><font color="#808080" style="font-size: 14px;">synonyms: passion, ardor, intensity, zeal, vehemerence, emotion, warmth, earnestness, avidity, eagerness, keenness, enthusiasm, excitement, animation, vigor, ' +
|
|
'energy, fire, spirit, zest, fervency</font></div>',
|
|
new mxGeometry(0, 1, 358, 180), 'dashed=0;align=left;fontSize=14;shape=rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;spacingTop=0;spacing=15;verticalAlign=top;html=1;whiteSpace=wrap;');
|
|
item3.geometry.relative = true;
|
|
item3.geometry.offset = new mxPoint(0, -228);
|
|
item3.vertex = true;
|
|
bg1.insert(item3);
|
|
|
|
var icon1 = new mxCell('', new mxGeometry(1, 0.5, 20, 20), s2 + 'volume;strokeColor=none;fillColor=#856504;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-80, -10);
|
|
icon1.vertex = true;
|
|
item2.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 20, 18), s2 + 'star;strokeColor=none;strokeColor=#856504;fillColor=none;strokeWidth=2;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-40, -9);
|
|
icon2.vertex = true;
|
|
item2.insert(icon2);
|
|
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Deep-linked modal bottom sheet');
|
|
}),
|
|
this.addEntry(dt + 'long list', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#0973AE;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#0973AE;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('', new mxGeometry(0, 0, 358, 60), s + 'rect;strokeColor=none;fillColor=#098DCA;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#084560;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#084560;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-73, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 18, 16), s2 + 'rects;strokeColor=none;fillColor=#084560;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-34, 20);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
|
|
var text1 = new mxCell('Open in', new mxGeometry(0, 0, 200, 20), 'shape=rect;strokeColor=none;fillColor=none;align=left;fontColor=#808080;fontSize=14;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(10, 99);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var icon5 = new mxCell('Keep', new mxGeometry(0, 0, 20, 20), 'shape=mxgraph.gmdl.keep;strokeColor=none;fillColor=#F4B70B;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(10, 144);
|
|
icon5.vertex = true;
|
|
bg1.insert(icon5);
|
|
var icon6 = new mxCell('Inbox', new mxGeometry(0, 0, 22, 20), 'shape=mxgraph.gmdl.inbox;strokeColor=none;fillColor=#F4B70B;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(10, 194);
|
|
icon6.vertex = true;
|
|
bg1.insert(icon6);
|
|
var icon7 = new mxCell('Hangouts', new mxGeometry(0, 0, 20, 22), 'shape=mxgraph.gmdl.hangout;strokeColor=none;fillColor=#0F9755;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(10, 244);
|
|
icon7.vertex = true;
|
|
bg1.insert(icon7);
|
|
var icon8 = new mxCell('Messenger', new mxGeometry(0, 0, 22, 20), 'shape=mxgraph.gmdl.messenger;strokeColor=none;fillColor=#F4B70B;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon8.geometry.relative = true;
|
|
icon8.geometry.offset = new mxPoint(10, 294);
|
|
icon8.vertex = true;
|
|
bg1.insert(icon8);
|
|
var icon9 = new mxCell('Google+', new mxGeometry(0, 0, 20, 20), 'shape=mxgraph.gmdl.google_plus;strokeColor=none;fillColor=#D14235;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon9.geometry.relative = true;
|
|
icon9.geometry.offset = new mxPoint(10, 344);
|
|
icon9.vertex = true;
|
|
bg1.insert(icon9);
|
|
var icon10 = new mxCell('Sheets', new mxGeometry(0, 0, 16, 20), 'shape=mxgraph.gmdl.sheets;strokeColor=none;fillColor=#21A464;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon10.geometry.relative = true;
|
|
icon10.geometry.offset = new mxPoint(12, 394);
|
|
icon10.vertex = true;
|
|
bg1.insert(icon10);
|
|
var icon11 = new mxCell('Docs', new mxGeometry(0, 0, 16, 20), 'shape=mxgraph.gmdl.docs;strokeColor=none;fillColor=#4F8EF5;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon11.geometry.relative = true;
|
|
icon11.geometry.offset = new mxPoint(12, 444);
|
|
icon11.vertex = true;
|
|
bg1.insert(icon11);
|
|
var icon12 = new mxCell('Slides', new mxGeometry(0, 0, 16, 20), 'shape=mxgraph.gmdl.slides;strokeColor=none;fillColor=#F5B910;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(12, 494);
|
|
icon12.vertex = true;
|
|
bg1.insert(icon12);
|
|
var icon13 = new mxCell('Photos', new mxGeometry(0, 0, 20, 20), 'shape=mxgraph.gmdl.photos;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;spacingLeft=20;fontSize=14;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(10, 544);
|
|
icon13.vertex = true;
|
|
bg1.insert(icon13);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Long list');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlBottom Sheets', 'GMDL / Bottom Sheets', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLButtonsPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;align=center;fontSize=12;shape=";
|
|
var s2 = "dashed=0;html=1;shape=mxgraph.gmdl.";
|
|
var anc = "shape=rect;fillColor=none;strokeColor=none;";
|
|
var fac = 'shape=ellipse;dashed=0;fillColor=#ffffff;strokeColor=none;shadow=1;fontSize=13;fontColor=#000000;align=center;verticalAlign=top;labelPosition=center;verticalLabelPosition=bottom;html=1;aspect=fixed;';
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library button ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#e0e0e0;strokeColor=none;fontStyle=1;shadow=1;fontColor=#000000;',
|
|
100, 36, 'NORMAL', 'Raised Button (Normal)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#e0e0e0;strokeColor=none;fontStyle=1;shadow=1;fontColor=#000000;',
|
|
100, 36, 'HOVER', 'Raised Button (Hover)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#e0e0e0;strokeColor=none;fontStyle=1;shadow=1;',
|
|
100, 36, 'FOCUSED', 'Raised Button (Focused)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#e0e0e0;strokeColor=none;fontStyle=1;shadow=1;fontColor=#000000;',
|
|
100, 36, 'PRESSED', 'Raised Button (Pressed)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#000000;strokeColor=none;fontStyle=1;opacity=12;fontColor=#BDBDBD;',
|
|
100, 36, 'DISABLED', 'Raised Button (Pressed)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#2196F3;strokeColor=none;fontStyle=1;shadow=1;fontColor=#ffffff;',
|
|
100, 36, 'NORMAL', 'Raised Button (Normal)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#2196F3;strokeColor=none;fontStyle=1;shadow=1;fontColor=#ffffff;',
|
|
100, 36, 'HOVER', 'Raised Button (Hover)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#2196F3;strokeColor=none;fontStyle=1;shadow=1;fontColor=#ffffff;',
|
|
100, 36, 'FOCUSED', 'Raised Button (Focused)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#2196F3;strokeColor=none;fontStyle=1;shadow=1;fontColor=#ffffff;',
|
|
100, 36, 'PRESSED', 'Raised Button (Pressed)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#ffffff;strokeColor=none;fontStyle=1;opacity=12;fontColor=#BDBDBD;shadow=0;',
|
|
100, 36, 'DISABLED', 'Raised Button (Pressed)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=none;strokeColor=none;fontStyle=1;fontColor=#000000;shadow=0;',
|
|
100, 36, 'NORMAL', 'Raised Button (Normal)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#999999;opacity=20;strokeColor=none;fontStyle=1;fontColor=#000000;shadow=0;',
|
|
100, 36, 'HOVER', 'Raised Button (Hover)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#999999;opacity=20;strokeColor=none;fontStyle=1;fontColor=#000000;shadow=0;',
|
|
100, 36, 'FOCUSED', 'Raised Button (Focused)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#999999;opacity=40;strokeColor=none;fontStyle=1;',
|
|
100, 36, 'PRESSED', 'Raised Button (Pressed)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#ffffff;opacity=26;strokeColor=none;fontStyle=1;opacity=12;fontColor=#BDBDBD;shadow=0;',
|
|
100, 36, 'DISABLED', 'Raised Button (Pressed)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=none;strokeColor=none;fontStyle=1;fontColor=#ffffff;shadow=0;',
|
|
100, 36, 'NORMAL', 'Raised Button (Normal)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#cccccc;opacity=15;strokeColor=none;fontStyle=1;fontColor=#ffffff;shadow=0;',
|
|
100, 36, 'HOVER', 'Raised Button (Hover)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#cccccc;opacity=15;strokeColor=none;fontStyle=1;fontColor=#ffffff;shadow=0;',
|
|
100, 36, 'FOCUSED', 'Raised Button (Focused)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=#cccccc;opacity=25;strokeColor=none;fontStyle=1;fontColor=#ffffff;shadow=0;',
|
|
100, 36, 'PRESSED', 'Raised Button (Pressed)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s + 'rect;fillColor=none;strokeColor=none;fontStyle=1;opacity=12;fontColor=#BDBDBD;shadow=1;',
|
|
100, 36, 'DISABLED', 'Raised Button (Pressed)', null, null, this.getTagsForStencil(gn, 'button', dt).join(' ')),
|
|
this.addEntry(dt + 'dropdown menu', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 100, 180), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('State 1', new mxGeometry(0, 0, 100, 45), 'text;fontColor=#FF4081;verticalAlign=middle;spacingLeft=13;fontSize=14;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell('State 2', new mxGeometry(0, 0, 100, 45), 'text;fontColor=#000000;verticalAlign=middle;spacingLeft=13;fontSize=14;fillColor=#eeeeee;resizeWidth=1;');
|
|
text2.geometry.offset = new mxPoint(0, 45);
|
|
text2.geometry.relative = true;
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('State 3', new mxGeometry(0, 0, 100, 45), 'text;fontColor=#000000;verticalAlign=middle;spacingLeft=13;fontSize=14;resizeWidth=1;');
|
|
text3.geometry.offset = new mxPoint(0, 90);
|
|
text3.geometry.relative = true;
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('State 4', new mxGeometry(0, 0, 100, 45), 'text;fontColor=#000000;verticalAlign=middle;spacingLeft=13;fontSize=14;resizeWidth=1;');
|
|
text4.geometry.offset = new mxPoint(0, 135);
|
|
text4.geometry.relative = true;
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
return sb.createVertexTemplateFromCells([bg1], 100, 180, 'Dropdown Menu');
|
|
}),
|
|
this.addEntry(dt + 'dropdown button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 100, 40), s + 'rect;fillColor=#ffffff;strokeColor=#cccccc;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('Arial', new mxGeometry(0, 0, 100, 40), 'text;fontColor=#000000;verticalAlign=middle;spacingLeft=13;fontSize=14;');
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), s2 + 'triangle;fillColor=#cccccc;strokeColor=none;');
|
|
icon1.geometry.offset = new mxPoint(-25, -2.5);
|
|
icon1.geometry.relative = true;
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
return sb.createVertexTemplateFromCells([bg1], 100, 30, 'Dropdown Button');
|
|
}),
|
|
this.addEntry(dt + 'dropdown button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 100, 40), s + 'rect;fillColor=#ffffff;strokeColor=#cccccc;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('Arial', new mxGeometry(0, 0, 100, 40), 'text;fontColor=#000000;verticalAlign=middle;spacingLeft=13;fontSize=14;');
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var part1 = new mxCell('', new mxGeometry(1, 0, 40, 40), 'shape=rect;fillColor=none;strokeColor=#cccccc;resizeHeight=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(-40, 0);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var icon1 = new mxCell('', new mxGeometry(0.5, 0.5, 10, 5), s2 + 'triangle;fillColor=#cccccc;strokeColor=none;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-5, -2.5);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
return sb.createVertexTemplateFromCells([bg1], 100, 40, 'Dropdown Button (Editable)');
|
|
}),
|
|
this.addEntry(dt + 'dropdown button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 100, 150), s + 'rect;fillColor=#ffffff;strokeColor=#cccccc;shadow=1;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('Arial', new mxGeometry(0, 0, 100, 40), 'shape=rect;fontColor=#000000;verticalAlign=middle;spacingLeft=13;fontSize=14;strokeColor=#cccccc;align=left;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), s2 + 'triangle;fillColor=#cccccc;strokeColor=none;');
|
|
icon1.geometry.offset = new mxPoint(-25, -2.5);
|
|
icon1.geometry.relative = true;
|
|
icon1.vertex = true;
|
|
text1.insert(icon1);
|
|
var text2 = new mxCell('Calibri', new mxGeometry(0, 0, 100, 30), 'shape=rect;align=left;fontColor=#000000;verticalAlign=middle;spacingLeft=13;fontSize=14;fillColor=#eeeeee;strokeColor=none;resizeWidth=1;');
|
|
text2.geometry.offset = new mxPoint(0, 50);
|
|
text2.geometry.relative = true;
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('Courier', new mxGeometry(0, 0, 100, 30), 'text;fontColor=#000000;verticalAlign=middle;spacingLeft=13;fontSize=14;resizeWidth=1;');
|
|
text3.geometry.offset = new mxPoint(0, 80);
|
|
text3.geometry.relative = true;
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('Verdana', new mxGeometry(0, 0, 100, 30), 'text;fontColor=#000000;verticalAlign=middle;spacingLeft=13;fontSize=14;resizeWidth=1;');
|
|
text4.geometry.offset = new mxPoint(0, 110);
|
|
text4.geometry.relative = true;
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
return sb.createVertexTemplateFromCells([bg1], 100, 150, 'Dropdown Button (Selected)');
|
|
}),
|
|
this.addEntry(dt + 'dropdown button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 100, 150), s + 'rect;fillColor=#ffffff;strokeColor=#cccccc;shadow=1;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('Arial', new mxGeometry(0, 0, 100, 40), 'shape=rect;fontColor=#000000;verticalAlign=middle;spacingLeft=13;fontSize=14;strokeColor=#cccccc;align=left;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var part1 = new mxCell('', new mxGeometry(1, 0, 40, 40), 'shape=rect;fillColor=none;strokeColor=#cccccc;resizeHeight=1;');
|
|
part1.geometry.offset = new mxPoint(-40, 0);
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
text1.insert(part1);
|
|
var icon1 = new mxCell('', new mxGeometry(0.5, 0.5, 10, 5), s2 + 'triangle;fillColor=#cccccc;strokeColor=none;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-5, - 2.5);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var text2 = new mxCell('Calibri', new mxGeometry(0, 0, 100, 30), 'text;fontColor=#000000;verticalAlign=middle;spacingLeft=13;fontSize=14;resizeWidth=1;');
|
|
text2.geometry.offset = new mxPoint(0, 50);
|
|
text2.geometry.relative = true;
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('Courier', new mxGeometry(0, 0, 100, 30), 'text;fontColor=#000000;verticalAlign=middle;spacingLeft=13;fontSize=14;resizeWidth=1;');
|
|
text3.geometry.offset = new mxPoint(0, 80);
|
|
text3.geometry.relative = true;
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('Verdana', new mxGeometry(0, 0, 100, 30), 'text;fontColor=#000000;verticalAlign=middle;spacingLeft=13;fontSize=14;resizeWidth=1;');
|
|
text4.geometry.offset = new mxPoint(0, 110);
|
|
text4.geometry.relative = true;
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
return sb.createVertexTemplateFromCells([bg1], 100, 150, 'Dropdown Button (Selected, Editable)');
|
|
}),
|
|
this.addEntry(dt + 'persistent footer button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 300, 40), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=0;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('BUTTON', new mxGeometry(0, 0, 75, 40), 'shape=rect;strokeColor=none;fillColor=none;fontSize=12;fontColor=#2196F3;dashed=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('BUTTON', new mxGeometry(75, 0, 75, 40), 'shape=rect;strokeColor=none;fillColor=none;fontSize=12;fontColor=#2196F3;dashed=0;');
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('BUTTON', new mxGeometry(150, 0, 75, 40), 'shape=rect;strokeColor=none;fillColor=none;fontSize=12;fontColor=#2196F3;dashed=0;');
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('BUTTON', new mxGeometry(225, 0, 75, 40), 'shape=rect;strokeColor=none;fillColor=none;fontSize=12;fontColor=#2196F3;dashed=0;');
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
return sb.createVertexTemplateFromCells([bg1], 300, 40, 'Persistent Footer Buttons');
|
|
}),
|
|
this.addEntry(dt + 'persistent footer button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 300, 40), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=0;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('BUTTON', new mxGeometry(0, 0, 75, 40), 'shape=rect;strokeColor=none;fillColor=none;fontSize=12;fontColor=#2196F3;dashed=0;resizeHeight=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('BUTTON', new mxGeometry(0, 0, 75, 40), 'shape=rect;strokeColor=none;fillColor=none;fontSize=12;fontColor=#2196F3;dashed=0;resizeHeight=1;');
|
|
part2.geometry.offset = new mxPoint(75, 0);
|
|
part2.geometry.relative = true;
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('BUTTON', new mxGeometry(0, 0, 75, 40), 'shape=rect;strokeColor=none;fillColor=none;fontSize=12;fontColor=#2196F3;dashed=0;resizeHeight=1;');
|
|
part3.geometry.offset = new mxPoint(150, 0);
|
|
part3.geometry.relative = true;
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('BUTTON', new mxGeometry(0, 0, 75, 40), 'shape=rect;strokeColor=none;fillColor=none;fontSize=12;fontColor=#2196F3;dashed=0;resizeHeight=1;');
|
|
part4.geometry.offset = new mxPoint(225, 0);
|
|
part4.geometry.relative = true;
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
return sb.createVertexTemplateFromCells([bg1], 300, 40, 'Persistent Footer Buttons (fixed)');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), 'shape=ellipse;fillColor=#FF4081;strokeColor=none;shadow=1;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(20, 20, 16, 16), s2 + 'plus;strokeColor=#ffffff;strokeWidth=2;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'edit;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'star;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 19, 20, 18), s2 + 'heart;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 19, 20, 18), s2 + 'reply;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 20, 24, 16), s2 + 'users;strokeColor=#ffffff;fillColor=#737373;strokeWidth=2;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'gps;strokeColor=#737373;fillColor=#737373;strokeWidth=2;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'share2;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'navigate;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'chat;strokeColor=#737373;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(22, 18, 12, 20), s2 + 'voice;strokeColor=#737373;fillColor=#737373;strokeWidth=2;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(20, 16, 16, 24), s2 + 'google;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 20, 24, 16), s2 + 'video;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 17, 24, 22), s2 + 'gallery;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 17, 24, 22), s2 + 'birthday;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 20, 24, 16), s2 + 'cloud;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(20, 20, 16, 16), s2 + 'x;strokeColor=#737373;strokeWidth=2;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(22, 18, 12, 20), s2 + 'bookmark;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'calendar;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(17, 20, 22, 16), s2 + 'attractions;strokeColor=#ffffff;fillColor=#737373;strokeWidth=1;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(20, 18, 16, 20), s2 + 'dining;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'education;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'family;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 19, 20, 18), s2 + 'health;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'office;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'promotions;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'radio;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'recipes;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'sports;strokeColor=none;fillColor=#737373;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 56, 56), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(18, 18, 20, 20), s2 + 'travel;strokeColor=none;fillColor=#737373;direction=south;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 56, 56, 'Floating Action Button');
|
|
}),
|
|
this.addEntry(dt + 'floating action button mini', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 40, 40), fac);
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(12, 12, 16, 16), s2 + 'plus;strokeColor=#737373;strokeWidth=2;shadow=0;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 40, 40, 'Floating Action Button (Mini)');
|
|
}),
|
|
this.addEntry(dt + 'toolbar', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 358, 64), 'shape=rect;fillColor=#ffffff;strokeColor=none;graientColor=none;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0.25, 0.5, 24, 18), s2 + 'camera;strokeColor=#ffffff;fillColor=#737373;strokeWidth=2;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(-12, -9);
|
|
part1.vertex = true;
|
|
bg.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(0.5, 0.5, 24, 18), s2 + 'video;strokeColor=none;fillColor=#737373;strokeWidth=2;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-12, -9);
|
|
part2.vertex = true;
|
|
bg.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(0.75, 0.5, 20, 22), s2 + 'gallery;strokeColor=none;fillColor=#737373;strokeWidth=2;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(-10, -11);
|
|
part3.vertex = true;
|
|
bg.insert(part3);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Toolbar');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var part1 = new mxCell('', new mxGeometry(8, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#D1D3D4;shadow=1;gradientColor=none;');
|
|
part1.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0.5, 0.5, 12, 16), s2 +'copy;strokeColor=#666666;fillColor=#666666;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-6, -8);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var part2 = new mxCell('', new mxGeometry(8, 50, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#D1D3D4;shadow=1;gradientColor=none;');
|
|
part2.vertex = true;
|
|
var icon2 = new mxCell('', new mxGeometry(0.5, 0.5, 18, 16), s2 +'print;strokeColor=none;fillColor=#666666;strokeWidth=2;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-9, -8);
|
|
icon2.vertex = true;
|
|
part2.insert(icon2);
|
|
var part3 = new mxCell('', new mxGeometry(0, 100, 56, 56), 'shape=ellipse;strokeColor=none;fillColor=#FF4081;shadow=1;gradientColor=none;');
|
|
part3.vertex = true;
|
|
var icon3 = new mxCell('', new mxGeometry(0.5, 0.5, 16, 16), s2 +'x;strokeColor=#ffffff;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-8, -8);
|
|
icon3.vertex = true;
|
|
part3.insert(icon3);
|
|
return sb.createVertexTemplateFromCells([part1, part2, part3], 50, 156, 'Floating action buttons');
|
|
}),
|
|
this.addEntry(dt + 'related actions', function()
|
|
{
|
|
var part1 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#ffffff;shadow=1;gradientColor=none;');
|
|
part1.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 16), s2 +'doc;strokeColor=#ffffff;fillColor=#737373;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-7, -8);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var part2 = new mxCell('', new mxGeometry(80, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#ffffff;shadow=1;gradientColor=none;');
|
|
part2.vertex = true;
|
|
var icon2 = new mxCell('', new mxGeometry(0.5, 0.5, 16, 16), s2 +'spreadsheet;strokeColor=#ffffff;fillColor=#737373;strokeWidth=2;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-9, -8);
|
|
icon2.vertex = true;
|
|
part2.insert(icon2);
|
|
var part3 = new mxCell('', new mxGeometry(160, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#ffffff;shadow=1;gradientColor=none;');
|
|
part3.vertex = true;
|
|
var icon3 = new mxCell('', new mxGeometry(0.5, 0.5, 16, 16), s2 +'sheet;strokeColor=none;fillColor=#737373;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-8, -8);
|
|
icon3.vertex = true;
|
|
part3.insert(icon3);
|
|
return sb.createVertexTemplateFromCells([part1, part2, part3], 200, 40, 'Related actions');
|
|
}),
|
|
this.addEntry(dt + 'floating action button', function()
|
|
{
|
|
var part1 = new mxCell('', new mxGeometry(8, 0, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;shadow=1;gradientColor=none;');
|
|
part1.vertex = true;
|
|
var part2 = new mxCell('', new mxGeometry(8, 80, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;shadow=1;gradientColor=none;');
|
|
part2.vertex = true;
|
|
var part3 = new mxCell('', new mxGeometry(8, 160, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;shadow=1;gradientColor=none;');
|
|
part3.vertex = true;
|
|
var part4 = new mxCell('', new mxGeometry(8, 240, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;shadow=1;gradientColor=none;');
|
|
part4.vertex = true;
|
|
var part5 = new mxCell('', new mxGeometry(8, 320, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;shadow=1;gradientColor=none;');
|
|
part5.vertex = true;
|
|
var part6 = new mxCell('', new mxGeometry(0, 400, 56, 56), 'shape=ellipse;strokeColor=none;fillColor=#ffffff;shadow=1;gradientColor=none;');
|
|
part6.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0.5, 0.5, 16, 16), s2 +'x;strokeColor=#737373;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-8, -8);
|
|
icon1.vertex = true;
|
|
part6.insert(icon1);
|
|
return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6], 50, 456, 'Floating action buttons');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlButtons', 'GMDL / Buttons', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLCardsPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;shape=";
|
|
var s2 = "dashed=0;shape=mxgraph.gmdl.";
|
|
var anc = "shape=rect;fillColor=none;strokeColor=none;";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library card ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 356), 'shape=rect;fillColor=#ffffff;strokeColor=none;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0, 342, 196), 'shape=rect;strokeColor=none;fillColor=#BDBDBD;whiteSpace=wrap;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('Kangaroo Valley Safari', new mxGeometry(0, 0.5506, 342, 45), 'text;verticalAlign=bottom;fontSize=23;spacingLeft=16;spacing=0;spacingBottom=-5;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('Located two hours south of Sydney in the Southern Highlands of New Sout Wales, ...',
|
|
new mxGeometry(0, 0.5506, 342, 76), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=14;resizeWidth=1;resizeHeight=1;');
|
|
part3.geometry.relative = 1;
|
|
part3.geometry.offset = new mxPoint(0, 50);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var anchor1 = new mxCell('', new mxGeometry(0, 356, 0, 0), anc);
|
|
anchor1.vertex = true;
|
|
bg1.insert(anchor1);
|
|
var part4 = new mxCell('SHARE',
|
|
new mxGeometry(0, -44, 80, 44), 'text;fontSize=12;fontColor=#FFA534;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, -44);
|
|
part4.vertex = true;
|
|
anchor1.insert(part4);
|
|
var part5 = new mxCell('EXPLORE',
|
|
new mxGeometry(80, -44, 80, 44), 'text;fontSize=12;fontColor=#FFA534;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(80, -44);
|
|
part5.vertex = true;
|
|
anchor1.insert(part5);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 356, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card collection', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#455A64;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#2D3986;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Travel stream', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#607D8B;resizeWidth=1;fontSize=22;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;spacingLeft=72;align=left;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-30, - 8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var bg2 = new mxCell('', new mxGeometry(0, 0, 358, 366), s2 + 'marginRect;rectMargin=8;fillColor=#ffffff;strokeColor=none;shadow=1;resizeWidth=1;resizeHeight=1;');
|
|
bg2.geometry.relative = true;
|
|
bg2.geometry.offset = new mxPoint(0, 81);
|
|
bg2.vertex = true;
|
|
bg1.insert(bg2);
|
|
var part1 = new mxCell('Top 10 Australian beaches',
|
|
new mxGeometry(0, 0, 358, 204), s2 + 'marginRect;rectMargin=8;rectMarginBottom=-8;strokeColor=none;fillColor=#BDBDBD;whiteSpace=wrap;fontColor=#FFFFFF;verticalAlign=bottom;align=left;fontSize=24;spacing=16;');
|
|
part1.vertex = true;
|
|
bg2.insert(part1);
|
|
var part2 = new mxCell('Number 10', new mxGeometry(0, 0.555, 358, 34), 'text;verticalAlign=middle;fontSize=14;spacingLeft=24;spacing=0;spacingBottom=-5;fontColor=#999999;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.vertex = true;
|
|
bg2.insert(part2);
|
|
var part3 = new mxCell('Whiteheaven Beach\nWhitsunday Island, Whitsunday Islands',
|
|
new mxGeometry(0, 0.555, 358, 50), 'text;whiteSpace=wrap;spacingLeft=24;spacingRight=16;spacing=0;fontSize=14;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 34);
|
|
part3.vertex = true;
|
|
bg2.insert(part3);
|
|
var part4 = new mxCell('SHARE',
|
|
new mxGeometry(0, 1, 80, 44), 'text;fontSize=12;fontColor=#FFA534;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(8, -52);
|
|
part4.vertex = true;
|
|
bg2.insert(part4);
|
|
var part5 = new mxCell('EXPLORE',
|
|
new mxGeometry(0, 1, 80, 44), 'text;fontSize=12;fontColor=#FFA534;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(88, -52);
|
|
part5.vertex = true;
|
|
bg2.insert(part5);
|
|
var part6 = new mxCell('Kangaroo Valley Safari', new mxGeometry(0, 0.695, 358, 180), s2 + 'marginRect;rectMargin=8;strokeColor=none;fillColor=#BDBDBD;whiteSpace=wrap;fontColor=#FFFFFF;verticalAlign=bottom;align=left;fontSize=24;spacing=16;spacingBottom=24;resizeWidth=1;resizeHeight=1;');
|
|
part6.geometry.relative = true;
|
|
part6.vertex = true;
|
|
bg1.insert(part6);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Card Collection');
|
|
}),
|
|
this.addEntry(dt + 'card collection', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#C2185B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('My music', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#E91E63;resizeWidth=1;fontSize=22;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;spacingLeft=72;align=left;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#6F0E2F;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#2D566B;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-30, - 8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var bg2 = new mxCell('', new mxGeometry(0, 0, 358, 172), s2 + 'marginRect;rectMargin=8;rectMarginBottom=-4;fillColor=#2D566B;strokeColor=none;shadow=1;resizeWidth=1;resizeHeight=1;');
|
|
bg2.geometry.relative = true;
|
|
bg2.geometry.offset = new mxPoint(0, 81);
|
|
bg2.vertex = true;
|
|
bg1.insert(bg2);
|
|
var part1 = new mxCell('Unlimited music now',
|
|
new mxGeometry(0, 0, 342, 60), 'text;whiteSpace=wrap;fontColor=#FFFFFF;verticalAlign=bottom;align=left;fontSize=24;spacing=16;spacingBottom=-8;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg2.insert(part1);
|
|
var part2 = new mxCell('Listen to your favorite artists and albums whenever wherever online and offline.',
|
|
new mxGeometry(0, 0, 342, 50), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=14;fontColor=#FFFFFF;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 55);
|
|
part2.vertex = true;
|
|
bg2.insert(part2);
|
|
var part3 = new mxCell('LISTEN NOW', new mxGeometry(0, 1, 120, 52), 'text;verticalAlign=middle;fontSize=13;spacingLeft=0;spacing=0;spacingBottom=0;fontColor=#FFFFFF;align=center;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(8, -52);
|
|
part3.vertex = true;
|
|
bg2.insert(part3);
|
|
var bg3 = new mxCell('', new mxGeometry(0, 255, 358, 156), s2 + 'marginRect;rectMargin=8;rectMarginTop=-4;rectMarginBottom=-4;fillColor=#227586;strokeColor=none;shadow=1;');
|
|
bg3.vertex = true;
|
|
bg1.insert(bg3);
|
|
var part1 = new mxCell('Supermodel',
|
|
new mxGeometry(0, 0, 342, 60), 'text;whiteSpace=wrap;fontColor=#FFFFFF;verticalAlign=bottom;align=left;fontSize=24;spacing=16;spacingBottom=-8;');
|
|
part1.vertex = true;
|
|
bg3.insert(part1);
|
|
var part2 = new mxCell('Foster the People',
|
|
new mxGeometry(0, 55, 342, 50), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=14;fontColor=#FFFFFF;');
|
|
part2.vertex = true;
|
|
bg3.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(194, 0, 164, 156), s2 + 'marginRect;rectMargin=24;rectMarginRight=8;fillColor=#BDBDBD;strokeColor=none;');
|
|
part3.geometry.offset = new mxPoint(-160, 0);
|
|
part3.vertex = true;
|
|
bg3.insert(part3);
|
|
var bg4 = new mxCell('', new mxGeometry(0, 411, 358, 156), s2 + 'marginRect;rectMargin=8;rectMarginTop=-4;rectMarginBottom=-4;fillColor=#871E6A;strokeColor=none;shadow=1;');
|
|
bg4.vertex = true;
|
|
bg1.insert(bg4);
|
|
var part1 = new mxCell('Halcyon Days',
|
|
new mxGeometry(0, 0, 342, 60), 'text;whiteSpace=wrap;fontColor=#FFFFFF;verticalAlign=bottom;align=left;fontSize=24;spacing=16;spacingBottom=-8;');
|
|
part1.vertex = true;
|
|
bg4.insert(part1);
|
|
var part2 = new mxCell('Ellie Goulding',
|
|
new mxGeometry(0, 55, 342, 50), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=14;fontColor=#FFFFFF;');
|
|
part2.vertex = true;
|
|
bg4.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(194, 0, 164, 156), s2 + 'marginRect;rectMargin=24;rectMarginRight=8;fillColor=#BDBDBD;strokeColor=none;');
|
|
part3.geometry.offset = new mxPoint(-160, 0);
|
|
part3.vertex = true;
|
|
bg4.insert(part3);
|
|
var bg5 = new mxCell('', new mxGeometry(0, 567, 358, 35), s2 + 'marginRect;rectMargin=8;rectMarginTop=-4;rectMarginBottom=-4;fillColor=#AB1656;strokeColor=none;shadow=1;');
|
|
bg5.vertex = true;
|
|
bg1.insert(bg5);
|
|
var part3 = new mxCell('', new mxGeometry(194, 0, 164, 35), s2 + 'marginRect;rectMargin=24;rectMarginRight=8;fillColor=#BDBDBD;strokeColor=none;');
|
|
part3.geometry.offset = new mxPoint(-160, 0);
|
|
part3.vertex = true;
|
|
bg5.insert(part3);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Card Collection');
|
|
}),
|
|
this.addEntry(dt + 'card collection varied layouts', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#303F9F;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Discover', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#3F51B5;;resizeWidth=1;fontSize=22;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;spacingLeft=72;align=left;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-30, - 8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var bg2 = new mxCell('Pre-fab homes', new mxGeometry(0, 0, 358, 233), s2 + 'marginRect;rectMargin=6;rectMarginBottom=-3;fillColor=#BDBDBD;strokeColor=none;shadow=1;fontColor=#FFFFFF;fontSize=24;verticalAlign=bottom;spacingBottom=54;spacing=22;align=left;resizeWidth=1;resizeHeight=1;');
|
|
bg2.geometry.relative = true;
|
|
bg2.geometry.offset = new mxPoint(0, 81);
|
|
bg2.vertex = true;
|
|
bg1.insert(bg2);
|
|
var part1 = new mxCell('',
|
|
new mxGeometry(0, 1, 358, 51), s2 + 'marginRect;rectMargin=6;rectMarginBottom=-3;fillColor=#ffffff;strokeColor=none;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -51);
|
|
part1.vertex = true;
|
|
bg2.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(1, 0.5, 18, 16), s2 + 'heart;fillColor=#BDBDBD;strokeColor=none;fontStyle=1;fontColor=#999999;fontSize=12;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-155, -8);
|
|
part2.vertex = true;
|
|
part1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(1, 0.5, 16, 20), s2 + 'bookmark;fillColor=#BDBDBD;strokeColor=none;fontStyle=1;fontColor=#999999;fontSize=12;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(-102, -10);
|
|
part3.vertex = true;
|
|
part1.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(1, 0.5, 16, 20), s2 + 'share;fillColor=#BDBDBD;strokeColor=#BDBDBD;fontStyle=1;fontColor=#999999;fontSize=12;strokeWidth=2;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(-49, -10);
|
|
part4.vertex = true;
|
|
part1.insert(part4);
|
|
var bg3 = new mxCell('Favorite\nroad trips', new mxGeometry(0, 0.3656, 179, 222), s2 + 'marginRect;rectMargin=3;rectMarginLeft=3;fillColor=#BDBDBD;strokeColor=none;shadow=1;fontColor=#ffffff;fontSize=24;whiteSpace=wrap;spacing=16;verticalAlign=bottom;align=left;spacingBottom=48;resizeWidth=1;resizeHeight=1;');
|
|
bg3.geometry.relative = true;
|
|
bg3.geometry.offset = new mxPoint(0, 81);
|
|
bg3.vertex = true;
|
|
bg1.insert(bg3);
|
|
var part5 = new mxCell('',
|
|
new mxGeometry(0, 1, 179, 51), s2 + 'marginRect;rectMargin=6;rectMarginBottom=-3;rectMarginRight=-3;fillColor=#ffffff;strokeColor=none;resizeWidth=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, -51);
|
|
part5.vertex = true;
|
|
bg3.insert(part5);
|
|
var part6 = new mxCell('', new mxGeometry(1, 0.5, 18, 16), s2 + 'heart;fillColor=#BDBDBD;strokeColor=none;fontStyle=1;fontColor=#999999;fontSize=12;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(-155, -8);
|
|
part6.vertex = true;
|
|
part5.insert(part6);
|
|
var part7 = new mxCell('', new mxGeometry(1, 0.5, 16, 20), s2 + 'bookmark;fillColor=#BDBDBD;strokeColor=none;fontStyle=1;fontColor=#999999;fontSize=12;');
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(-102, -10);
|
|
part7.vertex = true;
|
|
part5.insert(part7);
|
|
var part8 = new mxCell('', new mxGeometry(1, 0.5, 16, 20), s2 + 'share;fillColor=#BDBDBD;strokeColor=#BDBDBD;fontStyle=1;fontColor=#999999;fontSize=12;strokeWidth=2;');
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(-49, -10);
|
|
part8.vertex = true;
|
|
part5.insert(part8);
|
|
var bg4 = new mxCell('Best\nairlines', new mxGeometry(0.5, 0.3656, 179, 222), s2 + 'marginRect;rectMargin=3;rectMarginRight=3;fillColor=#BDBDBD;strokeColor=none;shadow=1;fontColor=#ffffff;fontSize=24;whiteSpace=wrap;spacing=16;verticalAlign=bottom;align=left;spacingBottom=48;resizeWidth=1;resizeHeight=1;');
|
|
bg4.geometry.relative = true;
|
|
bg4.geometry.offset = new mxPoint(0,81);
|
|
bg4.vertex = true;
|
|
bg1.insert(bg4);
|
|
var part9 = new mxCell('',
|
|
new mxGeometry(0, 1, 179, 51), s2 + 'marginRect;rectMargin=6;rectMarginBottom=-3;rectMarginLeft=-3;fillColor=#ffffff;strokeColor=none;resizeWidth=1;');
|
|
part9.geometry.relative = true;
|
|
part9.geometry.offset = new mxPoint(0, -51);
|
|
part9.vertex = true;
|
|
bg4.insert(part9);
|
|
var part10 = new mxCell('', new mxGeometry(1, 0.5, 18, 16), s2 + 'heart;fillColor=#BDBDBD;strokeColor=none;fontStyle=1;fontColor=#999999;fontSize=12;');
|
|
part10.geometry.relative = true;
|
|
part10.geometry.offset = new mxPoint(-155, -8);
|
|
part10.vertex = true;
|
|
part9.insert(part10);
|
|
var part11 = new mxCell('', new mxGeometry(1, 0.5, 16, 20), s2 + 'bookmark;fillColor=#BDBDBD;strokeColor=none;fontStyle=1;fontColor=#999999;fontSize=12;');
|
|
part11.geometry.relative = true;
|
|
part11.geometry.offset = new mxPoint(-102, -10);
|
|
part11.vertex = true;
|
|
part9.insert(part11);
|
|
var part12 = new mxCell('', new mxGeometry(1, 0.5, 16, 20), s2 + 'share;fillColor=#BDBDBD;strokeColor=#BDBDBD;fontStyle=1;fontColor=#999999;fontSize=12;strokeWidth=2;');
|
|
part12.geometry.relative = true;
|
|
part12.geometry.offset = new mxPoint(-49, -10);
|
|
part12.vertex = true;
|
|
part9.insert(part12);
|
|
var bg5 = new mxCell('', new mxGeometry(0, 0.71, 358, 60), s2 + 'marginRect;rectMargin=6;rectMarginBottom=-3;fillColor=#BDBDBD;strokeColor=none;shadow=1;resizeWidth=1;resizeHeight=1;');
|
|
bg5.geometry.relative = true;
|
|
bg5.geometry.offset = new mxPoint(0, 81);
|
|
bg5.vertex = true;
|
|
bg1.insert(bg5);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Card collection with varied layouts');
|
|
}),
|
|
this.addEntry(dt + 'card collection', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#00796B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Feed reader', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#009688;;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;spacingLeft=72;align=left;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#00423B;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'refresh;strokeColor=#00423B;fillColor=#00423B;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, -8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#00423B;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, -8);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bg2 = new mxCell('', new mxGeometry(0, 0, 358, 272), s2 + 'marginRect;rectMargin=8;rectMarginBottom=-4;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;resizeHeight=1;resizeWidth=1;');
|
|
bg2.geometry.relative = true;
|
|
bg2.geometry.offset = new mxPoint(0, 81);
|
|
bg2.vertex = true;
|
|
bg1.insert(bg2);
|
|
var part1 = new mxCell('', new mxGeometry(1, 0, 76, 76), 'shape=rect;fillColor=#BDBDBD;strokeColor=none;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(-96, 20);
|
|
part1.vertex = true;
|
|
bg2.insert(part1);
|
|
var text2 = new mxCell('Travel', new mxGeometry(0, 0, 250, 40), 'text;verticalAlign=bottom;spacingLeft=24;fontSize=13;fontColor=#999999;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 8);
|
|
text2.vertex = true;
|
|
bg2.insert(text2);
|
|
var text3 = new mxCell('New York City', new mxGeometry(0, 0, 250, 40), 'text;verticalAlign=middle;spacingLeft=24;fontSize=22;fontColor=#000000;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 42);
|
|
text3.vertex = true;
|
|
bg2.insert(text3);
|
|
var text4 = new mxCell('Day reappeared. The tempest still raged with undiminished fury; but the window returned to the south-east. It was a favourable change and the Tankadere again.',
|
|
new mxGeometry(0, 0, 342, 88), 'text;whitespace=wrap;whiteSpace=wrap;spacing=16;fontSize=14;verticalAlign=top;spacingBottom=0;spacingTop=-10;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 108);
|
|
text4.vertex = true;
|
|
bg2.insert(text4);
|
|
var text5 = new mxCell('ACTION 1', new mxGeometry(0, 1, 98, 48), 'text;verticalAlign=middle;spacingLeft=0;fontSize=13;fontColor=#4C5DBA;align=center;spacing=0;fontStyle=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, -52);
|
|
text5.vertex = true;
|
|
bg2.insert(text5);
|
|
var text6 = new mxCell('ACTION 2', new mxGeometry(0, 1, 90, 48), 'text;verticalAlign=middle;spacingLeft=8;fontSize=13;fontColor=#4C5DBA;align=center;spacing=0;fontStyle=1');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(98, -52);
|
|
text6.vertex = true;
|
|
bg2.insert(text6);
|
|
var bg3 = new mxCell('', new mxGeometry(0, 0.425, 358, 222), s2 + 'marginRect;rectMargin=8;rectMarginTop=-4;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;resizeHeight=1;resizeWidth=1;');
|
|
bg3.geometry.relative = true;
|
|
bg3.geometry.offset = new mxPoint(0, 81);
|
|
bg3.vertex = true;
|
|
bg1.insert(bg3);
|
|
var part1 = new mxCell('', new mxGeometry(1, 0, 76, 76), 'shape=rect;fillColor=#BDBDBD;strokeColor=none;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(-96, 20);
|
|
part1.vertex = true;
|
|
bg3.insert(part1);
|
|
var text2 = new mxCell('Recreation', new mxGeometry(0, 0, 250, 40), 'text;verticalAlign=bottom;spacingLeft=24;fontSize=13;fontColor=#999999;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 8);
|
|
text2.vertex = true;
|
|
bg3.insert(text2);
|
|
var text3 = new mxCell('Fun at the Beach', new mxGeometry(0, 0, 250, 40), 'text;verticalAlign=middle;spacingLeft=24;fontSize=22;fontColor=#000000;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 42);
|
|
text3.vertex = true;
|
|
bg3.insert(text3);
|
|
var text4 = new mxCell('There were some signs of a calm at noon and these became more distinct as the sun.',
|
|
new mxGeometry(0, 0, 342, 88), 'text;whitespace=wrap;whiteSpace=wrap;spacing=16;fontSize=14;verticalAlign=top;spacingBottom=0;spacingTop=-10;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 108);
|
|
text4.vertex = true;
|
|
bg3.insert(text4);
|
|
var text5 = new mxCell('ACTION 1', new mxGeometry(0, 1, 98, 48), 'text;verticalAlign=middle;spacingLeft=0;fontSize=13;fontColor=#4C5DBA;align=center;spacing=0;fontStyle=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, -52);
|
|
text5.vertex = true;
|
|
bg3.insert(text5);
|
|
var text6 = new mxCell('ACTION 2', new mxGeometry(0, 1, 90, 48), 'text;verticalAlign=middle;spacingLeft=8;fontSize=13;fontColor=#4C5DBA;align=center;spacing=0;fontStyle=1');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(98, -52);
|
|
text6.vertex = true;
|
|
bg3.insert(text6);
|
|
var bg4 = new mxCell('', new mxGeometry(0, 0.76, 358, 40), s2 + 'marginRect;rectMargin=8;;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;resizeHeight=1;resizeWidth=1;');
|
|
bg4.geometry.relative = true;
|
|
bg4.geometry.offset = new mxPoint(0, 81);
|
|
bg4.vertex = true;
|
|
bg1.insert(bg4);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Card collection');
|
|
}),
|
|
this.addEntry(dt + 'card collection', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ECECEC;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#B4B4B4;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Notes', new mxGeometry(0, 0, 358, 57), 'text;strokeColor=none;fillColor=none;resizeWidth=1;fontSize=20;fontColor=#333333;spacingTop=-3;verticalAlign=middle;spacingLeft=72;align=left;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#333333;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#333333;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-30, - 8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var bg2 = new mxCell('Call\nJennifer', new mxGeometry(0, 0, 179, 140), s2 + 'marginRect;rectMargin=4;rectMarginTop=4;rectMarginLeft=4;fillColor=#00BCD4;strokeColor=none;shadow=1;fontColor=#FFFFFF;align=left;verticalAlign=top;fontSize=24;spacingLeft=24;spacingTop=14;resizeHeight=1;resizeWidth=1;');
|
|
bg2.geometry.relative = true;
|
|
bg2.geometry.offset = new mxPoint(0, 81);
|
|
bg2.vertex = true;
|
|
bg1.insert(bg2);
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 167, 20), 'shape=line;strokeColor=#00AEC4;shadow=0;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(8, -54);
|
|
part1.vertex = true;
|
|
bg2.insert(part1);
|
|
var text1 = new mxCell('May 24, 2017', new mxGeometry(0, 1, 179, 40), 'text;fontColor=#FFFFFF;verticalAlign=middle;spacingLeft=24;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, -44);
|
|
text1.vertex = true;
|
|
bg2.insert(text1);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 1, 20, 24), s2 + 'telephone;fillColor=#ffffff;strokeColor=none;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-33, -36);
|
|
icon1.vertex = true;
|
|
bg2.insert(icon1);
|
|
var bg3 = new mxCell('To bring:\n\n- camping gear\n- lantern\n- smores\n- extra blankets\n- towel for pup\n- warm socks\n- first aid kit',
|
|
new mxGeometry(0, 0.217, 179, 196), s2 + 'marginRect;rectMargin=4;rectMarginLeft=4;fillColor=#3F51B5;strokeColor=none;shadow=1;fontColor=#FFFFFF;align=left;verticalAlign=top;fontSize=13;spacingLeft=24;spacingTop=10;resizeHeight=1;resizeWidth=1;');
|
|
bg3.geometry.relative = true;
|
|
bg3.geometry.offset = new mxPoint(0, 81);
|
|
bg3.vertex = true;
|
|
bg1.insert(bg3);
|
|
var bg4 = new mxCell('Yuna\ntickets on\nsale 6/24', new mxGeometry(0, 0.52, 179, 168), s2 + 'marginRect;rectMargin=4;rectMarginLeft=4;fillColor=#607D8B;strokeColor=none;shadow=1;fontColor=#FFFFFF;align=left;verticalAlign=top;fontSize=24;spacingLeft=24;spacingTop=10;resizeHeight=1;resizeWidth=1;');
|
|
bg4.geometry.relative = true;
|
|
bg4.geometry.offset = new mxPoint(0, 81);
|
|
bg4.vertex = true;
|
|
bg1.insert(bg4);
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 167, 20), 'shape=line;strokeColor=#597481;shadow=0;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(8, -54);
|
|
part1.vertex = true;
|
|
bg4.insert(part1);
|
|
var text1 = new mxCell('Marh 24, 2017', new mxGeometry(0, 1, 179, 40), 'text;fontColor=#FFFFFF;verticalAlign=middle;spacingLeft=16;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, -44);
|
|
text1.vertex = true;
|
|
bg4.insert(text1);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 1, 18, 20), s2 + 'calendar;fillColor=#ffffff;strokeColor=none;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-32, -34);
|
|
icon1.vertex = true;
|
|
bg4.insert(icon1);
|
|
var bg5 = new mxCell('To bring:\n\n- camping gear\n- lantern\n- smores\n- extra blankets\n- towel for pup\n- warm socks\n- first aid kit',
|
|
new mxGeometry(0, 0.78, 179, 40), s2 + 'marginRect;rectMargin=4;rectMarginLeft=4;fillColor=#FFEB3B;strokeColor=none;shadow=1;fontColor=#FFFFFF;align=left;verticalAlign=top;fontSize=13;spacingLeft=16;spacingTop=6;resizeWidth=1;');
|
|
bg5.geometry.relative = true;
|
|
bg5.geometry.offset = new mxPoint(0, 81);
|
|
bg5.vertex = true;
|
|
bg1.insert(bg5);
|
|
var bg6 = new mxCell('Groceries', new mxGeometry(0.5, 0, 179, 236), s2 + 'marginRect;rectMargin=4;rectMarginTop=4;rectMarginRight=4;fillColor=#455A64;strokeColor=none;shadow=1;fontColor=#bbbbbb;align=left;verticalAlign=top;fontSize=13;spacingLeft=20;spacingTop=14;resizeHeight=1;resizeWidth=1;');
|
|
bg6.geometry.relative = true;
|
|
bg6.geometry.offset = new mxPoint(0, 81);
|
|
bg6.vertex = true;
|
|
bg1.insert(bg6);
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 168, 20), 'shape=line;strokeColor=#597481;shadow=0;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(4, -54);
|
|
part1.vertex = true;
|
|
bg6.insert(part1);
|
|
var part2 = new mxCell('almond milk', new mxGeometry(0, 0, 18, 18), s2 + 'checkbox;strokeColor=#ffffff;shadow=0;fontColor=#FFFFFF;fillColor=none;strokeWidth=2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=10;fontSize=13;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(20, 52);
|
|
part2.vertex = true;
|
|
bg6.insert(part2);
|
|
var part3 = new mxCell('coconut water', new mxGeometry(0, 0, 18, 18), s2 + 'checkbox;strokeColor=#ffffff;shadow=0;fontColor=#FFFFFF;fillColor=none;strokeWidth=2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=10;fontSize=13;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(20, 86);
|
|
part3.vertex = true;
|
|
bg6.insert(part3);
|
|
var part4 = new mxCell('cucumber', new mxGeometry(0, 0, 18, 18), s2 + 'checkbox;strokeColor=none;shadow=0;fontColor=#FFFFFF;fillColor=#089953;strokeWidth=2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=10;fontSize=13;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(20, 120);
|
|
part4.vertex = true;
|
|
bg6.insert(part4);
|
|
var part5 = new mxCell('green apples', new mxGeometry(0, 0, 18, 18), s2 + 'checkbox;strokeColor=#ffffff;shadow=0;fontColor=#FFFFFF;fillColor=none;strokeWidth=2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=10;fontSize=13;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(20, 154);
|
|
part5.vertex = true;
|
|
bg6.insert(part5);
|
|
var text1 = new mxCell('Campbell', new mxGeometry(0, 1, 168, 40), 'text;fontColor=#FFFFFF;verticalAlign=middle;spacingLeft=20;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, -44);
|
|
text1.vertex = true;
|
|
bg6.insert(text1);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 1, 14, 22), s2 + 'location;fillColor=#ffffff;strokeColor=none;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-36, -35);
|
|
icon1.vertex = true;
|
|
bg6.insert(icon1);
|
|
var bg7 = new mxCell('Clean desk',
|
|
new mxGeometry(0.5, 0.365, 179, 62), s2 + 'marginRect;rectMargin=4;rectMarginRight=4;fillColor=#607D8B;strokeColor=none;shadow=1;fontColor=#FFFFFF;fontSize=24;align=left;spacingLeft=20;spacingTop=-2;resizeWidth=1;resizeHeight=1;');
|
|
bg7.geometry.relative = true;
|
|
bg7.geometry.offset = new mxPoint(0, 81);
|
|
bg7.vertex = true;
|
|
bg1.insert(bg7);
|
|
var bg8 = new mxCell('', new mxGeometry(0.5, 0.46, 179, 230), s2 + 'marginRect;rectMargin=4;rectMarginRight=4;fillColor=#BDBDBD;strokeColor=none;shadow=1;resizeWidth=1;resizeHeight=1;');
|
|
bg8.geometry.relative = true;
|
|
bg8.geometry.offset = new mxPoint(0, 81);
|
|
bg8.vertex = true;
|
|
bg1.insert(bg8);
|
|
var part1 = new mxCell('New exhibition at Dan\n"Food to Love"\n6.25.14-6.26-14\n740 Valencia St.',
|
|
new mxGeometry(0, 126, 179, 104), s2 + 'marginRect;rectMargin=4;rectMarginRight=4;strokeColor=#FF7043;fillColor=#FF7043;shadow=0;fontColor=#FFFFFF;align=left;fontSize=10;spacingLeft=20;');
|
|
part1.vertex = true;
|
|
bg8.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(1, 1, 56, 56), 'shape=ellipse;strokeColor=none;fillColor=#EEFF41;shadow=0;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-75, -128);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(21, 21, 14, 14), s2 + 'plus;strokeColor=#767E1F;strokeWidth=2;shadow=0;');
|
|
part3.vertex = true;
|
|
part2.insert(part3);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Card collection');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 344, 254), 'shape=rect;fillColor=#BDBDBD;strokeColor=#BDBDBD;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('Greyhound divisively hello couldly wonderfully marginally far upon excluding.',
|
|
new mxGeometry(0, 172, 344, 82), 'shape=rect;strokeColor=none;fillColor=#ffffff;;whiteSpace=wrap;align=left;spacingLeft=16;fontColor=#666666;fontSize=14;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 300, 230, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 378), 'shape=rect;fillColor=#BDBDBD;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0, 342, 70), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#999999;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(15, 15);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var text1 = new mxCell('Title', new mxGeometry(0, 0, 235, 20), 'text;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(65, 15);
|
|
text1.vertex = true;
|
|
part1.insert(text1);
|
|
var text2 = new mxCell('Subhead', new mxGeometry(0, 0, 235, 20), 'text;fontColor=#999999;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(65, 35);
|
|
text2.vertex = true;
|
|
part1.insert(text2);
|
|
var part2 = new mxCell('Greyhound divisively hello couldly wonderfully marginally far upon excluding.',
|
|
new mxGeometry(0, 250, 342, 128), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;;whiteSpace=wrap;align=left;spacingLeft=16;fontColor=#666666;verticalAlign=top;spacingTop=10;fontSize=13;spacingRight=16;');
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(0, 1, 342, 48), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;;whiteSpace=wrap;align=left;spacingLeft=14;fontColor=#BDBDBD;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, -48);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(0, 1, 24, 24), 'shape=rect;strokeColor=none;fillColor=#F27CC2;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(15, -38);
|
|
part4.vertex = true;
|
|
part3.insert(part4);
|
|
var icon2 = new mxCell('', new mxGeometry(3, 4, 18, 16), s2 + 'heart;strokeColor=none;fillColor=#B53E85;');
|
|
icon2.vertex = true;
|
|
part4.insert(icon2);
|
|
var part5 = new mxCell('', new mxGeometry(0, 1, 24, 24), 'shape=rect;strokeColor=none;fillColor=#F6BBDE;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(63, -38);
|
|
part5.vertex = true;
|
|
part3.insert(part5);
|
|
var icon3 = new mxCell('', new mxGeometry(3, 4, 18, 16), s2 + 'reply;strokeColor=none;fillColor=#995E81;');
|
|
icon3.vertex = true;
|
|
part5.insert(icon3);
|
|
var part6 = new mxCell('ACTION', new mxGeometry(1, 1, 70, 36), 'shape=rect;strokeColor=none;fillColor=#F6BBDE;fontColor=#6A2F52;fontStyle=1;fontSize=13;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(-152, -42);
|
|
part6.vertex = true;
|
|
part3.insert(part6);
|
|
var part7 = new mxCell('ACTION', new mxGeometry(1, 1, 70, 36), 'shape=rect;strokeColor=none;fillColor=#F37DC3;fontColor=#8C155C;fontStyle=1;fontSize=13;');
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(-75, -42);
|
|
part7.vertex = true;
|
|
part3.insert(part7);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 378, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 344, 420), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#999999;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(15, 15);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var text1 = new mxCell('Title', new mxGeometry(0, 0, 235, 20), 'text;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(65, 15);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell('Subhead', new mxGeometry(0, 0, 235, 20), 'text;fontColor=#999999;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(65, 35);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var part2 = new mxCell('', new mxGeometry(0.0116, 0, 81, 81), 'shape=rect;strokeColor=none;fillColor=#666666;resizeWidth=1;resizeHeight=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 70);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(0.2587, 0, 81, 81), 'shape=rect;strokeColor=none;fillColor=#666666;resizeWidth=1;resizeHeight=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 70);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(0.5058, 0, 81, 81), 'shape=rect;strokeColor=none;fillColor=#666666;resizeWidth=1;resizeHeight=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, 70);
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
var part5 = new mxCell('', new mxGeometry(0.7529, 0, 81, 81), 'shape=rect;strokeColor=none;fillColor=#666666;resizeWidth=1;resizeHeight=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, 70);
|
|
part5.vertex = true;
|
|
bg1.insert(part5);
|
|
var part6 = new mxCell('', new mxGeometry(0.0116, 0.2024, 81, 81), 'shape=rect;strokeColor=none;fillColor=#666666;resizeWidth=1;resizeHeight=1;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(0, 70);
|
|
part6.vertex = true;
|
|
bg1.insert(part6);
|
|
var part7 = new mxCell('', new mxGeometry(0.2587, 0.2024, 81, 81), 'shape=rect;strokeColor=none;fillColor=#666666;resizeWidth=1;resizeHeight=1;');
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(0, 70);
|
|
part7.vertex = true;
|
|
bg1.insert(part7);
|
|
var part8 = new mxCell('', new mxGeometry(0.5058, 0.2024, 81, 81), 'shape=rect;strokeColor=none;fillColor=#666666;resizeWidth=1;resizeHeight=1;');
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(0, 70);
|
|
part8.vertex = true;
|
|
bg1.insert(part8);
|
|
var part9 = new mxCell('', new mxGeometry(0.7529, 0.2024, 81, 81), 'shape=rect;strokeColor=none;fillColor=#666666;resizeWidth=1;resizeHeight=1;');
|
|
part9.geometry.relative = true;
|
|
part9.geometry.offset = new mxPoint(0, 70);
|
|
part9.vertex = true;
|
|
bg1.insert(part9);
|
|
var part10 = new mxCell('', new mxGeometry(0.0116, 0.4048, 81, 81), 'shape=rect;strokeColor=none;fillColor=#666666;resizeWidth=1;resizeHeight=1;');
|
|
part10.geometry.relative = true;
|
|
part10.geometry.offset = new mxPoint(0, 70);
|
|
part10.vertex = true;
|
|
bg1.insert(part10);
|
|
var part11 = new mxCell('', new mxGeometry(0.2587, 0.4048, 81, 81), 'shape=rect;strokeColor=none;fillColor=#666666;resizeWidth=1;resizeHeight=1;');
|
|
part11.geometry.relative = true;
|
|
part11.geometry.offset = new mxPoint(0, 70);
|
|
part11.vertex = true;
|
|
bg1.insert(part11);
|
|
var part12 = new mxCell('', new mxGeometry(0.5058, 0.4048, 81, 81), 'shape=rect;strokeColor=none;fillColor=#666666;resizeWidth=1;resizeHeight=1;');
|
|
part12.geometry.relative = true;
|
|
part12.geometry.offset = new mxPoint(0, 70);
|
|
part12.vertex = true;
|
|
bg1.insert(part12);
|
|
var part13 = new mxCell('', new mxGeometry(0.7529, 0.4048, 81, 81), 'shape=rect;strokeColor=none;fillColor=#666666;resizeWidth=1;resizeHeight=1;');
|
|
part13.geometry.relative = true;
|
|
part13.geometry.offset = new mxPoint(0, 70);
|
|
part13.vertex = true;
|
|
part13.vertex = true;
|
|
bg1.insert(part13);
|
|
var part14 = new mxCell('ACTION', new mxGeometry(0, 1, 344, 48), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;;whiteSpace=wrap;align=left;spacingLeft=14;fontColor=#737373;fontStyle=1;fontSize=14;resizeWidth=1;');
|
|
part14.geometry.relative = true;
|
|
part14.geometry.offset = new mxPoint(0, -96);
|
|
part14.vertex = true;
|
|
bg1.insert(part14);
|
|
var part15 = new mxCell('ACTION', new mxGeometry(0, 1, 344, 48), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;;whiteSpace=wrap;align=left;spacingLeft=14;fontColor=#737373;fontStyle=1;fontSize=14;resizeWidth=1;');
|
|
part15.geometry.relative = true;
|
|
part15.geometry.offset = new mxPoint(0, -48);
|
|
part15.vertex = true;
|
|
bg1.insert(part15);
|
|
return sb.createVertexTemplateFromCells([bg1], 344, 420, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 344, 162), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 344, 48), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -48);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('Action area 3', new mxGeometry(248, 0, 96, 162), 'shape=rect;fillColor=#F37DC3;strokeColor=none;fontColor=#EC1996;opacity=30;fontSize=10;fontStyle=1');
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var text1 = new mxCell('Title', new mxGeometry(0, 0, 248, 40), 'text;fontSize=20;fontColor=#666666;spacingTop=10;verticalAlign=middle;spacingLeft=10;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell('Subhead', new mxGeometry(0, 0, 248, 20), 'text;fontSize=12;fontColor=#666666;spacingTop=0;verticalAlign=middle;spacingLeft=10;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 40);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('Greyhound divisively hello', new mxGeometry(0, 0, 248, 20), 'text;fontSize=13;fontColor=#3C3C3C;spacingTop=0;verticalAlign=middle;spacingLeft=10;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 65);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('ACTION', new mxGeometry(0, 1, 70, 36), 'shape=rect;strokeColor=none;fillColor=#F37DC3;fontColor=#8C155C;fontStyle=1;fontSize=12;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(5, -42);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('ACTION', new mxGeometry(0, 1, 70, 36), 'shape=rect;strokeColor=none;fillColor=#F6BBDE;fontColor=#6A2F52;fontStyle=1;fontSize=12;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(85, -42);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
return sb.createVertexTemplateFromCells([bg1], 344, 162, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 344, 162), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 344, 48), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -48);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(248, 0, 96, 162), 'shape=rect;fillColor=#BDBDBD;strokeColor=#eeeeee;');
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var text1 = new mxCell('Rate this album', new mxGeometry(0, 0, 248, 40), 'text;fontSize=23;fontColor=#666666;spacingTop=10;verticalAlign=middle;spacingLeft=16;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell('Mac Miller', new mxGeometry(0, 0, 248, 20), 'text;fontSize=12;fontColor=#666666;spacingTop=0;verticalAlign=middle;spacingLeft=16;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 44);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('Live From Space', new mxGeometry(0, 0, 248, 20), 'text;fontSize=13;fontColor=#3C3C3C;spacingTop=0;verticalAlign=middle;spacingLeft=16;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 65);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 1, 18, 18), s2 + 'star;strokeColor=#666666;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(11, -33);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(0, 1, 18, 18), s2 + 'star;strokeColor=#666666;fillColor=#ffffff;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(45, -33);
|
|
icon2.vertex = true;
|
|
bg1.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(0, 1, 18, 18), s2 + 'star;strokeColor=#666666;fillColor=#ffffff;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(79, -33);
|
|
icon3.vertex = true;
|
|
bg1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(0, 1, 18, 18), s2 + 'star;strokeColor=#666666;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(113, -33);
|
|
icon4.vertex = true;
|
|
bg1.insert(icon4);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 1, 18, 18), s2 + 'star;strokeColor=#666666;fillColor=#ffffff;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(147, -33);
|
|
icon5.vertex = true;
|
|
bg1.insert(icon5);
|
|
return sb.createVertexTemplateFromCells([bg1], 344, 162, 'Card with UI controls');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 522), 'shape=rect;fillColor=#BDBDBD;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 342, 328), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;fontColor=#666666;fontSize=10;fontStyle=1;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -328);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text1 = new mxCell('Basilico', new mxGeometry(0, 0, 260, 50), 'text;fontColor=#000000;fontSize=26;fontStyle=0;verticalAlign=bottom;spacingBottom=2;spacingLeft=10;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
part1.insert(text1);
|
|
var icon1 = new mxCell('250ft', new mxGeometry(1, 0, 10, 15), s2 + 'location;strokeColor=none;fillColor=#C8C8C8;fontColor=#999999;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=10;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-72, 25);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 13, 13), s2 + 'star;strokeColor=none;fillColor=#FACB43;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(10, 61);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(0, 0, 13, 13), s2 + 'star;strokeColor=none;fillColor=#FACB43;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(27, 61);
|
|
icon2.vertex = true;
|
|
part1.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(0, 0, 13, 13), s2 + 'star;strokeColor=none;fillColor=#FACB43;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(44, 61);
|
|
icon3.vertex = true;
|
|
part1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(0, 0, 13, 13), s2 + 'star;strokeColor=none;fillColor=#FACB43;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(61, 61);
|
|
icon4.vertex = true;
|
|
part1.insert(icon4);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 0, 13, 13), s2 + 'star;strokeColor=none;fillColor=#FACB43;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(78, 61);
|
|
icon5.vertex = true;
|
|
part1.insert(icon5);
|
|
var text3 = new mxCell('4.7 (51)', new mxGeometry(0, 0, 50, 20), 'text;fontColor=#999999;verticalAlign=middle;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(100, 58);
|
|
text3.vertex = true;
|
|
part1.insert(text3);
|
|
var text4 = new mxCell('$$$ - Italian Restaurant', new mxGeometry(0, 0, 342, 20), 'text;fontColor=#000000;verticalAlign=middle;fontSize=15;spacingLeft=10;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 90);
|
|
text4.vertex = true;
|
|
part1.insert(text4);
|
|
var text5 = new mxCell('Creative Italian dishes offered with signature pasta & a robust wine list in a cozy, rustic setting',
|
|
new mxGeometry(0, 0, 340, 60), 'text;fontColor=#999999;verticalAlign=middle;fontSize=13;spacingLeft=16;whiteSpace=wrap;spacingRight=16;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 111);
|
|
text5.vertex = true;
|
|
part1.insert(text5);
|
|
var part3 = new mxCell('', new mxGeometry(0, 1, 342, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, -154);
|
|
part3.vertex = true;
|
|
part1.insert(part3);
|
|
var text6 = new mxCell("Tonight's availability", new mxGeometry(0, 1, 342, 40), 'text;fontColor=#000000;verticalAlign=middle;fontSize=14;spacingLeft=10;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, -144);
|
|
text6.vertex = true;
|
|
part1.insert(text6);
|
|
var icon6 = new mxCell('', new mxGeometry(0, 1, 20, 20), s2 + 'clock;strokeColor=#999999;fillColor=#ffffff;strokeWidth=2;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(16, -94);
|
|
icon6.vertex = true;
|
|
part1.insert(icon6);
|
|
var text6 = new mxCell("5:30PM", new mxGeometry(0.117, 1, 100, 40), 'text;fontColor=#999999;verticalAlign=middle;fontSize=13;spacingLeft=0;fontStyle=1;align=center;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, -104);
|
|
text6.vertex = true;
|
|
part1.insert(text6);
|
|
var text7 = new mxCell("7:30PM", new mxGeometry(0.4094, 1, 100, 40), 'shape=rect;fontColor=#000000;verticalAlign=middle;fontSize=13;spacingLeft=0;strokeColor=none;fillColor=#D3D3D3;fontStyle=1;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, -104);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var text8 = new mxCell("9:00PM", new mxGeometry(0.7018, 1, 100, 40), 'text;fontColor=#999999;verticalAlign=middle;fontSize=13;spacingLeft=0;fontStyle=1;align=center;resizeWidth=1;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, -104);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell("RESERVE", new mxGeometry(0, 1, 110, 48), 'text;fontColor=#2E78F2;verticalAlign=middle;fontSize=13;spacingLeft=0;fontStyle=1;align=center;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(0, -48);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 522, 'Card with segmented buttons');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 570), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('San Francisco', new mxGeometry(0, 0, 342, 70), 'text;fontColor=#000000;fontSize=25;fontStyle=0;verticalAlign=bottom;spacingBottom=2;spacingLeft=10;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell('Mon, 12:30 PM, Mostly sunny', new mxGeometry(0, 0, 300, 40), 'text;fontColor=#000000;fontSize=14;fontStyle=0;verticalAlign=middle;spacingBottom=2;spacingLeft=10;align=left;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 70);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('66', new mxGeometry(0, 110, 100, 100), 'text;fontColor=#757575;fontSize=90;fontStyle=0;verticalAlign=top;spacingBottom=2;spacingLeft=10;align=left;spacingTop=-15;');
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell(String.fromCharCode(176) + 'F', new mxGeometry(0, 0.193, 70, 70), 'text;fontColor=#757575;fontSize=45;fontStyle=0;verticalAlign=middle;spacingBottom=2;spacingLeft=10;align=left;spacingTop=-15;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(100, 0);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 0.2105, 80, 70), s2 + 'mostly_sunny;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-102, 0);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var icon2 = new mxCell('10mph', new mxGeometry(0, 0.2105, 20, 15), s2 + 'wind;strokeWidth=2;strokeColor=#757575;fontColor=#757575;fontSize=14;fontStyle=0;verticalAlign=middle;align=left;labelPosition=right;spacingLeft=30;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(20, 110);
|
|
icon2.vertex = true;
|
|
bg1.insert(icon2);
|
|
var icon3 = new mxCell('3%', new mxGeometry(0, 0.2105, 20, 18), s2 + 'mostly_cloudy;strokeWidth=2;fontColor=#757575;fontSize=14;fontStyle=0;verticalAlign=middle;align=left;labelPosition=right;spacingLeft=30;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(20, 150);
|
|
icon3.vertex = true;
|
|
bg1.insert(icon3);
|
|
var part1 = new mxCell('', new mxGeometry(0, 0.5263, 342, 60), 'shape=rect;fillColor=none;strokeColor=none;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 0);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(16, 15, 310, 20), s2 + 'scale;strokeWidth=2;strokeColor=#cccccc;');
|
|
part2.vertex = true;
|
|
part1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(0.365, 0.25, 30, 30), s2 + 'handle;fillColor=#666666;strokeColor=none;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, -15);
|
|
part3.vertex = true;
|
|
part1.insert(part3);
|
|
var text7 = new mxCell('8 AM', new mxGeometry(21, 35, 50, 20), 'text;fontColor=#666666;fontSize=10;fontStyle=0;verticalAlign=middle;align=center;');
|
|
text7.vertex = true;
|
|
part1.insert(text7);
|
|
var text8 = new mxCell('11 AM', new mxGeometry(82, 35, 50, 20), 'text;fontColor=#666666;fontSize=10;fontStyle=0;verticalAlign=middle;align=center;');
|
|
text8.vertex = true;
|
|
part1.insert(text8);
|
|
var text9 = new mxCell('2 PM', new mxGeometry(145, 35, 50, 20), 'text;fontColor=#666666;fontSize=10;fontStyle=0;verticalAlign=middle;align=center;');
|
|
text9.vertex = true;
|
|
part1.insert(text9);
|
|
var text10 = new mxCell('5 PM', new mxGeometry(206, 35, 50, 20), 'text;fontColor=#666666;fontSize=10;fontStyle=0;verticalAlign=middle;align=center;');
|
|
text10.vertex = true;
|
|
part1.insert(text10);
|
|
var text11 = new mxCell('8 PM', new mxGeometry(269, 35, 50, 20), 'text;fontColor=#666666;fontSize=10;fontStyle=0;verticalAlign=middle;align=center;');
|
|
text11.vertex = true;
|
|
part1.insert(text11);
|
|
var text12 = new mxCell('Tuesday', new mxGeometry(0, 1, 220, 20), 'text;fontColor=#666666;fontSize=13;fontStyle=0;verticalAlign=middle;align=left;spacingLeft=16;resizeWidth=1;');
|
|
text12.geometry.relative = true;
|
|
text12.geometry.offset = new mxPoint(0, -190);
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var icon4 = new mxCell('75°<font color="#999999">/52°</font>', new mxGeometry(1, 1, 20, 20), 'shape=ellipse;fillColor=#FFD85D;strokeColor=none;fontColor=#666666;fontSize=13;fontStyle=0;verticalAlign=middle;align=left;labelPosition=right;verticalLabelPosition=middle;spacingLeft=30;html=1;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-115, -190);
|
|
icon4.vertex = true;
|
|
bg1.insert(icon4);
|
|
var text12 = new mxCell('Wednesday', new mxGeometry(0, 1, 220, 20), 'text;fontColor=#666666;fontSize=13;fontStyle=0;verticalAlign=middle;align=left;spacingLeft=16;resizeWidth=1;');
|
|
text12.geometry.relative = true;
|
|
text12.geometry.offset = new mxPoint(0, -143);
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var icon4 = new mxCell('73°<font color="#999999">/50°</font>', new mxGeometry(1, 1, 20, 20), 'shape=ellipse;fillColor=#FFD85D;strokeColor=none;fontColor=#666666;fontSize=13;fontStyle=0;verticalAlign=middle;align=left;labelPosition=right;verticalLabelPosition=middle;spacingLeft=30;html=1;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-115, -143);
|
|
icon4.vertex = true;
|
|
bg1.insert(icon4);
|
|
var text12 = new mxCell('Thursday', new mxGeometry(0, 1, 220, 20), 'text;fontColor=#666666;fontSize=13;fontStyle=0;verticalAlign=middle;align=left;spacingLeft=16;resizeWidth=1;');
|
|
text12.geometry.relative = true;
|
|
text12.geometry.offset = new mxPoint(0, -96);
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var icon4 = new mxCell('64°<font color="#999999">/52°</font>', new mxGeometry(1, 1, 22, 20), s2 + 'mostly_sunny;fillColor=#FFD85D;strokeColor=none;fontColor=#666666;fontSize=13;fontStyle=0;verticalAlign=middle;align=left;labelPosition=right;verticalLabelPosition=middle;spacingLeft=30;html=1;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-115, -96);
|
|
icon4.vertex = true;
|
|
bg1.insert(icon4);
|
|
var part4 = new mxCell('', new mxGeometry(0, 1, 342, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, -53);
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
var text13 = new mxCell('FULL REPORT', new mxGeometry(0, 1, 342, 48), 'text;fontColor=#999999;fontSize=14;fontStyle=1;verticalAlign=middle;align=left;spacingLeft=16;resizeWidth=1;');
|
|
text13.geometry.relative = true;
|
|
text13.geometry.offset = new mxPoint(0, -48);
|
|
text13.vertex = true;
|
|
bg1.insert(text13);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 570, 'Card with slider');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 236), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('Word of the Day', new mxGeometry(0, 0, 342, 40), 'text;fontColor=#999999;fontSize=13;fontStyle=0;verticalAlign=bottom;spacingBottom=2;spacingLeft=16;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell('be·nev·o·lent', new mxGeometry(0, 0, 342, 40), 'text;fontColor=#444444;fontSize=22;fontStyle=0;verticalAlign=bottom;spacingBottom=2;spacingLeft=16;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 44);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('adjective', new mxGeometry(0, 0, 342, 30), 'text;fontColor=#999999;fontSize=13;fontStyle=0;verticalAlign=bottom;spacingBottom=2;spacingLeft=16;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 80);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('well meaning and kindly\n"a benevolent smile"',
|
|
new mxGeometry(0, 0, 342, 40), 'text;fontColor=#444444;fontSize=13;fontStyle=0;verticalAlign=middle;spacingBottom=2;spacingLeft=16;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 130);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('LEARN MORE', new mxGeometry(0, 1, 342, 48), 'text;fontColor=#444444;fontSize=14;fontStyle=1;verticalAlign=middle;spacingBottom=2;spacingLeft=16;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, -48);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 236, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 530), 'shape=rect;fillColor=#BDBDBD;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('Title goes here', new mxGeometry(0, 1, 342, 338), s + 'rect;fillColor=#ffffff;strokeColor=none;fontSize=23;fontStyle=0;verticalAlign=top;spacingBottom=0;spacingLeft=16;spacingTop=16;resizeWidth=1;align=left;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -338);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text2 = new mxCell('Subtitle here', new mxGeometry(0, 0, 342, 20), 'text;fontColor=#999999;fontSize=13;fontStyle=0;verticalAlign=middle;spacingBottom=0;spacingLeft=16;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 60);
|
|
text2.vertex = true;
|
|
part1.insert(text2);
|
|
var part2 = new mxCell('ACTION 1', new mxGeometry(0, 0, 85, 40), 'shape=rect;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;fontSize=13;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 100);
|
|
part2.vertex = true;
|
|
part1.insert(part2);
|
|
var part3 = new mxCell('ACTION 2', new mxGeometry(0, 0, 85, 40), 'shape=rect;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;fontSize=13;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(85, 100);
|
|
part3.vertex = true;
|
|
part1.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(1, 0, 20, 10), s2 + 'up;strokeWidth=2;strokeColor=#999999;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(-40, 115);
|
|
part4.vertex = true;
|
|
part1.insert(part4);
|
|
var part5 = new mxCell(
|
|
"I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll" +
|
|
" be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way " +
|
|
"to escape.",
|
|
new mxGeometry(0, 0, 342, 196), 'text;whiteSpace=wrap;fontSize=14;spacing=16;spacingTop=-4;resizeWidth=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, 142);
|
|
part5.vertex = true;
|
|
part1.insert(part5);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 530, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 386), 'shape=rect;fillColor=#BDBDBD;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0, 342, 72), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#BDBDBD;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(16, 16);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var text1 = new mxCell('Title', new mxGeometry(0, 0, 240, 20), 'text;spacingLeft=10;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(56, 16);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell('Subhead', new mxGeometry(0, 0, 240, 20), 'text;spacingLeft=10;fontColor=#999999;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(56, 36);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var part3 = new mxCell('Greyhound divisively hello coldly wonderfully marginally far upon excluding.',
|
|
new mxGeometry(0, 1, 342, 122), s + 'rect;whiteSpace=wrap;align=left;spacingLeft=0;fontColor=#444444;spacing=16;fontSize=13;resizeWidth=1;fillColor=#ffffff;strokeColor=none;verticalAlign=top;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, -122);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part5 = new mxCell('ACTION 1', new mxGeometry(0, 1, 70, 32), 'shape=rect;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(8, -40);
|
|
part5.vertex = true;
|
|
part3.insert(part5);
|
|
var part6 = new mxCell('ACTION 2', new mxGeometry(0, 1, 70, 32), 'shape=rect;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(86, -40);
|
|
part6.vertex = true;
|
|
part3.insert(part6);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 386, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 356), 'shape=rect;fillColor=#BDBDBD;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0, 342, 72), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#BDBDBD;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(16, 16);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var text1 = new mxCell('Title', new mxGeometry(0, 0, 240, 20), 'text;spacingLeft=10;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(56, 16);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell('Subhead', new mxGeometry(0, 0, 240, 20), 'text;spacingLeft=10;fontColor=#999999;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(56, 36);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var part3 = new mxCell('', new mxGeometry(0, 1, 342, 92), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, -92);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('ACTION 1', new mxGeometry(0, 1, 70, 32), 'shape=rect;fontSize=13;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(8, -76);
|
|
part4.vertex = true;
|
|
part3.insert(part4);
|
|
var part5 = new mxCell('ACTION 2', new mxGeometry(0, 1, 70, 32), 'shape=rect;fontSize=13;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(8, -40);
|
|
part5.vertex = true;
|
|
part3.insert(part5);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 356, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 334), 'shape=rect;fillColor=#BDBDBD;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('Title goes here', new mxGeometry(0, 1, 342, 142), s + 'rect;fillColor=#ffffff;strokeColor=none;fontSize=23;fontStyle=0;verticalAlign=top;spacingBottom=0;spacingLeft=16;spacingTop=16;resizeWidth=1;align=left;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -142);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text1 = new mxCell('Subtitle here', new mxGeometry(0, 0, 342, 20), 'text;fontColor=#999999;fontSize=13;fontStyle=0;verticalAlign=middle;spacingBottom=0;spacingLeft=16;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 58);
|
|
text1.vertex = true;
|
|
part1.insert(text1);
|
|
var part2 = new mxCell('ACTION 1', new mxGeometry(0, 1, 70, 32), 'shape=rect;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;fontSize=13;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(8, -40);
|
|
part2.vertex = true;
|
|
part1.insert(part2);
|
|
var part3 = new mxCell('ACTION 2', new mxGeometry(0, 1, 70, 32), 'shape=rect;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;fontSize=13;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(86, -40);
|
|
part3.vertex = true;
|
|
part1.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(1, 1, 16, 8), s2 + 'up;strokeWidth=3;strokeColor=#666666;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(-38, -25);
|
|
part4.vertex = true;
|
|
part1.insert(part4);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 334, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('Title goes here', new mxGeometry(0, 0, 300, 266), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;fontColor=#000000;fontSize=23;fontStyle=0;verticalAlign=top;spacingBottom=0;spacingLeft=16;spacingTop=20;align=left;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('Subtitle here', new mxGeometry(0, 0, 300, 20), 'text;fontColor=#999999;fontSize=12;fontStyle=0;verticalAlign=middle;spacingBottom=0;spacingLeft=16;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 59);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var part1 = new mxCell(
|
|
"I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll" +
|
|
" be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way " +
|
|
"to escape",
|
|
new mxGeometry(0, 0, 300, 148), 'text;whiteSpace=wrap;fontSize=13;spacing=16;spacingTop=-4;resizeWidth=1;resizeHeight=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 70);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part3 = new mxCell('ACTION 1', new mxGeometry(0, 1, 70, 40), 'shape=rect;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(8, -48);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('ACTION 2', new mxGeometry(0, 1, 70, 40), 'shape=rect;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(86, -48);
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
return sb.createVertexTemplateFromCells([bg1], 300, 266, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 246), 'shape=rect;fillColor=#BDBDBD;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 342, 54), 'shape=rect;fillColor=#ffffff;strokeColor=none;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -54);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 1, 20, 18), s2 + 'heart;strokeColor=none;fillColor=#666666;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-147, -36);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 1, 14, 20), s2 + 'bookmark;strokeColor=none;fillColor=#666666;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-92, -37);
|
|
icon2.vertex = true;
|
|
part1.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 1, 20, 18), s2 + 'reply;strokeColor=none;fillColor=#666666;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-49, -36);
|
|
icon3.vertex = true;
|
|
part1.insert(icon3);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 246, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 342), 'shape=rect;fillColor=#BDBDBD;strokeColor=none;fontColor=#000000;fontSize=12;fontStyle=0;verticalAlign=middle;spacingBottom=0;spacingLeft=0;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('Title goes here', new mxGeometry(0, 1, 342, 138), 'shape=rect;fillColor=#000000;strokeColor=none;opacity=25;fontColor=#FFFFFF;fontSize=23;fontStyle=0;verticalAlign=top;spacingBottom=0;spacingLeft=16;spacingTop=17;align=left;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -138);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text2 = new mxCell('Subtitle here', new mxGeometry(0, 0, 342, 20), 'text;fontColor=#FFFFFF;fontSize=13;fontStyle=0;verticalAlign=middle;spacingBottom=0;spacingLeft=16;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 54);
|
|
text2.vertex = true;
|
|
part1.insert(text2);
|
|
var part2 = new mxCell('ACTION 1', new mxGeometry(0, 1, 80, 32), 'shape=rect;strokeColor=none;fillColor=none;fontColor=#FFFFFF;fontStyle=1;fontSize=13;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(8, - 40);
|
|
part2.vertex = true;
|
|
part1.insert(part2);
|
|
var part3 = new mxCell('ACTION 2', new mxGeometry(0, 1, 80, 32), 'shape=rect;strokeColor=none;fillColor=none;fontColor=#FFFFFF;fontStyle=1;fontSize=13;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(96, - 40);
|
|
part3.vertex = true;
|
|
part1.insert(part3);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 342, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('Title', new mxGeometry(0, 0, 168, 216), s + 'rect;fillColor=#BDBDBD;strokeColor=none;fontColor=#FFFFFF;fontSize=22;fontStyle=0;verticalAlign=bottom;spacingBottom=48;spacingLeft=0;align=left;spacing=12;gradientColor=#606060;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 168, 48), 'shape=rect;fillColor=#ffffff;strokeColor=none;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -48);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 1, 20, 18), s2 + 'heart;strokeColor=none;fillColor=#666666;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-146, -33);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 1, 14, 20), s2 + 'bookmark;strokeColor=none;fillColor=#666666;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-91, -34);
|
|
icon2.vertex = true;
|
|
icon2.vertex = true;
|
|
part1.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 1, 20, 18), s2 + 'reply;strokeColor=none;fillColor=#666666;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-42, -33);
|
|
icon3.vertex = true;
|
|
icon3.vertex = true;
|
|
part1.insert(icon3);
|
|
var bg2 = new mxCell('Title', new mxGeometry(174, 0, 168, 216), s + 'rect;fillColor=#BDBDBD;strokeColor=none;fontColor=#FFFFFF;fontSize=22;fontStyle=0;verticalAlign=bottom;spacingBottom=48;spacingLeft=0;align=left;spacing=12;gradientColor=#606060;shadow=1;');
|
|
bg2.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 168, 48), 'shape=rect;fillColor=#ffffff;strokeColor=none;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -48);
|
|
part1.vertex = true;
|
|
bg2.insert(part1);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 1, 20, 18), s2 + 'heart;strokeColor=none;fillColor=#666666;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-146, -33);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 1, 14, 20), s2 + 'bookmark;strokeColor=none;fillColor=#666666;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-91, -34);
|
|
icon2.vertex = true;
|
|
icon2.vertex = true;
|
|
part1.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 1, 20, 18), s2 + 'reply;strokeColor=none;fillColor=#666666;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-42, -33);
|
|
icon3.vertex = true;
|
|
icon3.vertex = true;
|
|
part1.insert(icon3);
|
|
return sb.createVertexTemplateFromCells([bg1, bg2], 342, 216, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('Title here', new mxGeometry(0, 0, 342, 146), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;fontColor=#000000;fontSize=24;fontStyle=0;verticalAlign=top;spacingBottom=0;spacingLeft=16;spacingTop=15;align=left;');
|
|
bg1.vertex = true;
|
|
var text2 = new mxCell('Subtitle here', new mxGeometry(0, 0, 246, 20), 'text;fontColor=#999999;fontSize=13;fontStyle=0;verticalAlign=middle;spacingBottom=0;spacingLeft=16;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 59);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var part1 = new mxCell('', new mxGeometry(1, 0, 80, 80), 'shape=rect;fillColor=#bbbbbb;strokeColor=none;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(-96, 16);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part3 = new mxCell('ACTION 1', new mxGeometry(0, 1, 80, 32), 'shape=rect;fontSize=13;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(8, -40);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('ACTION 2', new mxGeometry(0, 1, 80, 32), 'shape=rect;fontSize=13;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(96, -40);
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 146, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('Title here', new mxGeometry(0, 0, 342, 176), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;fontColor=#000000;fontSize=24;fontStyle=0;verticalAlign=top;spacingBottom=0;spacingLeft=16;spacingTop=15;align=left;');
|
|
bg1.vertex = true;
|
|
var text2 = new mxCell('Subtitle here', new mxGeometry(0, 0, 246, 20), 'text;fontColor=#999999;fontSize=13;fontStyle=0;verticalAlign=middle;spacingBottom=0;spacingLeft=16;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 59);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var part1 = new mxCell('', new mxGeometry(1, 0, 112, 112), 'shape=rect;fillColor=#bbbbbb;strokeColor=none;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(-128, 16);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part3 = new mxCell('ACTION 1', new mxGeometry(0, 1, 80, 32), 'shape=rect;fontSize=13;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(8, -40);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('ACTION 2', new mxGeometry(0, 1, 80, 32), 'shape=rect;fontSize=13;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(96, -40);
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
return sb.createVertexTemplateFromCells([bg1], 300, 176, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('Title here', new mxGeometry(0, 0, 342, 228), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;fontColor=#000000;fontSize=24;fontStyle=0;verticalAlign=top;spacingBottom=0;spacingLeft=16;spacingTop=15;align=left;');
|
|
bg1.vertex = true;
|
|
var text2 = new mxCell('Subtitle here', new mxGeometry(0, 0, 246, 20), 'text;fontColor=#999999;fontSize=13;fontStyle=0;verticalAlign=middle;spacingBottom=0;spacingLeft=16;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 59);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var part1 = new mxCell('', new mxGeometry(1, 0, 152, 152), 'shape=rect;fillColor=#bbbbbb;strokeColor=none;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(-168, 16);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part3 = new mxCell('ACTION 1', new mxGeometry(0, 1, 80, 32), 'shape=rect;fontSize=13;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(8, -40);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('ACTION 2', new mxGeometry(0, 1, 80, 32), 'shape=rect;fontSize=13;strokeColor=none;fillColor=#ffffff;fontColor=#444444;fontStyle=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(96, -40);
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
return sb.createVertexTemplateFromCells([bg1], 300, 224, 'Card');
|
|
}),
|
|
this.addEntry(dt + 'card', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 272), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0, 240, 240), 'shape=rect;fillColor=#bbbbbb;strokeColor=none;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(16, 16);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 0, 20, 18), s2 + 'heart;strokeColor=none;fillColor=#666666;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-53, 38);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0, 14, 20), s2 + 'bookmark;strokeColor=none;fillColor=#666666;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-51, 86);
|
|
icon2.vertex = true;
|
|
bg1.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 20, 18), s2 + 'reply;strokeColor=none;fillColor=#666666;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-53, 135);
|
|
icon3.vertex = true;
|
|
bg1.insert(icon3);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 272, 'Card');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlCards', 'GMDL / Cards', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLChipsPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;shape=";
|
|
var s2 = "dashed=0;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library chip ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'chip', function()
|
|
{
|
|
var bg = new mxCell('Trevor Hansen', new mxGeometry(0, 0, 170, 32), 'shape=rect;arcSize=50;strokeColor=none;fillColor=#eeeeee;rounded=1;spacingLeft=24;fontSize=13;align=center;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0, 32, 32), s2 + 'user;strokeColor=none;fillColor=#666666;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), 'shape=ellipse;strokeColor=none;fillColor=#A5A5A5;aspect=fixed;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-24, -8);
|
|
part2.vertex = true;
|
|
bg.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(5, 5, 6, 6), s2 + 'x;strokeColor=#ffffff;strokeWidth=2;');
|
|
part3.vertex = true;
|
|
part2.insert(part3);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Chip with text and icon');
|
|
}),
|
|
this.addEntry(dt + 'chip', function()
|
|
{
|
|
var bg = new mxCell('ANZ Bank', new mxGeometry(0, 0, 170, 32), 'shape=rect;arcSize=50;strokeColor=none;fillColor=#eeeeee;rounded=1;spacingLeft=24;fontSize=13;align=center;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('A', new mxGeometry(0, 0, 32, 32), 'shape=ellipse;strokeColor=none;fillColor=#009587;fontColor=#ffffff;fontSize=14;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Chip with text and icon');
|
|
}),
|
|
this.addEntry(dt + 'list style', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;fontSize=13;align=right;fillColor=#C2185B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Compose', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#E91E63;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=-3;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 16), s2 + 'left;strokeColor=#ffffff;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(25, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 22, 22), s2 + 'send;strokeColor=none;fillColor=#ffffff;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-35, -11);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var bar2 = new mxCell('To', new mxGeometry(0, 0, 358, 54), s + 'rect;strokeColor=#eeeeee;fillColor=#ffffff;resizeWidth=1;fontSize=16;fontColor=#999999;spacingTop=-3;align=left;spacingLeft=16;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var part1 = new mxCell('Trevor Hansen', new mxGeometry(0, 0.5, 130, 32), 'shape=rect;arcSize=50;strokeColor=none;fillColor=#eeeeee;rounded=1;spacingLeft=24;fontSize=13;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(70, -16);
|
|
part1.vertex = true;
|
|
bar2.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(0, 0, 32, 32), s2 + 'user;strokeColor=none;fillColor=#666666;aspect=fixed;');
|
|
part2.vertex = true;
|
|
part1.insert(part2);
|
|
var part3 = new mxCell('Alex Nelson', new mxGeometry(0, 0.5, 120, 32), 'shape=rect;arcSize=50;strokeColor=none;fillColor=#eeeeee;rounded=1;spacingLeft=24;fontSize=13;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(208, -16);
|
|
part3.vertex = true;
|
|
bar2.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(0, 0, 32, 32), s2 + 'user;strokeColor=none;fillColor=#666666;aspect=fixed');
|
|
part4.vertex = true;
|
|
part3.insert(part4);
|
|
var bar3 = new mxCell('Plans for the weekend', new mxGeometry(0, 0, 358, 54), 'shape=rect;fontSize=13;strokeColor=#eeeeee;fillColor=#ffffff;align=left;spacingLeft=16;resizeWidth=1;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 135);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var part5 = new mxCell(
|
|
"Hi,\nI just wanted to check in and see if you had any plans this upcoming weekend. We are thinking of heading up to Napa. Let us know " +
|
|
"if you'd like to go and we'll make reservations.",
|
|
new mxGeometry(0, 0, 358, 400), 'shape=rect;fontSize=14;strokeColor=none;fillColor=none;whiteSpace=wrap;verticalAlign=top;align=left;spacing=16;resizeWidth=1;resizeHeight=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, 189);
|
|
part5.vertex = true;
|
|
bg1.insert(part5);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'List Style');
|
|
}),
|
|
this.addEntry(dt + 'list style', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;fontSize=13;align=right;fillColor=#C2185B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Compose', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#E91E63;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=-3;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 16), s2 + 'left;strokeColor=#ffffff;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(25, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 22, 22), s2 + 'send;strokeColor=none;fillColor=#ffffff;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-35, -11);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var bar2 = new mxCell('To', new mxGeometry(0, 0, 358, 54), s + 'rect;strokeColor=#eeeeee;fillColor=#ffffff;resizeWidth=1;fontSize=16;fontColor=#999999;spacingTop=-3;align=left;spacingLeft=16;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var part1 = new mxCell('Trevor Hansen', new mxGeometry(0, 0.5, 130, 32), 'shape=rect;arcSize=50;strokeColor=none;fillColor=#eeeeee;rounded=1;spacingLeft=24;fontSize=13;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(70, -16);
|
|
part1.vertex = true;
|
|
bar2.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(0, 0, 32, 32), s2 + 'user;strokeColor=none;fillColor=#666666;aspect=fixed;');
|
|
part2.vertex = true;
|
|
part1.insert(part2);
|
|
var part3 = new mxCell('Alex Nelson', new mxGeometry(0, 0.5, 120, 32), 'shape=rect;arcSize=50;strokeColor=none;fillColor=#eeeeee;rounded=1;spacingLeft=24;fontSize=13;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(208, -16);
|
|
part3.vertex = true;
|
|
bar2.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(0, 0, 32, 32), s2 + 'user;strokeColor=none;fillColor=#666666;aspect=fixed');
|
|
part4.vertex = true;
|
|
part3.insert(part4);
|
|
var bar3 = new mxCell('Plans for the weekend', new mxGeometry(0, 0, 358, 54), 'shape=rect;fontSize=13;strokeColor=#eeeeee;fillColor=#ffffff;align=left;spacingLeft=16;resizeWidth=1;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 135);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var part5 = new mxCell(
|
|
"Hi,\nI just wanted to check in and see if you had any plans this upcoming weekend. We are thinking of heading up to Napa. Let us know " +
|
|
"if you'd like to go and we'll make reservations.",
|
|
new mxGeometry(0, 0, 358, 400), 'shape=rect;fontSize=14;strokeColor=none;fillColor=none;whiteSpace=wrap;verticalAlign=top;align=left;spacing=16;resizeWidth=1;resizeHeight=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, 189);
|
|
part5.vertex = true;
|
|
bg1.insert(part5);
|
|
var part6 = new mxCell('', new mxGeometry(0, 0, 294, 184), s + 'rect;strokeColor=none;fillColor=#ffffff;shadow=1;resizeWidth=1;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(56, 88);
|
|
part6.vertex = true;
|
|
bg1.insert(part6);
|
|
var part7 = new mxCell('', new mxGeometry(0, 0, 294, 72), s + 'rect;strokeColor=none;fillColor=#00B8D4;');
|
|
part7.vertex = true;
|
|
part6.insert(part7);
|
|
var part8 = new mxCell('', new mxGeometry(0, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#666666;');
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(10, -18);
|
|
part8.vertex = true;
|
|
part7.insert(part8);
|
|
var text3 = new mxCell('Contact name', new mxGeometry(0, 4, 294, 30), 'text;fontSize=16;fontColor=#ffffff;spacingTop=-3;verticalAlign=bottom;spacingLeft=55;');
|
|
text3.vertex = true;
|
|
part7.insert(text3);
|
|
var text4 = new mxCell('trevor_h@example.com', new mxGeometry(0, 34, 294, 30), 'text;fontSize=14;fontColor=#ffffff;spacingTop=-3;verticalAlign=top;textOpacity=60;spacingLeft=55;');
|
|
text4.vertex = true;
|
|
part7.insert(text4);
|
|
var part9 = new mxCell('', new mxGeometry(1, 0.5, 20, 20), s + 'ellipse;strokeColor=none;fillColor=#ffffff;');
|
|
part9.geometry.relative = true;
|
|
part9.geometry.offset = new mxPoint(-32, -10);
|
|
part9.vertex = true;
|
|
part7.insert(part9);
|
|
var part10 = new mxCell('', new mxGeometry(6, 6, 8, 8), s2 + 'x;strokeColor=#00B8D4;strokeWidth=2;');
|
|
part10.vertex = true;
|
|
part9.insert(part10);
|
|
var part11 = new mxCell('', new mxGeometry(0, 0.535, 36, 36), s2 + 'user;strokeColor=none;fillColor=#666666;');
|
|
part11.geometry.relative = true;
|
|
part11.geometry.offset = new mxPoint(10, -18);
|
|
part11.vertex = true;
|
|
part6.insert(part11);
|
|
var text5 = new mxCell('trevorh@example.com', new mxGeometry(0, 85, 294, 30), 'text;fontSize=13;fontColor=#999999;spacingTop=0;verticalAlign=middle;spacingLeft=55;');
|
|
text5.vertex = true;
|
|
part6.insert(text5);
|
|
var part12 = new mxCell('', new mxGeometry(0, 0.84, 36, 36), s2 + 'user;strokeColor=none;fillColor=#666666;');
|
|
part12.geometry.relative = true;
|
|
part12.geometry.offset = new mxPoint(10, -18);
|
|
part12.vertex = true;
|
|
part6.insert(part12);
|
|
var text6 = new mxCell('hansen_t@example.com', new mxGeometry(0, 140, 294, 30), 'text;fontSize=13;fontColor=#999999;spacingTop=0;verticalAlign=middle;spacingLeft=55;');
|
|
text6.vertex = true;
|
|
part6.insert(text6);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'List Style');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlChips', 'GMDL / Chips', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLDialogsPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;shape=";
|
|
var s2 = "dashed=0;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library dialog ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'dialog persistent footer', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 280, 472), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('Google Wi-Fi', new mxGeometry(0, 0, 280, 60), 'text;verticalAlign=middle;spacing=16;fontSize=20;fontStyle=1;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell('Signal strength', new mxGeometry(0, 0, 280, 30), 'text;spacingLeft=16;fontColor=#808080;fontSize=11;spacingTop=6;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 60);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('Excellent', new mxGeometry(0, 0, 280, 30), 'text;fontSize=15;spacing=2;spacingLeft=16;fontStyle=1;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 90);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('Security', new mxGeometry(0, 0, 280, 50), 'text;verticalAlign=bottom;spacingLeft=16;spacingBottom=5;fontSize=11;fontColor=#808080;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 120);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('802.1x EAP', new mxGeometry(0, 0, 280, 40), 'text;spacingLeft=16;fontSize=15;fontStyle=1;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 170);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('Password', new mxGeometry(0, 0, 280, 30), 'text;verticalAlign=middle;spacingLeft=16;fontColor=#009688;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 210);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var text7 = new mxCell('|', new mxGeometry(0, 0, 280, 30), 'text;verticalAlign=bottom;spacingBottom=0;spacingLeft=16;fontSize=20;fontColor=#009688;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 235);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var part1 = new mxCell('', new mxGeometry(0.0571, 0, 248, 30), 'shape=line;strokeWidth=2;noLabel=1;strokeColor=#009688;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 260);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('Show password', new mxGeometry(0, 0, 20, 20), 'shape=rect;strokeWidth=2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=16;fontColor=#000000;strokeColor=#666666;fontSize=14;rounded=1;size=2;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(20, 305);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('Show advanced options', new mxGeometry(0, 0, 20, 20), 'shape=rect;strokeWidth=2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=16;fontColor=#000000;strokeColor=#666666;fontSize=14;rounded=1;size=2;resizeWidht=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(20, 350);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var text8 = new mxCell('CANCEL', new mxGeometry(1, 1, 75, 42), 'text;fontSize=13;fontStyle=1;fontColor=#009688;verticalAlign=middle;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(-160, -42);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell('CONNECT', new mxGeometry(1, 1, 85, 42), 'text;fontSize=13;fontStyle=1;fontColor=#009688;verticalAlign=middle;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(-85, -42);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
return sb.createVertexTemplateFromCells([bg1], 280, 472, 'Dialog with persistent footer button');
|
|
}),
|
|
this.addEntry(dt + 'scrollable dialog persistent footer', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 280, 345), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('Google Wi-Fi', new mxGeometry(0, 0, 280, 60), 'text;verticalAlign=middle;spacing=16;fontSize=20;fontStyle=1;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell('Signal strength', new mxGeometry(0, 0, 280, 30), 'text;spacingLeft=16;fontColor=#808080;fontSize=11;spacingTop=6;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 60);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('Excellent', new mxGeometry(0, 0, 280, 30), 'text;fontSize=15;spacing=2;spacingLeft=16;fontStyle=1;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 90);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('Security', new mxGeometry(0, 0, 280, 50), 'text;verticalAlign=bottom;spacingLeft=16;spacingBottom=5;fontSize=11;fontColor=#808080;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 120);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('802.1x EAP', new mxGeometry(0, 0, 280, 40), 'text;spacingLeft=16;fontSize=15;fontStyle=1;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 170);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('Password', new mxGeometry(0, 0, 280, 30), 'text;verticalAlign=middle;spacingLeft=16;fontColor=#009688;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 210);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var text7 = new mxCell('|', new mxGeometry(0, 0, 280, 30), 'text;verticalAlign=bottom;spacingBottom=0;spacingLeft=16;fontSize=20;fontColor=#009688;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 235);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var part1 = new mxCell('', new mxGeometry(0.0571, 0, 248, 30), 'shape=line;strokeWidth=2;noLabel=1;strokeColor=#009688;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 260);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part1 = new mxCell('', new mxGeometry(0.0571, 1, 248, 30), 'shape=line;strokeWidth=2;noLabel=1;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, - 56);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text8 = new mxCell('CANCEL', new mxGeometry(1, 1, 75, 42), 'text;fontSize=13;fontStyle=1;fontColor=#009688;verticalAlign=middle;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(-160, -42);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell('CONNECT', new mxGeometry(1, 1, 85, 42), 'text;fontSize=13;fontStyle=1;fontColor=#009688;verticalAlign=middle;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(-85, -42);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
return sb.createVertexTemplateFromCells([bg1], 280, 345, 'Scrollable dialog with persistent footer button');
|
|
}),
|
|
this.addEntry(dt + 'message dialog', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 480, 480), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('New message', new mxGeometry(0, 0, 480, 48), s + 'rect;verticalAlign=middle;spacing=16;fontSize=13;fontStyle=1;resizeWidth=1;fillColor=none;strokeColor=#eeeeee;align=left;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var part1 = new mxCell('', new mxGeometry(1, 0.5, 14, 14), s2 + 'x;strokeWidth=2;strokeColor=#666666;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(-34, -7);
|
|
part1.vertex = true;
|
|
text1.insert(part1);
|
|
var text2 = new mxCell('To', new mxGeometry(0, 0, 480, 30), 'text;spacingLeft=16;fontColor=#808080;fontSize=13;spacingTop=6;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 60);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('Subject', new mxGeometry(0, 0, 480, 30), 'text;fontSize=13;spacing=2;spacingLeft=16;fontStyle=0;fontColor=#808080;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 105);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var part3 = new mxCell('', new mxGeometry(0, 1, 480, 65), s2 + 'rect;strokeWidth=1;strokeColor=#eeeeee;fillColor=none;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, -65);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('A', new mxGeometry(0, 1, 24, 4), 'shape=rect;strokeWidth=2;strokeColor=none;labelPosition=center;verticalLabelPosition=top;align=center;verticalAlign=bottom;fontSize=20;spacingBottom=-3;fontColor=#666666;fillColor=#cccccc;fontStyle=0;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(25, -24);
|
|
part4.vertex = true;
|
|
part3.insert(part4);
|
|
var part5 = new mxCell('', new mxGeometry(0, 1, 9, 24), s2 + 'attachment;strokeWidth=2;strokeColor=#666666;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(74, -44);
|
|
part5.vertex = true;
|
|
part3.insert(part5);
|
|
var part6 = new mxCell('', new mxGeometry(0, 1, 14, 14), s2 + 'plus;strokeWidth=2;strokeColor=#666666;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(110, -39);
|
|
part6.vertex = true;
|
|
part3.insert(part6);
|
|
var text9 = new mxCell('SEND', new mxGeometry(1, 1, 90, 65), 'text;fontSize=13;fontStyle=1;fontColor=#2E78F2;spacingTop=0;verticalAlign=middle;align=center;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(-90, -65);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
return sb.createVertexTemplateFromCells([bg1], 480, 480, 'Message dialog');
|
|
}),
|
|
this.addEntry(dt + 'dialog', function()
|
|
{
|
|
var bg1 = new mxCell("Use Google's location service?", new mxGeometry(0, 0, 280, 273), s + 'rect;fillColor=#ffffff;strokeColor=none;shadow=1;fontSize=19;fontColor=#000000;spacingTop=-6;whiteSpace=wrap;spacing=16;align=left;verticalAlign=top;');
|
|
bg1.vertex = true;
|
|
var text2 = new mxCell(
|
|
"Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.",
|
|
new mxGeometry(0, 0, 280, 160), 'text;fontSize=16;fontColor=#999999;spacingTop=-6;whiteSpace=wrap;spacing=16;resizeWidth=1;resizeHeight=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 70);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell("DISAGREE", new mxGeometry(1, 1, 80, 48), 'text;fontSize=13;fontColor=#2E78F2;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(-160, -48);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell("AGREE", new mxGeometry(1, 1, 80, 48), 'text;fontSize=13;fontColor=#2E78F2;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(-80, -48);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
return sb.createVertexTemplateFromCells([bg1], 280, 273, 'Dialog');
|
|
}),
|
|
this.addEntry(dt + 'fullscreen dialog', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#00796B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('New event', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#009688;fontSize=20;fontColor=#FFFFFF;spacingTop=-8;verticalAlign=middle;align=left;spacingLeft=60;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 14, 14), s2 + 'x;strokeColor=#ffffff;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(20, -9);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var text2 = new mxCell('SAVE', new mxGeometry(1, 1, 60, 42), 'text;fontSize=13;fontColor=#FFFFFF;spacingTop=0;verticalAlign=middle;spacingBottom=0;spacingLeft=8;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(-61, -42);
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var bar2 = new mxCell('heyfromjonathan@gmail.com', new mxGeometry(0, 0, 358, 56), s + 'rect;rect;strokeColor=#eeeeee;align=left;spacing=16;fontSize=14;resizeWidth=1;verticalAlign=middle;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), s2 + 'triangle;strokeColor=none;fillColor=#999999;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-27, -4);
|
|
icon2.vertex = true;
|
|
bar2.insert(icon2);
|
|
var text3 = new mxCell('Event name', new mxGeometry(0, 0, 358, 86), 'text;fontSize=31;fontColor=#bbbbbb;spacingTop=0;verticalAlign=bottom;spacingBottom=2;spacingLeft=8;spacing=8;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 137);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var part1 = new mxCell('', new mxGeometry(0.0419, 0, 327, 10), s + 'line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 218);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text4 = new mxCell('Location', new mxGeometry(0, 0, 358, 70), 'text;fontSize=14;fontColor=#bbbbbb;spacingTop=0;verticalAlign=bottom;spacingBottom=2;spacingLeft=10;spacing=8;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 223);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var part2 = new mxCell('', new mxGeometry(0.0419, 0, 328, 10), s + 'line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 288);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var text5 = new mxCell('From', new mxGeometry(0, 0, 358, 40), 'text;fontSize=11;fontColor=#666666;spacingTop=0;verticalAlign=bottom;spacingBottom=2;spacingLeft=10;spacing=8;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 293);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('Fri, May 12 2017', new mxGeometry(0, 0, 200, 40), 'text;fontSize=15;fontColor=#000000;spacingTop=0;verticalAlign=bottom;spacingBottom=2;spacingLeft=10;spacing=8;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 323);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 10, 5), s2 + 'triangle;strokeColor=none;fillColor=#999999;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-118, 341);
|
|
icon3.vertex = true;
|
|
bg1.insert(icon3);
|
|
var text7 = new mxCell('4:30 PM', new mxGeometry(1, 0, 70, 40), 'text;fontSize=15;fontColor=#000000;spacingTop=0;verticalAlign=bottom;spacingBottom=2;spacingLeft=0;spacing=8;fontStyle=0');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(-98, 323);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 10, 5), s2 + 'triangle;strokeColor=none;fillColor=#999999;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-27, 341);
|
|
icon4.vertex = true;
|
|
bg1.insert(icon4);
|
|
var part3 = new mxCell('', new mxGeometry(0.0419, 0, 328, 10), s + 'line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 358);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var text8 = new mxCell('To', new mxGeometry(0, 0, 358, 40), 'text;fontSize=11;fontColor=#666666;spacingTop=0;verticalAlign=bottom;spacingBottom=2;spacingLeft=10;spacing=8;resizeWidth=1;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, 368);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell('Fri, May 12 2017', new mxGeometry(0, 0, 200, 40), 'text;fontSize=15;fontColor=#000000;spacingTop=0;verticalAlign=bottom;spacingBottom=2;spacingLeft=10;spacing=8;resizeWidth=1;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(0, 393);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0, 10, 5), s2 + 'triangle;strokeColor=none;fillColor=#999999;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-118,410);
|
|
icon5.vertex = true;
|
|
bg1.insert(icon5);
|
|
var text10 = new mxCell('5:30 PM', new mxGeometry(1, 0, 70, 40), 'text;fontSize=15;fontColor=#000000;spacingTop=0;verticalAlign=bottom;spacingBottom=2;spacingLeft=0;spacing=8;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(-98, 393);
|
|
text10.vertex = true;
|
|
bg1.insert(text10);
|
|
var icon6 = new mxCell('', new mxGeometry(1, 0, 10, 5), s2 + 'triangle;strokeColor=none;fillColor=#999999;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(-27, 410);
|
|
icon6.vertex = true;
|
|
bg1.insert(icon6);
|
|
var part4 = new mxCell('', new mxGeometry(0.0419, 0, 328, 10), s + 'line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, 428);
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
var part5 = new mxCell('', new mxGeometry(0.0419, 0, 328, 10), s + 'line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, 560);
|
|
part5.vertex = true;
|
|
bg1.insert(part5);
|
|
var icon7 = new mxCell('All-Day', new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;strokeColor=#666666;fillColor=none;strokeWidth=2;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=30;fontSize=15;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(16, 456);
|
|
icon7.vertex = true;
|
|
bg1.insert(icon7);
|
|
var text11 = new mxCell('Pacific Standard Time', new mxGeometry(0, 0, 358, 15), 'text;fontSize=17;fontColor=#000000;verticalAlign=middle;spacingLeft=16;resizeWidth=1;');
|
|
text11.geometry.relative = true;
|
|
text11.geometry.offset = new mxPoint(0, 536);
|
|
text11.vertex = true;
|
|
bg1.insert(text11);
|
|
var icon8 = new mxCell('', new mxGeometry(1, 0, 10, 5), s2 + 'triangle;strokeColor=none;fillColor=#999999;');
|
|
icon8.geometry.relative = true;
|
|
icon8.geometry.offset = new mxPoint(-27, 539);
|
|
icon8.vertex = true;
|
|
bg1.insert(icon8);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Fullscreen dialog');
|
|
}),
|
|
this.addEntry(dt + 'dialog scrollable list', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 280, 270), 'shape=rect;fontSize=18;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var item1 = new mxCell('None', new mxGeometry(0, 0, 20, 20), s2 + 'radiobutton;fontSize=15;fontColor=#000000;spacingTop=0;whiteSpace=wrap;spacing=20;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeWidth=2;strokeColor=#666666;');
|
|
item1.geometry.relative = true;
|
|
item1.geometry.offset = new mxPoint(16,55);
|
|
item1.vertex = true;
|
|
bg1.insert(item1);
|
|
var item2 = new mxCell('Callisto', new mxGeometry(0, 0, 20, 20), s2 + 'radiobutton;fontSize=15;fontColor=#000000;spacingTop=0;whiteSpace=wrap;spacing=20;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeWidth=2;strokeColor=#666666;');
|
|
item2.geometry.relative = true;
|
|
item2.geometry.offset = new mxPoint(16, 102);
|
|
item2.vertex = true;
|
|
bg1.insert(item2);
|
|
var item3 = new mxCell('Ganymede', new mxGeometry(0, 0, 20, 20), s2 + 'radiobutton;fontSize=15;fontColor=#000000;spacingTop=0;whiteSpace=wrap;spacing=20;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeWidth=2;strokeColor=#666666;');
|
|
item3.geometry.relative = true;
|
|
item3.geometry.offset = new mxPoint(16, 157);
|
|
item3.vertex = true;
|
|
bg1.insert(item3);
|
|
var item4 = new mxCell('Luna', new mxGeometry(0, 0, 20, 20), s2 + 'radiobutton;fontSize=15;fontColor=#000000;spacingTop=0;whiteSpace=wrap;spacing=20;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeWidth=2;strokeColor=#009688;fillColor=#009688;');
|
|
item4.geometry.relative = true;
|
|
item4.geometry.offset = new mxPoint(16, 202);
|
|
item4.vertex = true;
|
|
bg1.insert(item4);
|
|
var bar1 = new mxCell("Phone Ringtone", new mxGeometry(0, 0, 280, 58), 'shape=rect;fontSize=17;fontColor=#000000;strokeColor=#eeeeee;fillColor=#ffffff;align=left;spacing=16;fontStyle=1;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var bar2 = new mxCell("", new mxGeometry(0, 1, 280, 52), 'shape=rect;fontSize=17;fontColor=#000000;strokeColor=#eeeeee;fillColor=#ffffff;align=left;spacing=16;resizeWidth=1;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, -52);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var text3 = new mxCell("CANCEL", new mxGeometry(1, 1, 60, 52), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(-140, -52);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell("OK", new mxGeometry(1, 1, 80, 52), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(-80, -52);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
return sb.createVertexTemplateFromCells([bg1], 280, 270, 'Dialog with scrollable list');
|
|
}),
|
|
this.addEntry(dt + 'dialog scrollable list', function()
|
|
{
|
|
var bg1 = new mxCell("Discard draft?", new mxGeometry(0, 0, 280, 112), 'shape=rect;fontSize=18;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;fontSize=17;fontColor=#666666;align=left;spacing=16;align=left;verticalAlign=top;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 52), 'text;fontSize=13;fontColor=#0083F1;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(-160, -52);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell("DISCARD", new mxGeometry(1, 1, 90, 52), 'text;fontSize=13;fontColor=#0083F1;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(-90, -52);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
return sb.createVertexTemplateFromCells([bg1], 280, 112, 'Dialog with scrollable list');
|
|
}),
|
|
this.addEntry(dt + 'simple dialog', function()
|
|
{
|
|
var bg1 = new mxCell('Set backup account', new mxGeometry(0, 0, 280, 250), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;fontSize=20;fontColor=#000000;align=left;spacing=16;verticalAlign=top;fontStyle=0;spacingTop=-5;recursiveResize=0');
|
|
bg1.vertex = true;
|
|
var icon1 = new mxCell("username@gmail.com", new mxGeometry(15, 65, 40, 40), s2 + 'user;fontSize=15;fontColor=#000000;align=left;spacing=16;verticalAlign=middle;fillColor=#5E97F6;strokeColor=none;labelPosition=right;verticalLabelPosition=middle;');
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var icon2 = new mxCell("user02@gmail.com", new mxGeometry(15, 130, 40, 40), s2 + 'user;fontSize=15;fontColor=#000000;align=left;spacing=16;verticalAlign=middle;fillColor=#5E97F6;strokeColor=none;labelPosition=right;verticalLabelPosition=middle;');
|
|
icon2.vertex = true;
|
|
bg1.insert(icon2);
|
|
var icon3 = new mxCell("add account", new mxGeometry(15, 195, 40, 40), 'shape=ellipse;fontSize=15;fontColor=#000000;align=left;spacing=16;verticalAlign=middle;fillColor=#bdbdbd;strokeColor=none;labelPosition=right;verticalLabelPosition=middle;');
|
|
icon3.vertex = true;
|
|
bg1.insert(icon3);
|
|
var icon4 = new mxCell("", new mxGeometry(12, 12, 16, 16), s2 + 'plus;strokeColor=#ffffff;strokeWidth=2;');
|
|
icon4.vertex = true;
|
|
icon3.insert(icon4);
|
|
return sb.createVertexTemplateFromCells([bg1], 280, 250, 'Simple dialog');
|
|
}),
|
|
this.addEntry(dt + 'confirmation dialog', function()
|
|
{
|
|
var bg1 = new mxCell('Phone ringtone', new mxGeometry(0, 0, 280, 520), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;fontSize=20;fontColor=#000000;spacingTop=-7;spacing=20;labelPosition=center;align=left;verticalAlign=top;');
|
|
bg1.vertex = true;
|
|
var item1 = new mxCell('None', new mxGeometry(0, 0, 20, 20), s2 + 'radiobutton;fontSize=16;fontColor=#000000;spacingTop=0;spacing=20;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeWidth=2;strokeColor=#666666;');
|
|
item1.geometry.relative = true;
|
|
item1.geometry.offset = new mxPoint(16, 71);
|
|
item1.vertex = true;
|
|
bg1.insert(item1);
|
|
var item2 = new mxCell('Callisto', new mxGeometry(0, 0, 20, 20), s2 + 'radiobutton;fontSize=16;fontColor=#000000;spacingTop=0;spacing=20;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeWidth=2;strokeColor=#666666;');
|
|
item2.geometry.relative = true;
|
|
item2.geometry.offset = new mxPoint(16, 122);
|
|
item2.vertex = true;
|
|
bg1.insert(item2);
|
|
var item3 = new mxCell('Dione', new mxGeometry(0, 0, 20, 20), s2 + 'radiobutton;fontSize=16;fontColor=#000000;spacingTop=0;spacing=20;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeWidth=2;strokeColor=#666666;');
|
|
item3.geometry.relative = true;
|
|
item3.geometry.offset = new mxPoint(16, 173);
|
|
item3.vertex = true;
|
|
bg1.insert(item3);
|
|
var item4 = new mxCell('Ganymede', new mxGeometry(0, 0, 20, 20), s2 + 'radiobutton;fontSize=16;fontColor=#000000;spacingTop=0;spacing=20;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeWidth=2;strokeColor=#666666;');
|
|
item4.geometry.relative = true;
|
|
item4.geometry.offset = new mxPoint(16, 224);
|
|
item4.vertex = true;
|
|
bg1.insert(item4);
|
|
var item5 = new mxCell('Hangouts Call', new mxGeometry(0, 0, 20, 20), s2 + 'radiobutton;fontSize=16;fontColor=#000000;spacingTop=0;spacing=20;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeWidth=2;strokeColor=#666666;');
|
|
item5.geometry.relative = true;
|
|
item5.geometry.offset = new mxPoint(16, 275);
|
|
item5.vertex = true;
|
|
bg1.insert(item5);
|
|
var item6 = new mxCell('Luna', new mxGeometry(0, 0, 20, 20), s2 + 'radiobutton;fontSize=16;fontColor=#000000;spacingTop=0;spacing=20;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeWidth=2;strokeColor=#009688;fillColor=#009688;');
|
|
item6.geometry.relative = true;
|
|
item6.geometry.offset = new mxPoint(16, 326);
|
|
item6.vertex = true;
|
|
bg1.insert(item6);
|
|
var item7 = new mxCell('Oberon', new mxGeometry(0, 0, 20, 20), s2 + 'radiobutton;fontSize=16;fontColor=#000000;spacingTop=0;spacing=20;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeWidth=2;strokeColor=#666666;');
|
|
item7.geometry.relative = true;
|
|
item7.geometry.offset = new mxPoint(16, 377);
|
|
item7.vertex = true;
|
|
bg1.insert(item7);
|
|
var item8 = new mxCell('Phobos', new mxGeometry(0, 0, 20, 20), s2 + 'radiobutton;fontSize=16;fontColor=#000000;spacingTop=0;spacing=20;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeWidth=2;strokeColor=#666666;');
|
|
item8.geometry.relative = true;
|
|
item8.geometry.offset = new mxPoint(16, 428);
|
|
item8.vertex = true;
|
|
bg1.insert(item8);
|
|
var bar2 = new mxCell("", new mxGeometry(0, 1, 280, 52), 'shape=rect;fontSize=17;fontColor=#000000;strokeColor=#eeeeee;fillColor=#ffffff;align=left;spacing=16;resizeWidth=1;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, -52);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var text1 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 52), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(-160, -52);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell("OK", new mxGeometry(1, 1, 90, 52), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(-90, -52);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
return sb.createVertexTemplateFromCells([bg1], 280, 520, 'Confirmation dialog');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlDialogs', 'GMDL / Dialogs', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLDividersPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;shape=";
|
|
var s2 = "dashed=0;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library divider ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'email list full bleed divider', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;fontSize=13;align=right;fillColor=#C2185B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Inbox', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#E91E63;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;verticalAlign=middle;align=left;spacingLeft=72;spacingTop=-4;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=#ffffff;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-78, -8);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 20, 20), 'ellipse;strokeColor=none;fillColor=#ffffff;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-37, -10);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(5, 6, 12, 8), s2 + 'check;strokeColor=#E91E63;fillColor=none;strokeWidth=2;');
|
|
icon4.vertex = true;
|
|
icon3.insert(icon4);
|
|
var bar2 = new mxCell('Ali Connors', new mxGeometry(0, 0, 358, 86), 'shape=rect;fontSize=16;strokeColor=#eeeeee;fillColor=#ffffff;align=left;verticalAlign=top;spacing=16;spacingTop=-10;resizeWidth=1;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var text2 = new mxCell('Brunch this weekend?', new mxGeometry(0, 0, 300, 20), 'text;fontSize=13;verticalAlign=middle;spacingLeft=16;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 31);
|
|
text2.vertex = true;
|
|
bar2.insert(text2);
|
|
var text3 = new mxCell("I'll be in your neighbourheed doing errands ...", new mxGeometry(0, 0, 300, 20), 'text;fontSize=13;verticalAlign=top;spacingLeft=16;fontColor=#999999;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 50);
|
|
text3.vertex = true;
|
|
bar2.insert(text3);
|
|
var text4 = new mxCell("15 min", new mxGeometry(1, 0, 80, 20), 'text;fontSize=12;verticalAlign=top;spacingLeft=16;align=right;spacingTop=2;spacingRight=16;fontColor=#999999;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(-80, 0);
|
|
text4.vertex = true;
|
|
bar2.insert(text4);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0, 17, 16), s2 + 'star;strokeColor=#B3B3B3;fillColor=#ffffff;strokeWidth=2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-39, 50);
|
|
icon5.vertex = true;
|
|
bar2.insert(icon5);
|
|
var bar3 = new mxCell('me, Scott, Jennifer', new mxGeometry(0, 0, 358, 86), 'shape=rect;fontSize=16;strokeColor=#eeeeee;fillColor=#ffffff;align=left;verticalAlign=top;spacing=16;spacingTop=-10;resizeWidth=1;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 167);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var text2 = new mxCell('Summer BBQ', new mxGeometry(0, 0, 300, 20), 'text;fontSize=13;verticalAlign=middle;spacingLeft=16;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 31);
|
|
text2.vertex = true;
|
|
bar3.insert(text2);
|
|
var text3 = new mxCell("Wish I could come, but I'm out of town this ...", new mxGeometry(0, 0, 300, 20), 'text;fontSize=13;verticalAlign=top;spacingLeft=16;fontColor=#999999;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 50);
|
|
text3.vertex = true;
|
|
bar3.insert(text3);
|
|
var text4 = new mxCell("2 hr", new mxGeometry(1, 0, 80, 20), 'text;fontSize=12;verticalAlign=top;spacingLeft=16;align=right;spacingTop=2;spacingRight=16;fontColor=#999999;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(-80, 0);
|
|
text4.vertex = true;
|
|
bar3.insert(text4);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0, 17, 16), s2 + 'star;strokeColor=#B3B3B3;fillColor=#ffffff;strokeWidth=2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-39, 50);
|
|
icon5.vertex = true;
|
|
bar3.insert(icon5);
|
|
var bar4 = new mxCell('Sandra Adams', new mxGeometry(0, 0, 358, 86), 'shape=rect;fontSize=16;strokeColor=#eeeeee;fillColor=#ffffff;align=left;verticalAlign=top;spacing=16;spacingTop=-10;resizeWidth=1;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 253);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var text2 = new mxCell('Oui oui', new mxGeometry(0, 0, 300, 20), 'text;fontSize=13;verticalAlign=middle;spacingLeft=16;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 31);
|
|
text2.vertex = true;
|
|
bar4.insert(text2);
|
|
var text3 = new mxCell("Do you have any recommendations? Have ...", new mxGeometry(0, 0, 300, 20), 'text;fontSize=13;verticalAlign=top;spacingLeft=16;fontColor=#999999;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 50);
|
|
text3.vertex = true;
|
|
bar4.insert(text3);
|
|
var text4 = new mxCell("6 hr", new mxGeometry(1, 0, 80, 20), 'text;fontSize=12;verticalAlign=top;spacingLeft=16;align=right;spacingTop=2;spacingRight=16;fontColor=#999999;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(-80, 0);
|
|
text4.vertex = true;
|
|
bar4.insert(text4);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0, 17, 16), s2 + 'star;strokeColor=#B3B3B3;fillColor=#ffffff;strokeWidth=2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-39, 50);
|
|
icon5.vertex = true;
|
|
bar4.insert(icon5);
|
|
var bar5 = new mxCell('Trevor Hansen', new mxGeometry(0, 0, 358, 86), 'shape=rect;fontSize=16;strokeColor=#eeeeee;fillColor=#ffffff;align=left;verticalAlign=top;spacing=16;spacingTop=-10;resizeWidth=1;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 339);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var text2 = new mxCell('Birthday gift', new mxGeometry(0, 0, 300, 20), 'text;fontSize=13;verticalAlign=middle;spacingLeft=16;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 31);
|
|
text2.vertex = true;
|
|
bar5.insert(text2);
|
|
var text3 = new mxCell("Have any ideas about what to get Heidi for ...", new mxGeometry(0, 0, 300, 20), 'text;fontSize=13;verticalAlign=top;spacingLeft=16;fontColor=#999999;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 50);
|
|
text3.vertex = true;
|
|
bar5.insert(text3);
|
|
var text4 = new mxCell("12 hr", new mxGeometry(1, 0, 80, 20), 'text;fontSize=12;verticalAlign=top;spacingLeft=16;align=right;spacingTop=2;spacingRight=16;fontColor=#999999;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(-80, 0);
|
|
text4.vertex = true;
|
|
bar5.insert(text4);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0, 17, 16), s2 + 'star;strokeColor=#B3B3B3;fillColor=#ffffff;strokeWidth=2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-39, 50);
|
|
icon5.vertex = true;
|
|
bar5.insert(icon5);
|
|
var bar6 = new mxCell('Britta Holt', new mxGeometry(0, 0, 358, 86), 'shape=rect;fontSize=16;strokeColor=#eeeeee;fillColor=#ffffff;align=left;verticalAlign=top;spacing=16;spacingTop=-10;resizeWidth=1;');
|
|
bar6.geometry.relative = true;
|
|
bar6.geometry.offset = new mxPoint(0, 425);
|
|
bar6.vertex = true;
|
|
bg1.insert(bar6);
|
|
var text2 = new mxCell('Recipe to try', new mxGeometry(0, 0, 300, 20), 'text;fontSize=13;verticalAlign=middle;spacingLeft=16;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 31);
|
|
text2.vertex = true;
|
|
bar6.insert(text2);
|
|
var text3 = new mxCell("We should eat this: grated squash, corn and ...", new mxGeometry(0, 0, 300, 20), 'text;fontSize=13;verticalAlign=top;spacingLeft=16;fontColor=#999999;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 50);
|
|
text3.vertex = true;
|
|
bar6.insert(text3);
|
|
var text4 = new mxCell("18 hr", new mxGeometry(1, 0, 80, 20), 'text;fontSize=12;verticalAlign=top;spacingLeft=16;align=right;spacingTop=2;spacingRight=16;fontColor=#999999;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(-80, 0);
|
|
text4.vertex = true;
|
|
bar6.insert(text4);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0, 17, 16), s2 + 'star;strokeColor=#B3B3B3;fillColor=#ffffff;strokeWidth=2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-39, 50);
|
|
icon5.vertex = true;
|
|
bar6.insert(icon5);
|
|
var bar7 = new mxCell('David Park', new mxGeometry(0, 0, 358, 86), 'shape=rect;fontSize=16;strokeColor=#eeeeee;fillColor=#ffffff;align=left;verticalAlign=top;spacing=16;spacingTop=-10;resizeWidth=1;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 511);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var text2 = new mxCell('Giants game', new mxGeometry(0, 0, 300, 20), 'text;fontSize=13;verticalAlign=middle;spacingLeft=16;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 31);
|
|
text2.vertex = true;
|
|
bar7.insert(text2);
|
|
var text3 = new mxCell("Any interest in seeing the Giants play next ...", new mxGeometry(0, 0, 300, 20), 'text;fontSize=13;verticalAlign=top;spacingLeft=16;fontColor=#999999;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 50);
|
|
text3.vertex = true;
|
|
bar7.insert(text3);
|
|
var text4 = new mxCell("23 hr", new mxGeometry(1, 0, 80, 20), 'text;fontSize=12;verticalAlign=top;spacingLeft=16;align=right;spacingTop=2;spacingRight=16;fontColor=#999999;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(-80, 0);
|
|
text4.vertex = true;
|
|
bar7.insert(text4);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0, 17, 16), s2 + 'star;strokeColor=#B3B3B3;fillColor=#ffffff;strokeWidth=2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-39, 50);
|
|
icon5.vertex = true;
|
|
bar7.insert(icon5);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 1, 56, 56), 'shape=ellipse;strokeColor=none;fillColor=#18FFFF;shadow=1;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-78, -129);
|
|
icon5.vertex = true;
|
|
bg1.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(20, 20, 16, 16), s2 + 'plus;strokeColor=#084560;strokeWidth=2;');
|
|
icon6.vertex = true;
|
|
icon5.insert(icon6);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Full-bleed dividers');
|
|
}),
|
|
this.addEntry(dt + 'full bleed divider compose email', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;fontSize=13;align=right;fillColor=#C2185B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Compose', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#E91E63;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=-3;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 16), s2 + 'left;strokeColor=#ffffff;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(25, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 22, 22), s2 + 'send;strokeColor=none;fillColor=#ffffff;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-35, -11);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var bar2 = new mxCell('heyfromjonathan@gmail.com', new mxGeometry(0, 0, 358, 54), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;align=left;spacing=16;fontSize=13;resizeWidth=1;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), s2 + 'triangle;strokeColor=none;fillColor=#666666;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-30, -3);
|
|
icon2.vertex = true;
|
|
bar2.insert(icon2);
|
|
var bar3 = new mxCell('To', new mxGeometry(0, 0, 358, 54), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;align=left;spacing=16;fontSize=13;fontColor=#bbbbbb;resizeWidth=1;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 135);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var bar4 = new mxCell('Subject', new mxGeometry(0, 0, 358, 54), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;align=left;spacing=16;fontSize=13;fontColor=#bbbbbb;resizeWidth=1;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 189);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var bar5 = new mxCell('Message', new mxGeometry(0, 0, 358, 54), 'text;align=left;spacing=16;fontSize=13;fontColor=#bbbbbb;resizeWidth=1;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 243);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Full-bleed dividers');
|
|
}),
|
|
this.addEntry(dt + 'image based content divider', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;fontSize=13;align=right;fillColor=#757575;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Albums', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;fontSize=20;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;spacingTop=-4;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 16), s2 + 'left;strokeColor=#757575;fillColor=none;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(24, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 20, 20), s2 + 'search;strokeWidth=2;fillColor=none;strokeColor=#757575;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-37, -10);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var text1 = new mxCell('May', new mxGeometry(0, 78, 358, 50), 'shape=rect;strokeColor=none;fillColor=none;fontColor=#757575;align=left;spacingLeft=10;fontSize=14;');
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var icon4 = new mxCell('', new mxGeometry(4, 128, 115, 115), s2 + 'image;strokeColor=#bbbbbb;fillColor=#ffffff;');
|
|
icon4.vertex = true;
|
|
bg1.insert(icon4);
|
|
var icon5 = new mxCell('', new mxGeometry(122, 128, 115, 115), s2 + 'image;strokeColor=#bbbbbb;fillColor=#ffffff;');
|
|
icon5.vertex = true;
|
|
bg1.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(240, 128, 115, 115), s2 + 'image;strokeColor=#bbbbbb;fillColor=#ffffff;');
|
|
icon6.vertex = true;
|
|
bg1.insert(icon6);
|
|
var icon7 = new mxCell('', new mxGeometry(4, 247, 115, 115), s2 + 'image;strokeColor=#bbbbbb;fillColor=#ffffff;');
|
|
icon7.vertex = true;
|
|
bg1.insert(icon7);
|
|
var icon8 = new mxCell('', new mxGeometry(122, 247, 115, 115), s2 + 'image;strokeColor=#bbbbbb;fillColor=#ffffff;');
|
|
icon8.vertex = true;
|
|
bg1.insert(icon8);
|
|
var icon9 = new mxCell('', new mxGeometry(240, 247, 115, 115), s2 + 'image;strokeColor=#bbbbbb;fillColor=#ffffff;');
|
|
icon9.vertex = true;
|
|
bg1.insert(icon9);
|
|
|
|
var text2 = new mxCell('June', new mxGeometry(0, 362, 358, 50), 'shape=rect;strokeColor=none;fillColor=none;fontColor=#757575;align=left;spacingLeft=10;fontSize=14;');
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var icon10 = new mxCell('', new mxGeometry(4, 412, 115, 115), s2 + 'image;strokeColor=#bbbbbb;fillColor=#ffffff;');
|
|
icon10.vertex = true;
|
|
bg1.insert(icon10);
|
|
var icon11 = new mxCell('', new mxGeometry(122, 412, 115, 115), s2 + 'image;strokeColor=#bbbbbb;fillColor=#ffffff;');
|
|
icon11.vertex = true;
|
|
bg1.insert(icon11);
|
|
var icon12 = new mxCell('', new mxGeometry(240, 412, 115, 115), s2 + 'image;strokeColor=#bbbbbb;fillColor=#ffffff;');
|
|
icon12.vertex = true;
|
|
bg1.insert(icon12);
|
|
var icon13 = new mxCell('', new mxGeometry(4, 531, 115, 115), s2 + 'image;strokeColor=#bbbbbb;fillColor=#ffffff;');
|
|
icon13.vertex = true;
|
|
bg1.insert(icon13);
|
|
var icon14 = new mxCell('', new mxGeometry(122, 531, 115, 115), s2 + 'image;strokeColor=#bbbbbb;fillColor=#ffffff;');
|
|
icon14.vertex = true;
|
|
bg1.insert(icon14);
|
|
var icon15 = new mxCell('', new mxGeometry(240, 531, 115, 115), s2 + 'image;strokeColor=#bbbbbb;fillColor=#ffffff;');
|
|
icon15.vertex = true;
|
|
bg1.insert(icon15);
|
|
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Image based content dividers');
|
|
}),
|
|
this.addEntry(dt + 'full bleed divider', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#00796B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#2D3986;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Feed reader', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#009688;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#00423B;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'refresh;strokeColor=#00423B;fillColor=#00423B;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, -8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#00423B;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, -8);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bg2 = new mxCell('', new mxGeometry(0, 0, 358, 103), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=0;resizeWidth=1;');
|
|
bg2.geometry.relative = true;
|
|
bg2.geometry.offset = new mxPoint(0, 81);
|
|
bg2.vertex = true;
|
|
bg1.insert(bg2);
|
|
var part1 = new mxCell('Day reappeared. The tempest still raged with undiminished',
|
|
new mxGeometry(0, 0, 244, 60), 'text;whiteSpace=wrap;fontColor=#000000;verticalAlign=top;align=left;fontSize=15;spacing=16;spacingBottom=0;spacingTop=-12;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg2.insert(part1);
|
|
var part2 = new mxCell('Corned beef prosciutto ground...',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=13;fontColor=#000000;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 48);
|
|
part2.vertex = true;
|
|
bg2.insert(part2);
|
|
var part3 = new mxCell('10 min',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=12;fontColor=#999999;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 72);
|
|
part3.vertex = true;
|
|
bg2.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(244, 0, 112, 103), s2 + 'marginRect;rectMargin=12;rectMarginLeft=-12;fillColor=#BDBDBD;strokeColor=none;');
|
|
part4.vertex = true;
|
|
bg2.insert(part4);
|
|
var bg3 = new mxCell('', new mxGeometry(0, 0, 358, 103), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=0;resizeWidth=1;');
|
|
bg3.geometry.relative = true;
|
|
bg3.geometry.offset = new mxPoint(0, 184);
|
|
bg3.vertex = true;
|
|
bg1.insert(bg3);
|
|
var part1 = new mxCell('There were some signs of a calm at noon',
|
|
new mxGeometry(0, 0, 244, 60), 'text;whiteSpace=wrap;fontColor=#000000;verticalAlign=top;align=left;fontSize=15;spacing=16;spacingBottom=0;spacingTop=-12;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg3.insert(part1);
|
|
var part2 = new mxCell('Things to enjoy',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=13;fontColor=#000000;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 48);
|
|
part2.vertex = true;
|
|
bg3.insert(part2);
|
|
var part3 = new mxCell('1 hr',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=12;fontColor=#999999;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 72);
|
|
part3.vertex = true;
|
|
bg3.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(244, 0, 112, 103), s2 + 'marginRect;rectMargin=12;rectMarginLeft=-12;fillColor=#BDBDBD;strokeColor=none;');
|
|
part4.vertex = true;
|
|
bg3.insert(part4);
|
|
var bg4 = new mxCell('', new mxGeometry(0, 0, 358, 103), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=0;resizeWidth=1;');
|
|
bg4.geometry.relative = true;
|
|
bg4.geometry.offset = new mxPoint(0, 287);
|
|
bg4.vertex = true;
|
|
bg1.insert(bg4);
|
|
var part1 = new mxCell('Fun tropical escapes',
|
|
new mxGeometry(0, 0, 244, 60), 'text;whiteSpace=wrap;fontColor=#000000;verticalAlign=top;align=left;fontSize=15;spacing=16;spacingBottom=0;spacingTop=-12;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg4.insert(part1);
|
|
var part2 = new mxCell('The night was comparatively quiet. Some of the sails were again.',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=13;fontColor=#000000;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 30);
|
|
part2.vertex = true;
|
|
bg4.insert(part2);
|
|
var part3 = new mxCell('1 hr',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=12;fontColor=#999999;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 72);
|
|
part3.vertex = true;
|
|
bg4.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(244, 0, 112, 103), s2 + 'marginRect;rectMargin=12;rectMarginLeft=-12;fillColor=#BDBDBD;strokeColor=none;');
|
|
part4.vertex = true;
|
|
bg4.insert(part4);
|
|
var bg5 = new mxCell('', new mxGeometry(0, 0, 358, 103), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=0;resizeWidth=1;');
|
|
bg5.geometry.relative = true;
|
|
bg5.geometry.offset = new mxPoint(0, 390);
|
|
bg5.vertex = true;
|
|
bg1.insert(bg5);
|
|
var part1 = new mxCell('Pork loin sausage shankle, kielbasa bacon beef ribs',
|
|
new mxGeometry(0, 0, 244, 60), 'text;whiteSpace=wrap;fontColor=#000000;verticalAlign=top;align=left;fontSize=15;spacing=16;spacingBottom=0;spacingTop=-12;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg5.insert(part1);
|
|
var part2 = new mxCell('Drumstick turkey shoulder square...',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=13;fontColor=#000000;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 48);
|
|
part2.vertex = true;
|
|
bg5.insert(part2);
|
|
var part3 = new mxCell('2 hr',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=12;fontColor=#999999;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 72);
|
|
part3.vertex = true;
|
|
bg5.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(244, 0, 112, 103), s2 + 'marginRect;rectMargin=12;rectMarginLeft=-12;fillColor=#BDBDBD;strokeColor=none;');
|
|
part4.vertex = true;
|
|
bg5.insert(part4);
|
|
var bg6 = new mxCell('', new mxGeometry(0, 0, 358, 101), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=0;resizeWidth=1;');
|
|
bg6.geometry.relative = true;
|
|
bg6.geometry.offset = new mxPoint(0, 493);
|
|
bg6.vertex = true;
|
|
bg1.insert(bg6);
|
|
var part1 = new mxCell('Cherry blossoms in bloom',
|
|
new mxGeometry(0, 0, 244, 60), 'text;whiteSpace=wrap;fontColor=#000000;verticalAlign=top;align=left;fontSize=15;spacing=16;spacingBottom=0;spacingTop=-12;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg6.insert(part1);
|
|
var part2 = new mxCell('Spring is here and we all know...',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=13;fontColor=#000000;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 30);
|
|
part2.vertex = true;
|
|
bg6.insert(part2);
|
|
var part3 = new mxCell('3 hr',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=12;fontColor=#999999;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 72);
|
|
part3.vertex = true;
|
|
bg6.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(244, 0, 112, 103), s2 + 'marginRect;rectMargin=12;rectMarginLeft=-12;fillColor=#BDBDBD;strokeColor=none;');
|
|
part4.vertex = true;
|
|
bg6.insert(part4);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Full-bleed dividers');
|
|
}),
|
|
this.addEntry(dt + 'inset divider', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#2D3986;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#2D3986;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('All', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#394797;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=-3;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(0, 0.5, 10, 5), s2 + 'triangle;strokeColor=none;fillColor=#ffffff;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(104, -3);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, -8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, -8);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar2 = new mxCell('Janet Perkins', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;spacingLeft=72;align=left;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 0.5, 23, 21), s2 + 'star;strokeColor=none;fillColor=#D3396E;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(16, -11);
|
|
icon5.vertex = true;
|
|
bar2.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(-50, -18);
|
|
icon6.vertex = true;
|
|
bar2.insert(icon6);
|
|
var bar3 = new mxCell('Mary Johnson', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 136);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var icon7 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(-50, -18);
|
|
icon7.vertex = true;
|
|
bar3.insert(icon7);
|
|
var bar4 = new mxCell('Peter Carlsson', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 191);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var icon8 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon8.geometry.relative = true;
|
|
icon8.geometry.offset = new mxPoint(-50, -18);
|
|
icon8.vertex = true;
|
|
bar4.insert(icon8);
|
|
var bar5 = new mxCell('Trevor Hansen', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 246);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var icon9 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon9.geometry.relative = true;
|
|
icon9.geometry.offset = new mxPoint(-50, -18);
|
|
icon9.vertex = true;
|
|
bar5.insert(icon9);
|
|
var line1 = new mxCell('', new mxGeometry(0.2011, 0, 286, 8), 'shape=line;strokeColor=#eeeeee;strokeWidth=1;resizeWidth=1;');
|
|
line1.geometry.relative = true;
|
|
line1.geometry.offset = new mxPoint(0, 306);
|
|
line1.vertex = true;
|
|
bg1.insert(line1);
|
|
var bar7 = new mxCell('Aaron Bennett', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 319);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var text6 = new mxCell('A', new mxGeometry(0, 0.5, 24, 24), 'text;fontSize=24;fontColor=#D3396E;verticalAlign=middle;fontStyle=0;align=center;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(16, -12);
|
|
text6.vertex = true;
|
|
bar7.insert(text6);
|
|
var icon11 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon11.geometry.relative = true;
|
|
icon11.geometry.offset = new mxPoint(-50, -18);
|
|
icon11.vertex = true;
|
|
bar7.insert(icon11);
|
|
var bar8 = new mxCell('Abbey Christensen', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar8.geometry.relative = true;
|
|
bar8.geometry.offset = new mxPoint(0, 374);
|
|
bar8.vertex = true;
|
|
bg1.insert(bar8);
|
|
var icon12 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(-50, -18);
|
|
icon12.vertex = true;
|
|
bar8.insert(icon12);
|
|
var bar9 = new mxCell('Ali Connors', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar9.geometry.relative = true;
|
|
bar9.geometry.offset = new mxPoint(0, 429);
|
|
bar9.vertex = true;
|
|
bg1.insert(bar9);
|
|
var icon13 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(-50, -18);
|
|
icon13.vertex = true;
|
|
bar9.insert(icon13);
|
|
var bar10 = new mxCell('Alex Nelson', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar10.geometry.relative = true;
|
|
bar10.geometry.offset = new mxPoint(0, 484);
|
|
bar10.vertex = true;
|
|
bg1.insert(bar10);
|
|
var icon14 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon14.geometry.relative = true;
|
|
icon14.geometry.offset = new mxPoint(-50, -18);
|
|
icon14.vertex = true;
|
|
bar10.insert(icon14);
|
|
var bar11 = new mxCell('Anthony Stevens', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar11.geometry.relative = true;
|
|
bar11.geometry.offset = new mxPoint(0, 539);
|
|
bar11.vertex = true;
|
|
bg1.insert(bar11);
|
|
var icon15 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon15.geometry.relative = true;
|
|
icon15.geometry.offset = new mxPoint(-50, -18);
|
|
icon15.vertex = true;
|
|
bar11.insert(icon15);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Inset dividers');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlDividers', 'GMDL / Dividers', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLGridListsPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;shape=";
|
|
var s2 = "dashed=0;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library grid list ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'grid titles', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#0288D1;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#0973AE;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('', new mxGeometry(0, 0, 358, 126), s + 'rect;strokeColor=none;fillColor=#03A9F4;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'left;strokeColor=#084560;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(25, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var text1 = new mxCell('tos >', new mxGeometry(0, 1, 56, 24), 'text;fontSize=22;fontColor=#57C4F5;spacingTop=-3;verticalAlign=middle;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, -50);
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('Beach', new mxGeometry(0, 1, 250, 24), 'text;fontSize=22;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(56, -50);
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#084560;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-73, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 18, 16), s2 + 'menu;strokeColor=none;fillColor=#084560;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-34, 17);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bg2 = new mxCell('', new mxGeometry(0, 0, 179, 179), s2 + 'marginRect;rectMargin=4;rectMarginBottom=-2;rectMarginRight=-2;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg2.geometry.relative = true;
|
|
bg2.geometry.offset = new mxPoint(0, 150);
|
|
bg2.vertex = true;
|
|
bg1.insert(bg2);
|
|
var part1 = new mxCell('IMG_4130.jpg',
|
|
new mxGeometry(0, 1, 179, 50), s2 + 'marginRect;rectMarginLeft=4;rectMarginRight=2;rectMarginBottom=2;strokeColor=none;whiteSpace=wrap;fontColor=#ffffff;verticalAlign=middle;align=left;fontSize=15;spacing=20;spacingBottom=0;spacingTop=0;fillColor=#000000;opacity=25;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -50);
|
|
part1.vertex = true;
|
|
bg2.insert(part1);
|
|
var part3 = new mxCell('i', new mxGeometry(1, 0.5, 16, 16), 'shape=ellipse;fillColor=#cccccc;strokeColor=none;fontStyle=1;fontColor=#999999;fontSize=12;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(-34, -8);
|
|
part3.vertex = true;
|
|
part1.insert(part3);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#1AD2D2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(18, 130);
|
|
icon5.vertex = true;
|
|
bg1.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), s2 + 'plus;strokeColor=#084560;strokeWidth=2;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(-7, -7);
|
|
icon6.vertex = true;
|
|
icon5.insert(icon6);
|
|
var bg3 = new mxCell('', new mxGeometry(0.5, 0, 179, 179), s2 + 'marginRect;rectMargin=2;rectMarginTop=2;rectMarginRight=2;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg3.geometry.relative = true;
|
|
bg3.geometry.offset = new mxPoint(0, 150);
|
|
bg3.vertex = true;
|
|
bg1.insert(bg3);
|
|
var part1 = new mxCell('IMG_4131.jpg',
|
|
new mxGeometry(0, 1, 179, 50), s2 + 'marginRect;rectMarginLeft=2;rectMarginBottom=2;rectMarginRight=4;whiteSpace=wrap;strokeColor=none;fontColor=#ffffff;verticalAlign=middle;align=left;fontSize=15;spacing=20;spacingBottom=0;spacingTop=0;fillColor=#000000;opacity=25;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -50);
|
|
part1.vertex = true;
|
|
bg3.insert(part1);
|
|
var part3 = new mxCell('i', new mxGeometry(1, 0.5, 16, 16), 'shape=ellipse;fillColor=#cccccc;strokeColor=none;fontStyle=1;fontColor=#999999;fontSize=12;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(-34, -8);
|
|
part3.vertex = true;
|
|
part1.insert(part3);
|
|
var bg4 = new mxCell('', new mxGeometry(0, 0.2788, 179, 179), s2 + 'marginRect;rectMargin=2;rectMarginLeft=2;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg4.geometry.relative = true;
|
|
bg4.geometry.offset = new mxPoint(0, 150);
|
|
bg4.vertex = true;
|
|
bg1.insert(bg4);
|
|
var part1 = new mxCell('IMG_4132.jpg',
|
|
new mxGeometry(0, 1, 179, 50), s2 + 'marginRect;rectMargin=2;rectMarginLeft=2;whiteSpace=wrap;strokeColor=none;fontColor=#ffffff;verticalAlign=middle;align=left;fontSize=15;spacing=20;spacingBottom=0;spacingTop=0;fillColor=#000000;opacity=25;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -50);
|
|
part1.vertex = true;
|
|
bg4.insert(part1);
|
|
var part3 = new mxCell('i', new mxGeometry(1, 0.5, 16, 16), 'shape=ellipse;fillColor=#cccccc;strokeColor=none;fontStyle=1;fontColor=#999999;fontSize=12;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(-34, -8);
|
|
part3.vertex = true;
|
|
part1.insert(part3);
|
|
var bg5 = new mxCell('', new mxGeometry(0.5, 0.2788, 179, 179), s2 + 'marginRect;rectMargin=2;rectMarginRight=2;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg5.geometry.relative = true;
|
|
bg5.geometry.offset = new mxPoint(0, 150);
|
|
bg5.vertex = true;
|
|
bg1.insert(bg5);
|
|
var part1 = new mxCell('IMG_4133.jpg',
|
|
new mxGeometry(0, 1, 179, 50), s2 + 'marginRect;rectMarginLeft=2;rectMarginBottom=2;rectMarginRight=4;whiteSpace=wrap;strokeColor=none;fontColor=#ffffff;verticalAlign=middle;align=left;fontSize=15;spacing=20;spacingBottom=0;spacingTop=0;fillColor=#000000;opacity=25;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -50);
|
|
part1.vertex = true;
|
|
bg5.insert(part1);
|
|
var part3 = new mxCell('i', new mxGeometry(1, 0.5, 16, 16), 'shape=ellipse;fillColor=#cccccc;strokeColor=none;fontStyle=1;fontColor=#999999;fontSize=12;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(-34, -8);
|
|
part3.vertex = true;
|
|
part1.insert(part3);
|
|
var bg6 = new mxCell('', new mxGeometry(0, 0.5576, 179, 100), s2 + 'marginRect;rectMargin=2;rectMarginLeft=2;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg6.geometry.relative = true;
|
|
bg6.geometry.offset = new mxPoint(0, 150);
|
|
bg6.vertex = true;
|
|
bg1.insert(bg6);
|
|
var bg7 = new mxCell('', new mxGeometry(0.5, 0.5576, 179, 100), s2 + 'marginRect;rectMargin=2;rectMarginRight=2;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeHeight=1;resizeWidth=1;');
|
|
bg7.geometry.relative = true;
|
|
bg7.geometry.offset = new mxPoint(0, 150);
|
|
bg7.vertex = true;
|
|
bg1.insert(bg7);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Grid titles');
|
|
}),
|
|
this.addEntry(dt + 'grid style', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#2D3986;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#2D3986;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Favorites', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#394797;resizeWidth=1;fontSize=22;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, -8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, -8);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar2 = new mxCell('Aaron Bennett', new mxGeometry(0, 0, 358, 55), s + 'rect;resizeWidth=1;strokeColor=none;fillColor=#000000;opacity=20;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon6 = new mxCell('', new mxGeometry(0, 0.5, 22, 30), 'shape=actor;strokeColor=none;fillColor=#ffffff;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(25, -15);
|
|
icon6.vertex = true;
|
|
bar2.insert(icon6);
|
|
var bar3 = new mxCell('Abbey Christensen', new mxGeometry(0, 0, 358, 55), s + 'rect;resizeWidth=1;strokeColor=none;fillColor=#000000;opacity=20;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 136);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var icon7 = new mxCell('', new mxGeometry(0, 0.5, 22, 30), 'shape=actor;strokeColor=none;fillColor=#ffffff;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(25, -15);
|
|
icon7.vertex = true;
|
|
bar3.insert(icon7);
|
|
var bar4 = new mxCell('Ali Connors', new mxGeometry(0, 0, 358, 55), s + 'rect;resizeWidth=1;strokeColor=none;fillColor=#000000;opacity=20;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 191);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var icon8 = new mxCell('', new mxGeometry(0, 0.5, 22, 30), 'shape=actor;strokeColor=none;fillColor=#ffffff;');
|
|
icon8.geometry.relative = true;
|
|
icon8.geometry.offset = new mxPoint(25, -15);
|
|
icon8.vertex = true;
|
|
bar4.insert(icon8);
|
|
var bar5 = new mxCell('Alex Nelson', new mxGeometry(0, 0, 358, 55), s + 'rect;resizeWidth=1;strokeColor=none;fillColor=#000000;opacity=20;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 246);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var icon9 = new mxCell('', new mxGeometry(0, 0.5, 22, 30), 'shape=actor;strokeColor=none;fillColor=#ffffff;');
|
|
icon9.geometry.relative = true;
|
|
icon9.geometry.offset = new mxPoint(25, - 15);
|
|
icon9.vertex = true;
|
|
bar5.insert(icon9);
|
|
var bar6 = new mxCell('Anthony Stevens', new mxGeometry(0, 0, 358, 55), s + 'rect;resizeWidth=1;strokeColor=none;fillColor=#000000;opacity=20;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar6.geometry.relative = true;
|
|
bar6.geometry.offset = new mxPoint(0, 301);
|
|
bar6.vertex = true;
|
|
bg1.insert(bar6);
|
|
var icon10 = new mxCell('', new mxGeometry(0, 0.5, 22, 30), 'shape=actor;strokeColor=none;fillColor=#ffffff;');
|
|
icon10.geometry.relative = true;
|
|
icon10.geometry.offset = new mxPoint(25, -15);
|
|
icon10.vertex = true;
|
|
bar6.insert(icon10);
|
|
var bar7 = new mxCell('Ali Connors', new mxGeometry(0, 0, 358, 55), s + 'rect;resizeWidth=1;strokeColor=none;fillColor=#ffffff;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 356);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var icon11 = new mxCell('', new mxGeometry(0, 0.5, 22, 30), 'shape=actor;strokeColor=none;fillColor=#BDBDBD;');
|
|
icon11.geometry.relative = true;
|
|
icon11.geometry.offset = new mxPoint(25, -15);
|
|
icon11.vertex = true;
|
|
bar7.insert(icon11);
|
|
var bar8 = new mxCell('', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;');
|
|
bar8.geometry.relative = true;
|
|
bar8.geometry.offset = new mxPoint(0, 411);
|
|
bar8.vertex = true;
|
|
bg1.insert(bar8);
|
|
var icon12 = new mxCell('', new mxGeometry(0, 0.5, 20, 24), s2 + 'telephone;strokeColor=none;fillColor=#3F51B5;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(25, -12);
|
|
icon12.vertex = true;
|
|
bar8.insert(icon12);
|
|
var text8 = new mxCell('(650) 555-1234', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;resizeWidth=1;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, -21);
|
|
text8.vertex = true;
|
|
bar8.insert(text8);
|
|
var text9 = new mxCell('Mobile', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=13;fontColor=#504F4F;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text9.geometry.relative = true;
|
|
text9.vertex = true;
|
|
bar8.insert(text9);
|
|
var icon13 = new mxCell('', new mxGeometry(1, 0.5, 17, 20), s2 + 'hangout;strokeColor=none;fillColor=#BDBDBD;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(-40, -10);
|
|
icon13.vertex = true;
|
|
bar8.insert(icon13);
|
|
var bar9 = new mxCell('', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;');
|
|
bar9.geometry.relative = true;
|
|
bar9.geometry.offset = new mxPoint(0, 476);
|
|
bar9.vertex = true;
|
|
bg1.insert(bar9);
|
|
var text8 = new mxCell('(323) 555-6789', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=14;fontColor=#000000;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, -21);
|
|
text8.vertex = true;
|
|
bar9.insert(text8);
|
|
var text9 = new mxCell('Work', new mxGeometry(0, 0.5, 150, 20), 'text;fontSize=13;fontColor=#504F4F;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text9.geometry.relative = true;
|
|
text9.vertex = true;
|
|
bar9.insert(text9);
|
|
var icon13 = new mxCell('', new mxGeometry(1, 0.5, 17, 20), s2 + 'hangout;strokeColor=none;fillColor=#BDBDBD;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(-40, -10);
|
|
icon13.vertex = true;
|
|
bar9.insert(icon13);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Grid Style');
|
|
}),
|
|
this.addEntry(dt + 'grid style', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#2D3986;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#2D3986;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Favorites', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#394797;resizeWidth=1;fontSize=22;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, -8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, -8);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar2 = new mxCell('Aaron Bennett', new mxGeometry(0, 0, 358, 55), s + 'rect;resizeWidth=1;strokeColor=none;fillColor=#000000;opacity=20;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon6 = new mxCell('', new mxGeometry(0, 0.5, 22, 30), 'shape=actor;strokeColor=none;fillColor=#ffffff;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(25, -15);
|
|
icon6.vertex = true;
|
|
bar2.insert(icon6);
|
|
var bar3 = new mxCell('Abbey Christensen', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 136);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var icon7 = new mxCell('', new mxGeometry(0, 0.5, 22, 30), 'shape=actor;strokeColor=none;fillColor=#ffffff;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(25, -15);
|
|
icon7.vertex = true;
|
|
bar3.insert(icon7);
|
|
var bar7 = new mxCell('Ali Connors', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 191);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var icon11 = new mxCell('', new mxGeometry(0, 0.5, 22, 30), 'shape=actor;strokeColor=none;fillColor=#BDBDBD;');
|
|
icon11.geometry.relative = true;
|
|
icon11.geometry.offset = new mxPoint(25, -15);
|
|
icon11.vertex = true;
|
|
bar7.insert(icon11);
|
|
var bar8 = new mxCell('', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;');
|
|
bar8.geometry.relative = true;
|
|
bar8.geometry.offset = new mxPoint(0, 246);
|
|
bar8.vertex = true;
|
|
bg1.insert(bar8);
|
|
var icon12 = new mxCell('', new mxGeometry(0, 0.5, 20, 24), s2 + 'telephone;strokeColor=none;fillColor=#3F51B5;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(25, -12);
|
|
icon12.vertex = true;
|
|
bar8.insert(icon12);
|
|
var text8 = new mxCell('(650) 555-1234', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=14;fontColor=#000000;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, - 21);
|
|
text8.vertex = true;
|
|
bar8.insert(text8);
|
|
var text9 = new mxCell('Mobile', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=13;fontColor=#504F4F;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text9.geometry.relative = true;
|
|
text9.vertex = true;
|
|
bar8.insert(text9);
|
|
var icon13 = new mxCell('', new mxGeometry(1, 0.5, 17, 20), s2 + 'hangout;strokeColor=none;fillColor=#BDBDBD;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(-40, -10);
|
|
icon13.vertex = true;
|
|
bar8.insert(icon13);
|
|
var bar9 = new mxCell('', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;');
|
|
bar9.geometry.relative = true;
|
|
bar9.geometry.offset = new mxPoint(0, 311);
|
|
bar9.vertex = true;
|
|
bg1.insert(bar9);
|
|
var text8 = new mxCell('(323) 555-6789', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=14;fontColor=#000000;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, -21);
|
|
text8.vertex = true;
|
|
bar9.insert(text8);
|
|
var text9 = new mxCell('Work', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=13;fontColor=#504F4F;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text9.geometry.relative = true;
|
|
text9.vertex = true;
|
|
bar9.insert(text9);
|
|
var icon13 = new mxCell('', new mxGeometry(1, 0.5, 17, 20), s2 + 'hangout;strokeColor=none;fillColor=#BDBDBD;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(-40, -10);
|
|
icon13.vertex = true;
|
|
bar9.insert(icon13);
|
|
var line1 = new mxCell('', new mxGeometry(0.2011, 0, 286, 20), 'shape=line;strokeColor=#000000;strokeWidth=1;opacity=20;resizeWidth=1;');
|
|
line1.geometry.relative = true;
|
|
line1.geometry.offset = new mxPoint(0, 376);
|
|
line1.vertex = true;
|
|
bg1.insert(line1);
|
|
var bar11 = new mxCell('', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;');
|
|
bar11.geometry.relative = true;
|
|
bar11.geometry.offset = new mxPoint(0, 396);
|
|
bar11.vertex = true;
|
|
bg1.insert(bar11);
|
|
var icon12 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'mail;strokeColor=#ffffff;fillColor=#3F51B5;strokeWidth=2;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(24, -8);
|
|
icon12.vertex = true;
|
|
bar11.insert(icon12);
|
|
var text10 = new mxCell('aliconnors@example.com', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=14;fontColor=#000000;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(0, -21);
|
|
text10.vertex = true;
|
|
bar11.insert(text10);
|
|
var text11 = new mxCell('Personal', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=13;fontColor=#504F4F;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text11.geometry.relative = true;
|
|
text11.vertex = true;
|
|
bar11.insert(text11);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, 451);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var text12 = new mxCell('ali_connors@example.com', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=14;fontColor=#000000;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text12.geometry.relative = true;
|
|
text12.geometry.offset = new mxPoint(0, -21);
|
|
text12.vertex = true;
|
|
bar12.insert(text12);
|
|
var text13 = new mxCell('Work', new mxGeometry(0, 0.5, 358, 20), 'text;fontSize=13;fontColor=#504F4F;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text13.geometry.relative = true;
|
|
text13.vertex = true;
|
|
bar12.insert(text13);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Grid Style');
|
|
}),
|
|
this.addEntry(dt + 'two line grid list', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#000000;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#000000;strokeColor=none;fontColor=#ffffff;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Browse', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#222222;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 16), s2 + 'left;strokeColor=#ffffff;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(25, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var bg2 = new mxCell('', new mxGeometry(0, 0, 179, 183), s2 + 'marginRect;rectMargin=2;rectMarginTop=2;rectMarginLeft=-2;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg2.geometry.relative = true;
|
|
bg2.geometry.offset = new mxPoint(0, 81);
|
|
bg2.vertex = true;
|
|
bg1.insert(bg2);
|
|
var part1 = new mxCell('Top Lists', new mxGeometry(0, 0, 179, 71), s2 + 'marginRect;rectMarginTop=4;rectMarginRight=2;whiteSpace=wrap;fontColor=#ffffff;verticalAlign=top;align=left;fontSize=15;spacing=16;spacingBottom=0;spacingTop=-6;fillColor=#000000;opacity=25;strokeColor=none;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg2.insert(part1);
|
|
var text1 = new mxCell('Anthony Freeman, Zen', new mxGeometry(0, 0, 177, 20), 'text;whiteSpace=wrap;fontColor=#ffffff;spacingLeft=16;verticalAlign=middle;fontSize=11;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 36);
|
|
text1.vertex = true;
|
|
bg2.insert(text1);
|
|
var bg3 = new mxCell('', new mxGeometry(0.5, 0, 179, 183), s2 + 'marginRect;rectMargin=2;rectMarginTop=2;rectMarginRight=-2;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg3.geometry.relative = true;
|
|
bg3.geometry.offset = new mxPoint(0, 81);
|
|
bg3.vertex = true;
|
|
bg1.insert(bg3);
|
|
var part1 = new mxCell('Alternative', new mxGeometry(0, 0, 179, 71), s2 + 'marginRect;rectMarginTop=4;rectMarginLeft=2;whiteSpace=wrap;fontColor=#ffffff;verticalAlign=top;align=left;fontSize=15;spacing=18;spacingBottom=0;spacingTop=-6;fillColor=#000000;opacity=25;strokeColor=none;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg3.insert(part1);
|
|
var text1 = new mxCell('Hellhounds, Felix White and ...', new mxGeometry(0, 0, 177, 20), 'text;whiteSpace=wrap;fontColor=#ffffff;spacingLeft=18;verticalAlign=middle;fontSize=11;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 36);
|
|
text1.vertex = true;
|
|
bg3.insert(text1);
|
|
var bg4 = new mxCell('', new mxGeometry(0, 0.285, 179, 181), s2 + 'marginRect;rectMargin=2;rectMarginLeft=-2;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg4.geometry.relative = true;
|
|
bg4.geometry.offset = new mxPoint(0, 81);
|
|
bg4.vertex = true;
|
|
bg1.insert(bg4);
|
|
var part1 = new mxCell('Dance', new mxGeometry(0, 0, 179, 69), s2 + 'marginRect;rectMarginTop=2;rectMarginRight=2;whiteSpace=wrap;fontColor=#ffffff;verticalAlign=top;align=left;fontSize=15;spacing=16;spacingBottom=0;spacingTop=-8;fillColor=#000000;opacity=25;strokeColor=none;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg4.insert(part1);
|
|
var text1 = new mxCell('Mirah McNeil, Paul Nixon', new mxGeometry(0, 0, 177, 20), 'text;whiteSpace=wrap;fontColor=#ffffff;spacingLeft=16;verticalAlign=middle;fontSize=11;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 36);
|
|
text1.vertex = true;
|
|
bg4.insert(text1);
|
|
var bg5 = new mxCell('', new mxGeometry(0.5, 0.285, 179, 181), s2 + 'marginRect;rectMargin=2;rectMarginRight=-2;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg5.geometry.relative = true;
|
|
bg5.geometry.offset = new mxPoint(0, 81);
|
|
bg5.vertex = true;
|
|
bg1.insert(bg5);
|
|
var part1 = new mxCell('Electronic', new mxGeometry(0, 0, 179, 69), s2 + 'marginRect;rectMarginTop=2;rectMarginLeftt=2;whiteSpace=wrap;fontColor=#ffffff;verticalAlign=top;align=left;fontSize=15;spacing=18;spacingBottom=0;spacingTop=-8;fillColor=#000000;opacity=25;strokeColor=none;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg5.insert(part1);
|
|
var text1 = new mxCell('Tronixx, Astral Revival', new mxGeometry(0, 0, 177, 20), 'text;whiteSpace=wrap;fontColor=#ffffff;spacingLeft=18;verticalAlign=middle;fontSize=11;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 36);
|
|
text1.vertex = true;
|
|
bg5.insert(text1);
|
|
var bg6 = new mxCell('', new mxGeometry(0, 0.567, 179, 181), s2 + 'marginRect;rectMargin=2;rectMarginLeft=-2;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg6.geometry.relative = true;
|
|
bg6.geometry.offset = new mxPoint(0, 81);
|
|
bg6.vertex = true;
|
|
bg1.insert(bg6);
|
|
var part1 = new mxCell('Pop', new mxGeometry(0, 0, 179, 69), s2 + 'marginRect;rectMarginTop=2;rectMarginRight=2;whiteSpace=wrap;fontColor=#ffffff;verticalAlign=top;align=left;fontSize=15;spacing=16;spacingBottom=0;spacingTop=-8;fillColor=#000000;opacity=25;strokeColor=none;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg6.insert(part1);
|
|
var text1 = new mxCell('Sun, Bad Joke', new mxGeometry(0, 0, 177, 20), 'text;whiteSpace=wrap;fontColor=#ffffff;spacingLeft=16;verticalAlign=middle;fontSize=11;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 36);
|
|
text1.vertex = true;
|
|
bg6.insert(text1);
|
|
var bg7 = new mxCell('', new mxGeometry(0.5, 0.567, 179, 181), s2 + 'marginRect;rectMargin=2;rectMarginRight=-2;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg7.geometry.relative = true;
|
|
bg7.geometry.offset = new mxPoint(0, 81);
|
|
bg7.vertex = true;
|
|
bg1.insert(bg7);
|
|
var part1 = new mxCell('R & B', new mxGeometry(0, 0, 179, 69), s2 + 'marginRect;rectMarginTop=2;rectMarginLeft=2;whiteSpace=wrap;fontColor=#ffffff;verticalAlign=top;align=left;fontSize=15;spacing=18;spacingBottom=0;spacingTop=-8;fillColor=#000000;opacity=25;strokeColor=none;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg7.insert(part1);
|
|
var text1 = new mxCell('Brooklyn All Stars, Kelly ...', new mxGeometry(0, 0, 177, 20), 'text;whiteSpace=wrap;fontColor=#ffffff;spacingLeft=18;verticalAlign=middle;fontSize=11;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 36);
|
|
text1.vertex = true;
|
|
bg7.insert(text1);
|
|
var part2 = new mxCell('Lights and Camera <font color="#999999" style="font-weight: normal">Yuna</font>',
|
|
new mxGeometry(0.162, 1, 300, 50), s2 + 'player;fontColor=#666666;fontSize=13;fontStyle=1;align=left;spacingLeft=16;html=1;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, -98);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Two-line grid list');
|
|
}),
|
|
this.addEntry(dt + 'two line grid list', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#1976D2;strokeColor=none;fontColor=#ffffff;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('', new mxGeometry(0, 0, 358, 110), s + 'rect;strokeColor=none;fillColor=#2196F3;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var part1 = new mxCell('Search People & Places', new mxGeometry(0, 0, 358, 60), s2 + 'marginRect;rectMargin=6;strokeColor=none;fillColor=#ffffff;fontColor=#B3B3B3;fontSize=13;spacingRight=50;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 18, 18), s2 + 'search;strokeColor=#666666;fillColor=none;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(22, -9);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 11, 20), s2 + 'voice;strokeColor=#666666;fillColor=#666666;strokeWidth=2;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-70, -10);
|
|
icon2.vertex = true;
|
|
part1.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 6, 18), s2 + 'settings;strokeColor=none;fillColor=#666666;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-31, -9);
|
|
icon3.vertex = true;
|
|
part1.insert(icon3);
|
|
var text1 = new mxCell('SPEED DIAL', new mxGeometry(0, 1, 119, 48), 'text;align=center;fontColor=#FFFFFF;fontStyle=0;verticalAlign=middle;fontSize=14;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, -48);
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('RECENTS', new mxGeometry(0.3333, 1, 119, 48), 'text;align=center;fontColor=#FFFFFF;fontStyle=0;verticalAlign=middle;fontSize=14;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, -48);
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var text3 = new mxCell('CONTACTS', new mxGeometry(0.6667, 1, 119, 48), 'text;align=center;fontColor=#FFFFFF;fontStyle=0;verticalAlign=middle;fontSize=14;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, -48);
|
|
text3.vertex = true;
|
|
bar1.insert(text3);
|
|
var bg2 = new mxCell('Mobile', new mxGeometry(0, 0, 178, 136), 'shape=rect;fillColor=#BDBDBD;strokeColor=none;shadow=0;align=left;verticalAlign=bottom;spacing=0;spacingLeft=16;spacingBottom=8;fontColor=#FFFFFF;resizeWidth=1;resizeHeight=1;');
|
|
bg2.geometry.relative = true;
|
|
bg2.geometry.offset = new mxPoint(0, 135);
|
|
bg2.vertex = true;
|
|
bg1.insert(bg2);
|
|
var text1 = new mxCell('Ali Connors ★', new mxGeometry(0, 1, 178, 20), 'text;whiteSpace=wrap;fontColor=#ffffff;spacingLeft=16;verticalAlign=middle;fontSize=14;html=1;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, -44);
|
|
text1.vertex = true;
|
|
bg2.insert(text1);
|
|
var bg3 = new mxCell('Mobile', new mxGeometry(0.5, 0, 179, 136), 'shape=rect;fillColor=#BDBDBD;strokeColor=none;shadow=0;align=left;verticalAlign=bottom;spacing=0;spacingLeft=16;spacingBottom=8;fontColor=#FFFFFF;resizeWidth=1;resizeHeight=1;');
|
|
bg3.geometry.relative = true;
|
|
bg3.geometry.offset = new mxPoint(0, 135);
|
|
bg3.vertex = true;
|
|
bg1.insert(bg3);
|
|
var text1 = new mxCell('Abbey Christensen ★', new mxGeometry(0, 1, 179, 20), 'text;whiteSpace=wrap;fontColor=#ffffff;spacingLeft=16;verticalAlign=middle;fontSize=14;html=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, -44);
|
|
text1.vertex = true;
|
|
bg3.insert(text1);
|
|
var bg4 = new mxCell('Mobile', new mxGeometry(0, 0.2134, 178, 136), 'shape=rect;fillColor=#BDBDBD;strokeColor=none;shadow=0;align=left;verticalAlign=bottom;spacing=0;spacingLeft=16;spacingBottom=8;fontColor=#FFFFFF;resizeWidth=1;resizeHeight=1;');
|
|
bg4.geometry.relative = true;
|
|
bg4.geometry.offset = new mxPoint(0, 135);
|
|
bg4.vertex = true;
|
|
bg1.insert(bg4);
|
|
var text1 = new mxCell('Mary Johnson ★', new mxGeometry(0, 1, 178, 20), 'text;whiteSpace=wrap;fontColor=#ffffff;spacingLeft=16;verticalAlign=middle;fontSize=14;html=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, -44);
|
|
text1.vertex = true;
|
|
bg4.insert(text1);
|
|
var bg5 = new mxCell('Mobile', new mxGeometry(0.5, 0.2134, 179, 136), 'shape=rect;fillColor=#BDBDBD;strokeColor=none;shadow=0;align=left;verticalAlign=bottom;spacing=0;spacingLeft=16;spacingBottom=8;fontColor=#FFFFFF;resizeWidth=1;resizeHeight=1;');
|
|
bg5.geometry.relative = true;
|
|
bg5.geometry.offset = new mxPoint(0, 135);
|
|
bg5.vertex = true;
|
|
bg1.insert(bg5);
|
|
var text1 = new mxCell('Britta Holt ★', new mxGeometry(0, 1, 179, 20), 'text;whiteSpace=wrap;fontColor=#ffffff;spacingLeft=16;verticalAlign=middle;fontSize=14;html=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, -44);
|
|
text1.vertex = true;
|
|
bg5.insert(text1);
|
|
var bg6 = new mxCell('', new mxGeometry(0, 0.4268, 178, 136), 'shape=rect;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg6.geometry.relative = true;
|
|
bg6.geometry.offset = new mxPoint(0, 135);
|
|
bg6.vertex = true;
|
|
bg1.insert(bg6);
|
|
var bg7 = new mxCell('', new mxGeometry(0.5, 0.4268, 179, 136), 'shape=rect;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg7.geometry.relative = true;
|
|
bg7.geometry.offset = new mxPoint(0, 135);
|
|
bg7.vertex = true;
|
|
bg1.insert(bg7);
|
|
var bg8 = new mxCell('', new mxGeometry(0, 0.6402, 178, 70), 'shape=rect;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg8.geometry.relative = true;
|
|
bg8.geometry.offset = new mxPoint(0, 135);
|
|
bg8.vertex = true;
|
|
bg1.insert(bg8);
|
|
var bg9 = new mxCell('', new mxGeometry(0.5, 0.6402, 179, 70), 'shape=rect;fillColor=#BDBDBD;strokeColor=none;shadow=0;resizeWidth=1;resizeHeight=1;');
|
|
bg9.geometry.relative = true;
|
|
bg9.geometry.offset = new mxPoint(0, 135);
|
|
bg9.vertex = true;
|
|
bg1.insert(bg9);
|
|
var icon5 = new mxCell('', new mxGeometry(0.5, 1, 56, 56), 'shape=ellipse;strokeColor=none;fillColor=#2196F3;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-28, -119);
|
|
icon5.vertex = true;
|
|
bg1.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(20, 18, 16, 22), s2 + 'more2;strokeColor=none;fillColor=#ffffff;');
|
|
icon6.vertex = true;
|
|
icon5.insert(icon6);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Two-line grid list');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlGrid Lists', 'GMDL / Grid Lists', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLIconsPalette = function(expand)
|
|
{
|
|
var s2 = "dashed=0;aspect=fixed;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library icon ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.createVertexTemplateEntry(s2 + 'edit;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 20, '', 'Edit', null, null, this.getTagsForStencil(gn, 'edit', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'star;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 20, '', 'Star', null, null, this.getTagsForStencil(gn, 'star', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'heart;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 18, '', 'Heart', null, null, this.getTagsForStencil(gn, 'heart', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'reply;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 18, '', 'Reply', null, null, this.getTagsForStencil(gn, 'reply', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'users;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
24, 16, '', 'Users', null, null, this.getTagsForStencil(gn, 'users', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'gps;strokeColor=#737373;fillColor=#737373;shadow=0;strokeWidth=2;',
|
|
20, 20, '', 'GPS', null, null, this.getTagsForStencil(gn, 'gps', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'share2;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 20, '', 'Share', null, null, this.getTagsForStencil(gn, 'share', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'navigate;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 20, '', 'Navigate', null, null, this.getTagsForStencil(gn, 'navigate', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'chat;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 20, '', 'Chat', null, null, this.getTagsForStencil(gn, 'chat', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'voice;strokeColor=#737373;fillColor=#737373;shadow=0;strokeWidth=2;',
|
|
12, 20, '', 'Voice', null, null, this.getTagsForStencil(gn, 'voice', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'google;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
16, 24, '', 'Google', null, null, this.getTagsForStencil(gn, 'google', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'video;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
24, 16, '', 'Video', null, null, this.getTagsForStencil(gn, 'video', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'gallery;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
24, 22, '', 'Gallery', null, null, this.getTagsForStencil(gn, 'gallery', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'birthday;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
24, 22, '', 'Birthday', null, null, this.getTagsForStencil(gn, 'birthday', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'cloud;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
24, 16, '', 'Cloud', null, null, this.getTagsForStencil(gn, 'cloud', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'x;strokeColor=#737373;fillColor=#737373;shadow=0;strokeWidth=2;',
|
|
16, 16, '', 'X', null, null, this.getTagsForStencil(gn, 'x', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'bookmark;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
12, 20, '', 'Bookmark', null, null, this.getTagsForStencil(gn, 'bookmark', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'calendar;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 20, '', 'Calendar', null, null, this.getTagsForStencil(gn, 'calendar', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'attractions;strokeColor=#ffffff;fillColor=#737373;shadow=0;strokeWidth=1;',
|
|
22, 18, '', 'Attraction', null, null, this.getTagsForStencil(gn, 'attraction', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'dining;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
18, 20, '', 'Dining', null, null, this.getTagsForStencil(gn, 'dining', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'education;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 20, '', 'Education', null, null, this.getTagsForStencil(gn, 'education', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'family;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 20, '', 'Family', null, null, this.getTagsForStencil(gn, 'family', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'health;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 18, '', 'Health', null, null, this.getTagsForStencil(gn, 'health', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'office;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 20, '', 'Office', null, null, this.getTagsForStencil(gn, 'office', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'promotions;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 20, '', 'Promotion', null, null, this.getTagsForStencil(gn, 'promotion', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'radio;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 20, '', 'Radio', null, null, this.getTagsForStencil(gn, 'radio', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'recipes;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 20, '', 'Recipe', null, null, this.getTagsForStencil(gn, 'recipe', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sports;strokeColor=none;fillColor=#737373;shadow=0;',
|
|
20, 20, '', 'Sports', null, null, this.getTagsForStencil(gn, 'sports', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'travel;strokeColor=none;fillColor=#737373;shadow=0;direction=south;',
|
|
20, 20, '', 'Travel', null, null, this.getTagsForStencil(gn, 'travel', dt).join(' '))
|
|
];
|
|
|
|
this.addPalette('gmdlIcons', 'GMDL / Icons', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLListsPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;shape=";
|
|
var s2 = "dashed=0;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library list ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'scannable list', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#00796B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#2D3986;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Feed reader', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#009688;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#00423B;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'refresh;strokeColor=#00423B;fillColor=#00423B;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, -8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#00423B;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, -8);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bg2 = new mxCell('', new mxGeometry(0, 0, 358, 103), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=0;resizeWidth=1;');
|
|
bg2.geometry.relative = true;
|
|
bg2.geometry.offset = new mxPoint(0, 81);
|
|
bg2.vertex = true;
|
|
bg1.insert(bg2);
|
|
var part1 = new mxCell('Day reappeared. The tempest still raged with undiminished',
|
|
new mxGeometry(0, 0, 244, 60), 'text;whiteSpace=wrap;fontColor=#000000;verticalAlign=top;align=left;fontSize=15;spacing=16;spacingBottom=0;spacingTop=-12;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg2.insert(part1);
|
|
var part2 = new mxCell('Corned beef prosciutto ground...',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=13;fontColor=#000000;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 48);
|
|
part2.vertex = true;
|
|
bg2.insert(part2);
|
|
var part3 = new mxCell('10 min',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=12;fontColor=#999999;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 72);
|
|
part3.vertex = true;
|
|
bg2.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(244, 0, 112, 103), s2 + 'marginRect;rectMargin=12;rectMarginLeft=-12;fillColor=#BDBDBD;strokeColor=none;');
|
|
part4.vertex = true;
|
|
bg2.insert(part4);
|
|
var bg3 = new mxCell('', new mxGeometry(0, 0, 358, 103), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=0;resizeWidth=1;');
|
|
bg3.geometry.relative = true;
|
|
bg3.geometry.offset = new mxPoint(0, 184);
|
|
bg3.vertex = true;
|
|
bg1.insert(bg3);
|
|
var part1 = new mxCell('There were some signs of a calm at noon',
|
|
new mxGeometry(0, 0, 244, 60), 'text;whiteSpace=wrap;fontColor=#000000;verticalAlign=top;align=left;fontSize=15;spacing=16;spacingBottom=0;spacingTop=-12;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg3.insert(part1);
|
|
var part2 = new mxCell('Things to enjoy',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=13;fontColor=#000000;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 48);
|
|
part2.vertex = true;
|
|
bg3.insert(part2);
|
|
var part3 = new mxCell('1 hr',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=12;fontColor=#999999;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 72);
|
|
part3.vertex = true;
|
|
bg3.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(244, 0, 112, 103), s2 + 'marginRect;rectMargin=12;rectMarginLeft=-12;fillColor=#BDBDBD;strokeColor=none;');
|
|
part4.vertex = true;
|
|
bg3.insert(part4);
|
|
var bg4 = new mxCell('', new mxGeometry(0, 0, 358, 103), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=0;resizeWidth=1;');
|
|
bg4.geometry.relative = true;
|
|
bg4.geometry.offset = new mxPoint(0, 287);
|
|
bg4.vertex = true;
|
|
bg1.insert(bg4);
|
|
var part1 = new mxCell('Fun tropical escapes',
|
|
new mxGeometry(0, 0, 244, 60), 'text;whiteSpace=wrap;fontColor=#000000;verticalAlign=top;align=left;fontSize=15;spacing=16;spacingBottom=0;spacingTop=-12;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg4.insert(part1);
|
|
var part2 = new mxCell('The night was comparatively quiet. Some of the sails were again.',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=13;fontColor=#000000;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 30);
|
|
part2.vertex = true;
|
|
bg4.insert(part2);
|
|
var part3 = new mxCell('1 hr',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=12;fontColor=#999999;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 72);
|
|
part3.vertex = true;
|
|
bg4.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(244, 0, 112, 103), s2 + 'marginRect;rectMargin=12;rectMarginLeft=-12;fillColor=#BDBDBD;strokeColor=none;');
|
|
part4.vertex = true;
|
|
bg4.insert(part4);
|
|
var bg5 = new mxCell('', new mxGeometry(0, 0, 358, 103), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=0;resizeWidth=1;');
|
|
bg5.geometry.relative = true;
|
|
bg5.geometry.offset = new mxPoint(0, 390);
|
|
bg5.vertex = true;
|
|
bg1.insert(bg5);
|
|
var part1 = new mxCell('Pork loin sausage shankle, kielbasa bacon beef ribs',
|
|
new mxGeometry(0, 0, 244, 60), 'text;whiteSpace=wrap;fontColor=#000000;verticalAlign=top;align=left;fontSize=15;spacing=16;spacingBottom=0;spacingTop=-12;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg5.insert(part1);
|
|
var part2 = new mxCell('Drumstick turkey shoulder square...',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=13;fontColor=#000000;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 48);
|
|
part2.vertex = true;
|
|
bg5.insert(part2);
|
|
var part3 = new mxCell('2 hr',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=12;fontColor=#999999;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 72);
|
|
part3.vertex = true;
|
|
bg5.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(244, 0, 112, 103), s2 + 'marginRect;rectMargin=12;rectMarginLeft=-12;fillColor=#BDBDBD;strokeColor=none;');
|
|
part4.vertex = true;
|
|
bg5.insert(part4);
|
|
var bg6 = new mxCell('', new mxGeometry(0, 0, 358, 101), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=0;resizeWidth=1;');
|
|
bg6.geometry.relative = true;
|
|
bg6.geometry.offset = new mxPoint(0, 493);
|
|
bg6.vertex = true;
|
|
bg1.insert(bg6);
|
|
var part1 = new mxCell('Cherry blossoms in bloom',
|
|
new mxGeometry(0, 0, 244, 60), 'text;whiteSpace=wrap;fontColor=#000000;verticalAlign=top;align=left;fontSize=15;spacing=16;spacingBottom=0;spacingTop=-12;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg6.insert(part1);
|
|
var part2 = new mxCell('Spring is here and we all know...',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=13;fontColor=#000000;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 30);
|
|
part2.vertex = true;
|
|
bg6.insert(part2);
|
|
var part3 = new mxCell('3 hr',
|
|
new mxGeometry(0, 0, 244, 20), 'text;whiteSpace=wrap;spacingLeft=16;spacingRight=16;spacing=0;fontSize=12;fontColor=#999999;spacingBottom=0;spacingTop=-5;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 72);
|
|
part3.vertex = true;
|
|
bg6.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(244, 0, 112, 103), s2 + 'marginRect;rectMargin=12;rectMarginLeft=-12;fillColor=#BDBDBD;strokeColor=none;');
|
|
part4.vertex = true;
|
|
bg6.insert(part4);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Scannable list');
|
|
}),
|
|
this.addEntry(dt + 'item list', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#2D3986;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#2D3986;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#394797;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, -8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, -8);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar2 = new mxCell('Janet Perkins', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 0.5, 23, 21), s2 + 'star;strokeColor=none;fillColor=#D3396E;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(16, -11);
|
|
icon5.vertex = true;
|
|
bar2.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(-50, -18);
|
|
icon6.vertex = true;
|
|
bar2.insert(icon6);
|
|
var bar3 = new mxCell('Mary Johnson', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 136);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var icon7 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(-50, -18);
|
|
icon7.vertex = true;
|
|
bar3.insert(icon7);
|
|
var bar4 = new mxCell('Peter Carlsson', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 191);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var icon8 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon8.geometry.relative = true;
|
|
icon8.geometry.offset = new mxPoint(-50, -18);
|
|
icon8.vertex = true;
|
|
bar4.insert(icon8);
|
|
var bar5 = new mxCell('Trevor Hansen', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 246);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var icon9 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon9.geometry.relative = true;
|
|
icon9.geometry.offset = new mxPoint(-50, -18);
|
|
icon9.vertex = true;
|
|
bar5.insert(icon9);
|
|
var line1 = new mxCell('', new mxGeometry(0.2011, 0, 286, 8), 'shape=line;strokeColor=#eeeeee;strokeWidth=1;resizeWidth=1;');
|
|
line1.geometry.relative = true;
|
|
line1.geometry.offset = new mxPoint(0, 306);
|
|
line1.vertex = true;
|
|
bg1.insert(line1);
|
|
var bar7 = new mxCell('Aaron Bennett', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 319);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var text6 = new mxCell('A', new mxGeometry(0, 0.5, 24, 24), 'text;fontSize=24;fontColor=#D3396E;verticalAlign=middle;fontStyle=0;align=center;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(16, -12);
|
|
text6.vertex = true;
|
|
bar7.insert(text6);
|
|
var icon11 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon11.geometry.relative = true;
|
|
icon11.geometry.offset = new mxPoint(-50, -18);
|
|
icon11.vertex = true;
|
|
bar7.insert(icon11);
|
|
var bar8 = new mxCell('Abbey Christensen', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar8.geometry.relative = true;
|
|
bar8.geometry.offset = new mxPoint(0, 374);
|
|
bar8.vertex = true;
|
|
bg1.insert(bar8);
|
|
var icon12 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(-50, -18);
|
|
icon12.vertex = true;
|
|
bar8.insert(icon12);
|
|
var bar9 = new mxCell('Ali Connors', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar9.geometry.relative = true;
|
|
bar9.geometry.offset = new mxPoint(0, 429);
|
|
bar9.vertex = true;
|
|
bg1.insert(bar9);
|
|
var icon13 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(-50, -18);
|
|
icon13.vertex = true;
|
|
bar9.insert(icon13);
|
|
var bar10 = new mxCell('Alex Nelson', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar10.geometry.relative = true;
|
|
bar10.geometry.offset = new mxPoint(0, 484);
|
|
bar10.vertex = true;
|
|
bg1.insert(bar10);
|
|
var icon14 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon14.geometry.relative = true;
|
|
icon14.geometry.offset = new mxPoint(-50, -18);
|
|
icon14.vertex = true;
|
|
bar10.insert(icon14);
|
|
var bar11 = new mxCell('Anthony Stevens', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar11.geometry.relative = true;
|
|
bar11.geometry.offset = new mxPoint(0, 539);
|
|
bar11.vertex = true;
|
|
bg1.insert(bar11);
|
|
var icon15 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon15.geometry.relative = true;
|
|
icon15.geometry.offset = new mxPoint(-50, -18);
|
|
icon15.vertex = true;
|
|
bar11.insert(icon15);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Item list');
|
|
}),
|
|
this.addEntry(dt + 'item list', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#2D3986;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#2D3986;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#394797;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, -8);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, -8);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar2 = new mxCell('Janet Perkins', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 0.5, 23, 21), s2 + 'star;strokeColor=none;fillColor=#D3396E;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(16, -11);
|
|
icon5.vertex = true;
|
|
bar2.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(-50, -18);
|
|
icon6.vertex = true;
|
|
bar2.insert(icon6);
|
|
var bar3 = new mxCell('Mary Johnson', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 136);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var icon7 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(-50, -18);
|
|
icon7.vertex = true;
|
|
bar3.insert(icon7);
|
|
var bar4 = new mxCell('Peter Carlsson', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 191);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var icon8 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon8.geometry.relative = true;
|
|
icon8.geometry.offset = new mxPoint(-50, -18);
|
|
icon8.vertex = true;
|
|
bar4.insert(icon8);
|
|
var bar5 = new mxCell('Trevor Hansen', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 246);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var icon9 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon9.geometry.relative = true;
|
|
icon9.geometry.offset = new mxPoint(-50, -18);
|
|
icon9.vertex = true;
|
|
bar5.insert(icon9);
|
|
var line1 = new mxCell('', new mxGeometry(0.2011, 0, 286, 8), 'shape=line;strokeColor=#eeeeee;strokeWidth=1;resizeWidth=1;');
|
|
line1.geometry.relative = true;
|
|
line1.geometry.offset = new mxPoint(0, 306);
|
|
line1.vertex = true;
|
|
bg1.insert(line1);
|
|
var bar7 = new mxCell('Aaron Bennett', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 319);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var text6 = new mxCell('A', new mxGeometry(0, 0.5, 24, 24), 'text;fontSize=24;fontColor=#D3396E;verticalAlign=middle;fontStyle=0;align=center;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(16, -12);
|
|
text6.vertex = true;
|
|
bar7.insert(text6);
|
|
var icon11 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon11.geometry.relative = true;
|
|
icon11.geometry.offset = new mxPoint(-50, -18);
|
|
icon11.vertex = true;
|
|
bar7.insert(icon11);
|
|
var bar8 = new mxCell('Abbey Christensen', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar8.geometry.relative = true;
|
|
bar8.geometry.offset = new mxPoint(0, 374);
|
|
bar8.vertex = true;
|
|
bg1.insert(bar8);
|
|
var icon12 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(-50, -18);
|
|
icon12.vertex = true;
|
|
bar8.insert(icon12);
|
|
var bar9 = new mxCell('Ali Connors', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar9.geometry.relative = true;
|
|
bar9.geometry.offset = new mxPoint(0, 429);
|
|
bar9.vertex = true;
|
|
bg1.insert(bar9);
|
|
var icon13 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(-50, -18);
|
|
icon13.vertex = true;
|
|
bar9.insert(icon13);
|
|
var bar10 = new mxCell('Alex Nelson', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar10.geometry.relative = true;
|
|
bar10.geometry.offset = new mxPoint(0, 484);
|
|
bar10.vertex = true;
|
|
bg1.insert(bar10);
|
|
var icon14 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon14.geometry.relative = true;
|
|
icon14.geometry.offset = new mxPoint(-50, -18);
|
|
icon14.vertex = true;
|
|
bar10.insert(icon14);
|
|
var bar11 = new mxCell('Anthony Stevens', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;resizeWidth=1;fontSize=14;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar11.geometry.relative = true;
|
|
bar11.geometry.offset = new mxPoint(0, 539);
|
|
bar11.vertex = true;
|
|
bg1.insert(bar11);
|
|
var icon15 = new mxCell('', new mxGeometry(1, 0.5, 36, 36), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon15.geometry.relative = true;
|
|
icon15.geometry.offset = new mxPoint(-50, -18);
|
|
icon15.vertex = true;
|
|
bar11.insert(icon15);
|
|
var part1 = new mxCell('', new mxGeometry(1, 0, 168, 208), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;shadow=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(-178, 30);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text13 = new mxCell('Refresh', new mxGeometry(0, 0, 168, 52), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text13.geometry.relative = true;
|
|
text13.vertex = true;
|
|
part1.insert(text13);
|
|
var text14 = new mxCell('Help & feedback', new mxGeometry(0, 0, 168, 52), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text14.geometry.relative = true;
|
|
text14.geometry.offset = new mxPoint(0, 52);
|
|
text14.vertex = true;
|
|
part1.insert(text14);
|
|
var text15 = new mxCell('Settings', new mxGeometry(0, 0, 168, 52), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text15.geometry.relative = true;
|
|
text15.geometry.offset = new mxPoint(0, 104);
|
|
text15.vertex = true;
|
|
part1.insert(text15);
|
|
var text16 = new mxCell('Sign out', new mxGeometry(0, 0, 168, 52), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text16.geometry.relative = true;
|
|
text16.geometry.offset = new mxPoint(0, 156);
|
|
text16.vertex = true;
|
|
part1.insert(text16);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Item list');
|
|
}),
|
|
this.addEntry(dt + 'item list', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 152, 631), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;shadow=1;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('Roboto', new mxGeometry(0, 0, 152, 55), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var part1 = new mxCell('', new mxGeometry(0, 0, 152, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 50);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text2 = new mxCell('Arial', new mxGeometry(0, 0, 152, 48), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 55);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('Calibri', new mxGeometry(0, 0, 152, 48), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 103);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('Cambria', new mxGeometry(0, 0, 152, 48), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 151);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('Comic sans', new mxGeometry(0, 0, 152, 48), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 199);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('Consolas', new mxGeometry(0, 0, 152, 48), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 247);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var text7 = new mxCell('Corsiva', new mxGeometry(0, 0, 152, 48), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 295);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var text8 = new mxCell('Courier New', new mxGeometry(0, 0, 152, 48), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, 343);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell('Droid Sans', new mxGeometry(0, 0, 152, 48), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(0, 391);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
var text10 = new mxCell('Droid Serif', new mxGeometry(0, 0, 152, 48), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(0, 439);
|
|
text10.vertex = true;
|
|
bg1.insert(text10);
|
|
var text11 = new mxCell('Georgia', new mxGeometry(0, 0, 152, 48), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text11.geometry.relative = true;
|
|
text11.geometry.offset = new mxPoint(0, 487);
|
|
text11.vertex = true;
|
|
bg1.insert(text11);
|
|
var text12 = new mxCell('Helvetica Neue', new mxGeometry(0, 0, 152, 48), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text12.geometry.relative = true;
|
|
text12.geometry.offset = new mxPoint(0, 535);
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var text13 = new mxCell('Impact', new mxGeometry(0, 0, 152, 48), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text13.geometry.relative = true;
|
|
text13.geometry.offset = new mxPoint(0, 583);
|
|
text13.vertex = true;
|
|
bg1.insert(text13);
|
|
var part2 = new mxCell('', new mxGeometry(1, 0, 4, 40), 'shape=rect;strokeColor=none;fillColor=#B3B3B3;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-11, 75);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
return sb.createVertexTemplateFromCells([bg1], 152, 631, 'Item list');
|
|
}),
|
|
this.addEntry(dt + 'list style', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#0973AE;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#0973AE;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('', new mxGeometry(0, 0, 358, 126), s + 'rect;strokeColor=none;fillColor=#098DCA;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#084560;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var text1 = new mxCell('My Files', new mxGeometry(0, 0, 358, 24), 'text;fontSize=22;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 60);
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#084560;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-73, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 18, 16), s2 + 'rects;strokeColor=none;fillColor=#084560;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-34, 20);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar2 = new mxCell('Folders', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;align=left;verticalAlign=top;spacingTop=6;fontSize=13;fontColor=#666666;fontStyle=1;resizeWidth=1;spacingLeft=72;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 150);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#1AD2D2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(18, 130);
|
|
icon5.vertex = true;
|
|
bg1.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), s2 + 'plus;strokeColor=#084560;strokeWidth=2;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(-7, -7);
|
|
icon6.vertex = true;
|
|
icon5.insert(icon6);
|
|
var bar3 = new mxCell('Photos', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=#000000;opacity=20;resizeWidth=1;fontSize=17;fontColor=#000000;verticalAlign=top;align=left;spacingLeft=72;spacingTop=-1;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 205);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var text4 = new mxCell('Jan 9, 2014', new mxGeometry(0, 0, 358, 30), 'text;fontSize=14;fontColor=#959595;verticalAlign=middle;spacingBottom=12;spacingTop=2;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 25);
|
|
text4.vertex = true;
|
|
bar3.insert(text4);
|
|
var icon7 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#959595;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(18, 9);
|
|
icon7.vertex = true;
|
|
bar3.insert(icon7);
|
|
var icon8 = new mxCell('', new mxGeometry(0.5, 0.5, 24, 18), s2 + 'folder;fillColor=#CFCECE;strokeColor=none;');
|
|
icon8.geometry.relative = true;
|
|
icon8.geometry.offset = new mxPoint(-12, -10);
|
|
icon8.vertex = true;
|
|
icon7.insert(icon8);
|
|
var icon9 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'info;fillColor=#959595;strokeColor=#CFCECE;fontSize=13;');
|
|
icon9.geometry.relative = true;
|
|
icon9.geometry.offset = new mxPoint(-34, 14);
|
|
icon9.vertex = true;
|
|
bar3.insert(icon9);
|
|
var bar4 = new mxCell('Create', new mxGeometry(0, 0, 358, 48), 'shape=rect;dashed=0;strokeColor=none;fillColor=#ffffff;fontSize=16;fontColor=#959595;verticalAlign=middle;align=left;spacingLeft=14;resizeWidth=1;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 270);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var bar5 = new mxCell('Document', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;fontSize=16;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 318);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var icon10 = new mxCell('', new mxGeometry(0, 0.5, 18, 18), s2 + 'doc;fillColor=#4285F4;strokeColor=#FFFFFF;strokeWidth=2;');
|
|
icon10.geometry.relative = true;
|
|
icon10.geometry.offset = new mxPoint(16, -9);
|
|
icon10.vertex = true;
|
|
bar5.insert(icon10);
|
|
var bar6 = new mxCell('Spreadsheet', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;fontSize=16;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar6.geometry.relative = true;
|
|
bar6.geometry.offset = new mxPoint(0, 366);
|
|
bar6.vertex = true;
|
|
bg1.insert(bar6);
|
|
var icon11 = new mxCell('', new mxGeometry(0, 0.5, 18, 18), s2 + 'spreadsheet;fillColor=#0F9D58;strokeColor=#FFFFFF;strokeWidth=2;');
|
|
icon11.geometry.relative = true;
|
|
icon11.geometry.offset = new mxPoint(16, -9);
|
|
icon11.vertex = true;
|
|
bar6.insert(icon11);
|
|
var bar7 = new mxCell('Folder', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;fontSize=16;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 414);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var icon12 = new mxCell('', new mxGeometry(0, 0.5, 22, 18), s2 + 'folder;fillColor=#BDBDBD;strokeColor=#FFFFFF;strokeWidth=2;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(16, -9);
|
|
icon12.vertex = true;
|
|
bar7.insert(icon12);
|
|
var line1 = new mxCell('', new mxGeometry(0, 0, 358, 8), 'shape=line;strokeColor=#bbbbbb;strokeWidth=1;opacity=20;resizeWidth=1;');
|
|
line1.geometry.relative = true;
|
|
line1.geometry.offset = new mxPoint(0, 467);
|
|
line1.vertex = true;
|
|
bg1.insert(line1);
|
|
var bar9 = new mxCell('Upload photos or videos', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;fontSize=16;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar9.geometry.relative = true;
|
|
bar9.geometry.offset = new mxPoint(0, 480);
|
|
bar9.vertex = true;
|
|
bg1.insert(bar9);
|
|
var icon13 = new mxCell('', new mxGeometry(0, 0.5, 24, 18), s2 + 'upload;fillColor=#BDBDBD;strokeColor=#FFFFFF;strokeWidth=2;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(17, -9);
|
|
icon13.vertex = true;
|
|
bar9.insert(icon13);
|
|
var bar10 = new mxCell('Use Camera', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;fontSize=16;fontColor=#000000;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar10.geometry.relative = true;
|
|
bar10.geometry.offset = new mxPoint(0, 528);
|
|
bar10.vertex = true;
|
|
bg1.insert(bar10);
|
|
var icon14 = new mxCell('', new mxGeometry(0, 0.5, 24, 17), s2 + 'camera;fillColor=#BDBDBD;strokeColor=#FFFFFF;strokeWidth=2;');
|
|
icon14.geometry.relative = true;
|
|
icon14.geometry.offset = new mxPoint(17, -9);
|
|
icon14.vertex = true;
|
|
bar10.insert(icon14);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'List Style');
|
|
}),
|
|
this.addEntry(dt + 'avatar text icon', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#0288D1;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;fillColor=#0973AE;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('', new mxGeometry(0, 0, 358, 126), s + 'rect;strokeColor=none;fillColor=#03A9F4;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#084560;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var text1 = new mxCell('My Files', new mxGeometry(0, 0, 358, 24), 'text;fontSize=22;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 60);
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#084560;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-73, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 18, 16), s2 + 'rects;strokeColor=none;fillColor=#084560;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-34, 20);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar2 = new mxCell('Folders', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=none;resizeWidth=1;align=left;verticalAlign=top;spacingTop=6;fontSize=13;fontColor=#666666;fontStyle=1;resizeWidth=1;spacingLeft=72;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 150);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#18FFFF;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(18, 130);
|
|
icon5.vertex = true;
|
|
bg1.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), s2 + 'plus;strokeColor=#0B7676;strokeWidth=2;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(-7, -7);
|
|
icon6.vertex = true;
|
|
icon5.insert(icon6);
|
|
var bar3 = new mxCell('Photos', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=none;resizeWidth=1;fontSize=17;fontColor=#000000;verticalAlign=top;align=left;spacingLeft=72;spacingTop=-1;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 205);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var text4 = new mxCell('Jan 9, 2014', new mxGeometry(0, 0, 358, 30), 'text;fontSize=14;fontColor=#959595;verticalAlign=middle;spacingBottom=12;spacingTop=2;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 25);
|
|
text4.vertex = true;
|
|
bar3.insert(text4);
|
|
var icon7 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#B2B2B2;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(18, 9);
|
|
icon7.vertex = true;
|
|
bar3.insert(icon7);
|
|
var icon8 = new mxCell('', new mxGeometry(0.5, 0.5, 24, 18), s2 + 'folder;fillColor=#ffffff;strokeColor=none;');
|
|
icon8.geometry.relative = true;
|
|
icon8.geometry.offset = new mxPoint(-12, -10);
|
|
icon8.vertex = true;
|
|
icon7.insert(icon8);
|
|
var icon9 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'info;fillColor=#B2B2B2;strokeColor=#CFCECE;fontSize=13;');
|
|
icon9.geometry.relative = true;
|
|
icon9.geometry.offset = new mxPoint(-34, 14);
|
|
icon9.vertex = true;
|
|
bar3.insert(icon9);
|
|
var bar4 = new mxCell('Recipes', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=none;resizeWidth=1;fontSize=17;fontColor=#000000;verticalAlign=top;align=left;spacingLeft=72;spacingTop=-1;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 270);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var text5 = new mxCell('Jan 17, 2014', new mxGeometry(0, 0, 358, 30), 'text;fontSize=14;fontColor=#959595;verticalAlign=middle;spacingBottom=12;spacingTop=2;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 25);
|
|
text5.vertex = true;
|
|
bar4.insert(text5);
|
|
var icon10 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#B2B2B2;');
|
|
icon10.geometry.relative = true;
|
|
icon10.geometry.offset = new mxPoint(18, 9);
|
|
icon10.vertex = true;
|
|
bar4.insert(icon10);
|
|
var icon11 = new mxCell('', new mxGeometry(0.5, 0.5, 24, 18), s2 + 'folder;fillColor=#ffffff;strokeColor=none;');
|
|
icon11.geometry.relative = true;
|
|
icon11.geometry.offset = new mxPoint(-12, -10);
|
|
icon11.vertex = true;
|
|
icon10.insert(icon11);
|
|
var icon12 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'info;fillColor=#B2B2B2;strokeColor=#CFCECE;fontSize=13;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(-34, 14);
|
|
icon12.vertex = true;
|
|
bar4.insert(icon12);
|
|
var bar5 = new mxCell('Work', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=none;resizeWidth=1;fontSize=17;fontColor=#000000;verticalAlign=top;align=left;spacingLeft=72;spacingTop=-1;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 335);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var text5 = new mxCell('Jan 28, 2014', new mxGeometry(0, 0, 358, 30), 'text;fontSize=14;fontColor=#959595;verticalAlign=middle;spacingBottom=12;spacingTop=2;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 25);
|
|
text5.vertex = true;
|
|
bar5.insert(text5);
|
|
var icon13 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#B2B2B2;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(18, 9);
|
|
icon13.vertex = true;
|
|
bar5.insert(icon13);
|
|
var icon14 = new mxCell('', new mxGeometry(0.5, 0.5, 24, 18), s2 + 'folder;fillColor=#ffffff;strokeColor=none;');
|
|
icon14.geometry.relative = true;
|
|
icon14.geometry.offset = new mxPoint(-12, -10);
|
|
icon14.vertex = true;
|
|
icon13.insert(icon14);
|
|
var icon15 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'info;fillColor=#B2B2B2;strokeColor=#CFCECE;fontSize=13;');
|
|
icon15.geometry.relative = true;
|
|
icon15.geometry.offset = new mxPoint(-34, 14);
|
|
icon15.vertex = true;
|
|
bar5.insert(icon15);
|
|
var item1 = new mxCell('', new mxGeometry(70, 400, 288, 10), 'shape=line;strokeColor=#E6E6E6;');
|
|
item1.vertex = true;
|
|
bg1.insert(item1);
|
|
var bar6 = new mxCell('Files', new mxGeometry(0, 0, 358, 55), s + 'rect;strokeColor=none;fillColor=none;resizeWidth=1;align=left;verticalAlign=top;spacingTop=6;fontSize=13;fontColor=#666666;fontStyle=1;resizeWidth=1;spacingLeft=72;');
|
|
bar6.geometry.relative = true;
|
|
bar6.geometry.offset = new mxPoint(0, 410);
|
|
bar6.vertex = true;
|
|
bg1.insert(bar6);
|
|
var bar7 = new mxCell('Vacation itinerary', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=none;resizeWidth=1;fontSize=17;fontColor=#000000;verticalAlign=top;align=left;spacingLeft=72;spacingTop=-1;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 465);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var text6 = new mxCell('Jan 20, 2014', new mxGeometry(0, 0, 358, 30), 'text;fontSize=14;fontColor=#959595;verticalAlign=middle;spacingBottom=12;spacingTop=2;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 25);
|
|
text6.vertex = true;
|
|
bar7.insert(text6);
|
|
var icon16 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#2196F3;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(18, 9);
|
|
icon16.vertex = true;
|
|
bar7.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 18, 18), s2 + 'doc;fillColor=#ffffff;strokeColor=#2196F3;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-9, -9);
|
|
icon17.vertex = true;
|
|
icon16.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'info;fillColor=#B2B2B2;strokeColor=#CFCECE;fontSize=13;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-34, 14);
|
|
icon18.vertex = true;
|
|
bar7.insert(icon18);
|
|
var bar8 = new mxCell('Kitchen remodel', new mxGeometry(0, 0, 358, 65), s + 'rect;strokeColor=none;fillColor=none;resizeWidth=1;fontSize=17;fontColor=#000000;verticalAlign=top;align=left;spacingLeft=72;spacingTop=-1;');
|
|
bar8.geometry.relative = true;
|
|
bar8.geometry.offset = new mxPoint(0, 530);
|
|
bar8.vertex = true;
|
|
bg1.insert(bar8);
|
|
var text6 = new mxCell('Jan 10, 2014', new mxGeometry(0, 0, 358, 30), 'text;fontSize=14;fontColor=#959595;verticalAlign=middle;spacingBottom=12;spacingTop=2;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 25);
|
|
text6.vertex = true;
|
|
bar8.insert(text6);
|
|
var icon16 = new mxCell('', new mxGeometry(0, 0, 40, 40), 'shape=ellipse;strokeColor=none;fillColor=#F9CE1D;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(18, 9);
|
|
icon16.vertex = true;
|
|
bar8.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 18, 18), s2 + 'sheet;fillColor=#ffffff;strokeColor=none;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-9, -9);
|
|
icon17.vertex = true;
|
|
icon16.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'info;fillColor=#B2B2B2;strokeColor=#CFCECE;fontSize=13;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-34, 14);
|
|
icon18.vertex = true;
|
|
bar8.insert(icon18);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Avatar with text and icon');
|
|
}),
|
|
this.addEntry(dt + 'three line list', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;fontSize=13;align=right;fillColor=#0097A7;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Inbox', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#00BAD2;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=-3;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;fillColor=#005864;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#005864;fillColor=none;strokeWidth=2;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-32, -8);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var bar2 = new mxCell('Brunch this weekend?', new mxGeometry(0, 0, 358, 136), 'text;fontSize=16;align=left;verticalAlign=top;spacingTop=57;resizeWidth=1;spacingLeft=72;resizeWidth=1;strokeColor=#eeeeee;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 64);
|
|
icon1.vertex = true;
|
|
bar2.insert(icon1);
|
|
var text2 = new mxCell('<font color="#000000" style="font-size: 14px">Ali Connors</font>' + " - I'll be in your neighborhood doing errands this weekend. Do you want ...",
|
|
new mxGeometry(0, 0, 358, 66), 'text;fontSize=13;verticalAlign=middle;spacingLeft=72;whiteSpace=wrap;fontColor=#666666;html=1;spacingRight=14;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 70);
|
|
text2.vertex = true;
|
|
bar2.insert(text2);
|
|
var text1 = new mxCell('Today', new mxGeometry(0, 0, 358, 40), 'text;spacingLeft=16;spacing=2;spacingTop=8;fontSize=14;fontColor=#666666;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 81);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var bar3 = new mxCell('Summer BBQ <font color="#999999">4</font>', new mxGeometry(0, 0, 358, 86), 'text;fontSize=16;align=left;verticalAlign=top;spacing=16;spacingTop=-6;html=1;spacingLeft=56;resizeWidth=1;strokeColor=#eeeeee;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 217);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var icon2 = new mxCell('', new mxGeometry(0, 0, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(16, 13);
|
|
icon2.vertex = true;
|
|
bar3.insert(icon2);
|
|
var text2 = new mxCell('<font color="#000000" style="font-size: 14px">to Alex, Scott, Jennifer</font>' + " - Wish I could come, but I'm out of town this weekend.",
|
|
new mxGeometry(0, 0, 358, 66), 'text;fontSize=13;verticalAlign=top;whiteSpace=wrap;spacingRight=16;fontColor=#666666;html=1;resizeWidth=1;spacingLeft=72;spacingTop=2;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 30);
|
|
text2.vertex = true;
|
|
bar3.insert(text2);
|
|
var bar4 = new mxCell('Oui Oui', new mxGeometry(0, 0, 358, 86), 'text;fontSize=16;align=left;verticalAlign=top;spacing=16;spacingTop=-6;html=1;spacingLeft=56;resizeWidth=1;strokeColor=#eeeeee;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 303);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var icon3 = new mxCell('', new mxGeometry(0, 0, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(16, 13);
|
|
icon3.vertex = true;
|
|
bar4.insert(icon3);
|
|
var text2 = new mxCell('<font color="#000000" style="font-size: 14px">Sandra Adams</font> - Do you have Paris recommendations? Have you ever been?',
|
|
new mxGeometry(0, 0, 358, 66), 'text;fontSize=13;verticalAlign=top;whiteSpace=wrap;spacingRight=16;fontColor=#666666;html=1;resizeWidth=1;spacingLeft=72;spacingTop=2;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 30);
|
|
text2.vertex = true;
|
|
bar4.insert(text2);
|
|
var bar5 = new mxCell('Birthday gift', new mxGeometry(0, 0, 358, 86), 'text;fontSize=16;align=left;verticalAlign=top;spacing=16;spacingTop=-6;html=1;spacingLeft=56;resizeWidth=1;strokeColor=#eeeeee;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 389);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var icon4 = new mxCell('', new mxGeometry(0, 0, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(16, 13);
|
|
icon4.vertex = true;
|
|
bar5.insert(icon4);
|
|
var text2 = new mxCell('<font color="#000000" style="font-size: 14px">Trevor Hansen</font> - Have any ideas about what to get Heidi for her birthday?',
|
|
new mxGeometry(0, 0, 358, 66), 'text;fontSize=13;verticalAlign=top;whiteSpace=wrap;spacingRight=16;fontColor=#666666;html=1;resizeWidth=1;spacingLeft=72;spacingTop=2;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 30);
|
|
text2.vertex = true;
|
|
bar5.insert(text2);
|
|
var bar6 = new mxCell('Recipe to try', new mxGeometry(0, 0, 358, 86), 'text;fontSize=16;align=left;verticalAlign=top;spacing=16;spacingTop=-6;html=1;spacingLeft=56;resizeWidth=1;strokeColor=#eeeeee;');
|
|
bar6.geometry.relative = true;
|
|
bar6.geometry.offset = new mxPoint(0, 475);
|
|
bar6.vertex = true;
|
|
bg1.insert(bar6);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 0, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(16, 13);
|
|
icon5.vertex = true;
|
|
bar6.insert(icon5);
|
|
var text2 = new mxCell('<font color="#000000" style="font-size: 14px">Britta Holt</font> - We should eat this: Grated Squash, Corn and tomatillo Tacos ...',
|
|
new mxGeometry(0, 0, 358, 66), 'text;fontSize=13;verticalAlign=top;whiteSpace=wrap;spacingRight=16;fontColor=#666666;html=1;resizeWidth=1;spacingLeft=72;spacingTop=2;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 30);
|
|
text2.vertex = true;
|
|
bar6.insert(text2);
|
|
var bar7 = new mxCell('Giants game', new mxGeometry(0, 0, 358, 86), 'text;fontSize=16;align=left;verticalAlign=top;spacing=16;spacingTop=-6;html=1;spacingLeft=56;resizeWidth=1;strokeColor=#eeeeee;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 561);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var icon6 = new mxCell('', new mxGeometry(0, 0, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(16, 13);
|
|
icon6.vertex = true;
|
|
bar7.insert(icon6);
|
|
var icon7 = new mxCell('', new mxGeometry(1, 1, 56, 56), 'shape=ellipse;strokeColor=none;fillColor=#EEFF41;shadow=1;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(-78, -130);
|
|
icon7.vertex = true;
|
|
bg1.insert(icon7);
|
|
var icon8 = new mxCell('', new mxGeometry(0.5, 0.5, 16, 16), s2 + 'plus;strokeColor=#6D751E;strokeWidth=2;');
|
|
icon8.geometry.relative = true;
|
|
icon8.geometry.offset = new mxPoint(-8, -8);
|
|
icon8.vertex = true;
|
|
icon7.insert(icon8);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Three-line list');
|
|
}),
|
|
this.addEntry(dt + 'single line item avatar', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#00796B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('New chat', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#009688;resizeWidth=1;fontSize=21;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#004840;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#004840;fillColor=none;strokeWidth=2;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-34, -8);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var text2 = new mxCell('Recent chat', new mxGeometry(0, 0, 358, 40), 'text;fontSize=13;fontColor=#666666;spacingLeft=16;spacingTop=8;fontStyle=1;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 81);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var bar2 = new mxCell('', new mxGeometry(0, 0, 358, 58), 'shape=rect;strokeColor=none;fillColor=none;resizeWidth=1;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 141);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon3 = new mxCell('Abbey Christensen', new mxGeometry(0, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=16;fontSize=16;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(16, -20);
|
|
icon3.vertex = true;
|
|
bar2.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 18, 17), s2 + 'chat2;strokeColor=none;fillColor=#4DB6AC;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-39, -9);
|
|
icon4.vertex = true;
|
|
bar2.insert(icon4);
|
|
var bar3 = new mxCell('', new mxGeometry(0, 0, 358, 58), 'shape=rect;strokeColor=none;fillColor=none;resizeWidth=1;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 199);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var icon3 = new mxCell('Alex Nelson', new mxGeometry(0, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=16;fontSize=16;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(16, -20);
|
|
icon3.vertex = true;
|
|
bar3.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 18, 17), s2 + 'chat2;strokeColor=none;fillColor=#4DB6AC;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-39, -9);
|
|
icon4.vertex = true;
|
|
bar3.insert(icon4);
|
|
var bar4 = new mxCell('', new mxGeometry(0, 0, 358, 58), 'shape=rect;strokeColor=none;fillColor=none;resizeWidth=1;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 257);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var icon3 = new mxCell('Mary Johnson', new mxGeometry(0, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=16;fontSize=16;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(16, -20);
|
|
icon3.vertex = true;
|
|
bar4.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 18, 17), s2 + 'chat2;strokeColor=none;fillColor=#bdbdbd;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-39, -9);
|
|
icon4.vertex = true;
|
|
bar4.insert(icon4);
|
|
var bar5 = new mxCell('', new mxGeometry(0, 0, 358, 58), 'shape=rect;strokeColor=none;fillColor=none;resizeWidth=1;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 315);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var icon3 = new mxCell('Peter Carlsson', new mxGeometry(0, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=16;fontSize=16;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(16, -10);
|
|
icon3.vertex = true;
|
|
bar5.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 18, 17), s2 + 'chat2;strokeColor=none;fillColor=#bdbdbd;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-39, -9);
|
|
icon4.vertex = true;
|
|
bar5.insert(icon4);
|
|
var bar6 = new mxCell('', new mxGeometry(0, 0, 358, 58), 'shape=rect;strokeColor=none;fillColor=none;resizeWidth=1;');
|
|
bar6.geometry.relative = true;
|
|
bar6.geometry.offset = new mxPoint(0, 373);
|
|
bar6.vertex = true;
|
|
bg1.insert(bar6);
|
|
var icon3 = new mxCell('Trevor Hansen', new mxGeometry(0, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=16;fontSize=16;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(16, -20);
|
|
icon3.vertex = true;
|
|
bar6.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 18, 17), s2 + 'chat2;strokeColor=none;fillColor=#bdbdbd;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-39, -9);
|
|
icon4.vertex = true;
|
|
bar6.insert(icon4);
|
|
var part1 = new mxCell('', new mxGeometry(0, 0, 358, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 426);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text2 = new mxCell('Previous chats', new mxGeometry(0, 0, 358, 40), 'text;fontSize=13;fontColor=#666666;spacingLeft=16;spacingTop=8;fontStyle=1;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 431);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var bar7 = new mxCell('', new mxGeometry(0, 0, 358, 58), 'shape=rect;strokeColor=none;fillColor=none;resizeWidth=1;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 479);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var icon3 = new mxCell('Britta Holt', new mxGeometry(0, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=16;fontSize=16;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(16, -20);
|
|
icon3.vertex = true;
|
|
bar7.insert(icon3);
|
|
var bar8 = new mxCell('', new mxGeometry(0, 0, 358, 58), 'shape=rect;strokeColor=none;fillColor=none;resizeWidth=1;');
|
|
bar8.geometry.relative = true;
|
|
bar8.geometry.offset = new mxPoint(0, 537);
|
|
bar8.vertex = true;
|
|
bg1.insert(bar8);
|
|
var icon3 = new mxCell('Sandra Adams', new mxGeometry(0, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=16;fontSize=16;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(16, -20);
|
|
icon3.vertex = true;
|
|
bar8.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 1, 56, 56), 'shape=ellipse;fillColor=#18FFFF;strokeColor=none;shadow=1;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-73, -120);
|
|
icon4.vertex = true;
|
|
bg1.insert(icon4);
|
|
var part1 = new mxCell('', new mxGeometry(0.5, 0.5, 16, 16), s2 + 'plus;strokeColor=#0C7F7F;strokeWidth=2;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(-8, -8);
|
|
part1.vertex = true;
|
|
icon4.insert(part1);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Single-line item with avatar');
|
|
}),
|
|
this.addEntry(dt + 'two line item list', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#00796B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Settings', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#009688;resizeWidth=1;fontSize=21;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#004840;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var text2 = new mxCell('General', new mxGeometry(0, 0, 358, 40), 'text;fontSize=13;fontColor=#666666;spacingLeft=16;spacingTop=8;fontStyle=1;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 81);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('Profile photo', new mxGeometry(0, 0, 358, 30), 'text;fontSize=16;fontStyle=0;spacingLeft=16;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 141);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('Change your Google+ profile photo', new mxGeometry(0, 0, 358, 30), 'text;fontSize=14;fontStyle=0;spacingLeft=16;fontColor=#999999;verticalAlign=top;spacingTop=-6;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 171);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('Show your status', new mxGeometry(0, 0, 358, 30), 'text;fontSize=16;fontStyle=0;spacingLeft=16;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 221);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('Your status is visible to everyone you use with', new mxGeometry(0, 0, 358, 30), 'text;fontSize=14;fontStyle=0;spacingLeft=16;fontColor=#999999;verticalAlign=top;spacingTop=-6;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 251);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var part1 = new mxCell('', new mxGeometry(0, 0, 358, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 276);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text7 = new mxCell('Hangout notifications', new mxGeometry(0, 0, 358, 40), 'text;fontSize=13;fontColor=#666666;spacingLeft=16;spacingTop=8;fontStyle=1;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 281);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var part2 = new mxCell('Notifications\n<font style="font-size: 14px" color="#999999">Allow notifications</font>',
|
|
new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;html=1;strokeColor=#666666;strokeWidth=2;fillColor=none;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=top;spacingLeft=32;spacingTop=-18;fontSize=17;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(16, 351);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('Sound\n<font style="font-size: 14px" color="#999999">Hangouts message</font>',
|
|
new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;html=1;strokeColor=#666666;strokeWidth=2;fillColor=none;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=top;spacingLeft=32;spacingTop=-18;fontSize=17;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(16, 423);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('Video sounds\n<font style="font-size: 14px" color="#999999">Hangouts video call</font>',
|
|
new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;html=1;strokeColor=#666666;strokeWidth=2;fillColor=none;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=top;spacingLeft=32;spacingTop=-18;fontSize=17;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(16, 495);
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
var part5 = new mxCell('Invites\n<font style="font-size: 14px" color="#999999">Also notify when receiving invites</font>',
|
|
new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;html=1;strokeColor=#666666;strokeWidth=2;fillColor=none;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=top;spacingLeft=32;spacingTop=-18;fontSize=17;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(16, 567);
|
|
part5.vertex = true;
|
|
bg1.insert(part5);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Two-line item list');
|
|
}),
|
|
this.addEntry(dt + 'three line list icon', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#7B1FA2;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Settings', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#9C27B0;resizeWidth=1;fontSize=21;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-34, -8);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var text2 = new mxCell('User controls', new mxGeometry(0, 0, 358, 40), 'text;fontSize=13;fontColor=#666666;spacingLeft=16;spacingTop=8;fontStyle=1;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 81);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('Content filtering', new mxGeometry(0, 0, 358, 30), 'text;fontSize=16;fontStyle=0;spacingLeft=16;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 141);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('Set the content filtering level to restrict apps that can be downloaded',
|
|
new mxGeometry(0, 0, 358, 30), 'text;fontSize=14;fontStyle=0;spacingLeft=16;fontColor=#999999;verticalAlign=top;spacingTop=-8;whiteSpace=wrap;spacingRight=16;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 172);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('Password', new mxGeometry(0, 0, 358, 30), 'text;fontSize=16;fontStyle=0;spacingLeft=16;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 215);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('Require password for purchase or use password to restrict purchase', new mxGeometry(0, 0, 358, 30), 'text;fontSize=13;fontStyle=0;spacingLeft=16;fontColor=#999999;verticalAlign=top;spacingTop=-6;whiteSpace=wrap;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 244);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var part1 = new mxCell('', new mxGeometry(0, 0, 358, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 310);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text7 = new mxCell('General', new mxGeometry(0, 0, 358, 40), 'text;fontSize=13;fontColor=#666666;spacingLeft=16;spacingTop=8;fontStyle=1;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 315);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var part2 = new mxCell('Notifications\n<font style="font-size: 14px" color="#999999">Notify me about updates to apps or games<br>that I download</font>',
|
|
new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;html=1;strokeColor=#666666;strokeWidth=2;fillColor=none;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=top;spacingLeft=32;spacingTop=-18;fontSize=17;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(16, 380);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('Sound\n<font style="font-size: 14px" color="#999999">Auto-update apps at anytime. Data charges<br>may apply</font>',
|
|
new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;html=1;strokeColor=#666666;strokeWidth=2;fillColor=none;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=top;spacingLeft=32;spacingTop=-18;fontSize=17;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(16, 472);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('Auto-add widgets\n<font style="font-size: 14px" color="#999999">Automatically add home screen widgets</font>',
|
|
new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;html=1;strokeColor=#666666;strokeWidth=2;fillColor=none;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=top;spacingLeft=32;spacingTop=-18;fontSize=17;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(16, 562);
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Three-line list with icon');
|
|
}),
|
|
this.addEntry(dt + 'three line list avatar icon', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;fontSize=13;align=right;fillColor=#C2185B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Inbox', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#E91E63;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=-3;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=#ffffff;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-78, -8);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 20, 20), 'ellipse;strokeColor=none;fillColor=#ffffff;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-37, -10);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(0.5, 0.5, 12, 8), s2 + 'check;strokeColor=#E91E63;fillColor=none;strokeWidth=2;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-6, -4);
|
|
icon4.vertex = true;
|
|
icon3.insert(icon4);
|
|
var bar2 = new mxCell('Ali Connors', new mxGeometry(0, 0, 358, 86), 'shape=rect;fontSize=16;strokeColor=#eeeeee;fillColor=#ffffff;align=left;verticalAlign=top;spacing=0;spacingTop=5;spacingLeft=72;resizeWidth=1;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 0, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(16, 16);
|
|
icon5.vertex = true;
|
|
bar2.insert(icon5);
|
|
var text2 = new mxCell('Brunch this weekend?', new mxGeometry(0, 0, 358, 20), 'text;fontSize=13;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 31);
|
|
text2.vertex = true;
|
|
bar2.insert(text2);
|
|
var text3 = new mxCell("I'll be in your neighbourheed doing errands ...", new mxGeometry(0, 0, 358, 20), 'text;fontSize=13;verticalAlign=middle;fontColor=#999999;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 54);
|
|
text3.vertex = true;
|
|
bar2.insert(text3);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0, 17, 16), s2 + 'star;strokeColor=#B3B3B3;fillColor=#ffffff;strokeWidth=2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-39, 20);
|
|
icon5.vertex = true;
|
|
bar2.insert(icon5);
|
|
var bar3 = new mxCell('me, Scott, Jennifer', new mxGeometry(0, 0, 358, 86), 'shape=rect;fontSize=16;strokeColor=#eeeeee;fillColor=#ffffff;align=left;verticalAlign=top;spacing=0;spacingTop=5;spacingLeft=72;resizeWidth=1;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 167);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 0, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(16, 16);
|
|
icon5.vertex = true;
|
|
bar3.insert(icon5);
|
|
var text2 = new mxCell('Summer BBQ', new mxGeometry(0, 0, 358, 20), 'text;fontSize=13;verticalAlign=middle;resizeWidth=1;fontSize=13;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 31);
|
|
text2.vertex = true;
|
|
bar3.insert(text2);
|
|
var text3 = new mxCell("Wish I could come, but I'm out of town ...", new mxGeometry(0, 0, 358, 20), 'text;fontSize=13;verticalAlign=middle;fontColor=#999999;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 54);
|
|
text3.vertex = true;
|
|
bar3.insert(text3);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0, 17, 16), s2 + 'star;strokeColor=#B3B3B3;fillColor=#ffffff;strokeWidth=2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-39, 20);
|
|
icon5.vertex = true;
|
|
bar3.insert(icon5);
|
|
var bar4 = new mxCell('Sandra Adams', new mxGeometry(0, 0, 358, 86), 'shape=rect;fontSize=16;strokeColor=#eeeeee;fillColor=#ffffff;align=left;verticalAlign=top;spacing=0;spacingTop=5;spacingLeft=72;resizeWidth=1;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 253);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var icon6 = new mxCell('', new mxGeometry(0, 0, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(16, 16);
|
|
icon6.vertex = true;
|
|
bar4.insert(icon6);
|
|
var text2 = new mxCell('Oui oui', new mxGeometry(0, 0, 358, 20), 'text;fontSize=13;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 31);
|
|
text2.vertex = true;
|
|
bar4.insert(text2);
|
|
var text3 = new mxCell("Do you have Paris recommendations ...", new mxGeometry(0, 0, 358, 20), 'text;fontSize=13;verticalAlign=middle;fontColor=#999999;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 54);
|
|
text3.vertex = true;
|
|
bar4.insert(text3);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0, 17, 16), s2 + 'star;strokeColor=#B3B3B3;fillColor=#ffffff;strokeWidth=2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-39, 20);
|
|
icon5.vertex = true;
|
|
bar4.insert(icon5);
|
|
var bar5 = new mxCell('Trevor Hansen', new mxGeometry(0, 0, 358, 86), 'shape=rect;fontSize=16;strokeColor=#eeeeee;fillColor=#ffffff;align=left;verticalAlign=top;spacing=0;spacingTop=5;resizeWidth=1;spacingLeft=72;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 339);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var icon7 = new mxCell('', new mxGeometry(0, 0, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(16, 16);
|
|
icon7.vertex = true;
|
|
bar5.insert(icon7);
|
|
var text2 = new mxCell('Order confirmation', new mxGeometry(0, 0, 358, 20), 'text;fontSize=13;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 31);
|
|
text2.vertex = true;
|
|
bar5.insert(text2);
|
|
var text3 = new mxCell("Thank you for your recent order from ...", new mxGeometry(0, 0, 230, 20), 'text;fontSize=13;verticalAlign=middle;fontColor=#999999;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 54);
|
|
text3.vertex = true;
|
|
bar5.insert(text3);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0, 17, 16), s2 + 'star;strokeColor=#B3B3B3;fillColor=#ffffff;strokeWidth=2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-39, 20);
|
|
icon5.vertex = true;
|
|
bar5.insert(icon5);
|
|
var bar6 = new mxCell('Britta Holt', new mxGeometry(0, 0, 358, 86), 'shape=rect;fontSize=16;strokeColor=#eeeeee;fillColor=#ffffff;align=left;verticalAlign=top;spacing=0;spacingTop=5;spacingLeft=72;resizeWidth=1;');
|
|
bar6.geometry.relative = true;
|
|
bar6.geometry.offset = new mxPoint(0, 425);
|
|
bar6.vertex = true;
|
|
bg1.insert(bar6);
|
|
var icon8 = new mxCell('', new mxGeometry(0, 0, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon8.geometry.relative = true;
|
|
icon8.geometry.offset = new mxPoint(16, 16);
|
|
icon8.vertex = true;
|
|
bar6.insert(icon8);
|
|
var text2 = new mxCell('Recipe to try', new mxGeometry(0, 0, 358, 20), 'text;fontSize=13;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 31);
|
|
text2.vertex = true;
|
|
bar6.insert(text2);
|
|
var text3 = new mxCell("We should eat this: grated squash, corn ...", new mxGeometry(0, 0, 358, 20), 'text;fontSize=13;verticalAlign=middle;fontColor=#999999;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text3.geometry.offset = new mxPoint(0, 54);
|
|
text3.geometry.relative = true;
|
|
text3.vertex = true;
|
|
bar6.insert(text3);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0, 17, 16), s2 + 'star;strokeColor=#B3B3B3;fillColor=#ffffff;strokeWidth=2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-39, 20);
|
|
icon5.vertex = true;
|
|
bar6.insert(icon5);
|
|
var bar7 = new mxCell('David Park', new mxGeometry(0, 0, 358, 86), 'shape=rect;fontSize=16;strokeColor=#eeeeee;fillColor=#ffffff;align=left;verticalAlign=top;spacing=0;spacingTop=5;spacingLeft=72;resizeWidth=1;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 511);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var icon9 = new mxCell('', new mxGeometry(0, 0, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
icon9.geometry.relative = true;
|
|
icon9.geometry.offset = new mxPoint(16, 16);
|
|
icon9.vertex = true;
|
|
bar7.insert(icon9);
|
|
var text2 = new mxCell('Giants game', new mxGeometry(0, 0, 358, 20), 'text;fontSize=13;verticalAlign=middle;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 31);
|
|
text2.vertex = true;
|
|
bar7.insert(text2);
|
|
var text3 = new mxCell("Any interest in seeing the Giants play ...", new mxGeometry(0, 0, 358, 20), 'text;fontSize=13;verticalAlign=middle;fontColor=#999999;resizeWidth=1;align=left;spacingLeft=72;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 54);
|
|
text3.vertex = true;
|
|
bar7.insert(text3);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0, 17, 16), s2 + 'star;strokeColor=#B3B3B3;fillColor=#ffffff;strokeWidth=2;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-39, 20);
|
|
icon5.vertex = true;
|
|
bar7.insert(icon5);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 1, 56, 56), 'shape=ellipse;strokeColor=none;fillColor=#18FFFF;shadow=1;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-78, -129);
|
|
icon5.vertex = true;
|
|
bg1.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'plus;strokeColor=#084560;strokeWidth=2;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(20, 20);
|
|
icon6.vertex = true;
|
|
icon5.insert(icon6);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Three-line list with avatar and icons');
|
|
}),
|
|
this.addEntry(dt + 'line item checkbox', function()
|
|
{
|
|
var bg1 = new mxCell('Line item selected', new mxGeometry(0, 0, 358, 56), s + 'rect;fillColor=#ffffff;strokeColor=none;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;spacingLeft=72;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0.5, 18, 18), s2 + 'checkbox;strokeColor=none;fillColor=#089953;strokeWidth=2;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(16, -9);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(1, 0.5, 20, 18), s2 + 'message;strokeColor=#ffffff;fillColor=#666666;strokeWidth=2;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-36, -9);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 56, 'Line item with primary checkbox');
|
|
}),
|
|
this.addEntry(dt + 'line item checkbox', function()
|
|
{
|
|
var bg1 = new mxCell('Line item unselected', new mxGeometry(0, 0, 358, 56), s + 'rect;fillColor=#ffffff;strokeColor=none;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;spacingLeft=72;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0.5, 18, 18), s2 + 'checkbox;strokeColor=#666666;fillColor=none;strokeWidth=2;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(16, -9);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(1, 0.5, 20, 18), s2 + 'message;strokeColor=#ffffff;fillColor=#666666;strokeWidth=2;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-36, -9);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 56, 'Line item with primary checkbox');
|
|
}),
|
|
this.addEntry(dt + 'line item checkbox', function()
|
|
{
|
|
var bg1 = new mxCell('Line item selected', new mxGeometry(0, 0, 358, 56), s + 'rect;fillColor=#ffffff;strokeColor=none;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;spacingLeft=72;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(16, -20);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(1, 0.5, 18, 18), s2 + 'checkbox;strokeColor=none;fillColor=#089953;strokeWidth=2;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-36, -9);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 56, 'Line item with primary checkbox');
|
|
}),
|
|
this.addEntry(dt + 'line item checkbox', function()
|
|
{
|
|
var bg1 = new mxCell('Line item unselected', new mxGeometry(0, 0, 358, 56), s + 'rect;fillColor=#ffffff;strokeColor=none;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;spacingLeft=72;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(16, -20);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(1, 0.5, 18, 18), s2 + 'checkbox;strokeColor=#666666;fillColor=none;strokeWidth=2;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-36, -9);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 56, 'Line item with primary checkbox');
|
|
}),
|
|
this.addEntry(dt + 'item list', function()
|
|
{
|
|
var bg1 = new mxCell('Wi-Fi', new mxGeometry(0, 0, 358, 56), s + 'rect;fillColor=#ffffff;strokeColor=none;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;spacingLeft=72;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0.5, 24, 22), s2 + 'wifi;strokeColor=none;fillColor=#666666;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(16, -11);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(1, 0.5, 36, 20), s2 + 'switch;aspect=fixed;switchState=on;strokeColor=none;fillColor=#0E9D57;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-51, -10);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 56, 'Item list');
|
|
}),
|
|
this.addEntry(dt + 'item list', function()
|
|
{
|
|
var bg1 = new mxCell('Bluetooth', new mxGeometry(0, 0, 358, 56), s + 'rect;fillColor=#ffffff;strokeColor=none;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;spacingLeft=72;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0.5, 10, 18), s2 + 'bluetooth;strokeColor=#666666;strokeWidth=2;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(21, -9);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(1, 0.5, 36, 20), s2 + 'switch;aspect=fixed;switchState=off;strokeColor=#bbbbbb;fillColor=#0E9D57;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-51, -10);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 56, 'Item list');
|
|
}),
|
|
this.addEntry(dt + 'item list', function()
|
|
{
|
|
var bg1 = new mxCell('Data usage', new mxGeometry(0, 0, 358, 56), s + 'rect;fillColor=#ffffff;strokeColor=none;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;spacingLeft=72;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0.5, 22, 22), s2 + 'data_usage;strokeColor=#666666;strokeWidth=3;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(17, -11);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 56, 'Item list');
|
|
}),
|
|
this.addEntry(dt + 'line item checkbox', function()
|
|
{
|
|
var bg1 = new mxCell('Janet Perkins', new mxGeometry(0, 0, 358, 56), s + 'rect;fillColor=#ffffff;strokeColor=none;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;spacingLeft=72;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#808080;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(16, -20);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(1, 0.5, 18, 18), s2 + 'preferences;strokeColor=none;fillColor=#666666;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-36, -9);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 56, 'Line item with primary checkbox');
|
|
}),
|
|
this.addEntry(dt + 'item list', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#00796B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Topics', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#009688;resizeWidth=1;fontSize=21;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var part1 = new mxCell('', new mxGeometry(1, 0.5, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(-24, -8);
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var bar2 = new mxCell('Attractions', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;strokeWidth=1;fontSize=17;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon2 = new mxCell('', new mxGeometry(0, 0.5, 24, 18), s2 + 'attractions;strokeColor=#FFFFFF;fillColor=#737373;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(16, -9);
|
|
icon2.vertex = true;
|
|
bar2.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-32, -3);
|
|
icon3.vertex = true;
|
|
bar2.insert(icon3);
|
|
var bar3 = new mxCell('Dining', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 129);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var icon3 = new mxCell('', new mxGeometry(0, 0.5, 15, 18), s2 + 'dining;strokeColor=none;fillColor=#737373;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(20, -9);
|
|
icon3.vertex = true;
|
|
bar3.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-32, -3);
|
|
icon4.vertex = true;
|
|
bar3.insert(icon4);
|
|
var bar4 = new mxCell('Education', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 177);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 0.5, 22, 18), s2 + 'education;strokeColor=none;fillColor=#737373;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(16, -9);
|
|
icon5.vertex = true;
|
|
bar4.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(-32, -3);
|
|
icon6.vertex = true;
|
|
bar4.insert(icon6);
|
|
var bar5 = new mxCell('Family', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 225);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var icon7 = new mxCell('', new mxGeometry(0, 0.5, 22, 18), s2 + 'family;strokeColor=none;fillColor=#737373;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(17, -9);
|
|
icon7.vertex = true;
|
|
bar5.insert(icon7);
|
|
var icon8 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon8.geometry.relative = true;
|
|
icon8.geometry.offset = new mxPoint(-32, -3);
|
|
icon8.vertex = true;
|
|
bar5.insert(icon8);
|
|
var bar6 = new mxCell('Health', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar6.geometry.relative = true;
|
|
bar6.geometry.offset = new mxPoint(0, 273);
|
|
bar6.vertex = true;
|
|
bg1.insert(bar6);
|
|
var icon9 = new mxCell('', new mxGeometry(0, 0.5, 22, 18), s2 + 'health;strokeColor=none;fillColor=#737373;');
|
|
icon9.geometry.relative = true;
|
|
icon9.geometry.offset = new mxPoint(17, -9);
|
|
icon9.vertex = true;
|
|
bar6.insert(icon9);
|
|
var icon10 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon10.geometry.relative = true;
|
|
icon10.geometry.offset = new mxPoint(-32, -3);
|
|
icon10.vertex = true;
|
|
bar6.insert(icon10);
|
|
var bar7 = new mxCell('Office', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 321);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var icon11 = new mxCell('', new mxGeometry(0, 0.5, 20, 22), s2 + 'office;strokeColor=none;fillColor=#737373;');
|
|
icon11.geometry.relative = true;
|
|
icon11.geometry.offset = new mxPoint(18, -11);
|
|
icon11.vertex = true;
|
|
bar7.insert(icon11);
|
|
var icon12 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(-32, -3);
|
|
icon12.vertex = true;
|
|
bar7.insert(icon12);
|
|
var bar8 = new mxCell('Promotions', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar8.geometry.relative = true;
|
|
bar8.geometry.offset = new mxPoint(0, 369);
|
|
bar8.vertex = true;
|
|
bg1.insert(bar8);
|
|
var icon13 = new mxCell('', new mxGeometry(0, 0.5, 24, 24), s2 + 'promotions;strokeColor=none;fillColor=#737373;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(16, -12);
|
|
icon13.vertex = true;
|
|
bar8.insert(icon13);
|
|
var icon14 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon14.geometry.relative = true;
|
|
icon14.geometry.offset = new mxPoint(-32, -3);
|
|
icon14.vertex = true;
|
|
bar8.insert(icon14);
|
|
var bar9 = new mxCell('Radio', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar9.geometry.relative = true;
|
|
bar9.geometry.offset = new mxPoint(0, 417);
|
|
bar9.vertex = true;
|
|
bg1.insert(bar9);
|
|
var icon15 = new mxCell('', new mxGeometry(0, 0.5, 22, 24), s2 + 'radio;strokeColor=none;fillColor=#737373;');
|
|
icon15.geometry.relative = true;
|
|
icon15.geometry.offset = new mxPoint(18, -12);
|
|
icon15.vertex = true;
|
|
bar9.insert(icon15);
|
|
var icon16 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-32, -3);
|
|
icon16.vertex = true;
|
|
bar9.insert(icon16);
|
|
var bar10 = new mxCell('Recipes', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar10.geometry.relative = true;
|
|
bar10.geometry.offset = new mxPoint(0, 465);
|
|
bar10.vertex = true;
|
|
bg1.insert(bar10);
|
|
var icon17 = new mxCell('', new mxGeometry(0, 0.5, 24, 24), s2 + 'recipes;strokeColor=none;fillColor=#737373;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(16, -12);
|
|
icon17.vertex = true;
|
|
bar10.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-32, -3);
|
|
icon18.vertex = true;
|
|
bar10.insert(icon18);
|
|
var bar11 = new mxCell('Sports', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar11.geometry.relative = true;
|
|
bar11.geometry.offset = new mxPoint(0, 513);
|
|
bar11.vertex = true;
|
|
bg1.insert(bar11);
|
|
var icon19 = new mxCell('', new mxGeometry(0, 0.5, 22, 22), s2 + 'sports;strokeColor=none;fillColor=#737373;');
|
|
icon19.geometry.relative = true;
|
|
icon19.geometry.offset = new mxPoint(17, -11);
|
|
icon19.vertex = true;
|
|
bar11.insert(icon19);
|
|
var icon20 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon20.geometry.relative = true;
|
|
icon20.geometry.offset = new mxPoint(-32, -3);
|
|
icon20.vertex = true;
|
|
bar11.insert(icon20);
|
|
var bar12 = new mxCell('Travel', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, 561);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon19 = new mxCell('', new mxGeometry(0, 0.5, 24, 20), s2 + 'travel;strokeColor=none;fillColor=#737373;direction=south;');
|
|
icon19.geometry.relative = true;
|
|
icon19.geometry.offset = new mxPoint(16, -10);
|
|
icon19.vertex = true;
|
|
bar12.insert(icon19);
|
|
var icon20 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon20.geometry.relative = true;
|
|
icon20.geometry.offset = new mxPoint(-32, -3);
|
|
icon20.vertex = true;
|
|
bar12.insert(icon20);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Item list');
|
|
}),
|
|
this.addEntry(dt + 'item list expanded', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#00796B;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Topics', new mxGeometry(0, 0, 358, 57), s + 'rect;strokeColor=none;fillColor=#009688;resizeWidth=1;fontSize=21;fontColor=#FFFFFF;spacingTop=-3;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, -8);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var part1 = new mxCell('', new mxGeometry(1, 0.5, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(-24, -8);
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var bar2 = new mxCell('Attractions', new mxGeometry(0, 0, 358, 62), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 81);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var icon2 = new mxCell('', new mxGeometry(0, 0.5, 24, 18), s2 + 'attractions;strokeColor=#FFFFFF;fillColor=#737373;strokeWidth=1;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(16, -9);
|
|
icon2.vertex = true;
|
|
bar2.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-32, -3);
|
|
icon3.vertex = true;
|
|
bar2.insert(icon3);
|
|
var line1 = new mxCell('', new mxGeometry(0, 0, 358, 10), s + 'line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
line1.geometry.relative = true;
|
|
line1.geometry.offset = new mxPoint(0, 138);
|
|
line1.vertex = true;
|
|
bg1.insert(line1);
|
|
var bar3 = new mxCell('Dining', new mxGeometry(0, 0, 358, 62), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;fontColor=#009688;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 143);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var icon3 = new mxCell('', new mxGeometry(0, 0.5, 15, 18), s2 + 'dining;strokeColor=none;fillColor=#009688;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(27, -9);
|
|
icon3.vertex = true;
|
|
bar3.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-32, -3);
|
|
icon4.vertex = true;
|
|
bar3.insert(icon4);
|
|
var text1 = new mxCell('Breakfast & brunch', new mxGeometry(0, 0, 358, 48), 'text;verticalAlign=middle;spacingLeft=70;fontSize=17;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 205);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text1 = new mxCell('New American', new mxGeometry(0, 0, 358, 48), 'text;verticalAlign=middle;spacingLeft=70;fontSize=17;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 253);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text1 = new mxCell('Sushi bars', new mxGeometry(0, 0, 358, 48), 'text;verticalAlign=middle;spacingLeft=70;fontSize=17;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(0, 301);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var line2 = new mxCell('', new mxGeometry(0, 0, 358, 10), s + 'line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
line2.geometry.relative = true;
|
|
line2.geometry.offset = new mxPoint(0, 344);
|
|
line2.vertex = true;
|
|
bg1.insert(line2);
|
|
var bar4 = new mxCell('Education', new mxGeometry(0, 0, 358, 62), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 349);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var icon5 = new mxCell('', new mxGeometry(0, 0.5, 22, 18), s2 + 'education;strokeColor=none;fillColor=#737373;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(17, -9);
|
|
icon5.vertex = true;
|
|
bar4.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(-32, -3);
|
|
icon6.vertex = true;
|
|
bar4.insert(icon6);
|
|
var bar5 = new mxCell('Family', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 406);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
var icon7 = new mxCell('', new mxGeometry(0, 0.5, 22, 18), s2 + 'family;strokeColor=none;fillColor=#737373;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(17, -9);
|
|
icon7.vertex = true;
|
|
bar5.insert(icon7);
|
|
var icon8 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon8.geometry.relative = true;
|
|
icon8.geometry.offset = new mxPoint(-32, -3);
|
|
icon8.vertex = true;
|
|
bar5.insert(icon8);
|
|
var bar6 = new mxCell('Health', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar6.geometry.relative = true;
|
|
bar6.geometry.offset = new mxPoint(0, 456);
|
|
bar6.vertex = true;
|
|
bg1.insert(bar6);
|
|
var icon9 = new mxCell('', new mxGeometry(0, 0.5, 22, 18), s2 + 'health;strokeColor=none;fillColor=#737373;');
|
|
icon9.geometry.relative = true;
|
|
icon9.geometry.offset = new mxPoint(17, -9);
|
|
icon9.vertex = true;
|
|
bar6.insert(icon9);
|
|
var icon10 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon10.geometry.relative = true;
|
|
icon10.geometry.offset = new mxPoint(-32, -3);
|
|
icon10.vertex = true;
|
|
bar6.insert(icon10);
|
|
var bar7 = new mxCell('Office', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar7.geometry.relative = true;
|
|
bar7.geometry.offset = new mxPoint(0, 502);
|
|
bar7.vertex = true;
|
|
bg1.insert(bar7);
|
|
var icon11 = new mxCell('', new mxGeometry(0, 0.5, 20, 22), s2 + 'office;strokeColor=none;fillColor=#737373;');
|
|
icon11.geometry.relative = true;
|
|
icon11.geometry.offset = new mxPoint(18, -11);
|
|
icon11.vertex = true;
|
|
bar7.insert(icon11);
|
|
var icon12 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon12.geometry.relative = true;
|
|
icon12.geometry.offset = new mxPoint(-32, -3);
|
|
icon12.vertex = true;
|
|
bar7.insert(icon12);
|
|
var bar8 = new mxCell('Promotions', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#ffffff;resizeWidth=1;verticalLabelPosition=middle;align=left;verticalAlign=middle;spacingLeft=72;fontSize=17;');
|
|
bar8.geometry.relative = true;
|
|
bar8.geometry.offset = new mxPoint(0, 550);
|
|
bar8.vertex = true;
|
|
bg1.insert(bar8);
|
|
var icon13 = new mxCell('', new mxGeometry(0, 0.5, 24, 24), s2 + 'promotions;strokeColor=none;fillColor=#737373;');
|
|
icon13.geometry.relative = true;
|
|
icon13.geometry.offset = new mxPoint(16, -12);
|
|
icon13.vertex = true;
|
|
bar8.insert(icon13);
|
|
var icon14 = new mxCell('', new mxGeometry(1, 0.5, 12, 6), s2 + 'up;strokeColor=#737373;strokeWidth=2;flipV=1;');
|
|
icon14.geometry.relative = true;
|
|
icon14.geometry.offset = new mxPoint(-32, -3);
|
|
icon14.vertex = true;
|
|
bar8.insert(icon14);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Item list (expanded)');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlLists', 'GMDL / Lists', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLMenusPalette = function(expand)
|
|
{
|
|
var s = "perimeter=none;dashed=0;shape=";
|
|
var s2 = "perimeter=none;dashed=0;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library menu ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'menu simple', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 170, 168), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('Refresh', new mxGeometry(0, 0, 170, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 0);
|
|
part1.vertex = true;
|
|
bg.insert(part1);
|
|
var part2 = new mxCell('Help & feedback', new mxGeometry(0, 0, 170, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 42);
|
|
part2.vertex = true;
|
|
bg.insert(part2);
|
|
var part3 = new mxCell('Settings', new mxGeometry(0, 0, 170, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 84);
|
|
part3.vertex = true;
|
|
bg.insert(part3);
|
|
var part5 = new mxCell('Sign out', new mxGeometry(0, 0, 170, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, 126);
|
|
part5.vertex = true;
|
|
bg.insert(part5);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Menu');
|
|
}),
|
|
this.addEntry(dt + 'menu simple', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 170, 272), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('Preview', new mxGeometry(0, 0, 16, 12), s2 + 'preview;verticalAlign=middle;align=left;labelPosition=right;fontSize=15;spacing=16;resizeWidth=1;strokeColor=none;fillColor=#747474;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(17, 16);
|
|
part1.vertex = true;
|
|
bg.insert(part1);
|
|
var part2 = new mxCell('Share', new mxGeometry(0, 0, 18, 14), s2 + 'share3;verticalAlign=middle;align=left;labelPosition=right;fontSize=15;spacing=16;resizeWidth=1;strokeColor=none;fillColor=#747474;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(16, 57);
|
|
part2.vertex = true;
|
|
bg.insert(part2);
|
|
var part3 = new mxCell('Get link', new mxGeometry(0, 0, 18, 10), s2 + 'link;verticalAlign=middle;align=left;labelPosition=right;fontSize=15;spacing=16;resizeWidth=1;strokeColor=none;fillColor=#747474;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(16, 101);
|
|
part3.vertex = true;
|
|
bg.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(0, 0, bg.geometry.width, 10), 'shape=line;resizeWidth=1;perimeter=none;strokeColor=#eeeeee;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, 126);
|
|
part4.vertex = true;
|
|
bg.insert(part4);
|
|
var part5 = new mxCell('Make a copy', new mxGeometry(0, 0, 12, 16), s2 + 'copy;verticalAlign=middle;align=left;labelPosition=right;strokeWidth=2;fontSize=15;spacing=16;resizeWidth=1;strokeColor=#747474;fillColor=none;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(20, 150);
|
|
part5.vertex = true;
|
|
bg.insert(part5);
|
|
var part6 = new mxCell('Download', new mxGeometry(0, 0, 12, 16), s2 + 'download;verticalAlign=middle;align=left;labelPosition=right;fontSize=15;spacing=16;resizeWidth=1;strokeColor=none;fillColor=#747474;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(16, 192);
|
|
part6.vertex = true;
|
|
bg.insert(part6);
|
|
var part7 = new mxCell('', new mxGeometry(0, 0, bg.geometry.width, 10), 'shape=line;resizeWidth=1;perimeter=none;strokeColor=#eeeeee;');
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(0, 220);
|
|
part7.vertex = true;
|
|
bg.insert(part7);
|
|
var part8 = new mxCell('Remove', new mxGeometry(0, 0, 12, 16), s2 + 'remove;verticalAlign=middle;align=left;labelPosition=right;fontSize=15;spacing=16;resizeWidth=1;strokeColor=none;fillColor=#747474;');
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(16, 242);
|
|
part8.vertex = true;
|
|
bg.insert(part8);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Menu');
|
|
}),
|
|
this.addEntry(dt + 'simple menu', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 280, 160), 'shape=rect;fillColor=#FAFAFA;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell("Show all notification content", new mxGeometry(0, 0, 280, 50), 'text;fontSize=13;fontColor=#000000;align=left;spacing=16;fillColor=#eeeeee;verticalAlign=middle;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 10);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var bar2 = new mxCell("Hide sensitive notification content", new mxGeometry(0, 0, 280, 50), 'text;fontSize=13;fontColor=#000000;align=left;spacing=16;verticalAlign=middle;resizeWidth=1;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 60);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var bar3 = new mxCell("Hide all notification content", new mxGeometry(0, 0, 280, 50), 'text;fontSize=13;fontColor=#000000;align=left;spacing=16;verticalAlign=middle;resizeWidth=1;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 110);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
return sb.createVertexTemplateFromCells([bg1], 280, 160, 'Simple menu');
|
|
}),
|
|
this.addEntry(dt + 'simple menu multi line', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 280, 328), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell("Title goes here", new mxGeometry(0, 0, 280, 68), 'text;fontSize=19;fontColor=#000000;align=left;spacing=16;verticalAlign=middle;fontStyle=1;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var bar2 = new mxCell("Single line text goes here", new mxGeometry(0, 0, 280, 50), 'text;fontSize=15;fontColor=#000000;align=left;spacing=16;fillColor=#e0e0e0;verticalAlign=middle;resizeWidth=1;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 68);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var bar3 = new mxCell("Two line wrapped text goes here making it wrap to next line",
|
|
new mxGeometry(0, 0, 280, 70), 'text;fontSize=15;fontColor=#000000;align=left;spacing=16;verticalAlign=middle;whiteSpace=wrap;resizeWidth=1;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, 118);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var bar4 = new mxCell("Single line text goes here", new mxGeometry(0, 0, 280, 50), 'text;fontSize=15;fontColor=#000000;align=left;spacing=16;verticalAlign=middle;resizeWidth=1;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(0, 188);
|
|
bar4.vertex = true;
|
|
bg1.insert(bar4);
|
|
var bar5 = new mxCell("Three line wrapped text goes here making it wrap to next line and continues longer to be here",
|
|
new mxGeometry(0, 0, 280, 90), 'text;fontSize=15;fontColor=#000000;align=left;spacing=16;verticalAlign=middle;whiteSpace=wrap;resizeWidth=1;');
|
|
bar5.geometry.relative = true;
|
|
bar5.geometry.offset = new mxPoint(0, 238);
|
|
bar5.vertex = true;
|
|
bg1.insert(bar5);
|
|
return sb.createVertexTemplateFromCells([bg1], 280, 328, 'Simple menu (multi-line)');
|
|
}),
|
|
this.addEntry(dt + 'menu items', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 318, 126), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('Menu item one', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=top;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 0.5, 5, 10), s2 + 'triangle;strokeColor=none;fillColor=#666666;direction=north;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-27, 0);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var part2 = new mxCell('Menu item two', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 42);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 5, 10), s2 + 'triangle;strokeColor=none;fillColor=#666666;direction=north;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-27, -5);
|
|
icon2.vertex = true;
|
|
part2.insert(icon2);
|
|
var part3 = new mxCell('Menu item three', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=bottom;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 84);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 5, 10), s2 + 'triangle;strokeColor=none;fillColor=#666666;direction=north;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-27, -10);
|
|
icon3.vertex = true;
|
|
part3.insert(icon3);
|
|
return sb.createVertexTemplateFromCells([bg1], 318, 126, 'Menu items');
|
|
}),
|
|
this.addEntry(dt + 'menu', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 318, 126), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('Open', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg.insert(part1);
|
|
var icon1 = new mxCell('Cmnd+O', new mxGeometry(1, 0.5, 106, 20), 'text;labelPosition=center;verticalLabelPosition=middle;align=right;verticalAlign=middle;fontSize=15;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-120, -10);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var part2 = new mxCell('Paste in place', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 42);
|
|
part2.vertex = true;
|
|
bg.insert(part2);
|
|
var icon2 = new mxCell('Shift + V', new mxGeometry(1, 0.5, 106, 20), 'text;labelPosition=center;verticalLabelPosition=middle;align=right;verticalAlign=middle;fontSize=15;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-120, -10);
|
|
icon2.vertex = true;
|
|
part2.insert(icon2);
|
|
var part3 = new mxCell('Research', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 84);
|
|
part3.vertex = true;
|
|
bg.insert(part3);
|
|
var icon3 = new mxCell('Opt + Shift + Cmnd + I', new mxGeometry(1, 0.5, 106, 20), 'text;labelPosition=center;verticalLabelPosition=middle;align=right;verticalAlign=middle;fontSize=15;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-120, -10);
|
|
icon3.vertex = true;
|
|
part3.insert(icon3);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Menu');
|
|
}),
|
|
this.addEntry(dt + 'menu', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 318, 126), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('Open', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg.insert(part1);
|
|
var icon1 = new mxCell('O', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-41, -6);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var part2 = new mxCell('Paste in place', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 42);
|
|
part2.vertex = true;
|
|
bg.insert(part2);
|
|
var icon2 = new mxCell('V', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-41, -6);
|
|
icon2.vertex = true;
|
|
part2.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 12, 12), 'shape=mxgraph.arrows2.arrow;direction=north;dy=0.6;dx=4.8;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-57, -6);
|
|
icon3.vertex = true;
|
|
part2.insert(icon3);
|
|
var part3 = new mxCell('Research', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 84);
|
|
part3.vertex = true;
|
|
bg.insert(part3);
|
|
var icon4 = new mxCell('I', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-33, -6);
|
|
icon4.vertex = true;
|
|
part3.insert(icon4);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0.5, 12, 12), 'shape=mxgraph.arrows2.arrow;direction=north;dy=0.6;dx=4.8;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-49, -6);
|
|
icon5.vertex = true;
|
|
part3.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(1, 0.5, 12, 12), s2 + 'opt;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(-65, -6);
|
|
icon6.vertex = true;
|
|
part3.insert(icon6);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Menu');
|
|
}),
|
|
this.addEntry(dt + 'cascading menu', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 318, 524), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('Bold', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;perimeter=none;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var icon1 = new mxCell('B', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-41, -6);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var part2 = new mxCell('Italic', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;perimeter=none;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 42);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var icon1 = new mxCell('I', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-41, -6);
|
|
icon1.vertex = true;
|
|
part2.insert(icon1);
|
|
var part3 = new mxCell('Underline', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;perimeter=none;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 84);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var icon1 = new mxCell('U', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-41, -6);
|
|
icon1.vertex = true;
|
|
part3.insert(icon1);
|
|
var part4 = new mxCell('Striketrough', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;perimeter=none;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, 126);
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
var icon1 = new mxCell('Alt+Shift+5', new mxGeometry(1, 0.5, 106, 20), 'text;labelPosition=center;verticalLabelPosition=middle;align=right;verticalAlign=middle;fontSize=15;perimeter=none;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-120, -10);
|
|
icon1.vertex = true;
|
|
part4.insert(icon1);
|
|
var part5 = new mxCell('Superscript', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;perimeter=none;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, 168);
|
|
part5.vertex = true;
|
|
bg1.insert(part5);
|
|
var icon1 = new mxCell('.', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-41, -6);
|
|
icon1.vertex = true;
|
|
part5.insert(icon1);
|
|
var part6 = new mxCell('Subscript', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;perimeter=none;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(0, 210);
|
|
part6.vertex = true;
|
|
bg1.insert(part6);
|
|
var icon1 = new mxCell(',', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-41, -6);
|
|
icon1.vertex = true;
|
|
part6.insert(icon1);
|
|
var part7 = new mxCell('', new mxGeometry(0, 0, 318, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;perimeter=none;');
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(0, 252);
|
|
part7.vertex = true;
|
|
bg1.insert(part7);
|
|
var part8 = new mxCell('Paragraph styles', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;perimeter=none;');
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(0, 262);
|
|
part8.vertex = true;
|
|
bg1.insert(part8);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 5, 10), s2 + 'triangle;strokeColor=none;fillColor=#666666;direction=north;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-38, -5);
|
|
icon2.vertex = true;
|
|
part8.insert(icon2);
|
|
var part9 = new mxCell('Align', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;perimeter=none;');
|
|
part9.geometry.relative = true;
|
|
part9.geometry.offset = new mxPoint(0, 304);
|
|
part9.vertex = true;
|
|
bg1.insert(part9);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 5, 10), s2 + 'triangle;strokeColor=none;fillColor=#666666;direction=north;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-38, -5);
|
|
icon3.vertex = true;
|
|
part9.insert(icon3);
|
|
var part10 = new mxCell('Line Spacing', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;fillColor=#eeeeee;resizeWidth=1;perimeter=none;');
|
|
part10.geometry.relative = true;
|
|
part10.geometry.offset = new mxPoint(0, 346);
|
|
part10.vertex = true;
|
|
bg1.insert(part10);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 5, 10), s2 + 'triangle;strokeColor=none;fillColor=#666666;direction=north;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-38, -5);
|
|
icon4.vertex = true;
|
|
part10.insert(icon4);
|
|
var part11 = new mxCell('Numbered List', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;perimeter=none;');
|
|
part11.geometry.relative = true;
|
|
part11.geometry.offset = new mxPoint(0, 388);
|
|
part11.vertex = true;
|
|
bg1.insert(part11);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0.5, 5, 10), s2 + 'triangle;strokeColor=none;fillColor=#666666;direction=north;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-38, -5);
|
|
icon5.vertex = true;
|
|
part11.insert(icon5);
|
|
var part12 = new mxCell('List options', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;perimeter=none;');
|
|
part12.geometry.relative = true;
|
|
part12.geometry.offset = new mxPoint(0, 430);
|
|
part12.vertex = true;
|
|
bg1.insert(part12);
|
|
var icon6 = new mxCell('', new mxGeometry(1, 0.5, 5, 10), s2 + 'triangle;strokeColor=none;fillColor=#666666;direction=north;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(-38, -5);
|
|
icon6.vertex = true;
|
|
part12.insert(icon6);
|
|
var part13 = new mxCell('', new mxGeometry(0, 0, 318, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;perimeter=none;');
|
|
part13.geometry.relative = true;
|
|
part13.geometry.offset = new mxPoint(0, 472);
|
|
part13.vertex = true;
|
|
bg1.insert(part13);
|
|
var part14 = new mxCell('Clear formatting', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;perimeter=none;');
|
|
part14.geometry.relative = true;
|
|
part14.geometry.offset = new mxPoint(0, 482);
|
|
part14.vertex = true;
|
|
bg1.insert(part14);
|
|
var icon7 = new mxCell('/', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(-41, -6);
|
|
icon7.vertex = true;
|
|
part14.insert(icon7);
|
|
var bg2 = new mxCell('', new mxGeometry(318, 346, 318, 286), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;shadow=1;perimeter=none;');
|
|
bg2.vertex = true;
|
|
var part1 = new mxCell('Single', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=72;resizeWidth=1;perimeter=none;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg2.insert(part1);
|
|
var part2 = new mxCell('1.15', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=72;resizeWidth=1;perimeter=none;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 42);
|
|
part2.vertex = true;
|
|
bg2.insert(part2);
|
|
var part3 = new mxCell('Double', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=72;resizeWidth=1;perimeter=none;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 84);
|
|
part3.vertex = true;
|
|
bg2.insert(part3);
|
|
var part4 = new mxCell('Custom: 1.2', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=72;resizeWidth=1;perimeter=none;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, 126);
|
|
part4.vertex = true;
|
|
bg2.insert(part4);
|
|
var part5 = new mxCell('', new mxGeometry(0, 0.5, 18, 14), s2 + 'check;fillColor=none;strokeWidth=2;strokeColor=#666666;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(36, -7);
|
|
part5.vertex = true;
|
|
part4.insert(part5);
|
|
var part6 = new mxCell('', new mxGeometry(1, 0.5, 5, 10), s2 + 'triangle;strokeColor=none;fillColor=#666666;direction=north;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(-38, -5);
|
|
part6.vertex = true;
|
|
part4.insert(part6);
|
|
var part7 = new mxCell('', new mxGeometry(0, 0, 318, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;perimeter=none;');
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(0, 168);
|
|
part7.vertex = true;
|
|
bg2.insert(part7);
|
|
var part8 = new mxCell('Add space before paragraph', new mxGeometry(0, 0, 318, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=16;resizeWidth=1;perimeter=none;');
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(0, 178);
|
|
part8.vertex = true;
|
|
bg2.insert(part8);
|
|
var part9 = new mxCell('Add space after paragraph', new mxGeometry(0, 0, 318, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=16;resizeWidth=1;perimeter=none;');
|
|
part9.geometry.relative = true;
|
|
part9.geometry.offset = new mxPoint(0, 210);
|
|
part9.vertex = true;
|
|
bg2.insert(part9);
|
|
var part10 = new mxCell('', new mxGeometry(0, 0, 318, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;perimeter=none;');
|
|
part10.geometry.relative = true;
|
|
part10.geometry.offset = new mxPoint(0, 242);
|
|
part10.vertex = true;
|
|
bg2.insert(part10);
|
|
var part9 = new mxCell('Custom spacing...', new mxGeometry(0, 0, 318, 34), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=16;resizeWidth=1;perimeter=none;');
|
|
part9.geometry.relative = true;
|
|
part9.geometry.offset = new mxPoint(0, 252);
|
|
part9.vertex = true;
|
|
bg2.insert(part9);
|
|
return sb.createVertexTemplateFromCells([bg1, bg2], 636, 632, 'Cascading menu');
|
|
}),
|
|
this.addEntry(dt + 'cascading menu', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 192, 146), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;shadow=1;perimeter=none;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('Show', new mxGeometry(0, 0, 192, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=16;resizeWidth=1;perimeter=none;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg.insert(part1);
|
|
var part2 = new mxCell('Grid lines', new mxGeometry(0, 0, 192, 32), 'text;verticalAlign=middle;fontSize=15;spacingLeft=72;resizeWidth=1;perimeter=none;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 42);
|
|
part2.vertex = true;
|
|
bg.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(0, 0.5, 18, 14), s2 + 'check;fillColor=none;strokeWidth=2;strokeColor=#666666;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(36, -7);
|
|
part3.vertex = true;
|
|
part2.insert(part3);
|
|
var part4 = new mxCell('Page breaks', new mxGeometry(0, 0, 192, 32), 'text;verticalAlign=middle;fontSize=15;spacingLeft=72;resizeWidth=1;perimeter=none;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, 74);
|
|
part4.vertex = true;
|
|
bg.insert(part4);
|
|
var part5 = new mxCell('Rules', new mxGeometry(0, 0, 192, 32), 'text;verticalAlign=middle;fontSize=15;spacingLeft=72;resizeWidth=1;perimeter=none;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, 106);
|
|
part5.vertex = true;
|
|
bg.insert(part5);
|
|
var part6 = new mxCell('', new mxGeometry(0, 0.5, 18, 14), s2 + 'check;fillColor=none;strokeWidth=2;strokeColor=#666666;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(36, -7);
|
|
part6.vertex = true;
|
|
part5.insert(part6);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Cascading menu');
|
|
}),
|
|
this.addEntry(dt + 'menu disabled actions', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 85, 190), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('Undo', new mxGeometry(0, 0, 85, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 10);
|
|
part1.vertex = true;
|
|
bg.insert(part1);
|
|
var part2 = new mxCell('Redo', new mxGeometry(0, 0, 85, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;fontColor=#b3b3b3;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 42);
|
|
part2.vertex = true;
|
|
bg.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(0, 0, 85, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 74);
|
|
part3.vertex = true;
|
|
bg.insert(part3);
|
|
var part4 = new mxCell('Cut', new mxGeometry(0, 0, 85, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;fontColor=#b3b3b3;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, 84);
|
|
part4.vertex = true;
|
|
bg.insert(part4);
|
|
var part5 = new mxCell('Copy', new mxGeometry(0, 0, 85, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;fontColor=#b3b3b3;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, 116);
|
|
part5.vertex = true;
|
|
bg.insert(part5);
|
|
var part6 = new mxCell('Paste', new mxGeometry(0, 0, 85, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(0, 148);
|
|
part6.vertex = true;
|
|
bg.insert(part6);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Menu with disabled actions');
|
|
}),
|
|
this.addEntry(dt + 'menu disabled actions', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 170, 222), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('Home', new mxGeometry(0, 0, 170, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 10);
|
|
part1.vertex = true;
|
|
bg.insert(part1);
|
|
var part2 = new mxCell('Back', new mxGeometry(0, 0, 170, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 42);
|
|
part2.vertex = true;
|
|
bg.insert(part2);
|
|
var part3 = new mxCell('Forward', new mxGeometry(0, 0, 170, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;fontColor=#b3b3b3;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 74);
|
|
part3.vertex = true;
|
|
bg.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(0, 0, 170, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, 106);
|
|
part4.vertex = true;
|
|
bg.insert(part4);
|
|
var part5 = new mxCell('Recently closed', new mxGeometry(0, 0, 170, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;fontColor=#b3b3b3;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, 116);
|
|
part5.vertex = true;
|
|
bg.insert(part5);
|
|
var part6 = new mxCell('Google', new mxGeometry(0, 0, 170, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(0, 148);
|
|
part6.vertex = true;
|
|
bg.insert(part6);
|
|
var part7 = new mxCell('Youtube', new mxGeometry(0, 0, 170, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(0, 180);
|
|
part7.vertex = true;
|
|
bg.insert(part7);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Menu with disabled actions');
|
|
}),
|
|
this.addEntry(dt + 'scrollable menu', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 272, 420), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;shadow=1;');
|
|
bg.vertex = true;
|
|
var text1 = new mxCell('Option item 1', new mxGeometry(0, 0, bg.geometry.width, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg.insert(text1);
|
|
var text2 = new mxCell('Option item 2', new mxGeometry(0, 0, bg.geometry.width, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 42);
|
|
text2.vertex = true;
|
|
bg.insert(text2);
|
|
var text3 = new mxCell('Option item 3', new mxGeometry(0, 0, bg.geometry.width, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 84);
|
|
text3.vertex = true;
|
|
bg.insert(text3);
|
|
var text4 = new mxCell('Option item 4', new mxGeometry(0, 0, bg.geometry.width, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 126);
|
|
text4.vertex = true;
|
|
bg.insert(text4);
|
|
var text5 = new mxCell('Option item 5', new mxGeometry(0, 0, bg.geometry.width, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 168);
|
|
text5.vertex = true;
|
|
bg.insert(text5);
|
|
var text6 = new mxCell('Option item 6', new mxGeometry(0, 0, bg.geometry.width, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 210);
|
|
text6.vertex = true;
|
|
bg.insert(text6);
|
|
var text7 = new mxCell('Option item 7', new mxGeometry(0, 0, bg.geometry.width, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 252);
|
|
text7.vertex = true;
|
|
bg.insert(text7);
|
|
var text8 = new mxCell('Option item 8', new mxGeometry(0, 0, bg.geometry.width, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, 294);
|
|
text8.vertex = true;
|
|
bg.insert(text8);
|
|
var text9 = new mxCell('Option item 9', new mxGeometry(0, 0, bg.geometry.width, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;fillColor=#eeeeee;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(0, 336);
|
|
text9.vertex = true;
|
|
bg.insert(text9);
|
|
var text10 = new mxCell('Option item 10', new mxGeometry(0, 0, bg.geometry.width, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(0, 378);
|
|
text10.vertex = true;
|
|
bg.insert(text10);
|
|
var part2 = new mxCell('', new mxGeometry(1, 0, 4, 190), 'shape=rect;strokeColor=none;fillColor=#dddddd;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-4, 125);
|
|
part2.vertex = true;
|
|
bg.insert(part2);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Scrollable menu');
|
|
}),
|
|
this.addEntry(dt + 'cascading menu', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(116, 0, 318, 436), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('Bold', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var icon1 = new mxCell('B', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-41, -6);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var part2 = new mxCell('Italic', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 42);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var icon1 = new mxCell('I', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-41, -6);
|
|
icon1.vertex = true;
|
|
part2.insert(icon1);
|
|
var part3 = new mxCell('Underline', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 84);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var icon1 = new mxCell('U', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-41, -6);
|
|
icon1.vertex = true;
|
|
part3.insert(icon1);
|
|
var part4 = new mxCell('Striketrough', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, 126);
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
var icon1 = new mxCell('Alt+Shift+5', new mxGeometry(1, 0.5, 106, 20), 'text;labelPosition=center;verticalLabelPosition=middle;align=right;verticalAlign=middle;fontSize=15;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-120, -10);
|
|
icon1.vertex = true;
|
|
part4.insert(icon1);
|
|
var part5 = new mxCell('Superscript', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, 168);
|
|
part5.vertex = true;
|
|
bg1.insert(part5);
|
|
var icon1 = new mxCell('.', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-41, -6);
|
|
icon1.vertex = true;
|
|
part5.insert(icon1);
|
|
var part6 = new mxCell('Subscript', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;spacing=0;spacingLeft=16;fontSize=15;resizeWidth=1;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(0, 210);
|
|
part6.vertex = true;
|
|
bg1.insert(part6);
|
|
var icon1 = new mxCell(',', new mxGeometry(1, 0.5, 12, 12), s2 + 'command;labelPosition=right;verticalLabelPosition=middle;align=left;verticalAlign=middle;fontSize=15;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-41, -6);
|
|
icon1.vertex = true;
|
|
part6.insert(icon1);
|
|
var part7 = new mxCell('', new mxGeometry(0, 0, 318, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(0, 252);
|
|
part7.vertex = true;
|
|
bg1.insert(part7);
|
|
var part8 = new mxCell('Paragraph styles', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(0, 262);
|
|
part8.vertex = true;
|
|
bg1.insert(part8);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 5, 10), s2 + 'triangle;strokeColor=none;fillColor=#666666;direction=north;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-38, -5);
|
|
icon2.vertex = true;
|
|
part8.insert(icon2);
|
|
var part9 = new mxCell('Line spacing', new mxGeometry(0, 0, 318, 42), 'text;fillColor=#eeeeee;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part9.geometry.relative = true;
|
|
part9.geometry.offset = new mxPoint(0, 304);
|
|
part9.vertex = true;
|
|
bg1.insert(part9);
|
|
var part10 = new mxCell('Numbered list', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part10.geometry.relative = true;
|
|
part10.geometry.offset = new mxPoint(0, 346);
|
|
part10.vertex = true;
|
|
bg1.insert(part10);
|
|
var part11 = new mxCell('List options', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;resizeWidth=1;');
|
|
part11.geometry.relative = true;
|
|
part11.geometry.offset = new mxPoint(0, 388);
|
|
part11.vertex = true;
|
|
bg1.insert(part11);
|
|
var part12 = new mxCell('', new mxGeometry(0, 0, 318, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part12.geometry.relative = true;
|
|
part12.geometry.offset = new mxPoint(0, 420);
|
|
part12.vertex = true;
|
|
bg1.insert(part12);
|
|
var bg2 = new mxCell('', new mxGeometry(286, 304, 318, 286), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;shadow=1;');
|
|
bg2.vertex = true;
|
|
var part1 = new mxCell('Single', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=72;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bg2.insert(part1);
|
|
var part2 = new mxCell('1.15', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=72;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 42);
|
|
part2.vertex = true;
|
|
bg2.insert(part2);
|
|
var part3 = new mxCell('Double', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=72;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 84);
|
|
part3.vertex = true;
|
|
bg2.insert(part3);
|
|
var part4 = new mxCell('Custom: 1.2', new mxGeometry(0, 0, 318, 42), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=72;fillColor=#eeeeee;resizeWidth=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, 126);
|
|
part4.vertex = true;
|
|
bg2.insert(part4);
|
|
var part5 = new mxCell('', new mxGeometry(0, 0.5, 18, 14), s2 + 'check;fillColor=none;strokeWidth=2;strokeColor=#666666;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(36, -7);
|
|
part5.vertex = true;
|
|
part4.insert(part5);
|
|
var part6 = new mxCell('', new mxGeometry(1, 0.5, 5, 10), s2 + 'triangle;strokeColor=none;fillColor=#666666;direction=north;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(-38, -5);
|
|
part6.vertex = true;
|
|
part4.insert(part6);
|
|
var part7 = new mxCell('', new mxGeometry(0, 0, 318, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(0, 168);
|
|
part7.vertex = true;
|
|
bg2.insert(part7);
|
|
var part8 = new mxCell('Add space before paragraph', new mxGeometry(0, 0, 318, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=16;resizeWidth=1;');
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(0, 178);
|
|
part8.vertex = true;
|
|
bg2.insert(part8);
|
|
var part9 = new mxCell('Add space after paragraph', new mxGeometry(0, 0, 318, 32), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=16;resizeWidth=1;');
|
|
part9.geometry.relative = true;
|
|
part9.geometry.offset = new mxPoint(0, 210);
|
|
part9.vertex = true;
|
|
bg2.insert(part9);
|
|
var part10 = new mxCell('', new mxGeometry(0, 0, 318, 10), 'shape=line;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part10.geometry.relative = true;
|
|
part10.geometry.offset = new mxPoint(0, 242);
|
|
part10.vertex = true;
|
|
bg2.insert(part10);
|
|
var part9 = new mxCell('Custom spacing...', new mxGeometry(0, 0, 318, 34), 'text;verticalAlign=middle;fontSize=15;spacing=16;spacingLeft=16;resizeWidth=1;');
|
|
part9.geometry.relative = true;
|
|
part9.geometry.offset = new mxPoint(0, 252);
|
|
part9.vertex = true;
|
|
bg2.insert(part9);
|
|
var bg3 = new mxCell('', new mxGeometry(0, 428, 286, 128), 'shape=rect;strokeColor=#eeeeee;fillColor=#ffffff;shadow=1;');
|
|
bg3.vertex = true;
|
|
var text1 = new mxCell('Line spacing', new mxGeometry(0, 0, 220, 42), 'text;verticalAlign=middle;fontSize=15;spacing=0;spacingLeft=16;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg3.insert(text1);
|
|
var text2 = new mxCell('1.2', new mxGeometry(1, 0, 66, 42), 'text;verticalAlign=middle;fontSize=15;spacing=0;spacingRight=16;align=right;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(-66, 0);
|
|
text2.vertex = true;
|
|
bg3.insert(text2);
|
|
var text3 = new mxCell('Paragraph spacing before', new mxGeometry(0, 0, 220, 42), 'text;verticalAlign=middle;fontSize=15;spacing=0;spacingLeft=16;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 42);
|
|
text3.vertex = true;
|
|
bg3.insert(text3);
|
|
var text4 = new mxCell('1.2', new mxGeometry(1, 0, 66, 42), 'text;verticalAlign=middle;fontSize=15;spacing=0;spacingRight=16;align=right;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(-66, 42);
|
|
text4.vertex = true;
|
|
bg3.insert(text4);
|
|
var text5 = new mxCell('Paragraph spacing after', new mxGeometry(0, 0, 220, 42), 'text;verticalAlign=middle;fontSize=15;spacing=0;spacingLeft=16;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 84);
|
|
text5.vertex = true;
|
|
bg3.insert(text5);
|
|
var text6 = new mxCell('1.5', new mxGeometry(1, 0, 66, 42), 'text;verticalAlign=middle;fontSize=15;spacing=0;spacingRight=16;align=right;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(-66, 84);
|
|
text6.vertex = true;
|
|
bg3.insert(text6);
|
|
return sb.createVertexTemplateFromCells([bg1, bg2, bg3], 604, 590, 'Cascading menu');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlMenus', 'GMDL / Menus', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLMiscPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;shape=";
|
|
var s2 = "dashed=0;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library misc ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.createVertexTemplateEntry('shape=rect;fillColor=#eeeeee;strokeColor=none;',
|
|
358, 642, '', 'Background (Light)', null, null, this.getTagsForStencil(gn, 'background', dt).join(' ')),
|
|
this.createVertexTemplateEntry('shape=rect;fillColor=#333333;strokeColor=none;',
|
|
358, 642, '', 'Background (Dark)', null, null, this.getTagsForStencil(gn, 'background', dt).join(' ')),
|
|
this.addEntry(dt + 'keyboard', function()
|
|
{
|
|
var ts1 = 'text;fontColor=#bbbbbb;fontSize=24;verticalAlign=middle;align=center;';
|
|
var ts2 = 'text;fontColor=#999999;fontSize=10;verticalAlign=middle;align=center;';
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 224), s + 'rect;fillColor=#263238;strokeColor=none;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('q', new mxGeometry(12, 22, 30, 30), ts1);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell('w', new mxGeometry(46, 22, 30, 30), ts1);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('e', new mxGeometry(80, 22, 30, 30), ts1);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('r', new mxGeometry(114, 22, 30, 30), ts1);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('t', new mxGeometry(148, 22, 30, 30), ts1);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('y', new mxGeometry(182, 22, 30, 30), ts1);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var text7 = new mxCell('u', new mxGeometry(216, 22, 30, 30), ts1);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var text8 = new mxCell('i', new mxGeometry(250, 22, 30, 30), ts1);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell('o', new mxGeometry(284, 22, 30, 30), ts1);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
var text10 = new mxCell('p', new mxGeometry(318, 22, 30, 30), ts1);
|
|
text10.vertex = true;
|
|
bg1.insert(text10);
|
|
var text11 = new mxCell('a', new mxGeometry(27, 75, 30, 30), ts1);
|
|
text11.vertex = true;
|
|
bg1.insert(text11);
|
|
var text12 = new mxCell('s', new mxGeometry(61, 75, 30, 30), ts1);
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var text13 = new mxCell('d', new mxGeometry(95, 75, 30, 30), ts1);
|
|
text13.vertex = true;
|
|
bg1.insert(text13);
|
|
var text14 = new mxCell('f', new mxGeometry(129, 75, 30, 30), ts1);
|
|
text14.vertex = true;
|
|
bg1.insert(text14);
|
|
var text15 = new mxCell('g', new mxGeometry(163, 75, 30, 30), ts1);
|
|
text15.vertex = true;
|
|
bg1.insert(text15);
|
|
var text16 = new mxCell('h', new mxGeometry(197, 75, 30, 30), ts1);
|
|
text16.vertex = true;
|
|
bg1.insert(text16);
|
|
var text17 = new mxCell('j', new mxGeometry(231, 75, 30, 30), ts1);
|
|
text17.vertex = true;
|
|
bg1.insert(text17);
|
|
var text18 = new mxCell('k', new mxGeometry(265, 75, 30, 30), ts1);
|
|
text18.vertex = true;
|
|
bg1.insert(text18);
|
|
var text19 = new mxCell('l', new mxGeometry(299, 75, 30, 30), ts1);
|
|
text19.vertex = true;
|
|
bg1.insert(text19);
|
|
var text12 = new mxCell('z', new mxGeometry(61, 126, 30, 30), ts1);
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var text13 = new mxCell('x', new mxGeometry(95, 126, 30, 30), ts1);
|
|
text13.vertex = true;
|
|
bg1.insert(text13);
|
|
var text14 = new mxCell('c', new mxGeometry(129, 126, 30, 30), ts1);
|
|
text14.vertex = true;
|
|
bg1.insert(text14);
|
|
var text15 = new mxCell('v', new mxGeometry(163, 126, 30, 30), ts1);
|
|
text15.vertex = true;
|
|
bg1.insert(text15);
|
|
var text16 = new mxCell('b', new mxGeometry(197, 126, 30, 30), ts1);
|
|
text16.vertex = true;
|
|
bg1.insert(text16);
|
|
var text17 = new mxCell('n', new mxGeometry(231, 126, 30, 30), ts1);
|
|
text17.vertex = true;
|
|
bg1.insert(text17);
|
|
var text18 = new mxCell('m', new mxGeometry(265, 126, 30, 30), ts1);
|
|
text18.vertex = true;
|
|
bg1.insert(text18);
|
|
var text1 = new mxCell('1', new mxGeometry(22, 12, 30, 30), ts2);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell('2', new mxGeometry(56, 12, 30, 30), ts2);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('3', new mxGeometry(90, 12, 30, 30), ts2);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('4', new mxGeometry(124, 12, 30, 30), ts2);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('5', new mxGeometry(158, 12, 30, 30), ts2);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('6', new mxGeometry(192, 12, 30, 30), ts2);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var text7 = new mxCell('7', new mxGeometry(226, 12, 30, 30), ts2);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var text8 = new mxCell('8', new mxGeometry(260, 12, 30, 30), ts2);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell('9', new mxGeometry(294, 12, 30, 30), ts2);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
var text10 = new mxCell('0', new mxGeometry(328, 12, 30, 30), ts2);
|
|
text10.vertex = true;
|
|
bg1.insert(text10);
|
|
var part1 = new mxCell('', new mxGeometry(21, 135, 22, 22), s2 + 'shift;strokeColor=none;fillColor=#A1A7A9;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(310, 132, 26, 18), s2 + 'backspace;strokeColor=none;fillColor=#A1A7A9;');
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var text11 = new mxCell('?123', new mxGeometry(17, 177, 30, 30), 'text;fontColor=#bbbbbb;fontSize=14;verticalAlign=middle;align=center;');
|
|
text11.vertex = true;
|
|
bg1.insert(text11);
|
|
var text12 = new mxCell(',', new mxGeometry(62, 174, 30, 30), ts1);
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var text13 = new mxCell('.', new mxGeometry(265, 170, 30, 30), ts1);
|
|
text13.vertex = true;
|
|
bg1.insert(text13);
|
|
var part3 = new mxCell('', new mxGeometry(308, 167, 36, 36), 'shape=ellipse;strokeColor=none;fillColor=#4CB5AB;');
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(10, 12, 16, 12), s2 + 'check;strokeColor=#ffffff;strokeWidth=2;');
|
|
part4.vertex = true;
|
|
part3.insert(part4);
|
|
var part5 = new mxCell('', new mxGeometry(105, 174, 145, 25), 'shape=rect;strokeColor=none;fillColor=#3C474C;rounded=1;size=3;');
|
|
part5.vertex = true;
|
|
bg1.insert(part5);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 224, 'Keyboard');
|
|
}),
|
|
this.addEntry(dt + 'snackbar', function()
|
|
{
|
|
var bg1 = new mxCell('Archived', new mxGeometry(0, 0, 358, 48), 'shape=rect;strokeColor=none;fillColor=#333333;fontColor=#FFFFFF;align=left;spacing=16;fontSize=13;spacingLeft=8;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('UNDO', new mxGeometry(1, 0, 88, 48), 'text;verticalAlign=middle;align=center;fontColor=#EEFF41;fontSize=14;resizeHeight=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(-88, 0);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 48, 'Snackbar');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlMisc', 'GMDL / Misc', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLPickersPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;shape=";
|
|
var s2 = "dashed=0;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library picker ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'date picker portrait', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 328, 484), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell('Thu, Apr 13', new mxGeometry(0, 0, 328, 96), 'shape=rect;fillColor=#009688;fontColor=#ffffff;strokeColor=none;align=left;spacing=16;fontSize=33;verticalAlign=bottom;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var text1 = new mxCell('2017', new mxGeometry(0, 0, 328, 40), 'text;verticalAlign=middle;fontColor=#FFFFFF;spacingTop=6;spacing=16;fontSize=15;textOpacity=70;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('<', new mxGeometry(0, 0, 48, 40), 'text;verticalAlign=middle;fontColor=#4D4D4D;spacingTop=6;spacing=16;fontSize=20;align=center;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 96);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('April 2017', new mxGeometry(0.1463, 0, 232, 40), 'text;verticalAlign=middle;fontColor=#4D4D4D;spacingTop=6;spacing=16;fontSize=13;align=center;fontStyle=1;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 96);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('>', new mxGeometry(0.8537, 0, 48, 40), 'text;verticalAlign=middle;fontColor=#4D4D4D;spacingTop=6;spacing=16;fontSize=20;align=center;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 96);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('S', new mxGeometry(0, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 146);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('M', new mxGeometry(0.1463, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 146);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var text7 = new mxCell('T', new mxGeometry(0.2896, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 146);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var text8 = new mxCell('W', new mxGeometry(0.4299, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, 146);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell('T', new mxGeometry(0.5701, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(0, 146);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
var text10 = new mxCell('F', new mxGeometry(0.7104, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(0, 146);
|
|
text10.vertex = true;
|
|
bg1.insert(text10);
|
|
var text11 = new mxCell('S', new mxGeometry(0.8506, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text11.geometry.relative = true;
|
|
text11.geometry.offset = new mxPoint(0, 146);
|
|
text11.vertex = true;
|
|
bg1.insert(text11);
|
|
var text12 = new mxCell('1', new mxGeometry(0.8506, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text12.geometry.relative = true;
|
|
text12.geometry.offset = new mxPoint(0, 186);
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var text13 = new mxCell('2', new mxGeometry(0, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text13.geometry.relative = true;
|
|
text13.geometry.offset = new mxPoint(0, 226);
|
|
text13.vertex = true;
|
|
bg1.insert(text13);
|
|
var text14 = new mxCell('3', new mxGeometry(0.1463, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text14.geometry.relative = true;
|
|
text14.geometry.offset = new mxPoint(0, 226);
|
|
text14.vertex = true;
|
|
bg1.insert(text14);
|
|
var text15 = new mxCell('4', new mxGeometry(0.2896, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text15.geometry.relative = true;
|
|
text15.geometry.offset = new mxPoint(0, 226);
|
|
text15.vertex = true;
|
|
bg1.insert(text15);
|
|
var text16 = new mxCell('5', new mxGeometry(0.4299, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text16.geometry.relative = true;
|
|
text16.geometry.offset = new mxPoint(0, 226);
|
|
text16.vertex = true;
|
|
bg1.insert(text16);
|
|
var text17 = new mxCell('6', new mxGeometry(0.5701, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text17.geometry.relative = true;
|
|
text17.geometry.offset = new mxPoint(0, 226);
|
|
text17.vertex = true;
|
|
bg1.insert(text17);
|
|
var text18 = new mxCell('7', new mxGeometry(0.7104, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#009688;fontStyle=1;resizeWidth=1;');
|
|
text18.geometry.relative = true;
|
|
text18.geometry.offset = new mxPoint(0, 226);
|
|
text18.vertex = true;
|
|
bg1.insert(text18);
|
|
var text19 = new mxCell('8', new mxGeometry(0.8506, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text19.geometry.relative = true;
|
|
text19.geometry.offset = new mxPoint(0, 226);
|
|
text19.vertex = true;
|
|
bg1.insert(text19);
|
|
var text20 = new mxCell('9', new mxGeometry(0, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text20.geometry.relative = true;
|
|
text20.geometry.offset = new mxPoint(0, 266);
|
|
text20.vertex = true;
|
|
bg1.insert(text20);
|
|
var text21 = new mxCell('10', new mxGeometry(0.1463, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text21.geometry.relative = true;
|
|
text21.geometry.offset = new mxPoint(0, 266);
|
|
text21.vertex = true;
|
|
bg1.insert(text21);
|
|
var text22 = new mxCell('11', new mxGeometry(0.2896, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text22.geometry.relative = true;
|
|
text22.geometry.offset = new mxPoint(0, 266);
|
|
text22.vertex = true;
|
|
bg1.insert(text22);
|
|
var text23 = new mxCell('12', new mxGeometry(0.4299, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text23.geometry.relative = true;
|
|
text23.geometry.offset = new mxPoint(0, 266);
|
|
text23.vertex = true;
|
|
bg1.insert(text23);
|
|
var text24 = new mxCell('13', new mxGeometry(0.6402, 0, 40, 40), 'shape=ellipse;fillColor=#009688;strokeColor=none;verticalAlign=middle;align=center;fontColor=#ffffff;fontStyle=1;');
|
|
text24.geometry.relative = true;
|
|
text24.geometry.offset = new mxPoint(-20, 266);
|
|
text24.vertex = true;
|
|
bg1.insert(text24);
|
|
var text25 = new mxCell('14', new mxGeometry(0.7104, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text25.geometry.relative = true;
|
|
text25.geometry.offset = new mxPoint(0, 266);
|
|
text25.vertex = true;
|
|
bg1.insert(text25);
|
|
var text26 = new mxCell('15', new mxGeometry(0.8506, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text26.geometry.relative = true;
|
|
text26.geometry.offset = new mxPoint(0, 266);
|
|
text26.vertex = true;
|
|
bg1.insert(text26);
|
|
var text27 = new mxCell('16', new mxGeometry(0, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text27.geometry.relative = true;
|
|
text27.geometry.offset = new mxPoint(0, 306);
|
|
text27.vertex = true;
|
|
bg1.insert(text27);
|
|
var text28 = new mxCell('17', new mxGeometry(0.1463, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text28.geometry.relative = true;
|
|
text28.geometry.offset = new mxPoint(0, 306);
|
|
text28.vertex = true;
|
|
bg1.insert(text28);
|
|
var text29 = new mxCell('18', new mxGeometry(0.2896, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text29.geometry.relative = true;
|
|
text29.geometry.offset = new mxPoint(0, 306);
|
|
text29.vertex = true;
|
|
bg1.insert(text29);
|
|
var text30 = new mxCell('19', new mxGeometry(0.4299, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text30.geometry.relative = true;
|
|
text30.geometry.offset = new mxPoint(0, 306);
|
|
text30.vertex = true;
|
|
bg1.insert(text30);
|
|
var text31 = new mxCell('20', new mxGeometry(0.5701, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text31.geometry.relative = true;
|
|
text31.geometry.offset = new mxPoint(0, 306);
|
|
text31.vertex = true;
|
|
bg1.insert(text31);
|
|
var text32 = new mxCell('21', new mxGeometry(0.7104, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text32.geometry.relative = true;
|
|
text32.geometry.offset = new mxPoint(0, 306);
|
|
text32.vertex = true;
|
|
bg1.insert(text32);
|
|
var text33 = new mxCell('22', new mxGeometry(0.8506, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text33.geometry.relative = true;
|
|
text33.geometry.offset = new mxPoint(0, 306);
|
|
text33.vertex = true;
|
|
bg1.insert(text33);
|
|
var text34 = new mxCell('23', new mxGeometry(0, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text34.geometry.relative = true;
|
|
text34.geometry.offset = new mxPoint(0, 346);
|
|
text34.vertex = true;
|
|
bg1.insert(text34);
|
|
var text35 = new mxCell('24', new mxGeometry(0.1463, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text35.geometry.relative = true;
|
|
text35.geometry.offset = new mxPoint(0, 346);
|
|
text35.vertex = true;
|
|
bg1.insert(text35);
|
|
var text36 = new mxCell('25', new mxGeometry(0.2896, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text36.geometry.relative = true;
|
|
text36.geometry.offset = new mxPoint(0, 346);
|
|
text36.vertex = true;
|
|
bg1.insert(text36);
|
|
var text37 = new mxCell('26', new mxGeometry(0.4299, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text37.geometry.relative = true;
|
|
text37.geometry.offset = new mxPoint(0, 346);
|
|
text37.vertex = true;
|
|
bg1.insert(text37);
|
|
var text38 = new mxCell('27', new mxGeometry(0.5701, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text38.geometry.relative = true;
|
|
text38.geometry.offset = new mxPoint(0, 346);
|
|
text38.vertex = true;
|
|
bg1.insert(text38);
|
|
var text39 = new mxCell('28', new mxGeometry(0.7104, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text39.geometry.relative = true;
|
|
text39.geometry.offset = new mxPoint(0, 346);
|
|
text39.vertex = true;
|
|
bg1.insert(text39);
|
|
var text40 = new mxCell('29', new mxGeometry(0.8506, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text40.geometry.relative = true;
|
|
text40.geometry.offset = new mxPoint(0, 346);
|
|
text40.vertex = true;
|
|
bg1.insert(text40);
|
|
var text41 = new mxCell('30', new mxGeometry(0, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text41.geometry.relative = true;
|
|
text41.geometry.offset = new mxPoint(0, 386);
|
|
text41.vertex = true;
|
|
bg1.insert(text41);
|
|
var text1 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 50), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(-160, -50);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell("OK", new mxGeometry(1, 1, 90, 50), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text2.vertex = true;
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(-90, -50);
|
|
bg1.insert(text2);
|
|
return sb.createVertexTemplateFromCells([bg1], 328, 484, 'Date picker (portrait)');
|
|
}),
|
|
this.addEntry(dt + 'date picker portrait dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 328, 484), 'shape=rect;fillColor=#424242;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell('Thu, Apr 13', new mxGeometry(0, 0, 328, 96), 'shape=rect;fillColor=#555555;fontColor=#ffffff;strokeColor=none;align=left;spacing=16;fontSize=33;verticalAlign=bottom;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var text1 = new mxCell('2017', new mxGeometry(0, 0, 328, 40), 'text;verticalAlign=middle;fontColor=#FFFFFF;spacingTop=6;spacing=16;fontSize=15;textOpacity=70;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('<', new mxGeometry(0, 0, 48, 40), 'text;verticalAlign=middle;fontColor=#ffffff;spacingTop=6;spacing=16;fontSize=20;align=center;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 96);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('April 2017', new mxGeometry(0.1463, 0, 232, 40), 'text;verticalAlign=middle;fontColor=#ffffff;spacingTop=6;spacing=16;fontSize=13;align=center;fontStyle=1;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 96);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('>', new mxGeometry(0.8537, 0, 48, 40), 'text;verticalAlign=middle;fontColor=#ffffff;spacingTop=6;spacing=16;fontSize=20;align=center;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 96);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('S', new mxGeometry(0, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 146);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('M', new mxGeometry(0.1463, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 146);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var text7 = new mxCell('T', new mxGeometry(0.2896, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 146);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var text8 = new mxCell('W', new mxGeometry(0.4299, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, 146);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell('T', new mxGeometry(0.5701, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(0, 146);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
var text10 = new mxCell('F', new mxGeometry(0.7104, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(0, 146);
|
|
text10.vertex = true;
|
|
bg1.insert(text10);
|
|
var text11 = new mxCell('S', new mxGeometry(0.8506, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text11.geometry.relative = true;
|
|
text11.geometry.offset = new mxPoint(0, 146);
|
|
text11.vertex = true;
|
|
bg1.insert(text11);
|
|
var text12 = new mxCell('1', new mxGeometry(0.8506, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text12.geometry.relative = true;
|
|
text12.geometry.offset = new mxPoint(0, 186);
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var text13 = new mxCell('2', new mxGeometry(0, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text13.geometry.relative = true;
|
|
text13.geometry.offset = new mxPoint(0, 226);
|
|
text13.vertex = true;
|
|
bg1.insert(text13);
|
|
var text14 = new mxCell('3', new mxGeometry(0.1463, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text14.geometry.relative = true;
|
|
text14.geometry.offset = new mxPoint(0, 226);
|
|
text14.vertex = true;
|
|
bg1.insert(text14);
|
|
var text15 = new mxCell('4', new mxGeometry(0.2896, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text15.geometry.relative = true;
|
|
text15.geometry.offset = new mxPoint(0, 226);
|
|
text15.vertex = true;
|
|
bg1.insert(text15);
|
|
var text16 = new mxCell('5', new mxGeometry(0.4299, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text16.geometry.relative = true;
|
|
text16.geometry.offset = new mxPoint(0, 226);
|
|
text16.vertex = true;
|
|
bg1.insert(text16);
|
|
var text17 = new mxCell('6', new mxGeometry(0.5701, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text17.geometry.relative = true;
|
|
text17.geometry.offset = new mxPoint(0, 226);
|
|
text17.vertex = true;
|
|
bg1.insert(text17);
|
|
var text18 = new mxCell('7', new mxGeometry(0.7104, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#80CBC4;resizeWidth=1;');
|
|
text18.geometry.relative = true;
|
|
text18.geometry.offset = new mxPoint(0, 226);
|
|
text18.vertex = true;
|
|
bg1.insert(text18);
|
|
var text19 = new mxCell('8', new mxGeometry(0.8506, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text19.geometry.relative = true;
|
|
text19.geometry.offset = new mxPoint(0, 226);
|
|
text19.vertex = true;
|
|
bg1.insert(text19);
|
|
var text20 = new mxCell('9', new mxGeometry(0, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text20.geometry.relative = true;
|
|
text20.geometry.offset = new mxPoint(0, 266);
|
|
text20.vertex = true;
|
|
bg1.insert(text20);
|
|
var text21 = new mxCell('10', new mxGeometry(0.1463, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text21.geometry.relative = true;
|
|
text21.geometry.offset = new mxPoint(0, 266);
|
|
text21.vertex = true;
|
|
bg1.insert(text21);
|
|
var text22 = new mxCell('11', new mxGeometry(0.2896, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text22.geometry.relative = true;
|
|
text22.geometry.offset = new mxPoint(0, 266);
|
|
text22.vertex = true;
|
|
bg1.insert(text22);
|
|
var text23 = new mxCell('12', new mxGeometry(0.4299, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text23.geometry.relative = true;
|
|
text23.geometry.offset = new mxPoint(0, 266);
|
|
text23.vertex = true;
|
|
bg1.insert(text23);
|
|
var text24 = new mxCell('13', new mxGeometry(0.6402, 0, 40, 40), 'shape=ellipse;fillColor=#80CBC4;strokeColor=none;verticalAlign=middle;align=center;fontColor=#424242;fontStyle=1;');
|
|
text24.geometry.relative = true;
|
|
text24.geometry.offset = new mxPoint(-20, 266);
|
|
text24.vertex = true;
|
|
bg1.insert(text24);
|
|
var text25 = new mxCell('14', new mxGeometry(0.7104, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text25.geometry.relative = true;
|
|
text25.geometry.offset = new mxPoint(0, 266);
|
|
text25.vertex = true;
|
|
bg1.insert(text25);
|
|
var text26 = new mxCell('15', new mxGeometry(0.8506, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text26.geometry.relative = true;
|
|
text26.geometry.offset = new mxPoint(0, 266);
|
|
text26.vertex = true;
|
|
bg1.insert(text26);
|
|
var text27 = new mxCell('16', new mxGeometry(0, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text27.geometry.relative = true;
|
|
text27.geometry.offset = new mxPoint(0, 306);
|
|
text27.vertex = true;
|
|
bg1.insert(text27);
|
|
var text28 = new mxCell('17', new mxGeometry(0.1463, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text28.geometry.relative = true;
|
|
text28.geometry.offset = new mxPoint(0, 306);
|
|
text28.vertex = true;
|
|
bg1.insert(text28);
|
|
var text29 = new mxCell('18', new mxGeometry(0.2896, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text29.geometry.relative = true;
|
|
text29.geometry.offset = new mxPoint(0, 306);
|
|
text29.vertex = true;
|
|
bg1.insert(text29);
|
|
var text30 = new mxCell('19', new mxGeometry(0.4299, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text30.geometry.relative = true;
|
|
text30.geometry.offset = new mxPoint(0, 306);
|
|
text30.vertex = true;
|
|
bg1.insert(text30);
|
|
var text31 = new mxCell('20', new mxGeometry(0.5701, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text31.geometry.relative = true;
|
|
text31.geometry.offset = new mxPoint(0, 306);
|
|
text31.vertex = true;
|
|
bg1.insert(text31);
|
|
var text32 = new mxCell('21', new mxGeometry(0.7104, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text32.geometry.relative = true;
|
|
text32.geometry.offset = new mxPoint(0, 306);
|
|
text32.vertex = true;
|
|
bg1.insert(text32);
|
|
var text33 = new mxCell('22', new mxGeometry(0.8506, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text33.geometry.relative = true;
|
|
text33.geometry.offset = new mxPoint(0, 306);
|
|
text33.vertex = true;
|
|
bg1.insert(text33);
|
|
var text34 = new mxCell('23', new mxGeometry(0, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text34.geometry.relative = true;
|
|
text34.geometry.offset = new mxPoint(0, 346);
|
|
text34.vertex = true;
|
|
bg1.insert(text34);
|
|
var text35 = new mxCell('24', new mxGeometry(0.1463, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text35.geometry.relative = true;
|
|
text35.geometry.offset = new mxPoint(0, 346);
|
|
text35.vertex = true;
|
|
bg1.insert(text35);
|
|
var text36 = new mxCell('25', new mxGeometry(0.2896, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text36.geometry.relative = true;
|
|
text36.geometry.offset = new mxPoint(0, 346);
|
|
text36.vertex = true;
|
|
bg1.insert(text36);
|
|
var text37 = new mxCell('26', new mxGeometry(0.4299, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text37.geometry.relative = true;
|
|
text37.geometry.offset = new mxPoint(0, 346);
|
|
text37.vertex = true;
|
|
bg1.insert(text37);
|
|
var text38 = new mxCell('27', new mxGeometry(0.5701, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text38.geometry.relative = true;
|
|
text38.geometry.offset = new mxPoint(0, 346);
|
|
text38.vertex = true;
|
|
bg1.insert(text38);
|
|
var text39 = new mxCell('28', new mxGeometry(0.7104, 0, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text39.geometry.relative = true;
|
|
text39.geometry.offset = new mxPoint(0, 346);
|
|
text39.vertex = true;
|
|
bg1.insert(text39);
|
|
var text40 = new mxCell('29', new mxGeometry(0.8506, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text40.geometry.relative = true;
|
|
text40.geometry.offset = new mxPoint(0, 346);
|
|
text40.vertex = true;
|
|
bg1.insert(text40);
|
|
var text41 = new mxCell('30', new mxGeometry(0, 0, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text41.geometry.relative = true;
|
|
text41.geometry.offset = new mxPoint(0, 386);
|
|
text41.vertex = true;
|
|
bg1.insert(text41);
|
|
var text1 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 50), 'text;fontSize=13;fontColor=#80CBC4;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(-160, -50);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell("OK", new mxGeometry(1, 1, 90, 50), 'text;fontSize=13;fontColor=#80CBC4;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text2.vertex = true;
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(-90, -50);
|
|
bg1.insert(text2);
|
|
return sb.createVertexTemplateFromCells([bg1], 328, 484, 'Date picker (portrait, dark)');
|
|
}),
|
|
this.addEntry(dt + 'date picker landscape', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 512, 304), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell('Thu,\nApr 13', new mxGeometry(0, 0, 168, 304), 'shape=rect;fillColor=#009688;fontColor=#ffffff;strokeColor=none;align=left;spacing=16;fontSize=33;verticalAlign=top;spacingTop=14;');
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var text1 = new mxCell('2017', new mxGeometry(0, 0, 168, 40), 'text;verticalAlign=middle;fontColor=#FFFFFF;spacingTop=6;spacing=16;fontSize=15;textOpacity=70;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('<', new mxGeometry(0.3262, 0, 50, 40), 'text;verticalAlign=middle;fontColor=#4D4D4D;spacingTop=6;spacing=16;fontSize=20;align=center;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('April 2017', new mxGeometry(0.4297, 0, 242, 40), 'text;verticalAlign=middle;fontColor=#4D4D4D;spacingTop=6;spacing=16;fontSize=13;align=center;fontStyle=1;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('>', new mxGeometry(0.9023, 0, 50, 40), 'text;verticalAlign=middle;fontColor=#4D4D4D;spacingTop=6;spacing=16;fontSize=20;align=center;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('S', new mxGeometry(0.3262, 0, 52, 32), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 36);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('M', new mxGeometry(0.4297, 0, 48, 32), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 36);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var text7 = new mxCell('T', new mxGeometry(0.5234, 0, 48, 32), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 36);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var text8 = new mxCell('W', new mxGeometry(0.6172, 0, 48, 32), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, 36);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell('T', new mxGeometry(0.7109, 0, 48, 32), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(0, 36);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
var text10 = new mxCell('F', new mxGeometry(0.8047, 0, 48, 32), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(0, 36);
|
|
text10.vertex = true;
|
|
bg1.insert(text10);
|
|
var text11 = new mxCell('S', new mxGeometry(0.8984, 0, 52, 32), 'text;verticalAlign=middle;align=center;fontColor=#808080;resizeWidth=1;');
|
|
text11.geometry.relative = true;
|
|
text11.geometry.offset = new mxPoint(0, 36);
|
|
text11.vertex = true;
|
|
bg1.insert(text11);
|
|
var text12 = new mxCell('1', new mxGeometry(0.8984, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text12.geometry.relative = true;
|
|
text12.geometry.offset = new mxPoint(0, 68);
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var text13 = new mxCell('2', new mxGeometry(0.3262, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text13.geometry.relative = true;
|
|
text13.geometry.offset = new mxPoint(0, 100);
|
|
text13.vertex = true;
|
|
bg1.insert(text13);
|
|
var text14 = new mxCell('3', new mxGeometry(0.4297, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text14.geometry.relative = true;
|
|
text14.geometry.offset = new mxPoint(0, 100);
|
|
text14.vertex = true;
|
|
bg1.insert(text14);
|
|
var text15 = new mxCell('4', new mxGeometry(0.5234, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text15.geometry.relative = true;
|
|
text15.geometry.offset = new mxPoint(0, 100);
|
|
text15.vertex = true;
|
|
bg1.insert(text15);
|
|
var text16 = new mxCell('5', new mxGeometry(0.6172, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text16.geometry.relative = true;
|
|
text16.geometry.offset = new mxPoint(0, 100);
|
|
text16.vertex = true;
|
|
bg1.insert(text16);
|
|
var text17 = new mxCell('6', new mxGeometry(0.7109, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text17.geometry.relative = true;
|
|
text17.geometry.offset = new mxPoint(0, 100);
|
|
text17.vertex = true;
|
|
bg1.insert(text17);
|
|
var text18 = new mxCell('7', new mxGeometry(0.8047, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#009688;fontStyle=1;resizeWidth=1;');
|
|
text18.geometry.relative = true;
|
|
text18.geometry.offset = new mxPoint(0, 100);
|
|
text18.vertex = true;
|
|
bg1.insert(text18);
|
|
var text19 = new mxCell('8', new mxGeometry(0.8984, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text19.geometry.relative = true;
|
|
text19.geometry.offset = new mxPoint(0, 100);
|
|
text19.vertex = true;
|
|
bg1.insert(text19);
|
|
var text20 = new mxCell('9', new mxGeometry(0.3262, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text20.geometry.relative = true;
|
|
text20.geometry.offset = new mxPoint(0, 132);
|
|
text20.vertex = true;
|
|
bg1.insert(text20);
|
|
var text21 = new mxCell('10', new mxGeometry(0.4297, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text21.geometry.relative = true;
|
|
text21.geometry.offset = new mxPoint(0, 132);
|
|
text21.vertex = true;
|
|
bg1.insert(text21);
|
|
var text22 = new mxCell('11', new mxGeometry(0.5234, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text22.geometry.relative = true;
|
|
text22.geometry.offset = new mxPoint(0, 132);
|
|
text22.vertex = true;
|
|
bg1.insert(text22);
|
|
var text23 = new mxCell('12', new mxGeometry(0.6172, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text23.geometry.relative = true;
|
|
text23.geometry.offset = new mxPoint(0, 132);
|
|
text23.vertex = true;
|
|
bg1.insert(text23);
|
|
var text24 = new mxCell('13', new mxGeometry(0.755, 0, 32, 32), 'shape=ellipse;fillColor=#009688;strokeColor=none;verticalAlign=middle;align=center;fontColor=#ffffff;fontStyle=1;');
|
|
text24.geometry.relative = true;
|
|
text24.geometry.offset = new mxPoint(-16, 132);
|
|
text24.vertex = true;
|
|
bg1.insert(text24);
|
|
var text25 = new mxCell('14', new mxGeometry(0.8047, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text25.geometry.relative = true;
|
|
text25.geometry.offset = new mxPoint(0, 132);
|
|
text25.vertex = true;
|
|
bg1.insert(text25);
|
|
var text26 = new mxCell('15', new mxGeometry(0.8984, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text26.geometry.relative = true;
|
|
text26.geometry.offset = new mxPoint(0, 132);
|
|
text26.vertex = true;
|
|
bg1.insert(text26);
|
|
var text27 = new mxCell('16', new mxGeometry(0.3262, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text27.geometry.relative = true;
|
|
text27.geometry.offset = new mxPoint(0, 164);
|
|
text27.vertex = true;
|
|
bg1.insert(text27);
|
|
var text28 = new mxCell('17', new mxGeometry(0.4297, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text28.geometry.relative = true;
|
|
text28.geometry.offset = new mxPoint(0, 164);
|
|
text28.vertex = true;
|
|
bg1.insert(text28);
|
|
var text29 = new mxCell('18', new mxGeometry(0.5234, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text29.geometry.relative = true;
|
|
text29.geometry.offset = new mxPoint(0, 164);
|
|
text29.vertex = true;
|
|
bg1.insert(text29);
|
|
var text30 = new mxCell('19', new mxGeometry(0.6172, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text30.geometry.relative = true;
|
|
text30.geometry.offset = new mxPoint(0, 164);
|
|
text30.vertex = true;
|
|
bg1.insert(text30);
|
|
var text31 = new mxCell('20', new mxGeometry(0.7109, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text31.geometry.relative = true;
|
|
text31.geometry.offset = new mxPoint(0, 164);
|
|
text31.vertex = true;
|
|
bg1.insert(text31);
|
|
var text32 = new mxCell('21', new mxGeometry(0.8047, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text32.geometry.relative = true;
|
|
text32.geometry.offset = new mxPoint(0, 164);
|
|
text32.vertex = true;
|
|
bg1.insert(text32);
|
|
var text33 = new mxCell('22', new mxGeometry(0.8984, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text33.geometry.relative = true;
|
|
text33.geometry.offset = new mxPoint(0, 164);
|
|
text33.vertex = true;
|
|
bg1.insert(text33);
|
|
var text34 = new mxCell('23', new mxGeometry(0.3262, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text34.geometry.relative = true;
|
|
text34.geometry.offset = new mxPoint(0, 196);
|
|
text34.vertex = true;
|
|
bg1.insert(text34);
|
|
var text35 = new mxCell('24', new mxGeometry(0.4297, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text35.geometry.relative = true;
|
|
text35.geometry.offset = new mxPoint(0, 196);
|
|
text35.vertex = true;
|
|
bg1.insert(text35);
|
|
var text36 = new mxCell('25', new mxGeometry(0.5234, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text36.geometry.relative = true;
|
|
text36.geometry.offset = new mxPoint(0, 196);
|
|
text36.vertex = true;
|
|
bg1.insert(text36);
|
|
var text37 = new mxCell('26', new mxGeometry(0.6172, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text37.geometry.relative = true;
|
|
text37.geometry.offset = new mxPoint(0, 196);
|
|
text37.vertex = true;
|
|
bg1.insert(text37);
|
|
var text38 = new mxCell('27', new mxGeometry(0.7109, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text38.geometry.relative = true;
|
|
text38.geometry.offset = new mxPoint(0, 196);
|
|
text38.vertex = true;
|
|
bg1.insert(text38);
|
|
var text39 = new mxCell('28', new mxGeometry(0.8047, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text39.geometry.relative = true;
|
|
text39.geometry.offset = new mxPoint(0, 196);
|
|
text39.vertex = true;
|
|
bg1.insert(text39);
|
|
var text40 = new mxCell('29', new mxGeometry(0.8984, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text40.geometry.relative = true;
|
|
text40.geometry.offset = new mxPoint(0, 196);
|
|
text40.vertex = true;
|
|
bg1.insert(text40);
|
|
var text41 = new mxCell('30', new mxGeometry(0.3262, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontStyle=1;resizeWidth=1;');
|
|
text41.geometry.relative = true;
|
|
text41.geometry.offset = new mxPoint(0, 228);
|
|
text41.vertex = true;
|
|
bg1.insert(text41);
|
|
var text1 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 50), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(-160, -50);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell("OK", new mxGeometry(1, 1, 90, 50), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(-90, -50);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
return sb.createVertexTemplateFromCells([bg1], 512, 304, 'Date picker (landscape)');
|
|
}),
|
|
this.addEntry(dt + 'date picker landscape dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 512, 304), 'shape=rect;fillColor=#424242;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell('Thu,\nApr 13', new mxGeometry(0, 0, 168, 304), 'shape=rect;fillColor=#555555;fontColor=#ffffff;strokeColor=none;align=left;spacing=16;fontSize=33;verticalAlign=top;spacingTop=14;');
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var text1 = new mxCell('2017', new mxGeometry(0, 0, 168, 40), 'text;verticalAlign=middle;fontColor=#FFFFFF;spacingTop=6;spacing=16;fontSize=15;textOpacity=70;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('<', new mxGeometry(0.3262, 0, 50, 40), 'text;verticalAlign=middle;fontColor=#ffffff;spacingTop=6;spacing=16;fontSize=20;align=center;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('April 2017', new mxGeometry(0.4297, 0, 242, 40), 'text;verticalAlign=middle;fontColor=#ffffff;spacingTop=6;spacing=16;fontSize=13;align=center;fontStyle=1;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('>', new mxGeometry(0.9023, 0, 50, 40), 'text;verticalAlign=middle;fontColor=#ffffff;spacingTop=6;spacing=16;fontSize=20;align=center;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('S', new mxGeometry(0.3262, 0, 52, 32), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 36);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('M', new mxGeometry(0.4297, 0, 48, 32), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 36);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var text7 = new mxCell('T', new mxGeometry(0.5234, 0, 48, 32), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 36);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var text8 = new mxCell('W', new mxGeometry(0.6172, 0, 48, 32), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, 36);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell('T', new mxGeometry(0.7109, 0, 48, 32), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(0, 36);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
var text10 = new mxCell('F', new mxGeometry(0.8047, 0, 48, 32), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(0, 36);
|
|
text10.vertex = true;
|
|
bg1.insert(text10);
|
|
var text11 = new mxCell('S', new mxGeometry(0.8984, 0, 52, 32), 'text;verticalAlign=middle;align=center;fontColor=#cccccc;resizeWidth=1;');
|
|
text11.geometry.relative = true;
|
|
text11.geometry.offset = new mxPoint(0, 36);
|
|
text11.vertex = true;
|
|
bg1.insert(text11);
|
|
var text12 = new mxCell('1', new mxGeometry(0.8984, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text12.geometry.relative = true;
|
|
text12.geometry.offset = new mxPoint(0, 68);
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var text13 = new mxCell('2', new mxGeometry(0.3262, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text13.geometry.relative = true;
|
|
text13.geometry.offset = new mxPoint(0, 100);
|
|
text13.vertex = true;
|
|
bg1.insert(text13);
|
|
var text14 = new mxCell('3', new mxGeometry(0.4297, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text14.geometry.relative = true;
|
|
text14.geometry.offset = new mxPoint(0, 100);
|
|
text14.vertex = true;
|
|
bg1.insert(text14);
|
|
var text15 = new mxCell('4', new mxGeometry(0.5234, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text15.geometry.relative = true;
|
|
text15.geometry.offset = new mxPoint(0, 100);
|
|
text15.vertex = true;
|
|
bg1.insert(text15);
|
|
var text16 = new mxCell('5', new mxGeometry(0.6172, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text16.geometry.relative = true;
|
|
text16.geometry.offset = new mxPoint(0, 100);
|
|
text16.vertex = true;
|
|
bg1.insert(text16);
|
|
var text17 = new mxCell('6', new mxGeometry(0.7109, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text17.geometry.relative = true;
|
|
text17.geometry.offset = new mxPoint(0, 100);
|
|
text17.vertex = true;
|
|
bg1.insert(text17);
|
|
var text18 = new mxCell('7', new mxGeometry(0.8047, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#80CBC4;resizeWidth=1;');
|
|
text18.geometry.relative = true;
|
|
text18.geometry.offset = new mxPoint(0, 100);
|
|
text18.vertex = true;
|
|
bg1.insert(text18);
|
|
var text19 = new mxCell('8', new mxGeometry(0.8984, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text19.geometry.relative = true;
|
|
text19.geometry.offset = new mxPoint(0, 100);
|
|
text19.vertex = true;
|
|
bg1.insert(text19);
|
|
var text20 = new mxCell('9', new mxGeometry(0.3262, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text20.geometry.relative = true;
|
|
text20.geometry.offset = new mxPoint(0, 132);
|
|
text20.vertex = true;
|
|
bg1.insert(text20);
|
|
var text21 = new mxCell('10', new mxGeometry(0.4297, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text21.geometry.relative = true;
|
|
text21.geometry.offset = new mxPoint(0, 132);
|
|
text21.vertex = true;
|
|
bg1.insert(text21);
|
|
var text22 = new mxCell('11', new mxGeometry(0.5234, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text22.geometry.relative = true;
|
|
text22.geometry.offset = new mxPoint(0, 132);
|
|
text22.vertex = true;
|
|
bg1.insert(text22);
|
|
var text23 = new mxCell('12', new mxGeometry(0.6172, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text23.geometry.relative = true;
|
|
text23.geometry.offset = new mxPoint(0, 132);
|
|
text23.vertex = true;
|
|
bg1.insert(text23);
|
|
var text24 = new mxCell('13', new mxGeometry(0.755, 0, 32, 32), 'shape=ellipse;fillColor=#80CBC4;strokeColor=none;verticalAlign=middle;align=center;fontColor=#424242;fontStyle=1;');
|
|
text24.geometry.relative = true;
|
|
text24.geometry.offset = new mxPoint(-16, 132);
|
|
text24.vertex = true;
|
|
bg1.insert(text24);
|
|
var text25 = new mxCell('14', new mxGeometry(0.8047, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text25.geometry.relative = true;
|
|
text25.geometry.offset = new mxPoint(0, 132);
|
|
text25.vertex = true;
|
|
bg1.insert(text25);
|
|
var text26 = new mxCell('15', new mxGeometry(0.8984, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text26.geometry.relative = true;
|
|
text26.geometry.offset = new mxPoint(0, 132);
|
|
text26.vertex = true;
|
|
bg1.insert(text26);
|
|
var text27 = new mxCell('16', new mxGeometry(0.3262, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text27.geometry.relative = true;
|
|
text27.geometry.offset = new mxPoint(0, 164);
|
|
text27.vertex = true;
|
|
bg1.insert(text27);
|
|
var text28 = new mxCell('17', new mxGeometry(0.4297, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text28.geometry.relative = true;
|
|
text28.geometry.offset = new mxPoint(0, 164);
|
|
text28.vertex = true;
|
|
bg1.insert(text28);
|
|
var text29 = new mxCell('18', new mxGeometry(0.5234, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text29.geometry.relative = true;
|
|
text29.geometry.offset = new mxPoint(0, 164);
|
|
text29.vertex = true;
|
|
bg1.insert(text29);
|
|
var text30 = new mxCell('19', new mxGeometry(0.6172, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text30.geometry.relative = true;
|
|
text30.geometry.offset = new mxPoint(0, 164);
|
|
text30.vertex = true;
|
|
bg1.insert(text30);
|
|
var text31 = new mxCell('20', new mxGeometry(0.7109, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text31.geometry.relative = true;
|
|
text31.geometry.offset = new mxPoint(0, 164);
|
|
text31.vertex = true;
|
|
bg1.insert(text31);
|
|
var text32 = new mxCell('21', new mxGeometry(0.8047, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text32.geometry.relative = true;
|
|
text32.geometry.offset = new mxPoint(0, 164);
|
|
text32.vertex = true;
|
|
bg1.insert(text32);
|
|
var text33 = new mxCell('22', new mxGeometry(0.8984, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text33.geometry.relative = true;
|
|
text33.geometry.offset = new mxPoint(0, 164);
|
|
text33.vertex = true;
|
|
bg1.insert(text33);
|
|
var text34 = new mxCell('23', new mxGeometry(0.3262, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text34.geometry.relative = true;
|
|
text34.geometry.offset = new mxPoint(0, 196);
|
|
text34.vertex = true;
|
|
bg1.insert(text34);
|
|
var text35 = new mxCell('24', new mxGeometry(0.4297, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text35.geometry.relative = true;
|
|
text35.geometry.offset = new mxPoint(0, 196);
|
|
text35.vertex = true;
|
|
bg1.insert(text35);
|
|
var text36 = new mxCell('25', new mxGeometry(0.5234, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text36.geometry.relative = true;
|
|
text36.geometry.offset = new mxPoint(0, 196);
|
|
text36.vertex = true;
|
|
bg1.insert(text36);
|
|
var text37 = new mxCell('26', new mxGeometry(0.6172, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text37.geometry.relative = true;
|
|
text37.geometry.offset = new mxPoint(0, 196);
|
|
text37.vertex = true;
|
|
bg1.insert(text37);
|
|
var text38 = new mxCell('27', new mxGeometry(0.7109, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text38.geometry.relative = true;
|
|
text38.geometry.offset = new mxPoint(0, 196);
|
|
text38.vertex = true;
|
|
bg1.insert(text38);
|
|
var text39 = new mxCell('28', new mxGeometry(0.8047, 0, 46, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text39.geometry.relative = true;
|
|
text39.geometry.offset = new mxPoint(0, 196);
|
|
text39.vertex = true;
|
|
bg1.insert(text39);
|
|
var text40 = new mxCell('29', new mxGeometry(0.8984, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text40.geometry.relative = true;
|
|
text40.geometry.offset = new mxPoint(0, 196);
|
|
text40.vertex = true;
|
|
bg1.insert(text40);
|
|
var text41 = new mxCell('30', new mxGeometry(0.3262, 0, 49, 32), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;resizeWidth=1;');
|
|
text41.geometry.relative = true;
|
|
text41.geometry.offset = new mxPoint(0, 228);
|
|
text41.vertex = true;
|
|
bg1.insert(text41);
|
|
var text1 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 50), 'text;fontSize=13;fontColor=#80CBC4;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(-160, -50);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell("OK", new mxGeometry(1, 1, 90, 50), 'text;fontSize=13;fontColor=#80CBC4;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(-90, -50);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
return sb.createVertexTemplateFromCells([bg1], 512, 304, 'Date picker (landscape, dark)');
|
|
}),
|
|
this.addEntry(dt + 'time picker', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 328, 484), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell('3:30', new mxGeometry(0, 0, 328, 96), 'shape=rect;fillColor=#009688;fontColor=#ffffff;strokeColor=none;align=center;spacing=0;fontSize=58;verticalAlign=middle;spacingBottom=10;spacingLeft=34;');
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var text1 = new mxCell('AM', new mxGeometry(248, 18, 40, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=17;fontStyle=0;textOpacity=70;');
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('PM', new mxGeometry(248, 42, 40, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=17;');
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var part1 = new mxCell('', new mxGeometry(16, 130, 296, 296), 'shape=ellipse;fillColor=#eeeeee;strokeColor=none;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text12 = new mxCell('1', new mxGeometry(200, 147, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var text13 = new mxCell('2', new mxGeometry(246, 190, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text13.vertex = true;
|
|
bg1.insert(text13);
|
|
var text14 = new mxCell('3', new mxGeometry(145, 128, 145, 40), s2 + 'time_picker;fillColor=#009688;strokeColor=#009688;verticalAlign=middle;align=right;fontColor=#ffffff;strokeWidth=2;spacingRight=13;fontSize=15;');
|
|
text14.vertex = true;
|
|
part1.insert(text14);
|
|
var text15 = new mxCell('4', new mxGeometry(246, 319, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text15.vertex = true;
|
|
bg1.insert(text15);
|
|
var text16 = new mxCell('5', new mxGeometry(200, 366, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text16.vertex = true;
|
|
bg1.insert(text16);
|
|
var text17 = new mxCell('6', new mxGeometry(140, 383, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text17.vertex = true;
|
|
bg1.insert(text17);
|
|
var text18 = new mxCell('7', new mxGeometry(78, 366, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text18.vertex = true;
|
|
bg1.insert(text18);
|
|
var text19 = new mxCell('8', new mxGeometry(33, 319, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text19.vertex = true;
|
|
bg1.insert(text19);
|
|
var text20 = new mxCell('9', new mxGeometry(15, 258, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text20.vertex = true;
|
|
bg1.insert(text20);
|
|
var text21 = new mxCell('10', new mxGeometry(33, 190, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text21.vertex = true;
|
|
bg1.insert(text21);
|
|
var text22 = new mxCell('11', new mxGeometry(78, 147, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text22.vertex = true;
|
|
bg1.insert(text22);
|
|
var text23 = new mxCell('12', new mxGeometry(140, 134, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text23.vertex = true;
|
|
bg1.insert(text23);
|
|
var text1 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 50), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(-160, -50);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell("OK", new mxGeometry(1, 1, 90, 50), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(-90, -50);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
return sb.createVertexTemplateFromCells([bg1], 328, 484, 'Time picker');
|
|
}),
|
|
this.addEntry(dt + 'time picker dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 328, 484), 'shape=rect;fillColor=#424242;strokeColor=none;shadow=1;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell('3:30', new mxGeometry(0, 0, 328, 96), 'shape=rect;fillColor=#555555;fontColor=#ffffff;strokeColor=none;align=center;spacing=0;fontSize=58;verticalAlign=middle;spacingBottom=10;spacingLeft=34;');
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var text1 = new mxCell('AM', new mxGeometry(248, 18, 40, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=17;fontStyle=0;textOpacity=70;');
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('PM', new mxGeometry(248, 42, 40, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=17;');
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var part1 = new mxCell('', new mxGeometry(16, 130, 296, 296), 'shape=ellipse;fillColor=#555555;strokeColor=none;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text12 = new mxCell('1', new mxGeometry(200, 147, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var text13 = new mxCell('2', new mxGeometry(246, 190, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text13.vertex = true;
|
|
bg1.insert(text13);
|
|
var text14 = new mxCell('3', new mxGeometry(145, 128, 145, 40), s2 + 'time_picker;fillColor=#80CBC4;strokeColor=#80CBC4;verticalAlign=middle;align=right;fontColor=#ffffff;strokeWidth=2;spacingRight=13;fontSize=15;');
|
|
text14.vertex = true;
|
|
part1.insert(text14);
|
|
var text15 = new mxCell('4', new mxGeometry(246, 319, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text15.vertex = true;
|
|
bg1.insert(text15);
|
|
var text16 = new mxCell('5', new mxGeometry(200, 366, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text16.vertex = true;
|
|
bg1.insert(text16);
|
|
var text17 = new mxCell('6', new mxGeometry(140, 383, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text17.vertex = true;
|
|
bg1.insert(text17);
|
|
var text18 = new mxCell('7', new mxGeometry(78, 366, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text18.vertex = true;
|
|
bg1.insert(text18);
|
|
var text19 = new mxCell('8', new mxGeometry(33, 319, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text19.vertex = true;
|
|
bg1.insert(text19);
|
|
var text20 = new mxCell('9', new mxGeometry(15, 258, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text20.vertex = true;
|
|
bg1.insert(text20);
|
|
var text21 = new mxCell('10', new mxGeometry(33, 190, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text21.vertex = true;
|
|
bg1.insert(text21);
|
|
var text22 = new mxCell('11', new mxGeometry(78, 147, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text22.vertex = true;
|
|
bg1.insert(text22);
|
|
var text23 = new mxCell('12', new mxGeometry(140, 134, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text23.vertex = true;
|
|
bg1.insert(text23);
|
|
var text1 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 50), 'text;fontSize=13;fontColor=#80CBC4;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(-160, -50);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell("OK", new mxGeometry(1, 1, 90, 50), 'text;fontSize=13;fontColor=#80CBC4;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(-90, -50);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
return sb.createVertexTemplateFromCells([bg1], 328, 484, 'Time picker (dark)');
|
|
}),
|
|
this.addEntry(dt + 'time picker landscape light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 512, 304), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell('3:30', new mxGeometry(0, 0, 168, 304), 'shape=rect;fillColor=#009688;fontColor=#ffffff;strokeColor=none;align=center;spacing=0;fontSize=52;verticalAlign=middle;spacingBottom=60;spacingLeft=16;');
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var text1 = new mxCell('AM', new mxGeometry(0, 146, 168, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=17;fontStyle=0;textOpacity=70;');
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('PM', new mxGeometry(0, 170, 168, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=17;');
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var part1 = new mxCell('', new mxGeometry(228, 16, 224, 224), 'shape=ellipse;fillColor=#eeeeee;strokeColor=none;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text12 = new mxCell('1', new mxGeometry(355, 30, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var text13 = new mxCell('2', new mxGeometry(392, 63, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text13.vertex = true;
|
|
bg1.insert(text13);
|
|
var text14 = new mxCell('3', new mxGeometry(110, 100, 108, 30), s2 + 'time_picker;fillColor=#009688;strokeColor=#009688;verticalAlign=middle;align=right;fontColor=#ffffff;strokeWidth=2;spacingRight=9;fontSize=15;fontStyle=1;');
|
|
text14.vertex = true;
|
|
part1.insert(text14);
|
|
var text15 = new mxCell('4', new mxGeometry(394, 150, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text15.vertex = true;
|
|
bg1.insert(text15);
|
|
var text16 = new mxCell('5', new mxGeometry(358, 186, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text16.vertex = true;
|
|
bg1.insert(text16);
|
|
var text17 = new mxCell('6', new mxGeometry(315, 200, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text17.vertex = true;
|
|
bg1.insert(text17);
|
|
var text18 = new mxCell('7', new mxGeometry(271, 186, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text18.vertex = true;
|
|
bg1.insert(text18);
|
|
var text19 = new mxCell('8', new mxGeometry(236, 150, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text19.vertex = true;
|
|
bg1.insert(text19);
|
|
var text20 = new mxCell('9', new mxGeometry(221, 108, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text20.vertex = true;
|
|
bg1.insert(text20);
|
|
var text21 = new mxCell('10', new mxGeometry(238, 63, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text21.vertex = true;
|
|
bg1.insert(text21);
|
|
var text22 = new mxCell('11', new mxGeometry(271, 30, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text22.vertex = true;
|
|
bg1.insert(text22);
|
|
var text23 = new mxCell('12', new mxGeometry(315, 16, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;');
|
|
text23.vertex = true;
|
|
bg1.insert(text23);
|
|
var text1 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 50), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(-160, -50);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell("OK", new mxGeometry(1, 1, 90, 50), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(-90, -50);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
return sb.createVertexTemplateFromCells([bg1], 512, 304, 'Time picker (landscape, light)');
|
|
}),
|
|
this.addEntry(dt + 'time picker landscape dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 512, 304), 'shape=rect;fillColor=#424242;strokeColor=none;shadow=1;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell('3:30', new mxGeometry(0, 0, 168, 304), 'shape=rect;fillColor=#555555;fontColor=#ffffff;strokeColor=none;align=center;spacing=0;fontSize=52;verticalAlign=middle;spacingBottom=60;spacingLeft=16;');
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var text1 = new mxCell('AM', new mxGeometry(0, 146, 168, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=17;fontStyle=0;textOpacity=70;');
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('PM', new mxGeometry(0, 170, 168, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=17;');
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var part1 = new mxCell('', new mxGeometry(228, 16, 224, 224), 'shape=ellipse;fillColor=#555555;strokeColor=none;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text12 = new mxCell('1', new mxGeometry(355, 30, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text12.vertex = true;
|
|
bg1.insert(text12);
|
|
var text13 = new mxCell('2', new mxGeometry(392, 63, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text13.vertex = true;
|
|
bg1.insert(text13);
|
|
var text14 = new mxCell('3', new mxGeometry(110, 100, 108, 30), s2 + 'time_picker;fillColor=#80CBC4;strokeColor=#80CBC4;verticalAlign=middle;align=right;fontColor=#555555;strokeWidth=2;spacingRight=9;fontSize=15;fontStyle=1;');
|
|
text14.vertex = true;
|
|
part1.insert(text14);
|
|
var text15 = new mxCell('4', new mxGeometry(394, 150, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text15.vertex = true;
|
|
bg1.insert(text15);
|
|
var text16 = new mxCell('5', new mxGeometry(358, 186, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text16.vertex = true;
|
|
bg1.insert(text16);
|
|
var text17 = new mxCell('6', new mxGeometry(315, 200, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text17.vertex = true;
|
|
bg1.insert(text17);
|
|
var text18 = new mxCell('7', new mxGeometry(271, 186, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text18.vertex = true;
|
|
bg1.insert(text18);
|
|
var text19 = new mxCell('8', new mxGeometry(236, 150, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text19.vertex = true;
|
|
bg1.insert(text19);
|
|
var text20 = new mxCell('9', new mxGeometry(221, 108, 49, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text20.vertex = true;
|
|
bg1.insert(text20);
|
|
var text21 = new mxCell('10', new mxGeometry(238, 63, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text21.vertex = true;
|
|
bg1.insert(text21);
|
|
var text22 = new mxCell('11', new mxGeometry(271, 30, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text22.vertex = true;
|
|
bg1.insert(text22);
|
|
var text23 = new mxCell('12', new mxGeometry(315, 16, 46, 40), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;');
|
|
text23.vertex = true;
|
|
bg1.insert(text23);
|
|
var text1 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 50), 'text;fontSize=13;fontColor=#80CBC4;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text1.geometry.relative = true;
|
|
text1.geometry.offset = new mxPoint(-160, -50);
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell("OK", new mxGeometry(1, 1, 90, 50), 'text;fontSize=13;fontColor=#80CBC4;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(-90, -50);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
return sb.createVertexTemplateFromCells([bg1], 512, 304, 'Time picker (landscape, dark)');
|
|
}),
|
|
this.addEntry(dt + 'year picker light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 328, 484), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell('Thu, Apr 13', new mxGeometry(0, 0, 328, 96), 'shape=rect;fillColor=#009688;fontColor=#ffffff;strokeColor=none;align=left;spacing=16;fontSize=33;verticalAlign=bottom;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var text1 = new mxCell('2017', new mxGeometry(0, 0, 328, 40), 'text;verticalAlign=middle;fontColor=#FFFFFF;spacingTop=6;spacing=16;fontSize=15;textOpacity=70;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('2014', new mxGeometry(0, 0, 328, 48), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 96);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('2015', new mxGeometry(0, 0, 328, 48), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 144);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('2016', new mxGeometry(0, 0, 328, 48), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 192);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('2017', new mxGeometry(0, 0, 328, 56), 'text;verticalAlign=middle;align=center;fontColor=#009688;fontSize=29;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 240);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('2018', new mxGeometry(0, 0, 328, 48), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 296);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var text7 = new mxCell('2019', new mxGeometry(0, 0, 328, 48), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 344);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var text8 = new mxCell('2020', new mxGeometry(0, 0, 328, 48), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;resizeWidth=1;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, 392);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 50), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(-160, -50);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
var text10 = new mxCell("OK", new mxGeometry(1, 1, 90, 50), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(-90, -50);
|
|
text10.vertex = true;
|
|
bg1.insert(text10);
|
|
return sb.createVertexTemplateFromCells([bg1], 328, 484, 'Year picker (light)');
|
|
}),
|
|
this.addEntry(dt + 'year picker dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 328, 484), 'shape=rect;fillColor=#424242;strokeColor=none;shadow=1;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell('Thu, Apr 13', new mxGeometry(0, 0, 328, 96), 'shape=rect;fillColor=#555555;fontColor=#ffffff;strokeColor=none;align=left;spacing=16;fontSize=33;verticalAlign=bottom;textOpacity=70;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var text1 = new mxCell('2017', new mxGeometry(0, 0, 328, 40), 'text;verticalAlign=middle;fontColor=#ffffff;spacingTop=6;spacing=16;fontSize=15;fontOpacity=70;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('2014', new mxGeometry(0, 0, 328, 48), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 96);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('2015', new mxGeometry(0, 0, 328, 48), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 144);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('2016', new mxGeometry(0, 0, 328, 48), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 192);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('2017', new mxGeometry(0, 0, 328, 56), 'text;verticalAlign=middle;align=center;fontColor=#80CBC4;fontSize=29;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 240);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('2018', new mxGeometry(0, 0, 328, 48), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 296);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var text7 = new mxCell('2019', new mxGeometry(0, 0, 328, 48), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 344);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var text8 = new mxCell('2020', new mxGeometry(0, 0, 328, 48), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;resizeWidth=1;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, 392);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 50), 'text;fontSize=13;fontColor=#80CBC4;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(-160, -50);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
var text10 = new mxCell("OK", new mxGeometry(1, 1, 90, 50), 'text;fontSize=13;fontColor=#80CBC4;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(-90, -50);
|
|
text10.vertex = true;
|
|
bg1.insert(text10);
|
|
return sb.createVertexTemplateFromCells([bg1], 328, 484, 'Year picker (dark)');
|
|
}),
|
|
this.addEntry(dt + 'date picker landscape light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 512, 304), 'shape=rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell('Thu,\nApr 13', new mxGeometry(0, 0, 168, 304), 'shape=rect;fillColor=#009688;fontColor=#ffffff;strokeColor=none;align=left;spacing=16;fontSize=33;verticalAlign=top;spacingTop=14;');
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var text1 = new mxCell('2017', new mxGeometry(0, 0, 168, 40), 'text;verticalAlign=middle;fontColor=#FFFFFF;spacingTop=6;spacing=16;fontSize=15;textOpacity=70;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('2014', new mxGeometry(0.3281, 0, 344, 36), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('2015', new mxGeometry(0.3281, 0, 344, 36), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 36);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('2016', new mxGeometry(0.3281, 0, 344, 36), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 72);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('2017', new mxGeometry(0.3281, 0, 344, 44), 'text;verticalAlign=middle;align=center;fontColor=#009688;fontSize=29;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 108);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('2018', new mxGeometry(0.3281, 0, 344, 36), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 152);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var text7 = new mxCell('2019', new mxGeometry(0.3281, 0, 344, 36), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 188);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var text8 = new mxCell('2020', new mxGeometry(0.3281, 0, 344, 36), 'text;verticalAlign=middle;align=center;fontColor=#4D4D4D;fontSize=15;resizeWidth=1;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, 224);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 50), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(-160, -50);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
var text10 = new mxCell("OK", new mxGeometry(1, 1, 90, 50), 'text;fontSize=13;fontColor=#009688;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(-90, -50);
|
|
text10.vertex = true;
|
|
bg1.insert(text10);
|
|
return sb.createVertexTemplateFromCells([bg1], 512, 304, 'Date picker (landscape, light)');
|
|
}),
|
|
this.addEntry(dt + 'date picker landscape light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 512, 304), 'shape=rect;fillColor=#424242;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell('Thu,\nApr 13', new mxGeometry(0, 0, 168, 304), 'shape=rect;fillColor=#555555;fontColor=#ffffff;strokeColor=none;align=left;spacing=16;fontSize=33;verticalAlign=top;spacingTop=14;');
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var text1 = new mxCell('2017', new mxGeometry(0, 0, 168, 40), 'text;verticalAlign=middle;fontColor=#FFFFFF;spacingTop=6;spacing=16;fontSize=15;textOpacity=70;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bar1.insert(text1);
|
|
var text2 = new mxCell('2014', new mxGeometry(0.3281, 0, 344, 36), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('2015', new mxGeometry(0.3281, 0, 344, 36), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 36);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var text4 = new mxCell('2016', new mxGeometry(0.3281, 0, 344, 36), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 72);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('2017', new mxGeometry(0.3281, 0, 344, 44), 'text;verticalAlign=middle;align=center;fontColor=#80CBC4;fontSize=29;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 108);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var text6 = new mxCell('2018', new mxGeometry(0.3281, 0, 344, 36), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;resizeWidth=1;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(0, 152);
|
|
text6.vertex = true;
|
|
bg1.insert(text6);
|
|
var text7 = new mxCell('2019', new mxGeometry(0.3281, 0, 344, 36), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;resizeWidth=1;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, 188);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var text8 = new mxCell('2020', new mxGeometry(0.3281, 0, 344, 36), 'text;verticalAlign=middle;align=center;fontColor=#ffffff;fontSize=15;resizeWidth=1;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(0, 224);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell("CANCEL", new mxGeometry(1, 1, 70, 50), 'text;fontSize=13;fontColor=#80CBC4;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(-160, -50);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
var text10 = new mxCell("OK", new mxGeometry(1, 1, 90, 50), 'text;fontSize=13;fontColor=#80CBC4;spacingTop=0;whiteSpace=wrap;spacing=0;verticalAlign=middle;align=center;fontStyle=1;');
|
|
text10.geometry.relative = true;
|
|
text10.geometry.offset = new mxPoint(-90, -50);
|
|
text10.vertex = true;
|
|
bg1.insert(text10);
|
|
return sb.createVertexTemplateFromCells([bg1], 512, 304, 'Date picker (landscape, dark)');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlPickers', 'GMDL / Pickers', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLSelectionControlsPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;shape=";
|
|
var s2 = "dashed=0;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library selection control ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'checkbox on hover light dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;strokeColor=none;fillColor=#009587;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Checkbox (on, hover))');
|
|
}),
|
|
this.addEntry(dt + 'checkbox on focused pressed light dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#009587;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'checkbox;strokeColor=none;fillColor=#009587;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Checkbox (on, focused or pressed))');
|
|
}),
|
|
this.addEntry(dt + 'checkbox on disabled light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;strokeColor=none;fillColor=#B0B0B0;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Checkbox (on, disabled, light))');
|
|
}),
|
|
this.addEntry(dt + 'checkbox on disabled focused light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#B0B0B0;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'checkbox;strokeColor=none;fillColor=#B0B0B0;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Checkbox (on, disabled, focused, light))');
|
|
}),
|
|
this.addEntry(dt + 'checkbox off hover light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;strokeColor=#666666;fillColor=none;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Checkbox (off, hover, light))');
|
|
}),
|
|
this.addEntry(dt + 'checkbox off focused pressed light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#666666;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'checkbox;strokeColor=#666666;fillColor=none;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Checkbox (off, focused or pressed, light))');
|
|
}),
|
|
this.addEntry(dt + 'checkbox off disabled light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;strokeColor=#B0B0B0;fillColor=none;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Checkbox (off, disabled, light))');
|
|
}),
|
|
this.addEntry(dt + 'checkbox off disabled focused light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#666666;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'checkbox;strokeColor=#B0B0B0;fillColor=none;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Checkbox (off, disabled, focused, light))');
|
|
}),
|
|
this.addEntry(dt + 'checkbox on disabled dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;strokeColor=none;fillColor=#676767;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Checkbox (on, disabled, dark))');
|
|
}),
|
|
this.addEntry(dt + 'checkbox on disabled focused dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#B0B0B0;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'checkbox;strokeColor=none;fillColor=#676767;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Checkbox (on, disabled, focused, dark))');
|
|
}),
|
|
this.addEntry(dt + 'checkbox off hover dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;strokeColor=#ffffff;fillColor=none;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Checkbox (off, hover, dark))');
|
|
}),
|
|
this.addEntry(dt + 'checkbox off focused pressed dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#666666;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'checkbox;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Checkbox (off, focused or pressed, dark))');
|
|
}),
|
|
this.addEntry(dt + 'checkbox off disabled dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'checkbox;strokeColor=#666666;fillColor=none;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Checkbox (off, disabled, dark))');
|
|
}),
|
|
this.addEntry(dt + 'checkbox off disabled focused dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#666666;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'checkbox;strokeColor=#666666;fillColor=none;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Checkbox (off, disabled, focused, dark))');
|
|
}),
|
|
this.addEntry(dt + 'radio button on hover light dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'radiobutton;strokeColor=#009587;fillColor=#009587;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Radio button (on, hover))');
|
|
}),
|
|
this.addEntry(dt + 'radio button on focused pressed light dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#009587;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'radiobutton;strokeColor=#009587;fillColor=#009587;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Radio button (on, focused or pressed))');
|
|
}),
|
|
this.addEntry(dt + 'radio button on disabled light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'radiobutton;strokeColor=#B0B0B0;fillColor=#B0B0B0;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Radio button (on, disabled, light))');
|
|
}),
|
|
this.addEntry(dt + 'radio button on disabled focused light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#B0B0B0;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'radiobutton;strokeColor=#B0B0B0;fillColor=#B0B0B0;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Radio button (on, disabled, focused, light))');
|
|
}),
|
|
this.addEntry(dt + 'radio button off hover light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'radiobutton;strokeColor=#666666;fillColor=none;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Radio button (off, hover, light))');
|
|
}),
|
|
this.addEntry(dt + 'radio button off focused pressed light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#666666;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'radiobutton;strokeColor=#666666;fillColor=none;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Radio button (off, focused or pressed, light))');
|
|
}),
|
|
this.addEntry(dt + 'radio button off disabled light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'radiobutton;strokeColor=#B0B0B0;fillColor=none;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Radio button (off, disabled, light))');
|
|
}),
|
|
this.addEntry(dt + 'radio button off disabled focused light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#666666;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'radiobutton;strokeColor=#B0B0B0;fillColor=none;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Radio button (off, disabled, focused, light))');
|
|
}),
|
|
this.addEntry(dt + 'radio button on disabled dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'radiobutton;strokeColor=#676767;fillColor=#676767;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Radio button (on, disabled, dark))');
|
|
}),
|
|
this.addEntry(dt + 'radio button on disabled focused dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#B0B0B0;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'radiobutton;strokeColor=#676767;fillColor=#676767;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Radio button (on, disabled, focused, dark))');
|
|
}),
|
|
this.addEntry(dt + 'radio button off hover dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'radiobutton;strokeColor=#ffffff;fillColor=none;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Radio button (off, hover, dark))');
|
|
}),
|
|
this.addEntry(dt + 'radio button off focused pressed dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#666666;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'radiobutton;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Radio button (off, focused or pressed, dark))');
|
|
}),
|
|
this.addEntry(dt + 'radio button off disabled dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'radiobutton;strokeColor=#666666;fillColor=none;strokeWidth=2;aspect=fixed;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 16, 16, 'Radio button (off, disabled, dark))');
|
|
}),
|
|
this.addEntry(dt + 'radio button off disabled focused dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 48, 48), 'shape=ellipse;strokeColor=none;fillColor=#666666;opacity=10;');
|
|
bg1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(16, 16, 16, 16), s2 + 'radiobutton;strokeColor=#666666;fillColor=none;strokeWidth=2;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
return sb.createVertexTemplateFromCells([bg1], 48, 48, 'Radio button (off, disabled, focused, dark))');
|
|
}),
|
|
this.addEntry(dt + 'switch on light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 36, 20), s2 + 'switch;aspect=fixed;switchState=on;strokeColor=none;fillColor=#0E9D57;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 36, 20, 'Switch (on, light)');
|
|
}),
|
|
this.addEntry(dt + 'switch on dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 36, 20), s2 + 'switch;aspect=fixed;switchState=on;strokeColor=none;fillColor=#80CBC4;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 36, 20, 'Switch (on, dark)');
|
|
}),
|
|
this.addEntry(dt + 'switch off light dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 36, 20), s2 + 'switch;aspect=fixed;switchState=off;strokeColor=none;fillColor=#0E9D57;');
|
|
bg1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([bg1], 36, 20, 'Switch (off)');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlSelection Controls', 'GMDL / Selection Controls', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLSlidersPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;shape=";
|
|
var s2 = "dashed=0;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library slider ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.createVertexTemplateEntry(s2 + 'slider2;barPos=0;strokeColor=#bbbbbb;opacity=100;strokeWidth=2;fillColor=#ffffff;handleSize=10;shadow=0;',
|
|
200, 10, '', 'Slider (normal)', null, null, this.getTagsForStencil(gn, 'slider normal', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'slider2;barPos=50;strokeColor=#3F51B5;opacity=100;strokeWidth=2;fillColor=#3F51B5;handleSize=10;shadow=0;',
|
|
200, 10, '', 'Slider (normal)', null, null, this.getTagsForStencil(gn, 'slider normal', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'slider2;barPos=100;strokeColor=#3F51B5;opacity=100;strokeWidth=2;fillColor=#3F51B5;handleSize=10;shadow=0;',
|
|
200, 10, '', 'Slider (normal)', null, null, this.getTagsForStencil(gn, 'slider normal', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderFocused;barPos=0;strokeColor=#bbbbbb;opacity=100;strokeWidth=2;fillColor=#ffffff;handleSize=30;shadow=0;',
|
|
200, 30, '', 'Slider (focused)', null, null, this.getTagsForStencil(gn, 'slider focused', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderFocused;barPos=50;strokeColor=#3F51B5;opacity=100;strokeWidth=2;fillColor=#3F51B5;handleSize=30;shadow=0;',
|
|
200, 30, '', 'Slider (focused)', null, null, this.getTagsForStencil(gn, 'slider focused', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderFocused;barPos=100;strokeColor=#3F51B5;opacity=100;strokeWidth=2;fillColor=#3F51B5;handleSize=30;shadow=0;',
|
|
200, 30, '', 'Slider (focused)', null, null, this.getTagsForStencil(gn, 'slider focused', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'slider2;barPos=0;strokeColor=#bbbbbb;opacity=100;strokeWidth=2;fillColor=#ffffff;handleSize=20;shadow=0;',
|
|
200, 20, '', 'Slider (click)', null, null, this.getTagsForStencil(gn, 'slider click', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'slider2;barPos=50;strokeColor=#3F51B5;opacity=100;strokeWidth=2;fillColor=#3F51B5;handleSize=20;shadow=0;',
|
|
200, 20, '', 'Slider (click)', null, null, this.getTagsForStencil(gn, 'slider click', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'slider2;barPos=100;strokeColor=#3F51B5;opacity=100;strokeWidth=2;fillColor=#3F51B5;handleSize=20;shadow=0;',
|
|
200, 20, '', 'Slider (click)', null, null, this.getTagsForStencil(gn, 'slider click', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDisabled2;strokeColor=#b0b0b0;strokeWidth=2;fillColor=none;handleSize=6;shadow=0;hPos=0;',
|
|
210, 20, '', 'Slider (disabled)', null, null, this.getTagsForStencil(gn, 'slider disabled', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDisabled2;strokeColor=#b0b0b0;strokeWidth=2;fillColor=#b0b0b0;handleSize=6;shadow=0;hPos=50;',
|
|
210, 20, '', 'Slider (disabled)', null, null, this.getTagsForStencil(gn, 'slider disabled', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDisabled2;strokeColor=#b0b0b0;strokeWidth=2;fillColor=#b0b0b0;handleSize=6;shadow=0;hPos=100;',
|
|
210, 20, '', 'Slider (disabled)', null, null, this.getTagsForStencil(gn, 'slider disabled', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'slider2;barPos=0;strokeColor=#000000;opacity=100;strokeWidth=2;fillColor=#000000;handleSize=10;shadow=0;',
|
|
200, 10, '', 'Discrete slider (normal, light)', null, null, this.getTagsForStencil(gn, 'discrete slider normal light', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'slider2;barPos=60;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;',
|
|
200, 10, '', 'Discrete slider (normal)', null, null, this.getTagsForStencil(gn, 'slider normal', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'slider2;barPos=100;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;',
|
|
200, 10, '', 'Discrete slider (normal)', null, null, this.getTagsForStencil(gn, 'slider normal', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDiscrete;barPos=1;strokeColor=#BEBEBE;opacity=100;strokeWidth=2;fillColor=#BEBEBE;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;',
|
|
200, 45, '', 'Discrete slider (focused)', null, null, this.getTagsForStencil(gn, 'slider focused', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDiscrete;barPos=60;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;',
|
|
200, 45, '', 'Discrete slider (focused)', null, null, this.getTagsForStencil(gn, 'slider focused', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDiscrete;barPos=100;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;',
|
|
200, 45, '', 'Discrete slider (focused)', null, null, this.getTagsForStencil(gn, 'slider focused', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDiscreteDots;barPos=0;bright=1;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;',
|
|
200, 45, '', 'Discrete slider (click)', null, null, this.getTagsForStencil(gn, 'slider click', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDiscreteDots;barPos=60;bright=1;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;',
|
|
200, 45, '', 'Discrete slider (click, light)', null, null, this.getTagsForStencil(gn, 'slider click light', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDiscreteDots;barPos=100;bright=1;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;',
|
|
200, 45, '', 'Discrete slider (click, light)', null, null, this.getTagsForStencil(gn, 'slider click light', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDisabled2;strokeColor=#b0b0b0;strokeWidth=2;fillColor=#b0b0b0;handleSize=6;shadow=0;hPos=0;',
|
|
200, 20, '', 'Discrete slider (disabled)', null, null, this.getTagsForStencil(gn, 'discrete slider disabled', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDisabled2;strokeColor=#b0b0b0;strokeWidth=2;fillColor=#b0b0b0;handleSize=6;shadow=0;hPos=50;',
|
|
200, 20, '', 'Discrete slider (disabled)', null, null, this.getTagsForStencil(gn, 'discrete slider disabled', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDisabled2;strokeColor=#b0b0b0;strokeWidth=2;fillColor=#b0b0b0;handleSize=6;shadow=0;hPos=100;',
|
|
200, 20, '', 'Discrete slider (disabled)', null, null, this.getTagsForStencil(gn, 'discrete slider disabled', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'slider2;barPos=0;strokeColor=#ffffff;opacity=100;strokeWidth=2;fillColor=#ffffff;handleSize=10;shadow=0;',
|
|
200, 10, '', 'Discrete slider (normal, dark)', null, null, this.getTagsForStencil(gn, 'discrete slider normal dark', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDiscreteDots;barPos=0;bright=0;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;',
|
|
200, 45, '', 'Discrete slider (click, dark)', null, null, this.getTagsForStencil(gn, 'discrete slider click dark', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDiscreteDots;barPos=60;bright=0;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;',
|
|
200, 45, '', 'Discrete slider (click, dark)', null, null, this.getTagsForStencil(gn, 'discrete slider click dark', dt).join(' ')),
|
|
this.createVertexTemplateEntry(s2 + 'sliderDiscreteDots;barPos=100;bright=0;strokeColor=#0F9D58;opacity=100;strokeWidth=2;fillColor=#0F9D58;handleSize=10;shadow=0;fontSize=12;fontColor=#ffffff;',
|
|
200, 45, '', 'Discrete slider (click, dark)', null, null, this.getTagsForStencil(gn, 'discrete slider click dark', dt).join(' '))
|
|
];
|
|
|
|
this.addPalette('gmdlSliders', 'GMDL / Sliders', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLSteppersPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;shape=";
|
|
var s2 = "dashed=0;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library tab ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'stepper', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 704, 478), 'shape=rect;strokeColor=none;fillColor=#ffffff;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('1', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#4285F4;fontColor=#ffffff;');
|
|
part1.vertex = true;
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(24, 24);
|
|
bg.insert(part1);
|
|
var part2 = new mxCell('Name of step 1', new mxGeometry(0, 0, 200, 24), 'shape=rect;strokeColor=none;fillColor=none;align=left;fontStyle=1;');
|
|
part2.vertex = true;
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(56, 24);
|
|
bg.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(0, 0, 10, 296), 'shape=line;direction=north;strokeColor=#b3b3b3;');
|
|
part3.vertex = true;
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(31, 54);
|
|
bg.insert(part3);
|
|
var part4 = new mxCell('', new mxGeometry(0, 0, 596, 190), 'shape=rect;strokeColor=none;fillColor=#bdbdbd;');
|
|
part4.vertex = true;
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(60, 58);
|
|
bg.insert(part4);
|
|
var part5 = new mxCell('CONTINUE', new mxGeometry(0, 0, 102, 36), 'shape=rect;strokeColor=none;fillColor=#4285f4;fontColor=#ffffff;');
|
|
part5.vertex = true;
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(60, 272);
|
|
bg.insert(part5);
|
|
var part6 = new mxCell('CANCEL', new mxGeometry(0, 0, 102, 36), 'shape=rect;strokeColor=none;fillColor=#ffffff;fontColor=#808080;');
|
|
part6.vertex = true;
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(172, 272);
|
|
bg.insert(part6);
|
|
var part7 = new mxCell('2', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;');
|
|
part7.vertex = true;
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(24, 356);
|
|
bg.insert(part7);
|
|
var part8 = new mxCell('Name of step 2', new mxGeometry(0, 0, 200, 24), 'shape=rect;strokeColor=none;fillColor=none;align=left;fontColor=#aaaaaa;');
|
|
part8.vertex = true;
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(56, 356);
|
|
bg.insert(part8);
|
|
var part9 = new mxCell('3', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;');
|
|
part9.vertex = true;
|
|
part9.geometry.relative = true;
|
|
part9.geometry.offset = new mxPoint(24, 422);
|
|
bg.insert(part9);
|
|
var part10 = new mxCell('Name of step 3', new mxGeometry(0, 0, 200, 24), 'shape=rect;strokeColor=none;fillColor=none;align=left;fontColor=#aaaaaa;');
|
|
part10.vertex = true;
|
|
part10.geometry.relative = true;
|
|
part10.geometry.offset = new mxPoint(56, 422);
|
|
bg.insert(part10);
|
|
var part11 = new mxCell('', new mxGeometry(0, 0, 10, 25), 'shape=line;direction=north;strokeColor=#b3b3b3;');
|
|
part11.vertex = true;
|
|
part11.geometry.relative = true;
|
|
part11.geometry.offset = new mxPoint(31, 390);
|
|
bg.insert(part11);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Stepper');
|
|
}),
|
|
this.addEntry(dt + 'editable steps', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 704, 72), 'shape=rect;strokeColor=none;fillColor=#ffffff;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('Select campaign settings', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#4285F4;fontColor=#000000;labelPosition=right;align=left;spacingLeft=10;fontStyle=1;');
|
|
part1.vertex = true;
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(24, 24);
|
|
bg.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(0.5, 0.5, 10, 10), s2 + 'edit;strokeColor=none;fillColor=#ffffff;');
|
|
part2.vertex = true;
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-5, -5);
|
|
part1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(0, 0, 90, 10), 'shape=line;strokeColor=#b3b3b3;');
|
|
part3.vertex = true;
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(206, 31);
|
|
bg.insert(part3);
|
|
var part4 = new mxCell('Create an ad group', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontColor=#000000;labelPosition=right;align=left;spacingLeft=10;');
|
|
part4.vertex = true;
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(306, 24);
|
|
bg.insert(part4);
|
|
var part5 = new mxCell('', new mxGeometry(0.5, 0.5, 12, 10), s2 + 'check;strokeColor=#ffffff;strokeWidth=2;');
|
|
part5.vertex = true;
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(-6, -5);
|
|
part4.insert(part5);
|
|
var part6 = new mxCell('', new mxGeometry(0, 0, 90, 10), 'shape=line;strokeColor=#b3b3b3;');
|
|
part6.vertex = true;
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(460, 31);
|
|
bg.insert(part6);
|
|
var part7 = new mxCell('3', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;');
|
|
part7.vertex = true;
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(568, 24);
|
|
bg.insert(part7);
|
|
var part8 = new mxCell('Create an ad', new mxGeometry(0, 0, 110, 24), 'shape=rect;strokeColor=none;fillColor=none;align=left;spacingLeft=10;fontColor=#808080;');
|
|
part8.vertex = true;
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(592, 24);
|
|
bg.insert(part8);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Editable Steps');
|
|
}),
|
|
this.addEntry(dt + 'noneditable non editable steps', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 704, 72), 'shape=rect;strokeColor=none;fillColor=#ffffff;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('Select campaign settings', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#4285F4;fontColor=#000000;labelPosition=right;align=left;spacingLeft=10;');
|
|
part1.vertex = true;
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(24, 24);
|
|
bg.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(0.5, 0.5, 12, 10), s2 + 'check;strokeColor=#ffffff;strokeWidth=2;');
|
|
part2.vertex = true;
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-6, -5);
|
|
part1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(0, 0, 90, 10), 'shape=line;strokeColor=#b3b3b3;');
|
|
part3.vertex = true;
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(206, 31);
|
|
bg.insert(part3);
|
|
var part4 = new mxCell('2', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#4285F4;fontColor=#ffffff;');
|
|
part4.vertex = true;
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(306, 24);
|
|
bg.insert(part4);
|
|
var part5 = new mxCell('Create an ad group', new mxGeometry(0, 0, 200, 24), 'shape=rect;strokeColor=none;fillColor=none;fontColor=#000000;align=left;spacingLeft=10;fontStyle=1;');
|
|
part5.vertex = true;
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(330, 24);
|
|
bg.insert(part5);
|
|
var part6 = new mxCell('', new mxGeometry(0, 0, 90, 10), 'shape=line;strokeColor=#b3b3b3;');
|
|
part6.vertex = true;
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(460, 31);
|
|
bg.insert(part6);
|
|
var part7 = new mxCell('3', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;');
|
|
part7.vertex = true;
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(568, 24);
|
|
bg.insert(part7);
|
|
var part8 = new mxCell('Create an ad', new mxGeometry(0, 0, 110, 24), 'shape=rect;strokeColor=none;fillColor=none;align=left;spacingLeft=10;fontColor=#808080;');
|
|
part8.vertex = true;
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(592, 24);
|
|
bg.insert(part8);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Non-editable Steps');
|
|
}),
|
|
this.addEntry(dt + 'mobile step text', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#BDBDBD;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#3367D6;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Create', new mxGeometry(0, 0, 358, 56), s + 'rect;strokeColor=none;fillColor=#4285F4;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=9;verticalAlign=top;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var bar2 = new mxCell('Step 4 of 6', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#f5f5f5;resizeWidth=1;fontSize=13;fontColor=#000000;spacingTop=9;verticalAlign=top;align=left;spacingLeft=16;');
|
|
bar2.geometry.relative = true;
|
|
bar2.geometry.offset = new mxPoint(0, 80);
|
|
bar2.vertex = true;
|
|
bg1.insert(bar2);
|
|
var bar3 = new mxCell('< BACK', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#f5f5f5;resizeWidth=1;fontSize=13;fontColor=#666666;verticalAlign=middle;align=left;spacingLeft=16;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, -96);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var bar4 = new mxCell('NEXT >', new mxGeometry(1, 0, 100, 48), s + 'rect;strokeColor=none;fillColor=none;resizeWidth=1;fontSize=13;fontColor=#666666;verticalAlign=middle;align=right;spacingRight=16;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(-100, 0);
|
|
bar4.vertex = true;
|
|
bar3.insert(bar4);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Mobile step (text)');
|
|
}),
|
|
this.addEntry(dt + 'mobile step dots', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#BDBDBD;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#3367D6;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Create', new mxGeometry(0, 0, 358, 56), s + 'rect;strokeColor=none;fillColor=#4285F4;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=9;verticalAlign=top;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var bar3 = new mxCell('< BACK', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#f5f5f5;resizeWidth=1;fontSize=13;fontColor=#666666;verticalAlign=middle;align=left;spacingLeft=16;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, -96);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var bar4 = new mxCell('NEXT >', new mxGeometry(1, 0, 100, 48), s + 'rect;strokeColor=none;fillColor=none;fontSize=13;fontColor=#666666;verticalAlign=middle;align=right;spacingRight=16;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(-100, 0);
|
|
bar4.vertex = true;
|
|
bar3.insert(bar4);
|
|
var icon2 = new mxCell('', new mxGeometry(0.5, 0, 6, 6), 'shape=ellipse;strokeColor=none;fillColor=#aaaaaa;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-43, 21);
|
|
icon2.vertex = true;
|
|
bar3.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(0.5, 0, 6, 6), 'shape=ellipse;strokeColor=none;fillColor=#aaaaaa;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-28, 21);
|
|
icon3.vertex = true;
|
|
bar3.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(0.5, 0, 6, 6), 'shape=ellipse;strokeColor=none;fillColor=#aaaaaa;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-13, 21);
|
|
icon4.vertex = true;
|
|
bar3.insert(icon4);
|
|
var icon5 = new mxCell('', new mxGeometry(0.5, 0, 8, 8), 'shape=ellipse;strokeColor=none;fillColor=#4285F4;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(1, 20);
|
|
icon5.vertex = true;
|
|
bar3.insert(icon5);
|
|
var icon6 = new mxCell('', new mxGeometry(0.5, 0, 6, 6), 'shape=ellipse;strokeColor=none;fillColor=#aaaaaa;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(17, 21);
|
|
icon6.vertex = true;
|
|
bar3.insert(icon6);
|
|
var icon7 = new mxCell('', new mxGeometry(0.5, 0, 6, 6), 'shape=ellipse;strokeColor=none;fillColor=#aaaaaa;');
|
|
icon7.geometry.relative = true;
|
|
icon7.geometry.offset = new mxPoint(32, 21);
|
|
icon7.vertex = true;
|
|
bar3.insert(icon7);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Mobile step (dots)');
|
|
}),
|
|
this.addEntry(dt + 'mobile step progress bar', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#BDBDBD;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#3367D6;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Create', new mxGeometry(0, 0, 358, 56), s + 'rect;strokeColor=none;fillColor=#4285F4;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=9;verticalAlign=top;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var bar3 = new mxCell('< BACK', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#f5f5f5;resizeWidth=1;fontSize=13;fontColor=#666666;verticalAlign=middle;align=left;spacingLeft=16;');
|
|
bar3.geometry.relative = true;
|
|
bar3.geometry.offset = new mxPoint(0, -96);
|
|
bar3.vertex = true;
|
|
bg1.insert(bar3);
|
|
var bar4 = new mxCell('NEXT >', new mxGeometry(1, 0, 100, 48), s + 'rect;strokeColor=none;fillColor=none;fontSize=13;fontColor=#666666;verticalAlign=middle;align=right;spacingRight=16;');
|
|
bar4.geometry.relative = true;
|
|
bar4.geometry.offset = new mxPoint(-100, 0);
|
|
bar4.vertex = true;
|
|
bar3.insert(bar4);
|
|
var icon2 = new mxCell('', new mxGeometry(0.5, 0.5, 112, 10), s2 + 'progressBar;strokeColor=#4285F4;strokeWidth=3;dx1=0.7;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-66, -5);
|
|
icon2.vertex = true;
|
|
bar3.insert(icon2);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Mobile step (progress bar)');
|
|
}),
|
|
this.addEntry(dt + 'editable steps optional', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 704, 72), 'shape=rect;strokeColor=none;fillColor=#ffffff;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('Select campaign settings', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#4285F4;fontColor=#000000;labelPosition=right;align=left;spacingLeft=10;fontStyle=1;');
|
|
part1.vertex = true;
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(24, 24);
|
|
bg.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(0.5, 0.5, 10, 10), s2 + 'edit;strokeColor=none;fillColor=#ffffff;');
|
|
part2.vertex = true;
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-5, -5);
|
|
part1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(0, 0, 90, 10), 'shape=line;strokeColor=#b3b3b3;');
|
|
part3.vertex = true;
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(206, 31);
|
|
bg.insert(part3);
|
|
var part4 = new mxCell('Create an ad group<div><font style="font-size: 11px" color="#b3b3b3">Optional</font></div>', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontColor=#000000;labelPosition=right;align=left;spacingLeft=10;html=1;');
|
|
part4.vertex = true;
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(306, 24);
|
|
bg.insert(part4);
|
|
var part5 = new mxCell('', new mxGeometry(0.5, 0.5, 12, 10), s2 + 'check;strokeColor=#ffffff;strokeWidth=2;');
|
|
part5.vertex = true;
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(-6, -5);
|
|
part4.insert(part5);
|
|
var part6 = new mxCell('', new mxGeometry(0, 0, 90, 10), 'shape=line;strokeColor=#b3b3b3;');
|
|
part6.vertex = true;
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(460, 31);
|
|
bg.insert(part6);
|
|
var part7 = new mxCell('3', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;');
|
|
part7.vertex = true;
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(568, 24);
|
|
bg.insert(part7);
|
|
var part8 = new mxCell('Create an ad', new mxGeometry(0, 0, 110, 24), 'shape=rect;strokeColor=none;fillColor=none;align=left;spacingLeft=10;fontColor=#808080;');
|
|
part8.vertex = true;
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(592, 24);
|
|
bg.insert(part8);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Editable Steps (with optional steps)');
|
|
}),
|
|
this.addEntry(dt + 'noneditable non editable steps optional', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 704, 72), 'shape=rect;strokeColor=none;fillColor=#ffffff;');
|
|
bg.vertex = true;
|
|
var part1 = new mxCell('Select campaign settings', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#4285F4;fontColor=#000000;labelPosition=right;align=left;spacingLeft=10;');
|
|
part1.vertex = true;
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(24, 24);
|
|
bg.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(0.5, 0.5, 12, 10), s2 + 'check;strokeColor=#ffffff;strokeWidth=2;');
|
|
part2.vertex = true;
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-6, -5);
|
|
part1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(0, 0, 90, 10), 'shape=line;strokeColor=#b3b3b3;');
|
|
part3.vertex = true;
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(206, 31);
|
|
bg.insert(part3);
|
|
var part4 = new mxCell('2', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#4285F4;fontColor=#ffffff;');
|
|
part4.vertex = true;
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(306, 24);
|
|
bg.insert(part4);
|
|
var part5 = new mxCell('Create an ad group<div><font color="#b3b3b3" style="font-weight: normal ; font-size: 11px">Optional</font></div>', new mxGeometry(0, 0, 200, 24), 'shape=rect;strokeColor=none;fillColor=none;fontColor=#000000;align=left;spacingLeft=10;fontStyle=1;html=1;');
|
|
part5.vertex = true;
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(330, 24);
|
|
bg.insert(part5);
|
|
var part6 = new mxCell('', new mxGeometry(0, 0, 90, 10), 'shape=line;strokeColor=#b3b3b3;');
|
|
part6.vertex = true;
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(460, 31);
|
|
bg.insert(part6);
|
|
var part7 = new mxCell('3', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;');
|
|
part7.vertex = true;
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(568, 24);
|
|
bg.insert(part7);
|
|
var part8 = new mxCell('Create an ad', new mxGeometry(0, 0, 110, 24), 'shape=rect;strokeColor=none;fillColor=none;align=left;spacingLeft=10;fontColor=#808080;');
|
|
part8.vertex = true;
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(592, 24);
|
|
bg.insert(part8);
|
|
return sb.createVertexTemplateFromCells([bg], bg.geometry.width, bg.geometry.height, 'Non-editable Steps (with optional steps)');
|
|
}),
|
|
this.addEntry(dt + 'mobile vertical stepper', function()
|
|
{
|
|
var bg = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#3367D6;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Create', new mxGeometry(0, 0, 358, 56), s + 'rect;strokeColor=none;fillColor=#4285F4;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=9;verticalAlign=top;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var part1 = new mxCell('Select an app\n<font color="#999999">Summarize if needed</font>', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#4285F4;fontColor=#000000;labelPosition=right;align=left;spacingLeft=10;html=1;');
|
|
part1.vertex = true;
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(24, 102);
|
|
bg.insert(part1);
|
|
var part2 = new mxCell('', new mxGeometry(0.5, 0.5, 12, 10), s2 + 'check;strokeColor=#ffffff;strokeWidth=2;');
|
|
part2.vertex = true;
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(-6, -5);
|
|
part1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(0, 0, 10, 30), 'shape=line;direction=north;strokeColor=#b3b3b3;');
|
|
part3.vertex = true;
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(31, 134);
|
|
bg.insert(part3);
|
|
var part4 = new mxCell('2', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#4285F4;fontColor=#ffffff;');
|
|
part4.vertex = true;
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(24, 172);
|
|
bg.insert(part4);
|
|
var part5 = new mxCell('Configure analytics for this app', new mxGeometry(0, 0, 200, 24), 'shape=rect;strokeColor=none;fillColor=none;align=left;fontStyle=1;');
|
|
part5.vertex = true;
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(56, 172);
|
|
bg.insert(part5);
|
|
var part6 = new mxCell('', new mxGeometry(0, 0, 10, 278), 'shape=line;direction=north;strokeColor=#b3b3b3;');
|
|
part6.vertex = true;
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(31, 204);
|
|
bg.insert(part6);
|
|
var part7 = new mxCell('', new mxGeometry(0, 0, 276, 178), 'shape=rect;strokeColor=none;fillColor=#bdbdbd;');
|
|
part7.vertex = true;
|
|
part7.geometry.relative = true;
|
|
part7.geometry.offset = new mxPoint(60, 208);
|
|
bg.insert(part7);
|
|
var part8 = new mxCell('CONTINUE', new mxGeometry(0, 0, 102, 36), 'shape=rect;strokeColor=none;fillColor=#4285f4;fontColor=#ffffff;');
|
|
part8.vertex = true;
|
|
part8.geometry.relative = true;
|
|
part8.geometry.offset = new mxPoint(60, 400);
|
|
bg.insert(part8);
|
|
var part9 = new mxCell('CANCEL', new mxGeometry(0, 0, 102, 36), 'shape=rect;strokeColor=none;fillColor=#ffffff;fontColor=#808080;');
|
|
part9.vertex = true;
|
|
part9.geometry.relative = true;
|
|
part9.geometry.offset = new mxPoint(172, 400);
|
|
bg.insert(part9);
|
|
var part10 = new mxCell('3', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;');
|
|
part10.vertex = true;
|
|
part10.geometry.relative = true;
|
|
part10.geometry.offset = new mxPoint(24, 488);
|
|
bg.insert(part10);
|
|
var part11 = new mxCell('Select an ad format and name ad unit', new mxGeometry(0, 0, 200, 24), 'shape=rect;strokeColor=none;fillColor=none;align=left;fontColor=#4d4d4d;');
|
|
part11.vertex = true;
|
|
part11.geometry.relative = true;
|
|
part11.geometry.offset = new mxPoint(56, 488);
|
|
bg.insert(part11);
|
|
var part12 = new mxCell('4', new mxGeometry(0, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;');
|
|
part12.vertex = true;
|
|
part12.geometry.relative = true;
|
|
part12.geometry.offset = new mxPoint(24, 542);
|
|
bg.insert(part12);
|
|
var part13 = new mxCell('View setup instructions', new mxGeometry(0, 0, 200, 24), 'shape=rect;strokeColor=none;fillColor=none;align=left;fontColor=#4d4d4d;');
|
|
part13.vertex = true;
|
|
part13.geometry.relative = true;
|
|
part13.geometry.offset = new mxPoint(56, 542);
|
|
bg.insert(part13);
|
|
var part14 = new mxCell('', new mxGeometry(0, 0, 10, 20), 'shape=line;direction=north;strokeColor=#b3b3b3;');
|
|
part14.vertex = true;
|
|
part14.geometry.relative = true;
|
|
part14.geometry.offset = new mxPoint(31, 516);
|
|
bg.insert(part14);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg], 358, 642, 'Mobile vertical stepper');
|
|
}),
|
|
this.addEntry(dt + 'stepper alternative label placing', function()
|
|
{
|
|
var part1 = new mxCell('1', new mxGeometry(38, 0, 24, 24), 'shape=ellipse;fontSize=12;strokeColor=none;fillColor=#4285F4;fontColor=#ffffff;align=center;verticalAlign=middle;');
|
|
part1.vertex = true;
|
|
var part2 = new mxCell('Ad unit details', new mxGeometry(0, 30, 100, 20), 'shape=rect;fontColor=#4d4d4dlfontSize=13;strokeColor=none;fillColor=none;');
|
|
part2.vertex = true;
|
|
var part3 = new mxCell('', new mxGeometry(70, 7, 110, 10), 'shape=line;strokeColor=#b3b3b3;');
|
|
part3.vertex = true;
|
|
var part4 = new mxCell('2', new mxGeometry(190, 0, 24, 24), 'shape=ellipse;fontSize=12;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;align=center;verticalAlign=middle;');
|
|
part4.vertex = true;
|
|
var part5 = new mxCell('Ad sizes', new mxGeometry(152, 30, 100, 20), 'shape=rect;fontColor=#4d4d4dlfontSize=13;strokeColor=none;fillColor=none;');
|
|
part5.vertex = true;
|
|
var part6 = new mxCell('', new mxGeometry(222, 7, 110, 10), 'shape=line;strokeColor=#b3b3b3;');
|
|
part6.vertex = true;
|
|
var part7 = new mxCell('3', new mxGeometry(342, 0, 24, 24), 'shape=ellipse;fontSize=12;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;');
|
|
part7.vertex = true;
|
|
var part8 = new mxCell('Create an ad', new mxGeometry(304, 30, 100, 20), 'shape=rect;fontColor=#4d4d4dlfontSize=13;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;');
|
|
part8.vertex = true;
|
|
return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, part8], 404, 50, 'Stepper with alternative label placing');
|
|
}),
|
|
this.addEntry(dt + 'stepper alternative label placing optional', function()
|
|
{
|
|
var part1 = new mxCell('1', new mxGeometry(38, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#4285F4;fontColor=#ffffff;fontSize=12;align=center;verticalAlign=middle;');
|
|
part1.vertex = true;
|
|
var part2 = new mxCell('Ad unit details', new mxGeometry(0, 30, 100, 20), 'shape=rect;fontColor=#4d4d4dlfontSize=13;strokeColor=none;fillColor=none;');
|
|
part2.vertex = true;
|
|
var part3 = new mxCell('', new mxGeometry(70, 7, 110, 10), 'shape=line;strokeColor=#b3b3b3;');
|
|
part3.vertex = true;
|
|
var part4 = new mxCell('2', new mxGeometry(190, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontColor=#ffffff;fontSize=12;align=center;verticalAlign=middle;');
|
|
part4.vertex = true;
|
|
var part5 = new mxCell('Ad sizes\n<font style="font-size: 11px" color="#b3b3b3">optional</font>', new mxGeometry(152, 30, 100, 20), 'shape=rect;strokeColor=none;fillColor=none;html=1;verticalAlign=top;fontColor=#4d4d4dlfontSize=13;spacingTop=-4;');
|
|
part5.vertex = true;
|
|
var part6 = new mxCell('', new mxGeometry(222, 7, 110, 10), 'shape=line;strokeColor=#b3b3b3;');
|
|
part6.vertex = true;
|
|
var part7 = new mxCell('3', new mxGeometry(342, 0, 24, 24), 'shape=ellipse;strokeColor=none;fillColor=#9e9e9e;fontSize=12;fontColor=#ffffff;');
|
|
part7.vertex = true;
|
|
var part8 = new mxCell('Create an ad', new mxGeometry(304, 30, 100, 20), 'shape=rect;fontColor=#4d4d4dlfontSize=13;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;');
|
|
part8.vertex = true;
|
|
return sb.createVertexTemplateFromCells([part1, part2, part3, part4, part5, part6, part7, part8], 404, 50, 'Stepper with alternative optional label placing');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlSteppers', 'GMDL / Steppers', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLTabsPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;shape=";
|
|
var s2 = "dashed=0;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library tab ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'fixed tab bar', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#00A0B4;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Page title', new mxGeometry(0, 0, 358, 104), s + 'rect;strokeColor=none;fillColor=#00BCD4;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=9;verticalAlign=top;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var text2 = new mxCell('ITEM ONE', new mxGeometry(0, 1, 119, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, -48);
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var text3 = new mxCell('ITEM TWO', new mxGeometry(0.33, 1, 120, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, -48);
|
|
text3.vertex = true;
|
|
bar1.insert(text3);
|
|
var text4 = new mxCell('ITEM THREE', new mxGeometry(0.67, 1, 119, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, -48);
|
|
text4.vertex = true;
|
|
bar1.insert(text4);
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 119, 4), s + 'rect;strokeColor=none;fillColor=#F1FB8F;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -3);
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, 20);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Fixed tab bar');
|
|
}),
|
|
this.addEntry(dt + 'fixed tab bar', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#00A0B4;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Page title', new mxGeometry(0, 0, 358, 160), s + 'rect;strokeColor=none;fillColor=#00BCD4;resizeWidth=1;fontSize=34;fontColor=#FFFFFF;spacingTop=-14;verticalAlign=middle;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var text2 = new mxCell('ITEM ONE', new mxGeometry(0, 1, 119, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, -48);
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var text3 = new mxCell('ITEM TWO', new mxGeometry(0.33, 1, 120, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, -48);
|
|
text3.vertex = true;
|
|
bar1.insert(text3);
|
|
var text4 = new mxCell('ITEM THREE', new mxGeometry(0.67, 1, 119, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, -48);
|
|
text4.vertex = true;
|
|
bar1.insert(text4);
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 119, 4), s + 'rect;strokeColor=none;fillColor=#F1FB8F;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -3);
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, 20);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Fixed tab bar');
|
|
}),
|
|
this.addEntry(dt + 'fixed tab bar', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var bar1 = new mxCell('', new mxGeometry(0, 0, 358, 48), s + 'rect;strokeColor=none;fillColor=#00BCD4;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var text2 = new mxCell('ITEM ONE', new mxGeometry(0, 1, 119, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, -48);
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var text3 = new mxCell('ITEM TWO', new mxGeometry(0.33, 1, 120, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, -48);
|
|
text3.vertex = true;
|
|
bar1.insert(text3);
|
|
var text4 = new mxCell('ITEM THREE', new mxGeometry(0.67, 1, 119, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, -48);
|
|
text4.vertex = true;
|
|
bar1.insert(text4);
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 119, 4), s + 'rect;strokeColor=none;fillColor=#F1FB8F;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -3);
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Fixed tab bar');
|
|
}),
|
|
this.addEntry(dt + 'fixed tab bar', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#00A0B4;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('', new mxGeometry(0, 0, 358, 104), s + 'rect;strokeColor=none;fillColor=#00BCD4;resizeWidth=1;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var part1 = new mxCell('Search People & Places', new mxGeometry(0, 0, 358, 64), s2 + 'marginRect;rectMargin=8;strokeColor=none;fillColor=#ffffff;shadow=1;fontColor=#CCCCCC;fontSize=14;align=left;spacingLeft=72;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 16), s2 + 'search;strokeColor=#ADADAD;fillColor=none;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(28, -8);
|
|
icon1.vertex = true;
|
|
part1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 10, 16), s2 + 'voice;strokeColor=#ADADAD;fillColor=#ADADAD;strokeWidth=2;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-40, -8);
|
|
icon2.vertex = true;
|
|
part1.insert(icon2);
|
|
var text2 = new mxCell('ITEM ONE', new mxGeometry(0, 1, 119, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, -48);
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var text3 = new mxCell('ITEM TWO', new mxGeometry(0.33, 1, 120, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, -48);
|
|
text3.vertex = true;
|
|
bar1.insert(text3);
|
|
var text4 = new mxCell('ITEM THREE', new mxGeometry(0.67, 1, 119, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, -48);
|
|
text4.vertex = true;
|
|
bar1.insert(text4);
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 119, 4), s + 'rect;strokeColor=none;fillColor=#F1FB8F;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -3);
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Fixed tab bar');
|
|
}),
|
|
this.addEntry(dt + 'scrollable tab bar', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#00A0B4;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Page title', new mxGeometry(0, 0, 358, 104), s + 'rect;strokeColor=none;fillColor=#00BCD4;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=9;verticalAlign=top;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var text2 = new mxCell('ITEM ONE', new mxGeometry(0.1899, 1, 90, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, -48);
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var text3 = new mxCell('ITEM TWO', new mxGeometry(0.4413, 1, 90, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, -48);
|
|
text3.vertex = true;
|
|
bar1.insert(text3);
|
|
var text4 = new mxCell('THE THIRD', new mxGeometry(0.6927, 1, 90, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, -48);
|
|
text4.vertex = true;
|
|
bar1.insert(text4);
|
|
var text5 = new mxCell('FO', new mxGeometry(1, 1, 20, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(-20, -48);
|
|
text5.vertex = true;
|
|
bar1.insert(text5);
|
|
var part1 = new mxCell('', new mxGeometry(0.1899, 1, 90, 4), s + 'rect;strokeColor=none;fillColor=#F1FB8F;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -3);
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, 20);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Scrollable tab bar');
|
|
}),
|
|
this.addEntry(dt + 'scrollable tab bar', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#757575;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Page title', new mxGeometry(0, 0, 358, 104), s + 'rect;strokeColor=none;fillColor=#FAFAFA;resizeWidth=1;fontSize=20;fontColor=#000000;spacingTop=9;verticalAlign=top;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#757575;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var text2 = new mxCell('ITEM ONE', new mxGeometry(0, 1, 119, 48), 'text;fontSize=13;fontColor=#01BCD4;verticalAlign=middle;align=center;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, -48);
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var text3 = new mxCell('ITEM TWO', new mxGeometry(0.33, 1, 120, 48), 'text;fontSize=13;fontColor=#757575;verticalAlign=middle;align=center;textOpacity=80;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, -48);
|
|
text3.vertex = true;
|
|
bar1.insert(text3);
|
|
var text4 = new mxCell('ITEM THREE', new mxGeometry(0.67, 1, 119, 48), 'text;fontSize=13;fontColor=#757575;verticalAlign=middle;align=center;textOpacity=80;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, -48);
|
|
text4.vertex = true;
|
|
bar1.insert(text4);
|
|
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 119, 4), s + 'rect;strokeColor=none;fillColor=#01BCD4;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -3);
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#757575;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#757575;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, 20);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Scrollable tab bar');
|
|
}),
|
|
this.addEntry(dt + 'fixed tab bar icons', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#00A0B4;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Page title', new mxGeometry(0, 0, 358, 128), s + 'rect;strokeColor=none;fillColor=#00BCD4;resizeWidth=1;fontSize=20;fontColor=#FFFFFF;spacingTop=9;verticalAlign=top;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon2 = new mxCell('RECENTS', new mxGeometry(0.1648, 1, 18, 18), s2 + 'telephone;fontSize=13;fontColor=#FFFFFF;verticalAlign=top;align=center;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-9, -48);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var icon3 = new mxCell('FAVORITES', new mxGeometry(0.5, 1, 18, 16), s2 + 'heart;fontSize=12;fontColor=#FFFFFF;verticalAlign=top;align=center;textOpacity=80;strokeColor=none;labelPosition=center;verticalLabelPosition=bottom;opacity=70;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-9, -47);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('NEARBY', new mxGeometry(0.8268, 1, 18, 20), s2 + 'chat;fontSize=12;fontColor=#FFFFFF;verticalAlign=top;align=center;textOpacity=80;strokeColor=none;opacity=70;labelPosition=center;verticalLabelPosition=bottom;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-9, -51);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 119, 4), s + 'rect;strokeColor=none;fillColor=#F1FB8F;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -3);
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, 20);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Fixed tab bar with icons');
|
|
}),
|
|
this.addEntry(dt + 'fixed tab bar icons', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 358, 642), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('12:30', new mxGeometry(0, 0, 358, 24), s + 'rect;align=right;fillColor=#757575;strokeColor=none;fontColor=#FFFFFF;spacingRight=4;spacingTop=1;fontStyle=0;fontSize=13;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var topBarIcons = new mxCell('', new mxGeometry(1, 0.5, 46, 14), s2 + 'top_bar;strokeColor=none;');
|
|
topBarIcons.geometry.relative = true;
|
|
topBarIcons.geometry.offset = new mxPoint(-92, -7);
|
|
topBarIcons.vertex = true;
|
|
topBar.insert(topBarIcons);
|
|
var bar1 = new mxCell('Page title', new mxGeometry(0, 0, 358, 108), s + 'rect;strokeColor=none;fillColor=#FAFAFA;resizeWidth=1;fontSize=20;fontColor=#000000;spacingTop=9;verticalAlign=top;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 24);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#666666;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(0.1648, 1, 18, 18), s2 + 'telephone;strokeColor=none;fillColor=#00B9D2;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-9, -28);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(0.5, 1, 18, 16), s2 + 'heart;strokeColor=none;fillColor=#666666;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-9, -27);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(0.8268, 1, 18, 20), s2 + 'chat;strokeColor=none;fillColor=#666666;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-9, -31);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 119, 4), s + 'rect;strokeColor=none;fillColor=#00B9D2;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, -3);
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#666666;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-65, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#666666;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-24, 20);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
var bar12 = new mxCell('', new mxGeometry(0, 1, 358, 48), s + 'rect;strokeColor=none;fillColor=#000000;resizeWidth=1;');
|
|
bar12.geometry.relative = true;
|
|
bar12.geometry.offset = new mxPoint(0, -48);
|
|
bar12.vertex = true;
|
|
bg1.insert(bar12);
|
|
var icon16 = new mxCell('', new mxGeometry(0.25, 0.5, 14, 14), s2 + 'back;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon16.geometry.relative = true;
|
|
icon16.geometry.offset = new mxPoint(-7, -7);
|
|
icon16.vertex = true;
|
|
bar12.insert(icon16);
|
|
var icon17 = new mxCell('', new mxGeometry(0.5, 0.5, 14, 14), 'shape=ellipse;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon17.geometry.relative = true;
|
|
icon17.geometry.offset = new mxPoint(-7, -7);
|
|
icon17.vertex = true;
|
|
bar12.insert(icon17);
|
|
var icon18 = new mxCell('', new mxGeometry(0.75, 0.5, 14, 14), 'shape=rect;strokeColor=#ffffff;fillColor=#000000;strokeWidth=2;');
|
|
icon18.geometry.relative = true;
|
|
icon18.geometry.offset = new mxPoint(-7, -7);
|
|
icon18.vertex = true;
|
|
bar12.insert(icon18);
|
|
return sb.createVertexTemplateFromCells([bg1], 358, 642, 'Fixed tab bar with icons');
|
|
}),
|
|
this.addEntry(dt + 'desktop tab bar', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 758, 152), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('', new mxGeometry(0, 0, 758, 32), s + 'rect;fillColor=#00A0B4;strokeColor=none;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 0, 12, 12), s2 + 'x;strokeColor=#ABDFE6;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-27, 11);
|
|
icon1.vertex = true;
|
|
topBar.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0, 13, 10), 'shape=rect;strokeColor=#ABDFE6;strokeWidth=2;fillColor=none;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-59, 13);
|
|
icon2.vertex = true;
|
|
topBar.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 14, 2), 'shape=line;strokeColor=#ABDFE6;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-91, 21);
|
|
icon3.vertex = true;
|
|
topBar.insert(icon3);
|
|
var bar1 = new mxCell('Page title', new mxGeometry(0, 0, 758, 120), s + 'rect;strokeColor=none;fillColor=#00BCD4;resizeWidth=1;resizeHeight=1;fontSize=20;fontColor=#FFFFFF;spacingTop=9;verticalAlign=top;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 32);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var text2 = new mxCell('ITEM ONE', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(68, -48);
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var text3 = new mxCell('ITEM TWO', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(174, -48);
|
|
text3.vertex = true;
|
|
bar1.insert(text3);
|
|
var text4 = new mxCell('ITEM THREE', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(280, -48);
|
|
text4.vertex = true;
|
|
bar1.insert(text4);
|
|
var text5 = new mxCell('ITEM FOUR', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(386, -48);
|
|
text5.vertex = true;
|
|
bar1.insert(text5);
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 106, 4), s + 'rect;strokeColor=none;fillColor=#F1FB8F;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(68, -3);
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-75, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-28, 20);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
return sb.createVertexTemplateFromCells([bg1], 758, 152, 'Desktop tab bar');
|
|
}),
|
|
this.addEntry(dt + 'desktop tab bar', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 758, 152), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('', new mxGeometry(0, 0, 758, 32), s + 'rect;fillColor=#00A0B4;strokeColor=none;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 0, 12, 12), s2 + 'x;strokeColor=#ABDFE6;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-27, 11);
|
|
icon1.vertex = true;
|
|
topBar.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0, 13, 10), 'shape=rect;strokeColor=#ABDFE6;strokeWidth=2;fillColor=none;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-59, 13);
|
|
icon2.vertex = true;
|
|
topBar.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 14, 2), 'shape=line;strokeColor=#ABDFE6;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-91, 21);
|
|
icon3.vertex = true;
|
|
topBar.insert(icon3);
|
|
var bar1 = new mxCell('Page title', new mxGeometry(0, 0, 758, 120), s + 'rect;strokeColor=none;fillColor=#00BCD4;resizeWidth=1;resizeHeight=1;fontSize=20;fontColor=#FFFFFF;spacingTop=9;verticalAlign=top;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 32);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var text2 = new mxCell('WEB', new mxGeometry(0, 1, 74, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(68, -48);
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var text3 = new mxCell('SHOPPING', new mxGeometry(0, 1, 108, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(142, -48);
|
|
text3.vertex = true;
|
|
bar1.insert(text3);
|
|
var text4 = new mxCell('VIDEOS', new mxGeometry(0, 1, 98, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(250, -48);
|
|
text4.vertex = true;
|
|
bar1.insert(text4);
|
|
var text5 = new mxCell('IMAGES', new mxGeometry(0, 1, 74, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(348, -48);
|
|
text5.vertex = true;
|
|
bar1.insert(text5);
|
|
var text6 = new mxCell('NEWS', new mxGeometry(0, 1, 86, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(422, -48);
|
|
text6.vertex = true;
|
|
bar1.insert(text6);
|
|
var text7 = new mxCell('MORE', new mxGeometry(0, 1, 74, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(508, -48);
|
|
text7.vertex = true;
|
|
bar1.insert(text7);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), s2 + 'triangle;strokeColor=none;fillColor=#ffffff;opacity=70;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-10, -3);
|
|
icon2.vertex = true;
|
|
text7.insert(icon2);
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 72, 4), s + 'rect;strokeColor=none;fillColor=#F1FB8F;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(68, -3);
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-75, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-28, 20);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
return sb.createVertexTemplateFromCells([bg1], 758, 152, 'Desktop tab bar');
|
|
}),
|
|
this.addEntry(dt + 'desktop tab bar overflow', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 758, 152), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('', new mxGeometry(0, 0, 758, 32), s + 'rect;fillColor=#00A0B4;strokeColor=none;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 0, 12, 12), s2 + 'x;strokeColor=#ABDFE6;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-27, 11);
|
|
icon1.vertex = true;
|
|
topBar.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0, 13, 10), 'shape=rect;strokeColor=#ABDFE6;strokeWidth=2;fillColor=none;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-59, 13);
|
|
icon2.vertex = true;
|
|
topBar.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 14, 2), 'shape=line;strokeColor=#ABDFE6;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-91, 21);
|
|
icon3.vertex = true;
|
|
topBar.insert(icon3);
|
|
var bar1 = new mxCell('Page title', new mxGeometry(0, 0, 758, 120), s + 'rect;strokeColor=none;fillColor=#00BCD4;resizeWidth=1;resizeHeight=1;fontSize=20;fontColor=#FFFFFF;spacingTop=9;verticalAlign=top;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 32);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var text2 = new mxCell('ITEM ONE', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(68, -48);
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var text3 = new mxCell('ITEM TWO', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(174, -48);
|
|
text3.vertex = true;
|
|
bar1.insert(text3);
|
|
var text4 = new mxCell('ITEM THREE', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(280, -48);
|
|
text4.vertex = true;
|
|
bar1.insert(text4);
|
|
var text5 = new mxCell('ITEM FOUR', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(386, -48);
|
|
text5.vertex = true;
|
|
bar1.insert(text5);
|
|
var text6 = new mxCell('ITEM FIVE', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(492, -48);
|
|
text6.vertex = true;
|
|
bar1.insert(text6);
|
|
var text7 = new mxCell('ITEM SIX', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(598, -48);
|
|
text7.vertex = true;
|
|
bar1.insert(text7);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 1, 6, 12), s2 + 'up;strokeColor=#ffffff;direction=south;strokeWidth=2;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-42, -30);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var part1 = new mxCell('', new mxGeometry(0, 1, 106, 4), s + 'rect;strokeColor=none;fillColor=#F1FB8F;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(68, -3);
|
|
part1.vertex = true;
|
|
bar1.insert(part1);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-75, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-28, 20);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
return sb.createVertexTemplateFromCells([bg1], 758, 152, 'Desktop tab bar with overflow');
|
|
}),
|
|
this.addEntry(dt + 'desktop tab bar overflow scrolled', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 758, 152), s + 'rect;fillColor=#ffffff;strokeColor=none;');
|
|
bg1.vertex = true;
|
|
var topBar = new mxCell('', new mxGeometry(0, 0, 758, 32), s + 'rect;fillColor=#00A0B4;strokeColor=none;resizeWidth=1;');
|
|
topBar.geometry.relative = true;
|
|
topBar.vertex = true;
|
|
bg1.insert(topBar);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 0, 12, 12), s2 + 'x;strokeColor=#ABDFE6;strokeWidth=2;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-27, 11);
|
|
icon1.vertex = true;
|
|
topBar.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0, 13, 10), 'shape=rect;strokeColor=#ABDFE6;strokeWidth=2;fillColor=none;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-59, 13);
|
|
icon2.vertex = true;
|
|
topBar.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 14, 2), 'shape=line;strokeColor=#ABDFE6;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-91, 21);
|
|
icon3.vertex = true;
|
|
topBar.insert(icon3);
|
|
var bar1 = new mxCell('Page title', new mxGeometry(0, 0, 758, 120), s + 'rect;strokeColor=none;fillColor=#00BCD4;resizeWidth=1;resizeHeight=1;fontSize=20;fontColor=#FFFFFF;spacingTop=9;verticalAlign=top;align=left;spacingLeft=72;');
|
|
bar1.geometry.relative = true;
|
|
bar1.geometry.offset = new mxPoint(0, 32);
|
|
bar1.vertex = true;
|
|
bg1.insert(bar1);
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 24, 16), s2 + 'preferences;strokeColor=none;fillColor=#ffffff;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(16, 20);
|
|
icon1.vertex = true;
|
|
bar1.insert(icon1);
|
|
var text2 = new mxCell('ITEM SEVEN', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(68, -48);
|
|
text2.vertex = true;
|
|
bar1.insert(text2);
|
|
var text3 = new mxCell('ITEM EIGHT', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(174, -48);
|
|
text3.vertex = true;
|
|
bar1.insert(text3);
|
|
var text4 = new mxCell('ITEM NINE', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(280, -48);
|
|
text4.vertex = true;
|
|
bar1.insert(text4);
|
|
var text5 = new mxCell('ITEM TEN', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(386, -48);
|
|
text5.vertex = true;
|
|
bar1.insert(text5);
|
|
var text6 = new mxCell('ITEM ELEVEN', new mxGeometry(0, 1, 106, 48), 'text;fontSize=13;fontColor=#FFFFFF;verticalAlign=middle;align=center;textOpacity=80;');
|
|
text6.geometry.relative = true;
|
|
text6.geometry.offset = new mxPoint(492, -48);
|
|
text6.vertex = true;
|
|
bar1.insert(text6);
|
|
var icon2 = new mxCell('', new mxGeometry(0, 1, 6, 12), s2 + 'up;strokeColor=#ffffff;direction=north;strokeWidth=2;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(36, -30);
|
|
icon2.vertex = true;
|
|
bar1.insert(icon2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0, 16, 16), s2 + 'search;strokeColor=#ffffff;fillColor=none;strokeWidth=2;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-75, 20);
|
|
icon3.vertex = true;
|
|
bar1.insert(icon3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0, 5, 16), s2 + 'settings;strokeColor=none;fillColor=#ffffff;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-28, 20);
|
|
icon4.vertex = true;
|
|
bar1.insert(icon4);
|
|
return sb.createVertexTemplateFromCells([bg1], 758, 152, 'Desktop tab bar with overflow scrolled');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlTabs', 'GMDL / Tabs', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
Sidebar.prototype.addGMDLTextFieldsPalette = function(expand)
|
|
{
|
|
var s = "dashed=0;shape=";
|
|
var s2 = "dashed=0;shape=mxgraph.gmdl.";
|
|
var gn = 'mxgraph.gmdl';
|
|
var dt = 'gmdl google media design library text field ';
|
|
var sb = this;
|
|
|
|
var fns = [
|
|
this.addEntry(dt + 'single line text field', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 346, 360), s + 'rect;fillColor=#ffffff;strokeColor=#eeeeee;shadow=1;');
|
|
bg1.vertex = true;
|
|
var text1 = new mxCell('Bookmark added!', new mxGeometry(0, 0, 346, 60), 'text;verticalAlign=middle;spacing=16;fontSize=21;fontStyle=1;resizeWidth=1;');
|
|
text1.geometry.relative = true;
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var text2 = new mxCell('Name', new mxGeometry(0, 0, 346, 30), 'text;spacingLeft=16;fontColor=#808080;fontSize=13;spacingTop=6;resizeWidth=1;');
|
|
text2.geometry.relative = true;
|
|
text2.geometry.offset = new mxPoint(0, 88);
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var text3 = new mxCell('100 Days of Ice Cream', new mxGeometry(0, 0, 346, 30), 'text;fontSize=16;spacing=2;spacingLeft=16;fontStyle=0;fontColor=#000000;resizeWidth=1;');
|
|
text3.geometry.relative = true;
|
|
text3.geometry.offset = new mxPoint(0, 115);
|
|
text3.vertex = true;
|
|
bg1.insert(text3);
|
|
var part2 = new mxCell('', new mxGeometry(0.0462, 0, 314, 20), 'shape=line;strokeWidth=1;noLabel=1;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 140);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var text4 = new mxCell('Folder', new mxGeometry(0, 0, 346, 30), 'text;spacingLeft=16;fontColor=#808080;fontSize=13;spacingTop=6;resizeWidth=1;');
|
|
text4.geometry.relative = true;
|
|
text4.geometry.offset = new mxPoint(0, 166);
|
|
text4.vertex = true;
|
|
bg1.insert(text4);
|
|
var text5 = new mxCell('Bookmarks bar', new mxGeometry(0, 0, 346, 30), 'text;fontSize=16;spacing=2;spacingLeft=16;fontStyle=0;fontColor=#000000;resizeWidth=1;');
|
|
text5.geometry.relative = true;
|
|
text5.geometry.offset = new mxPoint(0, 193);
|
|
text5.vertex = true;
|
|
bg1.insert(text5);
|
|
var icon1 = new mxCell('', new mxGeometry(1, 0, 10, 5), s2 + 'triangle;strokeColor=none;fillColor=#707070;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(-26, 13);
|
|
icon1.vertex = true;
|
|
text5.insert(icon1);
|
|
var part6 = new mxCell('', new mxGeometry(0.0462, 0, 314, 20), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part6.geometry.relative = true;
|
|
part6.geometry.offset = new mxPoint(0, 218);
|
|
part6.vertex = true;
|
|
bg1.insert(part6);
|
|
var text7 = new mxCell('REMOVE', new mxGeometry(0, 1, 90, 60), 'text;fontSize=13;fontStyle=1;fontColor=#138FF2;spacingTop=0;verticalAlign=middle;align=center;');
|
|
text7.geometry.relative = true;
|
|
text7.geometry.offset = new mxPoint(0, -60);
|
|
text7.vertex = true;
|
|
bg1.insert(text7);
|
|
var text8 = new mxCell('EDIT', new mxGeometry(1, 1, 90, 60), 'text;fontSize=13;fontStyle=1;fontColor=#138FF2;spacingTop=0;verticalAlign=middle;align=center;');
|
|
text8.geometry.relative = true;
|
|
text8.geometry.offset = new mxPoint(-180, -60);
|
|
text8.vertex = true;
|
|
bg1.insert(text8);
|
|
var text9 = new mxCell('DONE', new mxGeometry(1, 1, 90, 60), 'text;fontSize=13;fontStyle=1;fontColor=#138FF2;spacingTop=0;verticalAlign=middle;align=center;');
|
|
text9.geometry.relative = true;
|
|
text9.geometry.offset = new mxPoint(-90, -60);
|
|
text9.vertex = true;
|
|
bg1.insert(text9);
|
|
return sb.createVertexTemplateFromCells([bg1], 346, 360, 'Single-line text field');
|
|
}),
|
|
this.addEntry(dt + 'single line text field normal light dark', function()
|
|
{
|
|
var text1 = new mxCell('Hint text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#808080;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 25, 346, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#eeeeee;opacity=50;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, part1], 346, 35, 'Single-line text field (normal)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field hover light dark', function()
|
|
{
|
|
var text1 = new mxCell('Hint text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#808080;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 25, 346, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#cccccc;opacity=50;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, part1], 346, 35, 'Single-line text field (hover)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field press light dark', function()
|
|
{
|
|
var text1 = new mxCell('Input text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#808080;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;opacity=50;');
|
|
text1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 25, 346, 10), s + 'line;strokeWidth=2;noLabel=1;strokeColor=#0C8CF2;opacity=50;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, part1], 346, 35, 'Single-line text field (press)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field focus light', function()
|
|
{
|
|
var text1 = new mxCell('Input text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#000000;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 25, 346, 10), s + 'line;strokeWidth=2;noLabel=1;strokeColor=#0C8CF2;opacity=50;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, part1], 346, 35, 'Single-line text field (focus, light)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field normal light', function()
|
|
{
|
|
var text1 = new mxCell('Input text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#000000;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 25, 346, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#eeeeee;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, part1], 346, 35, 'Single-line text field (normal, light)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field error light', function()
|
|
{
|
|
var text1 = new mxCell('Input text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#000000;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 25, 346, 10), s + 'line;strokeWidth=2;noLabel=1;strokeColor=#ff0000;');
|
|
part1.vertex = true;
|
|
var text2 = new mxCell('Username or Password is incorrect', new mxGeometry(0, 30, 346, 25), 'text;fontColor=#ff0000;fontSize=12;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text2.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, part1, text2], 346, 55, 'Single-line text field (error, light)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field disabled', function()
|
|
{
|
|
var text1 = new mxCell('Input text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#808080;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 25, 346, 10), 'shape=line;strokeWidth=1;noLabel=1;strokeColor=#B3B3B3;dashed=1;dashPattern=1 4;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, part1], 346, 35, 'Single-line text field (disabled)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field focus dark', function()
|
|
{
|
|
var text1 = new mxCell('Input text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#ffffff;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 25, 346, 10), s + 'line;strokeWidth=2;noLabel=1;strokeColor=#0C8CF2;opacity=50;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, part1], 346, 35, 'Single-line text field (focus, dark)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field normal dark', function()
|
|
{
|
|
var text1 = new mxCell('Input text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#999999;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 25, 346, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#cccccc;opacity=50;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, part1], 346, 35, 'Single-line text field (normal, dark)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field error dark', function()
|
|
{
|
|
var text1 = new mxCell('Input text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#ffffff;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 25, 346, 10), s + 'line;strokeWidth=2;noLabel=1;strokeColor=#ff0000;');
|
|
part1.vertex = true;
|
|
var text2 = new mxCell('Username or Password is incorrect', new mxGeometry(0, 30, 346, 25), 'text;fontColor=#ff0000;fontSize=12;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text2.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, part1, text2], 346, 55, 'Single-line text field (error, dark)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field icon normal light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 35), 'shape=rect;strokeColor=none;fillColor=none;');
|
|
bg1.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 20), s2 + 'telephone;strokeColor=none;fillColor=#666666;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(0, -10);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var text1 = new mxCell('Phone', new mxGeometry(54, 0, 168, 30), 'text;fontColor=#666666;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;textOpacity=50;');
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var part1 = new mxCell('', new mxGeometry(54, 25, 168, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#E6E6E6;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text2 = new mxCell('Mobile', new mxGeometry(252, 0, 90, 30), 'text;fontColor=#666666;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;opacity=50;');
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var part2 = new mxCell('', new mxGeometry(252, 25, 90, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#E6E6E6;');
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), s + 'triangle;noLabel=1;strokeColor=none;fillColor=#666666;direction=south;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(-14, -3);
|
|
part3.vertex = true;
|
|
text2.insert(part3);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 35, 'Single-line text field with icon (normal, light)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field icon focus light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 35), 'shape=rect;strokeColor=none;fillColor=none;');
|
|
bg1.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 20), s2 + 'telephone;strokeColor=none;fillColor=#1F9BFD;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(0, -10);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var text1 = new mxCell('650', new mxGeometry(54, 0, 168, 30), 'text;fontColor=#000000;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var part1 = new mxCell('', new mxGeometry(54, 25, 168, 10), s + 'line;strokeWidth=2;noLabel=1;strokeColor=#1F9BFD;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text2 = new mxCell('Mobile', new mxGeometry(252, 0, 90, 30), 'text;fontColor=#B3B3B3;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var part2 = new mxCell('', new mxGeometry(252, 25, 90, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#E6E6E6;');
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), s + 'triangle;noLabel=1;strokeColor=none;fillColor=#666666;direction=south;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(-14, -3);
|
|
part3.vertex = true;
|
|
text2.insert(part3);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 35, 'Single-line text field with icon (focus, light)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field icon normal light', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 35), 'shape=rect;strokeColor=none;fillColor=none;');
|
|
bg1.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 20), s2 + 'telephone;strokeColor=none;fillColor=#666666;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(0, -10);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var text1 = new mxCell('650-555-1234', new mxGeometry(54, 0, 168, 30), 'text;fontColor=#000000;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var part1 = new mxCell('', new mxGeometry(54, 25, 168, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#E6E6E6;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text2 = new mxCell('Mobile', new mxGeometry(252, 0, 90, 30), 'text;fontColor=#000000;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var part2 = new mxCell('', new mxGeometry(252, 25, 90, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#E6E6E6;');
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), s + 'triangle;noLabel=1;strokeColor=none;fillColor=#666666;direction=south;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(-14, -3);
|
|
part3.vertex = true;
|
|
text2.insert(part3);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 35, 'Single-line text field with icon (normal, light)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field icon normal dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 35), 'shape=rect;strokeColor=none;fillColor=none;');
|
|
bg1.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 20), s2 + 'telephone;strokeColor=none;fillColor=#cccccc;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(0, -10);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var text1 = new mxCell('Phone', new mxGeometry(54, 0, 168, 30), 'text;fontColor=#777777;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var part1 = new mxCell('', new mxGeometry(54, 25, 168, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#555555;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text2 = new mxCell('Mobile', new mxGeometry(252, 0, 90, 30), 'text;fontColor=#777777;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;opacity=50;');
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var part2 = new mxCell('', new mxGeometry(252, 25, 90, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#555555;');
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), s + 'triangle;noLabel=1;strokeColor=none;fillColor=#cccccc;direction=south;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(-14, -3);
|
|
part3.vertex = true;
|
|
text2.insert(part3);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 35, 'Single-line text field with icon (normal, dark)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field icon focus dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 35), 'shape=rect;strokeColor=none;fillColor=none;');
|
|
bg1.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 20), s2 + 'telephone;strokeColor=none;fillColor=#1F9BFD;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(0, -10);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var text1 = new mxCell('650', new mxGeometry(54, 0, 168, 30), 'text;fontColor=#ffffff;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var part1 = new mxCell('', new mxGeometry(54, 25, 168, 10), s + 'line;strokeWidth=2;noLabel=1;strokeColor=#1F9BFD;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text2 = new mxCell('Mobile', new mxGeometry(252, 0, 90, 30), 'text;fontColor=#777777;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var part2 = new mxCell('', new mxGeometry(252, 25, 90, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#555555;');
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), s + 'triangle;noLabel=1;strokeColor=none;fillColor=#cccccc;direction=south;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(-14, -3);
|
|
part3.vertex = true;
|
|
text2.insert(part3);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 35, 'Single-line text field with icon (focus, dark)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field icon normal dark', function()
|
|
{
|
|
var bg1 = new mxCell('', new mxGeometry(0, 0, 342, 35), 'shape=rect;strokeColor=none;fillColor=none;');
|
|
bg1.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 20), s2 + 'telephone;strokeColor=none;fillColor=#cccccc;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(0, -10);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var text1 = new mxCell('650-555-1234', new mxGeometry(54, 0, 168, 30), 'text;fontColor=#ffffff;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
bg1.insert(text1);
|
|
var part1 = new mxCell('', new mxGeometry(54, 25, 168, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#555555;');
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var text2 = new mxCell('Mobile', new mxGeometry(252, 0, 90, 30), 'text;fontColor=#ffffff;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text2.vertex = true;
|
|
bg1.insert(text2);
|
|
var part2 = new mxCell('', new mxGeometry(252, 25, 90, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#555555;');
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('', new mxGeometry(1, 0.5, 10, 5), s + 'triangle;noLabel=1;strokeColor=none;fillColor=#cccccc;direction=south;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(-14, -3);
|
|
part3.vertex = true;
|
|
text2.insert(part3);
|
|
return sb.createVertexTemplateFromCells([bg1], 342, 35, 'Single-line text field with icon (normal, dark)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field normal light dark', function()
|
|
{
|
|
var text1 = new mxCell('Label text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#808080;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 25, 346, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#999999;opacity=80;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, part1], 346, 35, 'Single-line text field (normal)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field focus light', function()
|
|
{
|
|
var text1 = new mxCell('Label text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#1F9BFD;fontSize=12;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var text2 = new mxCell('Input text', new mxGeometry(0, 20, 346, 30), 'text;fontColor=#000000;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text2.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 45, 346, 10), s + 'line;strokeWidth=2;noLabel=1;strokeColor=#1F9BFD;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, text2, part1], 346, 55, 'Single-line text field (normal, light)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field focus light', function()
|
|
{
|
|
var text1 = new mxCell('Label text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#cccccc;fontSize=12;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var text2 = new mxCell('Input text', new mxGeometry(0, 20, 346, 30), 'text;fontColor=#000000;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text2.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 45, 346, 10), s + 'line;strokeWidth=2;noLabel=1;strokeColor=#eeeeee;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, text2, part1], 346, 55, 'Single-line text field (normal, light)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field focus light dark', function()
|
|
{
|
|
var text1 = new mxCell('Label text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#999999;fontSize=12;verticalAlign=middle;strokeColor=none;fillColor=none;textOpacity=80;');
|
|
text1.vertex = true;
|
|
var text2 = new mxCell('Input text', new mxGeometry(0, 20, 346, 30), 'text;fontColor=#999999;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;textOpacity=80;');
|
|
text2.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 45, 346, 10), 'shape=line;strokeWidth=1;noLabel=1;strokeColor=#999999;dashed=1;dashPattern=1 4;opacity=80;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, text2, part1], 346, 55, 'Single-line text field (normal)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field focus dark', function()
|
|
{
|
|
var text1 = new mxCell('Label text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#1F9BFD;fontSize=12;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var text2 = new mxCell('Input text', new mxGeometry(0, 20, 346, 30), 'text;fontColor=#ffffff;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text2.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 45, 346, 10), s + 'line;strokeWidth=2;noLabel=1;strokeColor=#1F9BFD;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, text2, part1], 346, 55, 'Single-line text field (normal, dark)');
|
|
}),
|
|
this.addEntry(dt + 'single line text field focus dark', function()
|
|
{
|
|
var text1 = new mxCell('Label text', new mxGeometry(0, 0, 346, 30), 'text;fontColor=#999999;fontSize=12;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text1.vertex = true;
|
|
var text2 = new mxCell('Input text', new mxGeometry(0, 20, 346, 30), 'text;fontColor=#cccccc;fontSize=16;verticalAlign=middle;strokeColor=none;fillColor=none;');
|
|
text2.vertex = true;
|
|
var part1 = new mxCell('', new mxGeometry(0, 45, 346, 10), s + 'line;strokeWidth=1;noLabel=1;strokeColor=#999999;');
|
|
part1.vertex = true;
|
|
return sb.createVertexTemplateFromCells([text1, text2, part1], 346, 55, 'Single-line text field (normal, dark)');
|
|
}),
|
|
this.addEntry(dt + 'full text field', function()
|
|
{
|
|
var bg1 = new mxCell('Search', new mxGeometry(0, 0, 362, 56), s + 'rect;shadow=1;strokeColor=#eeeeee;strokeWidth=1;fillColor=#ffffff;fontSize=22;fontColor=#CCCCCC;align=left;spacingLeft=65;');
|
|
bg1.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 16), s2 + 'left;strokeWidth=2;strokeColor=#666666;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(22, -8);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 14, 14), s2 + 'x;strokeWidth=2;strokeColor=#666666;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-35, -7);
|
|
icon2.vertex = true;
|
|
bg1.insert(icon2);
|
|
return sb.createVertexTemplateFromCells([bg1], 362, 56, 'Full text field');
|
|
}),
|
|
this.addEntry(dt + 'full text field', function()
|
|
{
|
|
var bg1 = new mxCell('a', new mxGeometry(0, 0, 362, 294), s + 'rect;shadow=1;strokeColor=#eeeeee;strokeWidth=1;fillColor=#ffffff;fontSize=22;fontColor=#000000;align=left;spacingLeft=65;dashPattern=1 4;verticalAlign=top;spacingTop=6;');
|
|
bg1.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'left;strokeWidth=2;strokeColor=#666666;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(22, 20);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0, 14, 14), s2 + 'x;strokeWidth=2;strokeColor=#666666;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-35, 22);
|
|
icon2.vertex = true;
|
|
bg1.insert(icon2);
|
|
var part1 = new mxCell('', new mxGeometry(0, 0, 362, 10), s + 'line;strokeWidth=1;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 49);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('Aaron Bennett', new mxGeometry(0, 0, 362, 60), s + 'rect;strokeColor=none;fillColor=none;align=left;fontSize=16;spacingLeft=65;html=1;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 54);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var icon3 = new mxCell('', new mxGeometry(1, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#666666;');
|
|
icon3.geometry.relative = true;
|
|
icon3.geometry.offset = new mxPoint(-60, -20);
|
|
icon3.vertex = true;
|
|
part2.insert(icon3);
|
|
var part3 = new mxCell('Abbey Christensen', new mxGeometry(0, 0, 362, 60), s + 'rect;strokeColor=none;fillColor=none;align=left;fontSize=16;spacingLeft=65;html=1;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 114);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var icon4 = new mxCell('', new mxGeometry(1, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#666666;');
|
|
icon4.geometry.relative = true;
|
|
icon4.geometry.offset = new mxPoint(-60, -20);
|
|
icon4.vertex = true;
|
|
part3.insert(icon4);
|
|
var part4 = new mxCell('Alli Connors', new mxGeometry(0, 0, 362, 60), s + 'rect;strokeColor=none;fillColor=none;align=left;fontSize=16;spacingLeft=65;html=1;resizeWidth=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, 174);
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
var icon5 = new mxCell('', new mxGeometry(1, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#666666;');
|
|
icon5.geometry.relative = true;
|
|
icon5.geometry.offset = new mxPoint(-60, -20);
|
|
icon5.vertex = true;
|
|
part4.insert(icon5);
|
|
var part5 = new mxCell('Alex Nelson', new mxGeometry(0, 0, 362, 60), s + 'rect;strokeColor=none;fillColor=none;align=left;fontSize=16;spacingLeft=65;html=1;resizeWidth=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, 234);
|
|
part5.vertex = true;
|
|
bg1.insert(part5);
|
|
var icon6 = new mxCell('', new mxGeometry(1, 0.5, 40, 40), s2 + 'user;strokeColor=none;fillColor=#666666;');
|
|
icon6.geometry.relative = true;
|
|
icon6.geometry.offset = new mxPoint(-60, -20);
|
|
icon6.vertex = true;
|
|
part5.insert(icon6);
|
|
return sb.createVertexTemplateFromCells([bg1], 362, 294, 'Full text field');
|
|
}),
|
|
this.addEntry(dt + 'inset text field', function()
|
|
{
|
|
var bg1 = new mxCell('Search', new mxGeometry(0, 0, 362, 56), s + 'rect;shadow=1;strokeColor=#eeeeee;strokeWidth=1;fillColor=#ffffff;fontSize=22;fontColor=#CCCCCC;align=left;spacingLeft=65;');
|
|
bg1.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0.5, 16, 16), s2 + 'search;strokeWidth=2;strokeColor=#666666;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(22, -8);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0.5, 12, 20), s2 + 'voice;strokeWidth=2;strokeColor=#666666;fillColor=#666666;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-34, -10);
|
|
icon2.vertex = true;
|
|
bg1.insert(icon2);
|
|
return sb.createVertexTemplateFromCells([bg1], 362, 56, 'Inset text field');
|
|
}),
|
|
this.addEntry(dt + 'focus card suggestion', function()
|
|
{
|
|
var bg1 = new mxCell('dessert', new mxGeometry(0, 0, 362, 246), s + 'rect;shadow=1;strokeColor=#eeeeee;strokeWidth=1;fillColor=#ffffff;fontSize=22;fontColor=#000000;align=left;spacingLeft=65;dashPattern=1 4;verticalAlign=top;spacingTop=6;');
|
|
bg1.vertex = true;
|
|
var icon1 = new mxCell('', new mxGeometry(0, 0, 16, 16), s2 + 'left;strokeWidth=2;strokeColor=#666666;');
|
|
icon1.geometry.relative = true;
|
|
icon1.geometry.offset = new mxPoint(22, 20);
|
|
icon1.vertex = true;
|
|
bg1.insert(icon1);
|
|
var icon2 = new mxCell('', new mxGeometry(1, 0, 14, 14), s2 + 'x;strokeWidth=2;strokeColor=#666666;');
|
|
icon2.geometry.relative = true;
|
|
icon2.geometry.offset = new mxPoint(-35, 22);
|
|
icon2.vertex = true;
|
|
bg1.insert(icon2);
|
|
var part1 = new mxCell('', new mxGeometry(0, 0, 362, 10), s + 'line;strokeWidth=1;strokeColor=#eeeeee;resizeWidth=1;');
|
|
part1.geometry.relative = true;
|
|
part1.geometry.offset = new mxPoint(0, 49);
|
|
part1.vertex = true;
|
|
bg1.insert(part1);
|
|
var part2 = new mxCell('dessert', new mxGeometry(0, 0, 362, 48), s + 'rect;strokeColor=none;fillColor=none;align=left;fontSize=16;spacingLeft=65;html=1;fontColor=#999999;resizeWidth=1;');
|
|
part2.geometry.relative = true;
|
|
part2.geometry.offset = new mxPoint(0, 54);
|
|
part2.vertex = true;
|
|
bg1.insert(part2);
|
|
var part3 = new mxCell('dessert <font color="#000000">bar</font>', new mxGeometry(0, 0, 362, 48), s + 'rect;strokeColor=none;fillColor=none;align=left;fontSize=16;spacingLeft=65;html=1;fontColor=#999999;resizeWidth=1;');
|
|
part3.geometry.relative = true;
|
|
part3.geometry.offset = new mxPoint(0, 102);
|
|
part3.vertex = true;
|
|
bg1.insert(part3);
|
|
var part4 = new mxCell('dessert <font color="#000000">shop</font>', new mxGeometry(0, 0, 362, 48), s + 'rect;strokeColor=none;fillColor=none;align=left;fontSize=16;spacingLeft=65;html=1;fontColor=#999999;resizeWidth=1;');
|
|
part4.geometry.relative = true;
|
|
part4.geometry.offset = new mxPoint(0, 150);
|
|
part4.vertex = true;
|
|
bg1.insert(part4);
|
|
var part5 = new mxCell('dessert <font color="#000000">restaurant</font>', new mxGeometry(0, 0, 362, 48), s + 'rect;strokeColor=none;fillColor=none;align=left;fontSize=16;spacingLeft=65;html=1;fontColor=#999999;resizeWidth=1;');
|
|
part5.geometry.relative = true;
|
|
part5.geometry.offset = new mxPoint(0, 198);
|
|
part5.vertex = true;
|
|
bg1.insert(part5);
|
|
return sb.createVertexTemplateFromCells([bg1], 362, 246, 'Focus card suggestions');
|
|
})
|
|
];
|
|
|
|
this.addPalette('gmdlText Fields', 'GMDL / Text Fields', expand || false, mxUtils.bind(this, function(content)
|
|
{
|
|
for (var i = 0; i < fns.length; i++)
|
|
{
|
|
content.appendChild(fns[i](content));
|
|
}
|
|
}));
|
|
};
|
|
|
|
})();
|