Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LMSA-8397 - initial UX work to add themes and banners #44

Merged
merged 2 commits into from
Sep 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@ public class Constants {
public enum MAIN_OPTION {
IMPORT,
TEMPLATE,
HOMEPAGE
HOMEPAGE,
THEME
}

@AllArgsConstructor
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
package edu.iu.uits.lms.coursesetupwizard.controller;

import edu.iu.uits.lms.coursesetupwizard.model.ImportModel;
import edu.iu.uits.lms.lti.LTIConstants;
import edu.iu.uits.lms.lti.service.OidcTokenUtils;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;
import org.springframework.security.access.annotation.Secured;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
import uk.ac.ox.ctl.lti13.security.oauth2.client.lti.authentication.OidcAuthenticationToken;

import javax.servlet.http.HttpSession;
import java.io.Serializable;
import java.text.MessageFormat;
import java.util.ArrayList;
import java.util.List;

import static edu.iu.uits.lms.coursesetupwizard.Constants.ACTION_BACK;
import static edu.iu.uits.lms.coursesetupwizard.Constants.ACTION_HOME;
import static edu.iu.uits.lms.coursesetupwizard.Constants.ACTION_NEXT;
import static edu.iu.uits.lms.coursesetupwizard.Constants.ACTION_SUBMIT;
import static edu.iu.uits.lms.coursesetupwizard.Constants.KEY_IMPORT_MODEL;

@Controller
@RequestMapping("/app/theme")
@Slf4j
public class ThemeController extends WizardController {
private static final String[] PAGES = {"/app/{0}/index", "/app/theme/{0}/intro", "/app/theme/{0}/selectTheme",
"/app/theme/{0}/selectBanner", "/app/theme/{0}/navigation", "/app/theme/{0}/guidance",
"/app/theme/{0}/review", "/app/theme/{0}/submit"};

@Data
@AllArgsConstructor
public static class ThemeStep implements Serializable {
private String name;
private String link;
}

/**
* Gets called before EVERY controller method
* @param courseId Expected to be extracted as a path variable
* @param model model
*/
@ModelAttribute
public void addCommonAttributesToModel(@PathVariable("courseId") String courseId, Model model) {
model.addAttribute("courseId", courseId);
model.addAttribute("themeSteps", getThemeSteps(courseId));
}

/**
* Get the display values and links for the import wizard step indicator
* @param courseId Course ID to insert into the links
* @return
*/
private List<ThemeStep> getThemeSteps(String courseId) {
List<ThemeStep> steps = new ArrayList<>();
steps.add(new ThemeStep("Intro", MessageFormat.format(PAGES[1], courseId)));
steps.add(new ThemeStep("Select theme", MessageFormat.format(PAGES[2], courseId)));
steps.add(new ThemeStep("Select banner", MessageFormat.format(PAGES[3], courseId)));
steps.add(new ThemeStep("Include navigation", MessageFormat.format(PAGES[4], courseId)));
steps.add(new ThemeStep("Include guidance", MessageFormat.format(PAGES[5], courseId)));
steps.add(new ThemeStep("Review", MessageFormat.format(PAGES[6], courseId)));
steps.add(new ThemeStep("Submit", MessageFormat.format(PAGES[7], courseId)));
return steps;
}

@GetMapping("/{courseId}/intro")
@Secured({LTIConstants.INSTRUCTOR_AUTHORITY})
public ModelAndView intro(@PathVariable("courseId") String courseId, Model model, HttpSession httpSession) {
log.debug("in /intro");
OidcAuthenticationToken token = getValidatedToken(courseId);
OidcTokenUtils oidcTokenUtils = new OidcTokenUtils(token);

return new ModelAndView("theme/intro");
}

@GetMapping("/{courseId}/navigation")
@Secured({LTIConstants.INSTRUCTOR_AUTHORITY})
public ModelAndView navigation(@PathVariable("courseId") String courseId, Model model, HttpSession httpSession) {
log.debug("in /navigation");
OidcAuthenticationToken token = getValidatedToken(courseId);
OidcTokenUtils oidcTokenUtils = new OidcTokenUtils(token);

return new ModelAndView("theme/navigation");
}

@GetMapping("/{courseId}/selectTheme")
@Secured({LTIConstants.INSTRUCTOR_AUTHORITY})
public ModelAndView selectTheme(@PathVariable("courseId") String courseId, Model model, HttpSession httpSession) {
log.debug("in /selectTheme");
OidcAuthenticationToken token = getValidatedToken(courseId);
OidcTokenUtils oidcTokenUtils = new OidcTokenUtils(token);

return new ModelAndView("theme/selectTheme");
}

@GetMapping("/{courseId}/selectBanner")
@Secured({LTIConstants.INSTRUCTOR_AUTHORITY})
public ModelAndView selectBanner(@PathVariable("courseId") String courseId, Model model, HttpSession httpSession) {
log.debug("in /selectBanner");
OidcAuthenticationToken token = getValidatedToken(courseId);
OidcTokenUtils oidcTokenUtils = new OidcTokenUtils(token);

return new ModelAndView("theme/selectBanner");
}

@GetMapping("/{courseId}/guidance")
@Secured({LTIConstants.INSTRUCTOR_AUTHORITY})
public ModelAndView guidance(@PathVariable("courseId") String courseId, Model model, HttpSession httpSession) {
log.debug("in /guidance");
OidcAuthenticationToken token = getValidatedToken(courseId);
OidcTokenUtils oidcTokenUtils = new OidcTokenUtils(token);

return new ModelAndView("theme/guidance");
}

@GetMapping("/{courseId}/review")
@Secured({LTIConstants.INSTRUCTOR_AUTHORITY})
public ModelAndView review(@PathVariable("courseId") String courseId, Model model, HttpSession httpSession) {
log.debug("in /review");
OidcAuthenticationToken token = getValidatedToken(courseId);
OidcTokenUtils oidcTokenUtils = new OidcTokenUtils(token);

return new ModelAndView("theme/review");
}

@GetMapping("/{courseId}/submit")
@Secured({LTIConstants.INSTRUCTOR_AUTHORITY})
public ModelAndView submit(@PathVariable("courseId") String courseId, Model model, HttpSession httpSession) {
log.debug("in /submit");
OidcAuthenticationToken token = getValidatedToken(courseId);
OidcTokenUtils oidcTokenUtils = new OidcTokenUtils(token);

return new ModelAndView("theme/submit");
}

@PostMapping("/{courseId}/navigate")
@Secured({LTIConstants.INSTRUCTOR_AUTHORITY})
public ModelAndView navigate(@PathVariable("courseId") String courseId, Model model, @ModelAttribute ImportModel importModel,
@RequestParam(name = "action") String action, @RequestParam(name = "currentPage") int currentPage,
HttpSession httpSession) {
OidcAuthenticationToken token = getValidatedToken(courseId);
OidcTokenUtils oidcTokenUtils = new OidcTokenUtils(token);

// ImportModel sessionImportModel = courseSessionService.getAttributeFromSession(httpSession, courseId, KEY_IMPORT_MODEL, ImportModel.class);

int pageIndex = 0;

switch (action) {
case ACTION_HOME:
//Reset stuff
courseSessionService.removeAttributeFromSession(httpSession, courseId, KEY_IMPORT_MODEL);
break;
case ACTION_BACK:
pageIndex = currentPage - 1;
break;
case ACTION_NEXT:
pageIndex = currentPage + 1;

//Template selection page
// if (importModel.getSelectedTemplateId() != null) {
// sessionImportModel.setSelectedTemplateId(importModel.getSelectedTemplateId());
// sessionImportModel.setSelectedTemplateName(importModel.getSelectedTemplateName());
// }

//Re-save the session model
// courseSessionService.addAttributeToSession(httpSession, courseId, KEY_IMPORT_MODEL, sessionImportModel);
break;
case ACTION_SUBMIT:
// String templateHostingUrl = toolConfig.getTemplateHostingUrl();
// // Use the current application as the template host if no other has been configured.
// if (templateHostingUrl == null) {
// templateHostingUrl = ServletUriComponentsBuilder.fromCurrentContextPath().build().toUriString();
// }
// try {
// wizardService.doApplyTemplate(sessionImportModel, oidcTokenUtils.getUserLoginId(), templateHostingUrl);
// model.addAttribute("redirectUrl", getCanvasContentMigrationsToolUrl(courseId));
// // redirect to the Canvas tool
// return new ModelAndView(redirectToCanvas());
// } catch (WizardServiceException e) {
// model.addAttribute("submitError", e.getMessage());
// return review(courseId, model, httpSession);
// }
}
String url = MessageFormat.format(PAGES[pageIndex], courseId);
return new ModelAndView("redirect:" + url);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,8 @@
return new ModelAndView("redirect:/app/template/" + courseId + "/choose");
case HOMEPAGE:
return new ModelAndView("redirect:/app/homepage/" + courseId + "/homePage");
case THEME:
return new ModelAndView("redirect:/app/theme/" + courseId + "/intro");

Check failure

Code scanning / CodeQL

URL forward from a remote source High

Untrusted URL forward depends on a
user-provided value
.
default:
return new ModelAndView("index");
}
Expand Down
23 changes: 23 additions & 0 deletions src/main/resources/static/css/coursesetupwizard.css
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,26 @@
#csw-header:focus {
outline: none;
}

/* theme specific stuff */
.radio-card--clickable {
position: relative;
}

.radio-card--clickable label::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}

.radio-card--clickable:hover {
background-color: #f5f5f5;
}

/* this one is just for the js */
.radio-card--clickable--checked {
box-shadow: 0 0 0 0.25rem #328bb8;
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/main/resources/static/js/coursesetupwizard.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,11 @@ jQuery(document).ready(function($) {
$(this).val($(this).val().trim());
});

$(".radio-card--clickable input").change(function() {
$("#image-ul>li.radio-card--clickable--checked").removeClass("radio-card--clickable--checked");
if ($(this).is(":checked")) {
$(this).parent().parent().addClass("radio-card--clickable--checked");
}
});

});
58 changes: 45 additions & 13 deletions src/main/resources/templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -123,9 +123,7 @@ <h3 class="rvt-accordion__summary">
<p>
<span class="rvt-text-bold">Note:</span> This option is most useful for creating new
course content. If you want to apply a template to existing course materials,
<a href="https://kb.iu.edu/d/aitz" target="_blank">contact your campus teaching and learning center for assistance.
<span class="rvt-sr-only">Opens in new window</span><rvt-icon name="link-external"></rvt-icon>
</a>
<a href="https://kb.iu.edu/d/aitz" target="_blank">contact your campus teaching and learning center for assistance.<span class="rvt-sr-only">Opens in new window</span><rvt-icon name="link-external"></rvt-icon></a>
</p>
<p>
A template is a collection of content, settings, and design and/or branding elements
Expand Down Expand Up @@ -183,6 +181,39 @@ <h3 class="rvt-accordion__summary">
</div>
</p>
</div>
<h3 class="rvt-accordion__summary">
<button class="rvt-accordion__toggle rvt-p-tb-xs" id="home-page-accordion-4-label"
data-rvt-accordion-trigger="home-page-accordion-4"
aria-controls="home-page-accordion-4">
<span class="rvt-accordion__toggle-text rvt-ts-20">Themes and banners</span>
<div class="rvt-accordion__toggle-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<g fill="currentColor">
<path class="rvt-accordion__icon-bar" d="M8,15a1,1,0,0,1-1-1V2A1,1,0,0,1,9,2V14A1,1,0,0,1,8,15Z" />
<path d="M14,9H2A1,1,0,0,1,2,7H14a1,1,0,0,1,0,2Z" />
</g>
</svg>
</div>
</button>
</h3>
<div class="rvt-accordion__panel" id="home-page-accordion-4" aria-labelledby="home-page-accordion-4-label"
data-rvt-accordion-panel="home-page-accordion-4"
role="region">
<p class="rvt-m-all-remove">
<div class="rvt-prose rvt-flow">
<p>
Select this option for a streamlined design experience with a consistent visual theme and a
custom banner. This option is best suited for new course creation.
</p>
<p>
The wizard will use your selected theme to set up a homepage and templates for your
assignments, quizzes, and pages. For help updating existing content, contact your local
<a href="https://kb.iu.edu/d/aitz" target="_blank">Teaching and Learning Center <span class="rvt-sr-only">Opens in new window</span><rvt-icon name="link-external"></rvt-icon></a>
or the IU Instructional Design Clinic.
</p>
</div>
</p>
</div>
</div>
<form id="wizard-form-main" th:action="@{|/app/${courseId}/menu|}" method="post" enctype="multipart/form-data">
<fieldset class="rvt-fieldset rvt-p-bottom-xs">
Expand All @@ -197,24 +228,25 @@ <h2>What do you want to do? <span class="rvt-sr-only"> Required</span></h2>
<label for="radio-1-1">Import content from another Canvas course into this course</label>
</div>
</li>
<!-- <li>-->
<!-- <div class="rvt-radio">-->
<!-- <input type="radio" name="menuChoice" id="radio-1-2" value="theme" th:value="${T(edu.iu.uits.lms.coursesetupwizard.Constants).MAIN_OPTION.THEME.name()}">-->
<!-- <label for="radio-1-2">Select the theme (page design), banner image, and colors for this course</label>-->
<!-- </div>-->
<!-- </li>-->
<li>
<div class="rvt-radio">
<input type="radio" name="menuChoice" id="radio-1-3"
<input type="radio" name="menuChoice" id="radio-1-2"
th:value="${T(edu.iu.uits.lms.coursesetupwizard.Constants.MAIN_OPTION).TEMPLATE.name()}">
<label for="radio-1-3">Import the customizable IU Course Template or another template into this course</label>
<label for="radio-1-2">Import the customizable IU Course Template or another template into this course</label>
</div>
</li>
<li>
<div class="rvt-radio">
<input type="radio" name="menuChoice" id="radio-1-4"
<input type="radio" name="menuChoice" id="radio-1-3"
th:value="${T(edu.iu.uits.lms.coursesetupwizard.Constants.MAIN_OPTION).HOMEPAGE.name()}">
<label for="radio-1-4">Add a professionally-designed, customizable home page (the IU Home Page) to this course</label>
<label for="radio-1-3">Add a professionally-designed, customizable home page (the IU Home Page) to this course</label>
</div>
</li>
<li>
<div class="rvt-radio">
<input type="radio" name="menuChoice" id="radio-1-4"
th:value="${T(edu.iu.uits.lms.coursesetupwizard.Constants.MAIN_OPTION).THEME.name()}">
<label for="radio-1-4">Select a theme and banner image for this course</label>
</div>
</li>
</ul>
Expand Down
Loading
Loading