75 lines
3.5 KiB
HTML
75 lines
3.5 KiB
HTML
<div class="wrapper wrapper-component-editor">
|
|
<div class="component-editor">
|
|
<div id="component-edit-menu">
|
|
<h3 class="component-name">Viewing: Name of Component</h3>
|
|
<!--should this be a menubar/menu/tabbar instead of list? -->
|
|
<ul class="nav-edit-modes">
|
|
<li id="editor-mode" class="mode is-active" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
|
|
<a href="#" class="button cancel-button">Editor</a>
|
|
</li>
|
|
<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
|
|
<a href="#" class="button cancel-button">Settings </a>
|
|
</li>
|
|
</ul>
|
|
</div> <!-- Editor Header -->
|
|
|
|
<div class="component-edit-modes">
|
|
<div class="module-editor editor-wrapper" id="editor-tab">
|
|
${editor}
|
|
<!-- no longer are settings imported from metadata-edit.hmtl, ideally? -->
|
|
</div> <!-- Editor Wrapper-->
|
|
<ul class="settings-wrapper" id="settings-tab">
|
|
<!--% for type in sorted(something.keys()):-->
|
|
<!--is-set class applied when user sets value-->
|
|
<li class="settings-row is-set">
|
|
<label class="setting-label" for="inputVariableHere">Setting 1</label>
|
|
<input class="setting-input" type="text" id="firstname"/>
|
|
<!--button clickable if is-set -->
|
|
<button class="setting-clear" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
|
|
<i class="ss-icon ss-symbolicons-block undo">↩</i>
|
|
</button>
|
|
<span class="setting-help">helpstring</span>
|
|
</li>
|
|
<!--% showing second example mostly to see is-set style difference -->
|
|
<li class="settings-row">
|
|
<label class="setting-label" for="setting-name-as-id">Setting 2</label>
|
|
<input class="setting-input" type="text" id="firstname"/>
|
|
<button class="setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
|
|
<i class="ss-icon ss-symbolicons-block undo">↩</i>
|
|
</button>
|
|
<span class="setting-help">helpstring helpstringhelpstringhelpstringhelpstringhel pstringhelpstringh elpstringhelpstrin sghelp stringhelp stringhelpstringhe lpstring helpstringhelpstringhelpstring</span>
|
|
|
|
<!--% showing dropdown example -->
|
|
<li class="settings-row">
|
|
<label class="setting-label" for="setting-name-as-id">Setting Display </label>
|
|
<select class="setting-input" name="type">
|
|
<!--% for all in available options -->
|
|
<option value="displayName1" selected>Closed</option>
|
|
<!--in case value already defaulted -->
|
|
<option value="displayName2">NotClosed</option>
|
|
<option value="displayName3">Open</option>
|
|
<option value="displayName4">Available</option>
|
|
</select>
|
|
<button class="setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
|
|
<i class="ss-icon ss-symbolicons-block undo">↩</i>
|
|
</button>
|
|
<span class="setting-help">helpstring</span>
|
|
</li>
|
|
|
|
</ul> <!-- Settings Wrapper-->
|
|
</div>
|
|
<div class="row module-actions">
|
|
<a href="#" class="save-button">Save</a>
|
|
<a href="#" class="cancel-button">Cancel</a>
|
|
</div> <!-- Module Actions-->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="component-actions">
|
|
<a href="#" class="edit-button standard"><span class="edit-icon"></span>Edit</a>
|
|
<a href="#" class="delete-button standard"><span class="delete-icon"></span>Delete</a>
|
|
</div>
|
|
<a data-tooltip="Drag to reorder" href="#" class="drag-handle"></a>
|
|
${preview}
|
|
|