feat(texteditor): swap editor view on touhscreens detection

contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue

@@ -24,7 +24,92 @@
  >
  <div :class="indicatorClasses(answer)"></div>
  <VCardText :class="{ 'pb-0': !isAnswerOpen(answerIdx) }">
- <VLayout align-top>
+ <!-- Touch device & desktop layout with toolbar above -->
+ <template v-if="isTouchDevice || screenSizeLevel <= 3">
+ <!-- Toolbar row for touch devices -->
+ <VLayout class="mb-2">
+ <!-- Selection controls -->
+ <VFlex shrink>
+ <VRadioGroup
+ v-if="shouldHaveOneCorrectAnswer"
+ :value="correctAnswersIndices"
+ @change="onCorrectAnswersIndicesUpdate"
+ >
+ <VRadio
+ :value="answerIdx"
+ data-test="answerRadio"
+ color="primary"
+ />
+ </VRadioGroup>
+
+ <Checkbox
+ v-if="isMultipleSelection"
+ :key="answerIdx"
+ :value="answerIdx"
+ :inputValue="correctAnswersIndices"
+ @input="onCorrectAnswersIndicesUpdate"
+ />
+ </VFlex>
+
+ <VSpacer />
+
+ <!-- Toolbar -->
+ <VFlex shrink>
+ <AssessmentItemToolbar
+ :iconActionsConfig="toolbarIconActions"
+ :canMoveUp="!isAnswerFirst(answerIdx)"
+ :canMoveDown="!isAnswerLast(answerIdx)"
+ class="toolbar"
+ analyticsLabel="Answer"
+ data-test="toolbar"
+ @click="onToolbarClick($event, answerIdx)"
+ />
+ </VFlex>
+ </VLayout>
+
+ <!-- Content row for touch devices -->
+ <VLayout align-top>
+ <VFlex xs12>
+ <!-- Answer content component -->
+ <keep-alive :max="5">
+ <div v-if="isInputQuestion">
+ <VTextField
+ v-if="isAnswerOpen(answerIdx)"
+ v-model="answer.answer"
+ class="answer-number"
+ type="number"
+ :rules="[numericRule]"
+ @change="updateAnswerText($event, answerIdx)"
+ />
+ <VTextField
+ v-else
+ :value="answer.answer"
+ class="no-border"
+ type="number"
+ />
+ </div>
+
+ <div v-else>
+ <TipTapEditor
+ v-model="answer.answer"
+ class="editor"
+ :mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
+ :imageProcessor="EditorImageProcessor"
+ @update="updateAnswerText($event, answerIdx)"
+ @minimize="emitClose"
+ />
+ </div>
+ </keep-alive>
+ </VFlex>
+ </VLayout>
+ </template>
+
+ <!-- Desktop layout -->
+ <VLayout
+ v-else
+ align-top
+ >
+ <!-- Selection controls -->
  <VFlex shrink>
  <!--
  VRadio cannot be used without VRadioGroup like VCheckbox but it can
@@ -52,6 +137,7 @@
  />
  </VFlex>
 
+ <!-- Answer content -->
  <VFlex xs10>
  <keep-alive :max="5">
  <!-- Input question shows a text field with type of `number` -->
@@ -122,6 +208,7 @@
 
 <script>
 
+ import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
  import AssessmentItemToolbar from '../AssessmentItemToolbar';
  import { AssessmentItemToolbarActions } from '../../constants';
  import { floatOrIntRegex, getCorrectAnswersIndices, mapCorrectAnswers } from '../../utils';
@@ -131,6 +218,7 @@
  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
 
  import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
+ import { isTouchDevice } from 'shared/utils/browserInfo';
 
  const updateAnswersOrder = answers => {
  return answers.map((answer, idx) => {
@@ -174,6 +262,7 @@
  EditorImageProcessor, // Make it available in the template
  correctAnswersIndices: getCorrectAnswersIndices(this.questionKind, this.answers),
  numericRule: val => floatOrIntRegex.test(val) || this.$tr('numberFieldErrorLabel'),
+ isTouchDevice,
  };
  },
  computed: {
@@ -210,6 +299,10 @@
 
  return [];
  },
+ screenSizeLevel() {
+ const { windowBreakpoint } = useKResponsiveWindow();
+ return windowBreakpoint.value ?? 0;
+ },
  },
  watch: {
  answers() {

contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue

@@ -23,7 +23,48 @@
  :class="hintClasses(hintIdx)"
  >
  <VCardText :class="{ 'pt-0 pb-0': !isHintOpen(hintIdx) }">
- <VLayout align-top>
+ <!-- Touch device & desktop layout with toolbar above -->
+ <template v-if="isTouchDevice || screenSizeLevel <= 3">
+ <VLayout class="mb-2">
+ <VFlex
+ xs1
+ :style="{ 'margin-top': '10px' }"
+ >
+ {{ hintIdx + 1 }}
+ </VFlex>
+ <VSpacer />
+ <VFlex shrink>
+ <AssessmentItemToolbar
+ :iconActionsConfig="toolbarIconActions"
+ :canMoveUp="!isHintFirst(hintIdx)"
+ :canMoveDown="!isHintLast(hintIdx)"
+ class="toolbar"
+ analyticsLabel="Hint"
+ @click="onToolbarClick($event, hintIdx)"
+ />
+ </VFlex>
+ </VLayout>
+ <VLayout>
+ <VFlex xs12>
+ <keep-alive :max="5">
+ <!-- analyticsLabel="Hint"-->
+ <TipTapEditor
+ v-model="hint.hint"
+ :mode="isHintOpen(hintIdx) ? 'edit' : 'view'"
+ :image-processor="EditorImageProcessor"
+ @update="updateHintText($event, hintIdx)"
+ @minimize="emitClose"
+ />
+ </keep-alive>
+ </VFlex>
+ </VLayout>
+ </template>
+
+ <!-- Desktop layout -->
+ <VLayout
+ v-else
+ align-top
+ >
  <VFlex
  xs1
  :style="{ 'margin-top': '10px' }"
@@ -80,10 +121,12 @@
 
 <script>
 
+ import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
  import AssessmentItemToolbar from '../AssessmentItemToolbar';
  import { AssessmentItemToolbarActions } from '../../constants';
  import { swapElements } from 'shared/utils/helpers';
  import EditorImageProcessor from 'shared/views/TipTapEditor/TipTapEditor/services/imageService';
+ import { isTouchDevice } from 'shared/utils/browserInfo';
 
  import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
 
@@ -124,8 +167,15 @@
  AssessmentItemToolbarActions.DELETE_ITEM,
  ],
  EditorImageProcessor,
+ isTouchDevice,
  };
  },
+ computed: {
+ screenSizeLevel() {
+ const { windowBreakpoint } = useKResponsiveWindow();
+ return windowBreakpoint.value ?? 0;
+ },
+ },
  methods: {
  emitOpen(hintIdx) {
  this.$emit('open', hintIdx);

contentcuration/contentcuration/frontend/shared/utils/browserInfo.js

@@ -0,0 +1,11 @@
+/**
+ * Utility functions to detect browser and device capabilities.
+ * Currently studio isn't fully buit for touch devices,
+ * this file should be used for future-proofing
+ */
+
+// Check for presence of the touch event in DOM or multi-touch capabilities
+export const isTouchDevice =
+ 'ontouchstart' in window ||
+ window.navigator?.maxTouchPoints > 0 ||
+ window.navigator?.msMaxTouchPoints > 0;

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue

@@ -12,7 +12,7 @@
  >
  <div v-if="editorMode === 'edit'">
  <EditorToolbar
- v-if="!isMobile"
+ v-if="!isTouchDevice"
  v-on="sharedEventHandlers"
  @minimize="emitMinimize"
  />
@@ -124,8 +124,8 @@
  import { preprocessMarkdown } from './utils/markdown';
  import MobileTopBar from './components/toolbar/MobileTopBar.vue';
  import MobileFormattingBar from './components/toolbar/MobileFormattingBar.vue';
- import { useBreakpoint } from './composables/useBreakpoint';
  import { getTipTapEditorStrings } from './TipTapEditorStrings';
+ import { isTouchDevice } from 'shared/utils/browserInfo.js';
 
  export default defineComponent({
  name: 'RichTextEditor',
@@ -154,8 +154,6 @@
  );
  provide('mathHandler', mathHandler);
 
- const { isMobile } = useBreakpoint();
-
  const imageHandler = useImageHandling(editor);
  provide('imageProcessor', props.imageProcessor);
 
@@ -270,7 +268,7 @@
  linkHandler,
  editor,
  mathHandler,
-isMobile,
+isTouchDevice,
  imageHandler,
  sharedEventHandlers,
  editorMode: computed(() => props.mode),
@@ -353,6 +351,7 @@
 
  /* Overlay for edit mode to allow clicking outside to close */
  .has-overlay {
+ z-index: 10;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.5);
  }

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js

@@ -76,6 +76,10 @@ const MESSAGES = {
  message: 'Code block',
  context: 'Button to insert a block of code',
  },
+ moreButtonText: {
+ message: 'More',
+ context: 'Label for the "More" dropdown button in the toolbar',
+ },
 
  // Format dropdown options
  formatNormal: {