86 lines
4.0 KiB
HTML
86 lines
4.0 KiB
HTML
<div class="wrapper wrapper-component-editor">
|
|
<div class="component-editor">
|
|
<div class="component-edit-menu">
|
|
<span class="component-name"><em>Editing:</em> Name of Component</span>
|
|
<!--should this be a menubar/menu/tabbar instead of list? -->
|
|
<ul class="nav-edit-modes">
|
|
<li id="editor-mode" class="mode" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
|
|
<a href="#" class="active-mode is-set">Editor</a>
|
|
</li>
|
|
<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
|
|
<a href="#" class="inactive-mode">Compiler </a>
|
|
</li>
|
|
<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
|
|
<a href="#" class="active-mode">Settings </a>
|
|
</li>
|
|
</ul>
|
|
</div> <!-- Editor Header -->
|
|
|
|
<div class="component-edit-modes">
|
|
<div class="module-editor wrapper-component-editor" id="editor-tab">
|
|
<!--${editor}-->
|
|
<!-- no longer are settings imported from metadata-edit.hmtl, ideally? -->
|
|
</div> <!-- Editor Wrapper-->
|
|
<div class="wrapper-component-settings" id="settings-tab">
|
|
<ul class="list-input settings-list">
|
|
<!--% for type in sorted(something.keys()):-->
|
|
<!--is-set class applied when user sets value-->
|
|
<li class="settings-row is-set">
|
|
<div class="wrapper-setting-actions">
|
|
<label class="setting-label" for="setting-id-1">Display Name</label>
|
|
<input class="setting-input" type="text" id="setting-id-1" value="Name of Component"/>
|
|
<!--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>
|
|
</div>
|
|
<span class="setting-help">helpstring</span>
|
|
</li>
|
|
<!--% showing second example mostly to see is-set style difference -->
|
|
<li class="settings-row">
|
|
<div class="wrapper-setting-actions">
|
|
<label class="setting-label" for="setting-id-2">Setting 2</label>
|
|
<input class="setting-input" type="text" id="setting-id-2"/>
|
|
<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>
|
|
</div>
|
|
<span class="setting-help">This is a longer sentence, repeated multiple times here just to test out the functionaltiy.</span>
|
|
</li>
|
|
<!--% showing dropdown example -->
|
|
<li class="settings-row">
|
|
<div class="wrapper-setting-actions">
|
|
<label class="setting-label" for="setting-displayName">Display Name</label>
|
|
<select class="setting-input" id="setting-displayName" name="type">
|
|
<!--% for all in available options -->
|
|
<option value="displayName-closed" selected>Closed</option>
|
|
<!--in case value already defaulted -->
|
|
<option value="displayName-notclosed">NotClosed</option>
|
|
<option value="displayName-open">Open</option>
|
|
<option value="displayName-available">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>
|
|
</div>
|
|
<span class="setting-help">helpstring</span>
|
|
</li>
|
|
|
|
</ul>
|
|
</div> <!-- 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}
|
|
|