Skip to content

Commit

Permalink
Use consistent button styles on the state editor page. Right-align al…
Browse files Browse the repository at this point in the history 
…l buttons. Have a consistent 2:10 column layout with the 10-column subdivided as 9:3.
  • Loading branch information
@seanlip
seanlip committed Nov 22, 2013
1 parent f15c3d6 commit 716fbc7
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 115 deletions.
14 changes: 7 additions & 7 deletions core/templates/dev/head/components/param_change_editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@
<div class="container-fluid">
<div ng-if="paramChanges.length === 0">
<div class="row-fluid">
<div class="span10">
<div class="span9">
<em>No parameter changes have been defined.</em>
</div>
<div class="span2"></div>
<div class="span3"></div>
</div>
</div>

Expand All @@ -35,7 +35,7 @@
<div class="span1">
<[$index + 1]>.
</div>
<div class="span9">
<div class="span8">
<span ng-if="activeItem !== $index">
Change <b><[param.name]></b> <[HUMAN_READABLE_ARGS_RENDERERS[param.generator_id](param.customization_args)]>
</span>
Expand All @@ -45,7 +45,7 @@
</div>
</div>

<div class="span2">
<div class="span3">
<button type="button" ng-disabled="activeItem !== -1" ng-click="startEditParamChange($index)">
Edit
</button>
Expand All @@ -57,10 +57,10 @@
</div>

<div class="row-fluid">
<div class="span10"></div>
<div class="span9"></div>

<div class="span2">
<button type="button" ng-disabled="activeItem !== -1" ng-click="startAddParamChange()">
<div class="span3">
<button type="button" ng-disabled="activeItem !== -1" ng-click="startAddParamChange()" class="pull-right">
Add new
</a>
</div>
Expand Down
5 changes: 2 additions & 3 deletions core/templates/dev/head/css/oppia.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,8 @@ h3 {
margin: 0;
}

.oppia-right-column button {
padding: 1px 2px;
border-width: 1px;
.oppia-rule-ctrl {
padding: 2px 3px;
}

p {
Expand Down
99 changes: 51 additions & 48 deletions core/templates/dev/head/editor/interactive_widget_editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,42 @@
</span>
</div>

<div class="span8 oppia-iframe-container">
<div>
<div class="oppia-widget-preview">
<!-- This iframe is dynamically resized based on its content. -->
<iframe id="interactiveWidgetPreview" frameborder="0" width="100%" height="5px" seamless="seamless">
</iframe>
</div>

<div>
<label>
<input type="checkbox" ng-model="widgetSticky">
Reuse the previous state's interaction, if possible.
<img class="oppia-help" src="/images/help.png"
tooltip="If this option is selected, then if the reader comes to this state from a state that uses the same type of interactive widget, that widget (and any previous content entered by the reader) will be preserved. Otherwise, it will be replaced with a new one."
tooltip-placement="right">
</label>
<div class="span10">
<div class="container-fluid">
<div class="row-fluid">

<div class="span9 oppia-iframe-container">
<div>
<div class="oppia-widget-preview">
<!-- This iframe is dynamically resized based on its content. -->
<iframe id="interactiveWidgetPreview" frameborder="0" width="100%" height="5px" seamless="seamless">
</iframe>
</div>

<div>
<label>
<input type="checkbox" ng-model="widgetSticky">
Reuse the previous state's interaction, if possible.
<img class="oppia-help" src="/images/help.png"
tooltip="If this option is selected, then if the reader comes to this state from a state that uses the same type of interactive widget, that widget (and any previous content entered by the reader) will be preserved. Otherwise, it will be replaced with a new one."
tooltip-placement="right">
</label>
</div>
</div>
</div>

<div class="span3">
<button ng-click="showChooseInteractiveWidgetModal()" class="pull-right">
Change type
</button>
<br><br>
<button ng-click="showCustomizeInteractiveWidgetModal()" class="pull-right" ng-if="!isEmpty(widgetCustomizationArgs)">
Customize
</button>
</div>
</div>
</div>
</div>

<div class="span2">
<span class="pull-right">
<button ng-click="showChooseInteractiveWidgetModal()">
Pick new interaction
</button>
<br><br>
<span ng-if="!isEmpty(widgetCustomizationArgs)">
<button ng-click="showCustomizeInteractiveWidgetModal()">
Customize
</button>
</span>
</span>
</div>
</div>

<br>
Expand Down Expand Up @@ -88,15 +91,17 @@
</table>
</div>

<div class="span3 oppia-right-column">
<button ng-click="openEditRuleModal(handlerName, $index)">Edit</button>
<button ng-show="$index != 0" ng-click="swapRules(handlerName, $index, $index - 1)">⇑</button>
<span ng-hide="$index != 0" class="oppia-grayed">⇑</span>

<button ng-show="$index < handler.length - 2" ng-click="swapRules(handlerName, $index, $index + 1)">⇓</button>
<span ng-hide="$index < handler.length - 2" class="oppia-grayed">⇓</span>

<button ng-click="deleteRule(handlerName, $index)"> &times; </button>
<div class="span3">
<span class="pull-right">
<button ng-click="openEditRuleModal(handlerName, $index)" class="oppia-rule-ctrl">Edit</button>
<button ng-show="$index != 0" ng-click="swapRules(handlerName, $index, $index - 1)" class="oppia-rule-ctrl">⇑</button>
<span ng-hide="$index != 0" class="oppia-grayed">⇑</span>

<button ng-show="$index < handler.length - 2" ng-click="swapRules(handlerName, $index, $index + 1)" class="oppia-rule-ctrl">⇓</button>
<span ng-hide="$index < handler.length - 2" class="oppia-grayed">⇓</span>

<button ng-click="deleteRule(handlerName, $index)" class="oppia-rule-ctrl"> &times; </button>
</span>
</div>
</div>
</div>
Expand All @@ -116,8 +121,8 @@
</div>

<div class="span3">
<span>
<a href="#" onclick="return false;" ng-click="openAddRuleModal(handlerName)">Add new rule</a>
<span class="pull-right">
<button ng-click="openAddRuleModal(handlerName)" class="oppia-rule-ctrl"> Add new rule </button>
</span>
</div>
</div>
Expand Down Expand Up @@ -153,14 +158,12 @@
</div>

<div class="span3">
<span>
<a href="#" onclick="return false;" ng-click="openEditRuleModal(handlerName, handler.length - 1)">Edit</a> |
<span class="pull-right">
<button ng-click="openEditRuleModal(handlerName, handler.length - 1)" class="oppia-rule-ctrl">Edit</button>
<span class="oppia-grayed oppia-rule-ctrl"> ⇑ </span>
<span class="oppia-grayed oppia-rule-ctrl"> ⇓ </span>
<span class="oppia-grayed oppia-rule-ctrl"> &times; </span>
</span>
<span class="oppia-grayed"> ⇑ </span>
|
<span class="oppia-grayed"> ⇓ </span>
|
<span class="oppia-grayed"> &times; </span>
</div>
</div>
</div>
Expand Down
132 changes: 75 additions & 57 deletions core/templates/dev/head/editor/state_editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div class="container-fluid oppia-editor" ng-show="stateId">

{{ changelist_buttons_row() }}

<br>

<div class="row-fluid">
Expand All @@ -21,22 +21,28 @@
</span>
</div>

<div class="span8">
<h3>
<span ng-if="!stateNameMemento">
<[stateName]>
</span>
<span ng-if="!!stateNameMemento">
<input type="text" ng-model="stateName">
<button ng-click="saveStateName(stateName)">Close</button>
</span>
</h3>
</div>

<div class="span2">
<button ng-if="!stateNameMemento" ng-click="openStateNameEditor()" class="pull-right">
Edit name
</button>
<div class="span10">
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<h3>
<span ng-if="!stateNameMemento">
<[stateName]>
</span>
<span ng-if="!!stateNameMemento">
<input type="text" ng-model="stateName">
<button ng-click="saveStateName(stateName)">Close</button>
</span>
</h3>
</div>

<div class="span3">
<button ng-if="!stateNameMemento" ng-click="openStateNameEditor()" class="pull-right">
Edit name
</button>
</div>
</div>
</div>
</div>
</div>

Expand All @@ -57,28 +63,34 @@ <h3>
</span>
</div>

<div class="span8">
<div ng-if="incomingStatesShown">
<ul>
<li ng-repeat="(incomingStateId, incomingState) in getIncomingStates(stateId)">
<a ng-if="stateId != incomingStateId" href="/create/<[explorationId]>#/gui/<[incomingStateId]>">
<[incomingState.name]>
</a>
<span ng-if="stateId == incomingStateId" title="This state points to itself." class="oppia-cursor-pointer">
⟳
</span>
(<[incomingState.rules | commaSeparatedList]>)
</li>
</ul>

<span ng-show="isEmpty(getIncomingStates(stateId))">
<em>No incoming states.</em>
</span>
<div class="span10">
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div ng-if="incomingStatesShown">
<ul>
<li ng-repeat="(incomingStateId, incomingState) in getIncomingStates(stateId)">
<a ng-if="stateId != incomingStateId" href="/create/<[explorationId]>#/gui/<[incomingStateId]>">
<[incomingState.name]>
</a>
<span ng-if="stateId == incomingStateId" title="This state points to itself." class="oppia-cursor-pointer">
⟳
</span>
(<[incomingState.rules | commaSeparatedList]>)
</li>
</ul>

<span ng-show="isEmpty(getIncomingStates(stateId))">
<em>No incoming states.</em>
</span>
</div>
</div>

<div class="span3">
</div>
</div>
</div>
</div>

<div class="span2">
</div>
</div>

<br>
Expand Down Expand Up @@ -115,28 +127,34 @@ <h3>
<span class="oppia-editor-header">content</span>
</div>

<div class="span8 oppia-state-content">
<div ng-if="!contentMemento">
<span ng-show="content[0].value == ''" class="oppia-placeholder">
This editor supports $LaTeX$.
<a href="https://code.google.com/p/oppia/wiki/NonInteractiveContent" target="_blank">
More information...
</a>
</span>
<span angular-html-bind="content[0].value"></span>
</div>

<div ng-if="!!contentMemento">
<rich-text-editor html-content="content[0].value"></rich-text-editor>
<button ng-click="saveTextContent()">Close</button>
<div class="span10">
<div class="container-fluid">
<div class="row-fluid">
<div class="span9 oppia-state-content">
<div ng-if="!contentMemento">
<span ng-show="content[0].value == ''" class="oppia-placeholder">
This editor supports $LaTeX$.
<a href="https://code.google.com/p/oppia/wiki/NonInteractiveContent" target="_blank">
More information...
</a>
</span>
<span angular-html-bind="content[0].value"></span>
</div>

<div ng-if="!!contentMemento">
<rich-text-editor html-content="content[0].value"></rich-text-editor>
<button ng-click="saveTextContent()">Close</button>
</div>
</div>

<div class="span3">
<button ng-if="!contentMemento" ng-click="editContent()" class="pull-right">
Edit content
</button>
</div>
</div>
</div>
</div>

<div class="span2">
<button ng-if="!contentMemento" ng-click="editContent()" class="pull-right">
Edit content
</button>
</div>
</div>

<br>
Expand Down

0 comments on commit 716fbc7

Please sign in to comment.