Skip to content

Commit

Permalink
Merge remote-tracking branch 'cindy/FLUID-4310'
Browse files Browse the repository at this point in the history
* cindy/FLUID-4310:
  FLUID-4310: removed un-necessary css.
  FLUID-4310: Modified styles to accomodate UI Options demos.
  FLUID-4310: Linked UI options demos into demo portal. Some styling improvements might be followed.
  • Loading branch information
michelled committed Jul 7, 2011
2 parents 13db839 + 196186c commit 20f09c1
Show file tree
Hide file tree
Showing 49 changed files with 247 additions and 185 deletions.
237 changes: 141 additions & 96 deletions src/webapp/demos/index.html

Large diffs are not rendered by default.

78 changes: 46 additions & 32 deletions src/webapp/demos/portal/css/portal.css
Expand Up @@ -32,12 +32,10 @@ a {
.fl-col-mixed-300 .p_framework {
padding-left:0;
padding-right:20px;
border-right:2px solid #ccc;
}
.fl-col-mixed-300 .p_integration {
padding-left:20px;
padding-right:0px;
border-left:2px solid #ccc;
}
.fl-col-mixed-300 .p_components {
margin:0 320px;
Expand All @@ -54,78 +52,82 @@ a {
}

.demo {
width:203px;
height:150px;
width:280px;
height:165px;
overflow:hidden;
border:2px solid #ccc;
padding:5px 5px 5px 78px;
padding:5px;
margin:2px;
color:#666;
float:left;
background-color:#fff;
}
/********************************************/
.comingSoon {
background:#fff url(../images/comingSoon.png) no-repeat 5px 5px;
background:#fff url(../images/comingSoon.png) no-repeat 0px 0px;
}
.layoutReorderer {
background:#fff url(../images/reorderer-layout.png) no-repeat 5px 5px;
background:#fff url(../images/reorderer-layout.png) no-repeat 0px 0px;
}
.gridReorderer {
background:#fff url(../images/reorderer-grid.png) no-repeat 5px 5px;
background:#fff url(../images/reorderer-grid.png) no-repeat 0px 0px;
}
.listReorderer {
background:#fff url(../images/reorderer-list.png) no-repeat 5px 5px;
background:#fff url(../images/reorderer-list.png) no-repeat 0px 0px;
}
.imageReorderer {
background:#fff url(../images/reorderer-image.png) no-repeat 5px 5px;
background:#fff url(../images/reorderer-image.png) no-repeat 0px 0px;
}
.progress {
background:#fff url(../images/progress.png) no-repeat 5px 5px;
background:#fff url(../images/progress.png) no-repeat 0px 0px;
}
.pager {
background:#fff url(../images/pager.png) no-repeat 5px 5px;
background:#fff url(../images/pager.png) no-repeat 0px 0px;
}
.uiOptions {
background:#fff url(../images/uiOptions.png) no-repeat 5px 5px;
background:#fff url(../images/uiOptions.png) no-repeat 0px 0px;
}
.fss {
background:#fff url(../images/fss.png) no-repeat 5px 5px;
background:#fff url(../images/fss.png) no-repeat 0px 0px;
}
.renderer {
background:#fff url(../images/renderer.png) no-repeat 5px 5px;
background:#fff url(../images/renderer.png) no-repeat 0px 0px;
}
.simpleEdit {
background:#fff url(../images/inlineEdit-simple.png) no-repeat 5px 5px;
background:#fff url(../images/inlineEdit-simple.png) no-repeat 0px 0px;
}
.richEdit {
background:#fff url(../images/inlineEdit-rich.png) no-repeat 5px 5px;
background:#fff url(../images/inlineEdit-rich.png) no-repeat 0px 0px;
}
.uploader {
background:#fff url(../images/uploader.png) no-repeat 5px 5px;
background:#fff url(../images/uploader.png) no-repeat 0px 0px;
}

/********************************************/


.demo h4 {font:normal 1.35em Arial, Helvetica, sans-serif;}
.demo a {font-size:1.1em;}
.demo .description {
font-size:.85em;
margin:0 0 0 -73px;
padding-top:30px;
zoom:1;
.demo .demoHeader {
height: 70px;
}
.demo .showcase ~ .description {
padding-top:5px;

.demo .demoHeader.fss {
height: 100px;
}

.demo .showcase {
font-size:0.85em;
.demo .demoHeader h4 {
font:bold 1.1em Arial, Helvetica, sans-serif;
margin-left:73px;
}
.demo .showcase strong {
color:#ccc;
display:block;

.demo .demoHeader a , .demo .demoHeader strong{
margin-left:73px;
font-size: .85em;
}

.demo .description {
font-size:.85em;
padding-top: 4px;
zoom:1;
}

.production, .preview, .sneak {
Expand All @@ -152,4 +154,16 @@ a {
background-color:#ccc;
}

/* FSS demo specific styles */
.demo .demoHeader.fss .fl-fss-demos {
margin-left:73px;
}

.demo .demoHeader.fss a{
margin-left:0px;
}

.demo .demoHeader.fss .fl-col-flex2 .fl-col {
width: 36%;
}

31 changes: 16 additions & 15 deletions src/webapp/demos/uiOptions/FatPanelUIOptions/demo.html
Expand Up @@ -5,21 +5,22 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fluid Demonstration Portal</title>

<link rel="stylesheet" type="text/css" href="../../framework/fss/css/fss-reset.css" />
<link rel="stylesheet" type="text/css" href="../../framework/fss/css/fss-layout.css" />
<link rel="stylesheet" type="text/css" href="../../framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="../../framework/fss/css/fss-theme-mist.css" />
<link rel="stylesheet" type="text/css" href="../portal/css/portal.css" />
<link rel="stylesheet" type="text/css" href="../portal/css/demo.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-reset-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-base-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-layout.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-mist.css" />
<link rel="stylesheet" type="text/css" href="../../portal/css/portal.css" />
<link rel="stylesheet" type="text/css" href="../../portal/css/demo.css" />


<script type="text/javascript" src="../../lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="../portal/lib/chili/jquery.chili-2.2.js"></script>
<script type="text/javascript" src="../portal/lib/chili/recipes.js"></script>
<script type="text/javascript" src="../../../lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="../../lib/chili/jquery.chili-2.2.js"></script>
<script type="text/javascript" src="../../lib/chili/recipes.js"></script>

<script type="text/javascript" src="../../lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="../../framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="../../../framework/core/js/jquery.keyboard-a11y.js"></script>

<script type="text/javascript">
ChiliBook.automatic = false;
Expand All @@ -29,18 +30,18 @@
demo.name = "uiOptions";
</script>

<script type="text/javascript" src="../portal/js/demoAssets.js"></script>
<script type="text/javascript" src="../../portal/js/demoAssets.js"></script>

</head>

<body class="fl-col-mixed-300 fl-focus">
<h1><a href="../index.html">Fluid Demonstration Portal</a></h1>
<p class="letusknow">Found a bug? Have a question? <a href="mailto:infusion-users@fluidproject.org">Let us know</a></p>
<div class="fl-col-flex2 demoContent">
<h2>User Interface Options<a href="mailto:infusion-users@fluidproject.org?subject=Broken demo: UI Options">Report broken demo</a></h2>
<h2>User Interface Options - Fat Panel<a href="mailto:infusion-users@fluidproject.org?subject=Broken demo: UI Options">Report broken demo</a></h2>
<div class="fl-col example">
<h3>Live Example</h3>
<p><strong>Instructions:</strong> Below is a webpage with sample content that can be transformed. Use the 'Edit Appearance' button to reveal the UI Options panel. The preview area is automatically updated with option customizations. Select 'Save and Apply' to apply the changes to the content and close the panel. To reset the webpage to default styles, use the 'Reset' button, then the 'Save and Apply' button.</p>
<p><strong>Instructions:</strong> Below is a webpage with sample content that can be transformed. Use the 'Show Display Preferences' link to reveal the UI Options panel. The content is automatically updated with option customizations. To reset the webpage to default styles, use the 'Reset All' link. To close the UI Options panel, use 'Hide' link.</p>
<iframe src="about:blank"></iframe>
</div>
<div class="fl-col content fl-theme-mist">
Expand Down
31 changes: 16 additions & 15 deletions src/webapp/demos/uiOptions/FullNoPreviewUIOptions/demo.html
Expand Up @@ -5,21 +5,22 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fluid Demonstration Portal</title>

<link rel="stylesheet" type="text/css" href="../../framework/fss/css/fss-reset.css" />
<link rel="stylesheet" type="text/css" href="../../framework/fss/css/fss-layout.css" />
<link rel="stylesheet" type="text/css" href="../../framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="../../framework/fss/css/fss-theme-mist.css" />
<link rel="stylesheet" type="text/css" href="../portal/css/portal.css" />
<link rel="stylesheet" type="text/css" href="../portal/css/demo.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-reset-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-base-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-layout.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-mist.css" />
<link rel="stylesheet" type="text/css" href="../../portal/css/portal.css" />
<link rel="stylesheet" type="text/css" href="../../portal/css/demo.css" />


<script type="text/javascript" src="../../lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="../portal/lib/chili/jquery.chili-2.2.js"></script>
<script type="text/javascript" src="../portal/lib/chili/recipes.js"></script>
<script type="text/javascript" src="../../../lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="../../lib/chili/jquery.chili-2.2.js"></script>
<script type="text/javascript" src="../../lib/chili/recipes.js"></script>

<script type="text/javascript" src="../../lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="../../framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="../../../framework/core/js/jquery.keyboard-a11y.js"></script>

<script type="text/javascript">
ChiliBook.automatic = false;
Expand All @@ -29,18 +30,18 @@
demo.name = "uiOptions";
</script>

<script type="text/javascript" src="../portal/js/demoAssets.js"></script>
<script type="text/javascript" src="../../portal/js/demoAssets.js"></script>

</head>

<body class="fl-col-mixed-300 fl-focus">
<h1><a href="../index.html">Fluid Demonstration Portal</a></h1>
<p class="letusknow">Found a bug? Have a question? <a href="mailto:infusion-users@fluidproject.org">Let us know</a></p>
<div class="fl-col-flex2 demoContent">
<h2>User Interface Options<a href="mailto:infusion-users@fluidproject.org?subject=Broken demo: UI Options">Report broken demo</a></h2>
<h2>User Interface Options - Full Page without Preview<a href="mailto:infusion-users@fluidproject.org?subject=Broken demo: UI Options">Report broken demo</a></h2>
<div class="fl-col example">
<h3>Live Example</h3>
<p><strong>Instructions:</strong> Below is a webpage with sample content that can be transformed. Use the 'Edit Appearance' button to reveal the UI Options panel. The preview area is automatically updated with option customizations. Select 'Save and Apply' to apply the changes to the content and close the panel. To reset the webpage to default styles, use the 'Reset' button, then the 'Save and Apply' button.</p>
<p><strong>Instructions:</strong> Below is a webpage with UI options interface that can be transformed. Select 'Save and Apply' to apply the changes to the content. To reset the webpage to default styles, use the 'Reset' button, then the 'Save and Apply' button. To cancel the reset to default styles, use the "Cancel" button.</p>
<iframe src="about:blank"></iframe>
</div>
<div class="fl-col content fl-theme-mist">
Expand Down
Expand Up @@ -52,6 +52,11 @@
<script type="text/javascript" src="../../../../components/uiOptions/js/UIOptions.js"></script>
<script type="text/javascript" src="../../../../components/uiOptions/js/FullNoPreviewUIOptions.js"></script>
<script type="text/javascript" src="../../../../components/tableOfContents/js/TableOfContents.js"></script>
</head>

<body>
<h1>User Interface Options</h1>
<div id="myUIOptions"></div>

<script type="text/javascript">
$().ready(function () {
Expand All @@ -74,14 +79,9 @@
});

fluid.pageEnhancer();
fluid.fullNoPreviewUIOptions("#myUIOptions");
fluid.fullNoPreviewUIOptions("#myUIOptions");
});
</script>
</head>

<body>
<h1>User Interface Options</h1>
<div id="myUIOptions"></div>
</body>
</html>

31 changes: 16 additions & 15 deletions src/webapp/demos/uiOptions/FullPreviewUIOptions/demo.html
Expand Up @@ -5,21 +5,22 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fluid Demonstration Portal</title>

<link rel="stylesheet" type="text/css" href="../../framework/fss/css/fss-reset.css" />
<link rel="stylesheet" type="text/css" href="../../framework/fss/css/fss-layout.css" />
<link rel="stylesheet" type="text/css" href="../../framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="../../framework/fss/css/fss-theme-mist.css" />
<link rel="stylesheet" type="text/css" href="../portal/css/portal.css" />
<link rel="stylesheet" type="text/css" href="../portal/css/demo.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-reset-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-base-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-layout.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-mist.css" />
<link rel="stylesheet" type="text/css" href="../../portal/css/portal.css" />
<link rel="stylesheet" type="text/css" href="../../portal/css/demo.css" />


<script type="text/javascript" src="../../lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="../lib/chili/jquery.chili-2.2.js"></script>
<script type="text/javascript" src="../lib/chili/recipes.js"></script>
<script type="text/javascript" src="../../../lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="../../lib/chili/jquery.chili-2.2.js"></script>
<script type="text/javascript" src="../../lib/chili/recipes.js"></script>

<script type="text/javascript" src="../../lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="../../framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="../../../lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="../../../framework/core/js/jquery.keyboard-a11y.js"></script>

<script type="text/javascript">
ChiliBook.automatic = false;
Expand All @@ -29,18 +30,18 @@
demo.name = "uiOptions";
</script>

<script type="text/javascript" src="../portal/js/demoAssets.js"></script>
<script type="text/javascript" src="../../portal/js/demoAssets.js"></script>

</head>

<body class="fl-col-mixed-300 fl-focus">
<h1><a href="../index.html">Fluid Demonstration Portal</a></h1>
<p class="letusknow">Found a bug? Have a question? <a href="mailto:infusion-users@fluidproject.org">Let us know</a></p>
<div class="fl-col-flex2 demoContent">
<h2>User Interface Options<a href="mailto:infusion-users@fluidproject.org?subject=Broken demo: UI Options">Report broken demo</a></h2>
<h2>User Interface Options - Full Page with Preview<a href="mailto:infusion-users@fluidproject.org?subject=Broken demo: UI Options">Report broken demo</a></h2>
<div class="fl-col example">
<h3>Live Example</h3>
<p><strong>Instructions:</strong> Below is a webpage with sample content that can be transformed. Use the 'Edit Appearance' button to reveal the UI Options panel. The preview area is automatically updated with option customizations. Select 'Save and Apply' to apply the changes to the content and close the panel. To reset the webpage to default styles, use the 'Reset' button, then the 'Save and Apply' button.</p>
<p><strong>Instructions:</strong> Below is a webpage with UI options interface that can be transformed and previewed. The preview area is automatically updated with option customizations. Select 'Save and Apply' to apply the changes to the content. To reset the webpage to default styles, use the 'Reset' button, then the 'Save and Apply' button. To cancel the reset to default styles, use the "Cancel" button.</p>
<iframe src="about:blank"></iframe>
</div>
<div class="fl-col content fl-theme-mist">
Expand Down
Expand Up @@ -52,6 +52,12 @@
<script type="text/javascript" src="../../../../components/uiOptions/js/UIOptions.js"></script>
<script type="text/javascript" src="../../../../components/uiOptions/js/FullPreviewUIOptions.js"></script>
<script type="text/javascript" src="../../../../components/tableOfContents/js/TableOfContents.js"></script>
</head>

<body>
<h1>User Interface Options</h1>

<div id="myUIOptions"></div>

<script type="text/javascript">
$().ready(function () {
Expand All @@ -77,12 +83,6 @@
fluid.fullPreviewUIOptions("#myUIOptions");
});
</script>
</head>

<body>
<h1>User Interface Options</h1>

<div id="myUIOptions"></div>
</body>
</html>

Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file modified src/webapp/framework/fss/images/themes/hc/buttons-med-bg.png 100755 → 100644
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file modified src/webapp/framework/fss/images/themes/hc/buttons-med-cap.png 100755 → 100644
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file modified src/webapp/framework/fss/images/themes/hc/icon-widget-Close.png 100755 → 100644
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file modified src/webapp/framework/fss/images/themes/hc/icon-widget-More.png 100755 → 100644
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file modified src/webapp/framework/fss/images/themes/hci/buttons-med-bg.png 100755 → 100644
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file modified src/webapp/framework/fss/images/themes/hci/buttons-med-cap.png 100755 → 100644
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file modified src/webapp/framework/fss/images/themes/hci/icon-widget-More.png 100755 → 100644
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file modified src/webapp/lib/jquery/ui/css/demo-theme/jquery.ui.theme.css 100755 → 100644
Empty file.

0 comments on commit 20f09c1

Please sign in to comment.