Skip to content

Commit

Permalink
Around 20 refinements for gadgets-ui per Amit's suggestions. Details …
Browse files Browse the repository at this point in the history 
…will be elaborated on the pull request. One major TODO remains: getting the sidebar edit & delete icons to render on separate rows.
  • Loading branch information
@bayestheorem
bayestheorem committed Oct 5, 2015
1 parent b9d9d48 commit 533d2e4
Showing 10 changed files with 83 additions and 103 deletions.
6 changes: 2 additions & 4 deletions core/templates/dev/head/css/oppia.css
View file
Original file line number Diff line number Diff line change
@@ -2180,10 +2180,8 @@ md-card.preview-conversation-skin-supplemental-card {

.oppia-gadget-edit-icon {
color: #636363;
display: none;
position: absolute;
right: 0;
top: 80%;
right: 20px;
top: 4px;
}

.oppia-gadget-content {
10 changes: 5 additions & 5 deletions core/templates/dev/head/editor/EditorServices.js
View file
Original file line number Diff line number Diff line change
@@ -970,10 +970,10 @@ oppia.factory('stateCustomizationArgsService', [
oppia.factory('explorationGadgetsService', [
'$log', '$modal', '$filter', '$location', '$rootScope',
'changeListService', 'editorContextService', 'warningsData',
'gadgetValidationService',
'gadgetValidationService', 'GADGET_SPECS',
function($log, $modal, $filter, $location, $rootScope,
changeListService, editorContextService, warningsData,
gadgetValidationService) {
gadgetValidationService, GADGET_SPECS) {
// _gadgets is a JS object with gadget_instance.name strings as keys
// and each gadget_instance's data as values.
var _gadgets = null;
@@ -992,10 +992,10 @@ oppia.factory('explorationGadgetsService', [
};

var _generateUniqueGadgetName = function(gadgetType) {
if (!_gadgets.hasOwnProperty(gadgetType)) {
return gadgetType;
var baseGadgetName = GADGET_SPECS[gadgetType].short_description;
if (!_gadgets.hasOwnProperty(baseGadgetName)) {
return baseGadgetName;
} else {
var baseGadgetName = gadgetType;
var uniqueInteger = 2;
var generatedGadgetName = baseGadgetName + uniqueInteger;
while (_gadgets.hasOwnProperty(generatedGadgetName)) {
4 changes: 1 addition & 3 deletions core/templates/dev/head/editor/EditorServicesSpec.js
View file
Original file line number Diff line number Diff line change
@@ -208,8 +208,7 @@ describe('Change list service', function() {
},
'visible_in_states': ['newState1']
};
var panelName = 'left';
cls.addGadget(gadgetDict, panelName);
cls.addGadget(gadgetDict);
expect(cls.getChangeList()).toEqual([
{
cmd: 'add_state',
@@ -232,7 +231,6 @@ describe('Change list service', function() {
},
'visible_in_states': ['newState1']
},
panel_name: 'left'
}
]);
});
59 changes: 30 additions & 29 deletions core/templates/dev/head/editor/GadgetEditor.js
View file
Original file line number Diff line number Diff line change
@@ -25,6 +25,8 @@ oppia.controller('GadgetEditor', [
function($scope, $modal, $log, editorContextService,
explorationGadgetsService, GADGET_SPECS) {

$scope.GADGET_SPECS = GADGET_SPECS;

$scope.$on('gadgetsChangedOrInitialized', function(evt) {
$scope.refreshGadgetsInfo();
});
@@ -45,7 +47,7 @@ oppia.controller('GadgetEditor', [
};

$scope.addNewGadget = function() {
// Initializing gadget with default values.
// Initializing gadgetData with required keys.
var gadgetData = {
gadget_type: '',
gadget_name: '',
@@ -71,34 +73,6 @@ oppia.controller('GadgetEditor', [
});
};

$scope.renameGadget = function(newGadgetName) {
if (!($scope.originalNameForRenamedGadget && newGadgetName)) {
$log.info('Data missing to rename gadget. Old name: ' +
$scope.originalNameForRenamedGadget + ' New name: ' + newGadgetName);
} else if ($scope.originalNameForRenamedGadget != newGadgetName) {
explorationGadgetsService.renameGadget(
$scope.originalNameForRenamedGadget, newGadgetName);
}
// hide the editor form;
$scope.changeActiveGadgetNameEditor();
};

/**
* This displays and hides the gadget name editor form.
* @param {string} currentGadgetName The name of the gadget that needs to be
* renamed to display the form. Or null if the form is to be hidden.
*/
$scope.changeActiveGadgetNameEditor = function(currentGadgetName) {
// $scope.originalNameForRenamedGadget is null if no gadget is currently
// being renamed, otherwise it is set to the original name of the gadget
// currently being renamed. At most one gadget can be renamed at a time.
// If a new gadget name editor is opened, the previous one is closed and
// changes are not saved.
var currentGadgetName = currentGadgetName || '';
$scope.originalNameForRenamedGadget = currentGadgetName;
$scope.newNameForRenamedGadget = currentGadgetName;
};

/**
* @param {Object} gadgetDict is a dict representing the gadget
* being edited. It has the following keys: gadget_type, gadget_name,
@@ -127,6 +101,8 @@ oppia.controller('GadgetEditor', [

$scope.ALLOWED_GADGETS = GLOBALS.ALLOWED_GADGETS;
$scope.GADGET_SPECS = GADGET_SPECS;
$scope.SHOW_GADGET_NAME_EDITOR = false;

var _initializeCustomizationArgs = function(gadgetType) {
var gadgetSpec = GADGET_SPECS[gadgetType];
$scope.customizationArgSpecs = gadgetSpec.customization_arg_specs;
@@ -144,6 +120,31 @@ oppia.controller('GadgetEditor', [
$scope.form = {};
}

$scope.renameGadget = function(newGadgetName) {
var originalName = $scope.gadgetDict.gadget_name;
if (originalName != newGadgetName) {
// Record the change.
explorationGadgetsService.renameGadget(
originalName, newGadgetName);
// Update the name's state within the customization modal.
$scope.gadgetDict.gadget_name = newGadgetName;
}
$scope.SHOW_GADGET_NAME_EDITOR = false;
};

$scope.openGadgetNameEditor = function() {
$scope.SHOW_GADGET_NAME_EDITOR = true;
// Prefill the rename input box with the current name.
$scope.newNameForRenamedGadget = $scope.gadgetDict.gadget_name;
};

$scope.cancelGadgetNameEditor = function() {
// Clear value.
$scope.newNameForRenamedGadget = '';
// Hide the editor window.
$scope.SHOW_GADGET_NAME_EDITOR = false;
};

$scope.gadgetDict = gadgetDict;
if (gadgetDict.gadget_type) {
_initializeCustomizationArgs(gadgetDict.gadget_type);
16 changes: 12 additions & 4 deletions core/templates/dev/head/editor/GadgetListItem.js
View file
Original file line number Diff line number Diff line change
@@ -22,18 +22,26 @@
return {
restrict: 'E',
scope: {
gadgetType: '&',
gadgetShortDescription: '&',
gadgetName: '&'
},
templateUrl: 'editor/gadgetListItem',
controller: [
'$scope', '$filter', function($scope, $filter) {

// A gadget list item shows the gadget's short description by default.
// If a gadget has been renamed or if multiple gadgets of the same type
// exist the gadget's name is shown in parenthesis following it's
// description.
//
// Examples:
// 'Score Bar' // Gadget with default name
// 'Score Bar (Current Score)' // Gadget renamed to 'Current Score'
$scope.gadgetListItemHtml = function() {
if ($scope.gadgetType() == $scope.gadgetName()) {
return $scope.gadgetName();
if ($scope.gadgetShortDescription() == $scope.gadgetName()) {
return $scope.gadgetShortDescription();
} else {
return $scope.gadgetType() + ' (' + $scope.gadgetName() + ')';
return $scope.gadgetShortDescription() + ' (' + $scope.gadgetName() + ')';
}
};

63 changes: 31 additions & 32 deletions core/templates/dev/head/editor/gadget_editor.html
View file
Original file line number Diff line number Diff line change
@@ -10,39 +10,23 @@
<div class="oppia-visible-gadgets-container">
<div ng-repeat="gadgetName in panelContents"
ng-if="gadgets[gadgetName].visible_in_states.indexOf(activeStateName) > -1">
<!--
REFACTORING(anuzis): Ensure edit and delete icons show up for each gadget listed.
REFACTORING(anuzis): use http://getbootstrap.com/css/#tables-striped per row.
<span title="Delete <[gadgetName]>" ng-click="deleteGadget(gadgetName)"
class="glyphicon glyphicon-remove oppia-gadget-delete-icon protractor-test-delete-<[gadgetName]>-gadget-icon">
</span>
<span title="Rename <[gadgetName]>"
ng-click="changeActiveGadgetNameEditor(gadgetName)"
class="glyphicon glyphicon-pencil oppia-gadget-rename-icon protractor-test-rename-<[gadgetName]>-gadget-icon">
</span>
<span ng-show="originalNameForRenamedGadget == gadgetName"
class="oppia-rename-gadget-form">
<input type="text" ng-model="newNameForRenamedGadget" class="protractor-test-gadget-rename-text-input">
<button class="btn btn-xs glyphicon glyphicon-ok protractor-test-gadget-rename-confirmation-button"
ng-click="renameGadget(newNameForRenamedGadget)">
</button>
<button class="btn btn-xs glyphicon glyphicon-remove"
ng-click="changeActiveGadgetNameEditor()">
</button>
</span>
-->
<div class="oppia-gadget-list-container protractor-test-edit-<[gadgetName]>-gadget" title="Edit <[gadgetName]>"
ng-click="editGadget(gadgetName)">
<div class="oppia-gadget-list-container" ng-click="editGadget(gadgetName)">
<oppia-gadget-list-item
gadget-type="gadgets[gadgetName].gadget_type"
gadget-short-description="GADGET_SPECS[gadgets[gadgetName].gadget_type].short_description"
gadget-name="gadgetName" style="pointer-events: none;"
class="protractor-test-<[gadgetName]>-gadget"
class="protractor-test-<[gadgetName]>-gadget">
</oppia-gadget-list-item>
<!--
<span title="Edit Gadget Content"
class="glyphicon glyphicon-edit oppia-gadget-edit-icon">
</div>
<!-- TODO(anuzis): Update CSS for Edit and Delete buttons to not overlay each other...
Mirroring the parameter panel's CSS pattern doesn't quite work. Specifically, adding the
following classes to the surrounding div: class="col-lg-4 col-md-4 col-sm-4".
Additionally, editing gadget icon CSS directly continues to render on a shared point. -->
<div>
<span title="Edit Gadget (<[gadgetName]>)" ng-click="editGadget(gadgetName)"
class="glyphicon glyphicon-pencil oppia-gadget-edit-icon protractor-test-edit-<[gadgetName]>-gadget">
</span>
<span title="Delete Gadget (<[gadgetName]>)" ng-click="deleteGadget(gadgetName)" class="glyphicon glyphicon-remove oppia-gadget-delete-icon protractor-test-delete-<[gadgetName]>-gadget-icon">
</span>
-->
</div>
</div>
</div>
@@ -60,9 +44,24 @@
<h3 ng-if="!gadgetDict.gadget_type">
Add a gadget
</h3>
<h3 ng-if="gadgetDict.gadget_type">
Customize Gadget (<[gadgetDict.gadget_name]>)
</h3>
<div ng-if="gadgetDict.gadget_type">
<strong style="font-size:1.2em;">
<[gadgetDict.gadget_type]>
<span class="protractor-test-open-gadget-name-editor" ng-show="!SHOW_GADGET_NAME_EDITOR" ng-click="openGadgetNameEditor()">
(<[gadgetDict.gadget_name]>)
<span class="glyphicon glyphicon-pencil" title="Edit Gadget Name"></span>
</span>
</strong>
<span ng-show="SHOW_GADGET_NAME_EDITOR" class="oppia-rename-gadget-form">
<input type="text" ng-model="newNameForRenamedGadget" class="protractor-test-gadget-rename-text-input">
<button class="btn btn-xs glyphicon glyphicon-ok protractor-test-gadget-rename-confirmation-button"
ng-click="renameGadget(newNameForRenamedGadget)">
</button>
<button class="btn btn-xs glyphicon glyphicon-remove protractor-test-cancel-gadget-name-editor"
ng-click="cancelGadgetNameEditor()">
</button>
</span>
</div>
</div>
<div class="modal-body">
<div ng-if="!gadgetDict.gadget_type" ng-cloak>
23 changes: 0 additions & 23 deletions core/templates/dev/head/editor/gadget_list_item.html
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,4 @@
<script type="text/ng-template" id="editor/gadgetListItem">
<!-- REFACTORING(anuzis): Make functional. -->
<span title="Delete <[gadgetName]>" ng-click="deleteGadget(gadgetName)"
class="glyphicon glyphicon-remove oppia-gadget-delete-icon protractor-test-delete-<[gadgetName]>-gadget-icon">
</span>
<span title="Rename <[gadgetName]>"
ng-click="changeActiveGadgetNameEditor(gadgetName)"
class="glyphicon glyphicon-pencil oppia-gadget-rename-icon protractor-test-rename-<[gadgetName]>-gadget-icon">
</span>
<span ng-show="originalNameForRenamedGadget == gadgetName"
class="oppia-rename-gadget-form">
<input type="text" ng-model="newNameForRenamedGadget" class="protractor-test-gadget-rename-text-input">
<button class="btn btn-xs glyphicon glyphicon-ok protractor-test-gadget-rename-confirmation-button"
ng-click="renameGadget(newNameForRenamedGadget)">
</button>
<button class="btn btn-xs glyphicon glyphicon-remove"
ng-click="changeActiveGadgetNameEditor()">
</button>
</span>

<div angular-html-bind="gadgetListItemHtml">
</div>

<span title="Edit Gadget Content"
class="glyphicon glyphicon-edit oppia-gadget-edit-icon">
</span>
</script>
2 changes: 1 addition & 1 deletion extensions/gadgets/AdviceBar/AdviceBar.html
View file
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@

<script type="text/ng-template" id="gadget/AdviceBar">
<div class="oppia-advice-bar-container">
<h2 class="oppia-advice-bar-title protractor-test-advicebar-title"><[adviceBarTitle]></h2>
<h2 class="oppia-advice-bar-title protractor-test-advicebar-title">Tips</h2>
<div ng-repeat="resource in adviceBarResources track by $index">
<div class="oppia-advice-resource" ng-click="overlayAdviceModal($index)">
<[resource.adviceTitle]>
1 change: 0 additions & 1 deletion extensions/gadgets/AdviceBar/AdviceBar.js
View file
Original file line number Diff line number Diff line change
@@ -31,7 +31,6 @@ oppia.directive('oppiaGadgetAdviceBar', [
restrict: 'E',
templateUrl: 'gadget/AdviceBar',
controller: ['$scope', '$attrs', '$modal', function ($scope, $attrs, $modal) {
$scope.adviceBarTitle = oppiaHtmlEscaper.escapedJsonToObj($attrs.titleWithValue);
$scope.adviceBarResources = oppiaHtmlEscaper.escapedJsonToObj($attrs.adviceObjectsWithValue);

$scope.overlayAdviceModal = function(adviceResourceIndex) {
2 changes: 1 addition & 1 deletion feconf.py
View file
Original file line number Diff line number Diff line change
@@ -310,7 +310,7 @@ def get_empty_ratings():
# Predefined commit messages.
COMMIT_MESSAGE_EXPLORATION_DELETED = 'Exploration deleted.'

# Advanced feature in development.
# Advanced feature.
SHOW_GADGETS_EDITOR = False

# Unlaunched feature.

0 comments on commit 533d2e4

Please sign in to comment.