Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
borderColor#848484
bgColor#FFF
titleBGColor#E8E8E8
titleRich Text Inline Edit - Progress Indicator
borderStylesolid
Wiki Markup
{table:style=border:1px solid #000; background-color: #eee; margin: 15px auto 0; text-align:center; border-collapse:collapse;}
{tr:style=border:1px solid #000; height:15px}
{td:style=background-color:#FFE000; padding:5px; width:30px;|title=In Design}
{td}
{td:style=background-color:#FFE000; padding:5px; width:30px;|title=In Design}
{td}
{td:style=background-color:#FFE000; padding:5px; width:30px; border-right:1px solid #000|title=In Design}
{td}
{td:style=background-color:#FFE000; padding:5px; width:30px;|title=In Design}
{td}
{td:style=background-color:#FFE000; padding:5px; width:30px;|title=In Design}
{td}
{td:style=background-color:#FFE000; padding:5px; width:30px; border-right:1px solid #000|title=In Design}
{td}
{td:style=background-color:#FFFDE3; padding:5px; width:30px;|title=Future}
{td}
{td:style=background-color:#FFFDE3; padding:5px; width:30px;|title=Future}
{td}
{td:style=background-color:#FFFDE3; padding:5px; width:30px; border-right:1px solid #000|title=Future}
{td}
{td:style=background-color:#FFFDE3; padding:5px; width:30px;|title=Future}
{td}
{td:style=background-color:#FFFDE3; padding:5px; width:30px;|title=Future}
{td}
{td:style=background-color:#FFFDE3; padding:5px; width:30px; border-right:1px solid #000|title=Future}
{td}
{td:style=background-color:#FFFDE3; padding:5px; width:30px;|title=Future}
{td}
{td:style=background-color:#FFFDE3; padding:5px; width:30px;|title=Future}
{td}
{td:style=background-color:#FFFDE3; padding:5px; width:30px; border-right:1px solid #000|title=Future}
{td}
{tr}
{tr}
{td:colspan=3|style= border-top:1px solid #000}WYSIWYG
{td}
{td:colspan=3|style= border-top:1px solid #000}Smart Editing
{td}
{td:colspan=3|style= border-top:1px solid #000}Undo
{td}
{td:colspan=3|style= border-top:1px solid #000}Redo
{td}
{td:colspan=3|style= border-top:1px solid #000}Error Handling
{td}
{tr}
{table}
1) Allow "WYSIWYG" Editor-style editing
2) Provide customized 'WYSIWYG' options based on media type and/or context
3) Provide user with undo capabilities
4) Provide user with redo capabilities
5) Error Handling

Legend
{table-plus:autoNumber=false|enableSorting=false| |columnAttributes=style="background:#8CC63F;",style="background:#CADB2A;",style="background:#FFE000;",style="background:#FFFDE3;"}
|[{color:black}Stable{color}|Glossary#stable|Performs to spec and has undergone Usability, Accessibility, and QA testing]|[{color:black}In Development{color}|Glossary#in progress|Does not completely conform to specification]|[{color:black}In Design{color}|Glossary#in design|Has not yet entered development]|[{color:black}Future{color}|Glossary#future|The feature is planned, but has not yet undergone design]|
{table-plus}
_\*Based on the_ [_latest current release_|Fluid Infusion - Current Release|Current Release]html}

<link href="http://wiki.fluidproject.org/download/attachments/5902236/progress-indicator.css?version=2" rel="stylesheet" type="text/css">
<link href="http://build.fluidproject.org/fluid/fluid-components/css/fluid.layout.css" rel="stylesheet" type="text/css">
<link href="http://build.fluidproject.org/fluid/fluid-components/css/fluid.text.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://build.fluidproject.org/fluid/fluid-components/js/Fluid-all.js"></script>
<script type="text/javascript" src="http://wiki.fluidproject.org/download/attachments/5902236/progress-indicator.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                
                var progressIndicator = fluid.componentProgressIndicator("#fl-cpi-progress-indicator-rich-text-inline-edit", {featureList: [
                    {
                        shortName: "Rich Text Editor",
                        longName: "Provide a rich text editor",
                        status: "In Development"
                    },
                    {
                        shortName: "Smart Editing",
                        longName: "Provide customized rich text options based on media type and/or context",
                        status: "In Design"
                    },
                    {
                        shortName: "Undo",
                        longName: "Provide the user with undo capabilities",
                        status: "Future"
                    },
                    {
                        shortName: "Redo",
                        longName: "Provide the user with redo capabilities",
                        status: "Future"
                    },
                    {
                        shortName: "Error Handling",
                        longName: "Error handling",
                        status: "Future"
                    }
                ]});
                
                jQuery(window).resize(function () {
                    progressIndicator.refreshView();
                });
            });
        </script>

       <div id="fl-cpi-progress-indicator-rich-text-inline-edit" class="fl-cpi-border">
            <div class="fl-cpi-all-progress-container fl-centered fl-cpi-progress-container-all">
                <div class="fl-cpi-progress-bars">
                    <div class="fl-progress">
                        <div class="fl-progress-bar fl-cpi-height-20-px">
                            <div class="fl-progress-indicator">
                            </div>
                        </div>
                    </div>
                </div>
                <table class="fl-cpi-separator fl-cpi-separator-table" role="grid">
                    <tr class="fl-cpi-progress-row-render" role="row">
                        <td class="fl-cpi-progress-cell-render fl-cpi-height-20-px fl-cpi-end" role="gridcell"></td>
                    </tr>
                    <tr class="fl-cpi-title-row-render" role="row">
                        <td class="fl-cpi-title-cell-render fl-cpi-height-20-px" role="gridcell">
                            <a class="fl-cpi-title-link"></a>
                        </td>
                    </tr>
                </table>
            </div>
            <ol class="fl-cpi-list-item-container-render">
                <li class="fl-cpi-list-item-render" role="listitem">
                    <a class="fl-cpi-list-link"></a>
                </li>
            </ol>
            <div class="fl-cpi-legend">
                <p>Legend</p>
                <table>
                    <tr class="fl-cpi-legend-row">
                        <td class="fl-cpi-stable fl-cpi-legend-cell" title="Stable"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-stable">Stable</a></td>
                        <td class="fl-cpi-in-development fl-cpi-legend-cell" title="In Development"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-inprogress">In Development</a></td>
                        <td class="fl-cpi-in-design fl-cpi-legend-cell" title="In Design"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-indesign">In Design</a></td>
                        <td class="fl-cpi-legend-cell" title="Future"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-future">Future</a></td>
                    </tr>
                </table>
                <p class="fl-cpi-small-print fl-font-size-80 fl-font-arial">*Based on the <a href="http://wiki.fluidproject.org/display/fluid/Fluid+Infusion+-+Current+Release">latest current release</a></p>
            </div>
        </div>
{html}