add create and delete checkbox for sharesidebar

Signed-off-by: Greta Doci <9a2413ca1cbc98a3d95fc4d94b0952e5a7369afd@gmail.com>

<template>

		<Avatar class="sharing-entry__avatar"
			:user="share.shareWith"
			:display-name="share.shareWithDisplayName"
			:url="share.shareWithAvatar" />

{{ title }}

		<Actions menu-align="right" class="sharing-entry__actions">
			<template v-if="share.canEdit">

				<ActionCheckbox
					ref="canEdit"
					:checked.sync="canEdit"
					:value="permissionsEdit"
					:disabled="saving">
					{{ t('files_sharing', 'Allow editing') }}
				</ActionCheckbox>

				<ActionCheckbox
					ref="canCreate"
					:checked.sync="canCreate"
					:value="permissionsCreate"
					:disabled="saving">
					{{ t('files_sharing', 'Allow creating') }}
				</ActionCheckbox>

				<ActionCheckbox
					ref="canReshare"
					:checked.sync="canReshare"
					:value="permissionsShare"
					:disabled="saving">
					{{ t('files_sharing', 'Allow resharing') }}
				</ActionCheckbox>

				<ActionCheckbox
					ref="canDelete"
					:checked.sync="canDelete"
					:value="permissionsDelete"
					:disabled="saving">
					{{ t('files_sharing', 'Allow deleting') }}
				</ActionCheckbox>

				<ActionCheckbox :checked.sync="hasExpirationDate"
					:disabled="config.isDefaultExpireDateEnforced || saving"
					@uncheck="onExpirationDisable">
					{{ config.isDefaultExpireDateEnforced
						? t('files_sharing', 'Expiration date enforced')
						: t('files_sharing', 'Set expiration date') }}
				</ActionCheckbox>
				<ActionInput v-if="hasExpirationDate"
					ref="expireDate"
					v-tooltip.auto="{
						content: errors.expireDate,
						show: errors.expireDate,
						trigger: 'manual'
					}"
					:class="{ error: errors.expireDate}"
					:disabled="saving"
					:first-day-of-week="firstDay"
					:lang="lang"
					:value="share.expireDate"
					icon="icon-calendar-dark"
					type="date"
					:not-before="dateTomorrow"
					:not-after="dateMaxEnforced"
					@update:value="onExpirationChange">
					{{ t('files_sharing', 'Enter a date') }}
				</ActionInput>

				<template v-if="canHaveNote">
					<ActionCheckbox
						:checked.sync="hasNote"
						:disabled="saving"
						@uncheck="queueUpdate('note')">
						{{ t('files_sharing', 'Note to recipient') }}
					</ActionCheckbox>
					<ActionTextEditable v-if="hasNote"
						ref="note"
						v-tooltip.auto="{
							content: errors.note,
							show: errors.note,
							trigger: 'manual'
						}"
						:class="{ error: errors.note}"
						:disabled="saving"
						:value.sync="share.note"
						icon="icon-edit"
						@update:value="debounceQueueUpdate('note')" />
				</template>
			</template>

			<ActionButton v-if="share.canDelete"
				icon="icon-delete"
				:disabled="saving"
				@click.prevent="onDelete">
				{{ t('files_sharing', 'Unshare') }}
			</ActionButton>
		</Actions>

</template>

<template>

		<Avatar class="sharing-entry__avatar"
			:user="share.shareWith"
			:display-name="share.shareWithDisplayName"
			:url="share.shareWithAvatar" />

{{ title }}

		<Actions menu-align="right" class="sharing-entry__actions">
			<template v-if="share.canEdit">

				<ActionCheckbox
					ref="canEdit"
					:checked.sync="canEdit"
					:value="permissionsEdit"
					:disabled="saving">
					{{ t('files_sharing', 'Allow editing') }}
				</ActionCheckbox>

				<ActionCheckbox
					ref="canReshare"
					:checked.sync="canReshare"
					:value="permissionsShare"
					:disabled="saving">
					{{ t('files_sharing', 'Can reshare') }}
				</ActionCheckbox>

				<ActionCheckbox :checked.sync="hasExpirationDate"
					:disabled="config.isDefaultExpireDateEnforced || saving"
					@uncheck="onExpirationDisable">
					{{ config.isDefaultExpireDateEnforced
						? t('files_sharing', 'Expiration date enforced')
						: t('files_sharing', 'Set expiration date') }}
				</ActionCheckbox>
				<ActionInput v-if="hasExpirationDate"
					ref="expireDate"
					v-tooltip.auto="{
						content: errors.expireDate,
						show: errors.expireDate,
						trigger: 'manual'
					}"
					:class="{ error: errors.expireDate}"
					:disabled="saving"
					:first-day-of-week="firstDay"
					:lang="lang"
					:value="share.expireDate"
					icon="icon-calendar-dark"
					type="date"
					:not-before="dateTomorrow"
					:not-after="dateMaxEnforced"
					@update:value="onExpirationChange">
					{{ t('files_sharing', 'Enter a date') }}
				</ActionInput>

				<template v-if="canHaveNote">
					<ActionCheckbox
						:checked.sync="hasNote"
						:disabled="saving"
						@uncheck="queueUpdate('note')">
						{{ t('files_sharing', 'Note to recipient') }}
					</ActionCheckbox>
					<ActionTextEditable v-if="hasNote"
						ref="note"
						v-tooltip.auto="{
							content: errors.note,
							show: errors.note,
							trigger: 'manual'
						}"
						:class="{ error: errors.note}"
						:disabled="saving"
						:value.sync="share.note"
						icon="icon-edit"
						@update:value="debounceQueueUpdate('note')" />
				</template>
			</template>

			<ActionButton v-if="share.canDelete"
				icon="icon-delete"
				:disabled="saving"
				@click.prevent="onDelete">
				{{ t('files_sharing', 'Unshare') }}
			</ActionButton>
		</Actions>

</template>


simplify

simplify

<template v-if="itemId">

          <KLinearLoader
            v-show="loading"
            :delay="false"
            type="indeterminate"
          />

          <KButton
            v-if=" availableHints > 0"
            class="hint-btn"
            appearance="basic-link"
            :text="$tr('hint', {hintsLeft: availableHints})"
            :primary="false"
            @click="takeHint"
          />
          <KButton
            v-else
            class="hint-btn"
            appearance="basic-link"
            :text="$tr('noMoreHint')"
            :primary="false"
            :disabled="true"
          />
          <CoreInfoIcon
            class="info-icon"
            tooltipPosition="bottom right"
            :iconAriaLabel="$tr('hintExplanation')"
            :tooltipText="$tr('hintExplanation')"
          />

{{ $tr("hintLabel") }}

      <transition name="expand">

{{ message }}

      </transition>

      <KButton
        v-if="scratchpad"
        id="scratchpad-show"
        :primary="false"
        :raised="false"
        :text="$tr('showScratch')"
      />
      <KButton
        v-else
        id="scratchpad-not-available"
        :primary="false"
        :raised="false"
        disabled
        :text="$tr('notAvailable')"
      />

</template>


Bugfix: using class instead of id.

Bugfix: using class instead of id.

<template>

{{$t('common:beta.title')}}

{{$t('common:beta.description')}}

</template>


fix missing link style

fix missing link style

<template>
<project-template name='VideoGames'>
    <template slot='intro'>

            One of the things that actually got me interested in software development and user-centric design is video games.
            I am a sucker for a game that makes me think, or has a story capable of true escapism.

            I don't think I would have ever gone into design and software development if I hadn't been inspired by the amazing games people have made.
            Every once in a while, a game really just captivates me.
            I only hope that some of the things I make in the future can captivate imaginations to the same degree.

            Video games are an incredible medium with tons of untapped potential.
            I really look forward to seeing what new things get pioneered through it... or for it... in the future.

            <v-carousel class='p-image'
                        relative='/static/video-games/'
                        :init="[
                            'witcher3.jpg',
                            'hellblade.jpg',
                            'grimdawn.jpg',
                            'shogun2.jpg',
                            'titans.jpg',
                            'kotor2.jpg',
                            'borderlands.jpg',
                            'generals.jpg',
                            'infamous.jpg',
                            'guildwars.jpg',
                            'shadow.jpg',
                            'minecraft.jpg',
                            'burnout.jpg',
                            'gta.jpg'
                        ]"/>

                Here are some of the games that really captured my imagination, either for their story, social aspects, and/or their incredible brain-engaging mechanics.

    </template>

    <template slot='what'>

            All that is required from me is to pay attention to the design decisions and technical achievements inside games while I play them.
            I think it is important for anyone interested in software or design to pay close attention to the media they consume, so that they can learn from the polish of the implementaion and way it is presented.

    </template>

    <template slot='why'>

            To some people this may be confusing, as to why I would consider this one of my projects. Let me explain.

            I think that someone interesting in UI design not taking the time to study video games is like a dairy farmer that doesn't drink milk, or an electrician that lives in a cave.
            There is a great deal to be learned about user engagement, user enjoyment, and effective UI from video games.
            Often things get tried out for the first time in earnest inside the domain of video games... because professional software is not willing to take the risks to try out new interaction models.

            For instance, the drop down console was a UI element that was essentially pioneered by the game quake.
            It has since become very common place as part of the game developer's UI that is intergrated by them for use in their own games.
            Some companies even leave it in for users to be able to play around with it.
            That might seem like an odd example, but in reality I think it is a very good one, because I have a dropdown console integrated into my desktop that I use every day.
            The prospect of a tool that I use every day on Linux may never have existed were it not for the concept being pioneered inside a video game first.

    </template>

    <template slot='how'>

            Well, that is probably obvious!
            I play video games and watch for interesting innovations within those games.
            I don't just play games, I sort of study them.

            One of my favourite games to point to as an excellent example of game design is
            Hellblade: Senua's Sacrifice.
            The design is incredibly meticulous and makes use of a whole sense that other games just treat as filler... hearing.
            The game is quite literally not possible to complete without binural audio... and your ability to relate to the main character would not be anywhere near as good if you could not hear exactly what she hears in the way she hears it.
            The game's camera is pulled in very tightly to enhance the cohesion between audio and visual.
            My senses come close to merging with those of the main character, even though I wasn't playing in VR.
            That combined with the detail put into portraying the subject matter makes senua's sacrifice something worth learning from.

            There are plenty of other things I have learned about design, and software implementation from looking at the games I play with a critical eye.
            However, this section would go on forever if I just started listing everything I can remember in one endless lecture.

    </template>
</project-template>
</template>


Check viewer handlers before using them

Check viewer handlers before using them

Signed-off-by: Joas Schilling <ab43a7c9cb5b2380afc4ddf8b3e2583169b39a02@schilljs.com>

<template>
	<file-preview v-bind="filePreview"
		:tabindex="wrapperTabIndex"
		class="file-preview"
		:class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor }"
		@click="handleClick"
		@keydown.enter="handleClick">

		<button v-if="isUploadEditor"
			tabindex="1"
			:aria-label="removeAriaLabel"
			class="remove-file primary">
			<Close
				class="remove-file__icon"
				decorative
				title=""
				@click="$emit('remove-file', id)" />
		</button>
		<ProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" />

			{{ name }}

	</file-preview>
</template>


fix background styling

fix background styling

<template>

    <ScrollingHeader
      :height="appbarHeight"
      :scrollPosition="scrollPosition"
      :alwaysVisible="fixedAppBar"
    >
      <ImmersiveToolbar
        v-if="immersivePage && !fullScreen"
        :appBarTitle="toolbarTitle || appBarTitle"
        :icon="immersivePageIcon"
        :route="immersivePageRoute"
        :primary="immersivePagePrimary"
        :height="headerHeight"
        @nav-icon-click="$emit('navIconClick')"
      />
      <AppBar
        v-else-if="!immersivePage && !fullScreen"
        ref="appBar"
        class="app-bar"
        :title="toolbarTitle || appBarTitle"
        :height="headerHeight"
        :navShown="navShown"
        @toggleSideNav="navShown=!navShown"
      >
        <slot slot="totalPointsMenuItem" name="totalPointsMenuItem"></slot>

          <slot name="app-bar-actions"></slot>

        <slot
          v-if="showSubNav"
          slot="sub-nav"
          name="sub-nav"
        >
        </slot>
      </AppBar>
      <KLinearLoader
        v-if="loading"
        class="loader"
        :style="{top: `${appbarHeight}px`}"
        type="indeterminate"
        :delay="false"
      />
    </ScrollingHeader>

    <SideNav
      :navShown="navShown"
      :headerHeight="headerHeight"
      :width="navWidth"
      @toggleSideNav="navShown=!navShown"
    />

      <AuthMessage
        v-if="notAuthorized"
        :authorizedRole="authorizedRole"
        :header="authorizationErrorHeader"
        :details="authorizationErrorDetails"
      />
      <AppError v-else-if="error" />
      <slot v-else></slot>

    <GlobalSnackbar />
    <UpdateNotification />

</template>


update doc strings for navbar

update doc strings for navbar

<template>

  <nav class="tabs">
    <ul>
      <!-- Contains k-navbar-link components -->
      <slot/>
    </ul>
  </nav>

</template>

<script>

  /**
    * Used for navigation between sub-pages of a top-level Kolibri section
    */

  export default {
    name: 'kNavbar',
  };

</script>

<style lang="stylus" scoped>

  @require '~kolibri.styles.definitions'

  .tabs
    white-space: nowrap
    overflow-x: auto
    overflow-y: hidden

  ul
    margin: 0
    padding: 0

</style>

<template>

  <nav class="tabs">
    <ul>
      <!-- Can contain either tab-buttons or tab-links. -->
      <slot/>
    </ul>
  </nav>

</template>

<script>

  /**
    * Used for navigation within a plugin
    */

  export default {
    name: 'kNavbar',
  };

</script>

<style lang="stylus" scoped>

  @require '~kolibri.styles.definitions'

  .tabs
    white-space: nowrap
    overflow-x: auto
    overflow-y: hidden

  ul
    margin: 0
    padding: 0

</style>


Remove margin-top from coach sub-pages

Remove margin-top from coach sub-pages

<template>

  <core-base
    :topLevelPageName="topLevelPageName"
    :appBarTitle="$tr('coachTitle')"
    :navBarNeeded="!isLoading && !currentPageIsImmersive"
  >

    <div class="coach" v-if="userCanAccessPage">
      <template v-if="!isLoading && showTopNav">
        <class-selector :classes="classList" :currentClassId="classId" @changeClass="changeClass" />
        <top-nav class="top-nav" />
      </template>

      <component :is="currentPage" />

    </div>

    <auth-message v-else authorizedRole="adminOrCoach" />

  </core-base>

</template>

<script>

  import { currentPageIsImmersive } from '../state/getters/main';
  import { PageNames } from '../constants';
  import { isAdmin, isCoach, isSuperuser } from 'kolibri.coreVue.vuex.getters';
  import { TopLevelPageNames } from 'kolibri.coreVue.vuex.constants';
  import authMessage from 'kolibri.coreVue.components.authMessage';
  import topNav from './top-nav';
  import classListPage from './class-list-page';
  import examsPage from './exams-page';
  import createExamPage from './create-exam-page';
  import examReportPage from './exam-report-page';
  import examReportDetailPage from './exam-report-detail-page';
  import groupsPage from './groups-page';
  import coreBase from 'kolibri.coreVue.components.coreBase';
  import learnerExerciseDetailPage from './reports/learner-exercise-detail-page';
  import recentItemsPage from './reports/recent-items-page';
  import channelListPage from './reports/channel-list-page';
  import itemListPage from './reports/item-list-page';
  import learnerListPage from './reports/learner-list-page';
  import classSelector from './class-selector';

  // lessons
  import { LessonsPageNames } from '../lessonsConstants';
  import LessonsRootPage from './lessons/LessonsRootPage';
  import LessonSummaryPage from './lessons/LessonSummaryPage';
  import LessonResourceSelectionPage from './lessons/LessonResourceSelectionPage';

  export default {
    name: 'coachRoot',
    $trs: {
      coachTitle: 'Coach',
    },
    components: {
      authMessage,
      topNav,
      classListPage,
      examsPage,
      createExamPage,
      // reports
      examReportPage,
      examReportDetailPage,
      groupsPage,
      coreBase,
      learnerExerciseDetailPage,
      recentItemsPage,
      channelListPage,
      itemListPage,
      learnerListPage,
      classSelector,
      // lessons
      LessonsRootPage,
      LessonSummaryPage,
      LessonResourceSelectionPage,
    },
    computed: {
      topLevelPageName: () => TopLevelPageNames.COACH,
      currentPage() {
        const pageNameToComponentMap = {
          [PageNames.CLASS_LIST]: 'class-list-page',
          [PageNames.EXAMS]: 'exams-page',
          [PageNames.GROUPS]: 'groups-page',
          [PageNames.CREATE_EXAM]: 'create-exam-page',
          // reports
          [PageNames.RECENT_CHANNELS]: 'channel-list-page',
          [PageNames.RECENT_ITEMS_FOR_CHANNEL]: 'recent-items-page',
          [PageNames.RECENT_LEARNERS_FOR_ITEM]: 'learner-list-page',
          [PageNames.RECENT_LEARNER_ITEM_DETAILS]: 'learner-exercise-detail-page',
          [PageNames.TOPIC_CHANNELS]: 'channel-list-page',
          [PageNames.TOPIC_CHANNEL_ROOT]: 'item-list-page',
          [PageNames.TOPIC_ITEM_LIST]: 'item-list-page',
          [PageNames.TOPIC_LEARNERS_FOR_ITEM]: 'learner-list-page',
          [PageNames.TOPIC_LEARNER_ITEM_DETAILS]: 'learner-exercise-detail-page',
          [PageNames.LEARNER_LIST]: 'learner-list-page',
          [PageNames.LEARNER_CHANNELS]: 'channel-list-page',
          [PageNames.LEARNER_CHANNEL_ROOT]: 'item-list-page',
          [PageNames.LEARNER_ITEM_LIST]: 'item-list-page',
          [PageNames.LEARNER_ITEM_DETAILS]: 'learner-exercise-detail-page',
          [PageNames.EXAM_REPORT]: 'exam-report-page',
          [PageNames.EXAM_REPORT_DETAIL]: 'exam-report-detail-page',

          // lessons
          [LessonsPageNames.ROOT]: 'LessonsRootPage',
          [LessonsPageNames.SUMMARY]: 'LessonSummaryPage',
          [LessonsPageNames.SELECTION_ROOT]: 'LessonResourceSelectionPage',
          [LessonsPageNames.SELECTION]: 'LessonResourceSelectionPage',
        };
        return pageNameToComponentMap[this.pageName];
      },
      showTopNav() {
        return (
          this.pageName !== PageNames.CLASS_LIST &&
          this.userCanAccessPage &&
          !this.currentPageIsImmersive
        );
      },
      userCanAccessPage() {
        return this.isCoach || this.isAdmin || this.isSuperuser;
      },
    },
    methods: {
      changeClass(classSelectedId) {
        if (this.pageName === PageNames.EXAM_REPORT) {
          this.$router.push({
            name: PageNames.EXAMS,
            params: { classId: classSelectedId },
          });
        } else {
          this.$router.push({ params: { classId: classSelectedId } });
        }
      },
    },
    vuex: {
      getters: {
        currentPageIsImmersive,
        pageName: state => state.pageName,
        isAdmin,
        isCoach,
        isSuperuser,
        classList: state => state.classList,
        classId: state => state.classId,
        isLoading: state => state.core.loading,
      },
    },
  };

</script>

<style lang="stylus" scoped>

  @require '~kolibri.styles.definitions'

  .coach
    overflow: auto

  .top-nav
    margin-bottom: 32px

</style>

<template>

  <core-base
    :topLevelPageName="topLevelPageName"
    :appBarTitle="$tr('coachTitle')"
    :navBarNeeded="!isLoading && !currentPageIsImmersive"
  >

    <div class="coach" v-if="userCanAccessPage">
      <template v-if="!isLoading && showTopNav">
        <class-selector :classes="classList" :currentClassId="classId" @changeClass="changeClass" />
        <top-nav />
      </template>

      <component
        class="content"
        :is="currentPage"
      />

    </div>

    <auth-message v-else authorizedRole="adminOrCoach" />

  </core-base>

</template>

<script>

  import { currentPageIsImmersive } from '../state/getters/main';
  import { PageNames } from '../constants';
  import { isAdmin, isCoach, isSuperuser } from 'kolibri.coreVue.vuex.getters';
  import { TopLevelPageNames } from 'kolibri.coreVue.vuex.constants';
  import authMessage from 'kolibri.coreVue.components.authMessage';
  import topNav from './top-nav';
  import classListPage from './class-list-page';
  import examsPage from './exams-page';
  import createExamPage from './create-exam-page';
  import examReportPage from './exam-report-page';
  import examReportDetailPage from './exam-report-detail-page';
  import groupsPage from './groups-page';
  import coreBase from 'kolibri.coreVue.components.coreBase';
  import learnerExerciseDetailPage from './reports/learner-exercise-detail-page';
  import recentItemsPage from './reports/recent-items-page';
  import channelListPage from './reports/channel-list-page';
  import itemListPage from './reports/item-list-page';
  import learnerListPage from './reports/learner-list-page';
  import classSelector from './class-selector';

  // lessons
  import { LessonsPageNames } from '../lessonsConstants';
  import LessonsRootPage from './lessons/LessonsRootPage';
  import LessonSummaryPage from './lessons/LessonSummaryPage';
  import LessonResourceSelectionPage from './lessons/LessonResourceSelectionPage';

  export default {
    name: 'coachRoot',
    $trs: {
      coachTitle: 'Coach',
    },
    components: {
      authMessage,
      topNav,
      classListPage,
      examsPage,
      createExamPage,
      // reports
      examReportPage,
      examReportDetailPage,
      groupsPage,
      coreBase,
      learnerExerciseDetailPage,
      recentItemsPage,
      channelListPage,
      itemListPage,
      learnerListPage,
      classSelector,
      // lessons
      LessonsRootPage,
      LessonSummaryPage,
      LessonResourceSelectionPage,
    },
    computed: {
      topLevelPageName: () => TopLevelPageNames.COACH,
      currentPage() {
        const pageNameToComponentMap = {
          [PageNames.CLASS_LIST]: 'class-list-page',
          [PageNames.EXAMS]: 'exams-page',
          [PageNames.GROUPS]: 'groups-page',
          [PageNames.CREATE_EXAM]: 'create-exam-page',
          // reports
          [PageNames.RECENT_CHANNELS]: 'channel-list-page',
          [PageNames.RECENT_ITEMS_FOR_CHANNEL]: 'recent-items-page',
          [PageNames.RECENT_LEARNERS_FOR_ITEM]: 'learner-list-page',
          [PageNames.RECENT_LEARNER_ITEM_DETAILS]: 'learner-exercise-detail-page',
          [PageNames.TOPIC_CHANNELS]: 'channel-list-page',
          [PageNames.TOPIC_CHANNEL_ROOT]: 'item-list-page',
          [PageNames.TOPIC_ITEM_LIST]: 'item-list-page',
          [PageNames.TOPIC_LEARNERS_FOR_ITEM]: 'learner-list-page',
          [PageNames.TOPIC_LEARNER_ITEM_DETAILS]: 'learner-exercise-detail-page',
          [PageNames.LEARNER_LIST]: 'learner-list-page',
          [PageNames.LEARNER_CHANNELS]: 'channel-list-page',
          [PageNames.LEARNER_CHANNEL_ROOT]: 'item-list-page',
          [PageNames.LEARNER_ITEM_LIST]: 'item-list-page',
          [PageNames.LEARNER_ITEM_DETAILS]: 'learner-exercise-detail-page',
          [PageNames.EXAM_REPORT]: 'exam-report-page',
          [PageNames.EXAM_REPORT_DETAIL]: 'exam-report-detail-page',

          // lessons
          [LessonsPageNames.ROOT]: 'LessonsRootPage',
          [LessonsPageNames.SUMMARY]: 'LessonSummaryPage',
          [LessonsPageNames.SELECTION_ROOT]: 'LessonResourceSelectionPage',
          [LessonsPageNames.SELECTION]: 'LessonResourceSelectionPage',
        };
        return pageNameToComponentMap[this.pageName];
      },
      showTopNav() {
        return (
          this.pageName !== PageNames.CLASS_LIST &&
          this.userCanAccessPage &&
          !this.currentPageIsImmersive
        );
      },
      userCanAccessPage() {
        return this.isCoach || this.isAdmin || this.isSuperuser;
      },
    },
    methods: {
      changeClass(classSelectedId) {
        if (this.pageName === PageNames.EXAM_REPORT) {
          this.$router.push({
            name: PageNames.EXAMS,
            params: { classId: classSelectedId },
          });
        } else {
          this.$router.push({ params: { classId: classSelectedId } });
        }
      },
    },
    vuex: {
      getters: {
        currentPageIsImmersive,
        pageName: state => state.pageName,
        isAdmin,
        isCoach,
        isSuperuser,
        classList: state => state.classList,
        classId: state => state.classId,
        isLoading: state => state.core.loading,
      },
    },
  };

</script>

<style lang="stylus" scoped>

  @require '~kolibri.styles.definitions'

  .coach
    overflow: auto

  .content
    margin-top: 32px

</style>


fix: change the background colour of the send button uniformly (#430)

<template>

    <component
      :is="activeComponent"
    />

      <button
        class="TransactionConfirm__back-button blue-button mr-2"
        @click="emitBack"
      >
        {{ $t('COMMON.BACK') }}
      </button>

      <button
        class="TransactionConfirm__send-button blue-button"
        @click="emitConfirm"
      >
        {{ $t('TRANSACTION.SEND') }}

          {{ formatter_networkCurrency(totalAmount) }}

      </button>

</template>


fix: impl correct delete version

fix: impl correct delete version

Former-commit-id: b62523c841ec7b8b7c83f6acb08f033535eac2e3

<template>
	<v-list v-if="versions.length !== 0" dark style="overflow-y: scroll; scrollbar-width: 0; background-color: transparent;">
		<template v-for="(item, index) in versions">
			<v-list-tile ripple :key="index" @click="selectVersion(item)" style="margin: 0px 0;">
				<v-list-tile-avatar>
					<v-btn @click="openVersionDir($event, item)" icon style="cursor: pointer">
						<v-icon> folder </v-icon>
					</v-btn>
				</v-list-tile-avatar>
				<v-list-tile-title>
					{{ item.id }}
				</v-list-tile-title>
				<v-list-tile-sub-title v-html="item.minecraft"></v-list-tile-sub-title>
				<v-list-tile-action style="justify-content: flex-end;">
					<v-btn @mousedown="$event.stopPropagation()" style="cursor: pointer" @click="deleteVersion($event, item)"
					  icon color="red" flat>
						<v-icon>delete</v-icon>
					</v-btn>
					<!-- <v-chip label dark v-if="item.forge">
						Forge
					</v-chip> -->
				</v-list-tile-action>
			</v-list-tile>
		</template>
		<v-dialog v-model="deletingVersion" max-width="290">
			<v-card dark>
				<v-card-title class="headline">{{$t('version.deleteTitle')}}</v-card-title>
				<v-card-text>
					{{$t('version.deleteDescription')}}
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn flat @click="cancelDeleting()">{{$t('no')}}</v-btn>
					<v-btn color="red darken-1" flat @click="comfireDeleting()">{{$t('yes')}}</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</v-list>
	<v-container v-else fill-height>
		<v-layout align-center justify-center row fill-height>
			<v-flex shrink tag="h1" class="white--text">
				<v-btn large>
					<v-icon left @click="browseVersoinsFolder"> folder </v-icon>
					{{$t('version.noLocalVersion')}}
				</v-btn>
			</v-flex>
		</v-layout>
	</v-container>
</template>

<script>
export default {
  data() {
    return {
      deletingVersion: false,
      deletingVersionId: '',
    }
  },
  props: {
    filterText: {
      type: String,
      default: '',

    },
  },
  computed: {
    versions() {
      return this.$repo.state.version.local
        .filter(version => version.id.indexOf(this.filterText) !== -1);
    },
  },
  methods: {
    selectVersion(v) {
      this.$emit('value', v);
    },
    browseVersoinsFolder() {
      this.$repo.dispatch('showVersionsDirectory');
    },
    openVersionDir(event, v) {
      event.stopPropagation();
      this.$repo.dispatch('showVersionDirectory', v.folder);
      return false;
    },
    deleteVersion(event, v) {
      event.stopPropagation();
      this.deletingVersion = true;
      this.deletingVersionId = v.folder;
      return false;
    },
    comfireDeleting() {
      this.$repo.dispatch('deleteVersion', this.deletingVersionId);
      this.deletingVersion = false;
      this.deletingVersionId = '';
    },
    cancelDeleting() {
      this.deletingVersion = false;
      this.deletingVersionId = '';
    }
  }
}
</script>

<style>
</style>

<template>
	<v-list v-if="versions.length !== 0" dark style="overflow-y: scroll; scrollbar-width: 0; background-color: transparent;">
		<template v-for="(item, index) in versions">
			<v-list-tile ripple :key="index" @click="selectVersion(item)" style="margin: 0px 0;">
				<v-list-tile-avatar>
					<v-btn @click="openVersionDir($event, item)" icon style="cursor: pointer">
						<v-icon> folder </v-icon>
					</v-btn>
				</v-list-tile-avatar>
				<v-list-tile-title>
					{{ item.id }}
				</v-list-tile-title>
				<v-list-tile-sub-title v-html="item.minecraft"></v-list-tile-sub-title>
				<v-list-tile-action style="justify-content: flex-end;">
					<v-btn @mousedown="$event.stopPropagation()" style="cursor: pointer" @click="deleteVersion($event, item)"
					  icon color="red" flat>
						<v-icon>delete</v-icon>
					</v-btn>
					<!-- <v-chip label dark v-if="item.forge">
						Forge
					</v-chip> -->
				</v-list-tile-action>
			</v-list-tile>
		</template>
		<v-dialog v-model="deletingVersion" max-width="290">
			<v-card dark>
				<v-card-title class="headline">{{$t('version.deleteTitle')}}</v-card-title>
				<v-card-text>
					{{$t('version.deleteDescription')}}
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn flat @click="cancelDeleting()">{{$t('no')}}</v-btn>
					<v-btn color="red darken-1" flat @click="comfireDeleting()">{{$t('yes')}}</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>
	</v-list>
	<v-container v-else fill-height>
		<v-layout align-center justify-center row fill-height>
			<v-flex shrink tag="h1" class="white--text">
				<v-btn large>
					<v-icon left @click="browseVersoinsFolder"> folder </v-icon>
					{{$t('version.noLocalVersion')}}
				</v-btn>
			</v-flex>
		</v-layout>
	</v-container>
</template>

<script>
export default {
  data() {
    return {
      deletingVersion: false,
      deletingVersionId: '',
    }
  },
  props: {
    filterText: {
      type: String,
      default: '',

    },
  },
  computed: {
    versions() {
      return this.$repo.state.version.local
        .filter(version => version.id.indexOf(this.filterText) !== -1);
    },
  },
  methods: {
    selectVersion(v) {
      this.$emit('value', v);
    },
    browseVersoinsFolder() {
      this.$repo.dispatch('showVersionsDirectory');
    },
    openVersionDir(event, v) {
      event.stopPropagation();
      this.$repo.dispatch('showVersionDirectory', v.folder);
      return false;
    },
    deleteVersion(event, v) {
      event.stopPropagation();
      this.deletingVersion = true;
      this.deletingVersionId = v.folder;
      return false;
    },
    comfireDeleting(v) {
      this.$repo.dispatch('deleteVersion', v.folder);
      this.deletingVersion = false;
      this.deletingVersionId = '';
    },
    cancelDeleting() {
      this.deletingVersion = false;
      this.deletingVersionId = '';
    }
  }
}
</script>

<style>
</style>


fixes for accessibility checker

fixes for accessibility checker

<template>

Register of Well Drillers and Well Pump Installers

Learn more about registering as a well driller or well pump installer in B.C.

        <button v-if="!user" type="button" class="btn btn-primary" @click="loginPanelToggle = !loginPanelToggle">Log in</button>
        <button v-if="user" type="button" class="btn btn-secondary" @click="logout" id="logoutButton">Log out</button>

          <form @submit.prevent="login">

                Username
                <input type="text" class="form-control" id="loginUser" placeholder="Search" v-model="credentials.username">

                Password
                <input type="password" class="form-control" id="loginPassword" placeholder="Password" v-model="credentials.password">

                <button id="loginButton" type="submit" class="btn btn-primary">Login</button>

          </form>

Logged in as {{ user.username }}

                <button type="button" class="btn btn-primary">Add new entry</button>
                <button type="button" class="btn btn-primary">Manage companies</button>

Search for a Well Driller or Well Installer

            <form @submit.prevent="drillerSearch" @reset.prevent="drillerSearchReset">

                  Choose professional type:

                    <input type="radio" name="activitySelector" id="activityDriller" v-model="searchParams.activity" value="DRILL" style="margin-top: 0px"> Well Driller

                    <input type="radio" name="activitySelector" id="activityInstaller" v-model="searchParams.activity" value="PUMP" style="margin-top: 0px"> Pump Installer

                  Community
                  <select id="cityOptions" class="form-control" v-model="searchParams.city" multiple="multiple" style="min-height: 5.8rem">
                    <option value="">All</option>
                    <option v-for="city in cityList[formatActivityForCityList]" :key="city.city + city.province" :value="city.city">{{city.city}}</option>
                  </select>

                  Registration status
                  <select v-model="searchParams.status" class="form-control" id="registrationStatusSelect">
                    <option value="">All</option>
                    <option value="PENDING">Pending</option>
                    <option value="INACTIVE">Not registered</option>
                    <option value="ACTIVE">Registered</option>
                    <option value="REMOVED">Removed</option>
                  </select>

                  Individual, company, or registration number
                  <input type="text" class="form-control" id="regTypeInput" placeholder="Search" v-model="searchParams.search">

                  Entries
                  <select class="form-control input-sm" v-model="searchParams.limit" id="registriesResultsNumberSelect"><option>10</option><option>25</option></select>

                  <button type="submit" class="btn btn-primary" id="personSearchSubmit">Submit</button>
                  <button type="reset" class="btn btn-secondary" id="personSearchReset">Reset</button>

            </form>

{{ activityTitle }} Results

        <api-error :error="listError" resetter="setListError"></api-error>

        <register-table @sort="sortTable" :activity="lastSearchedActivity"/>

        <register-legal-text class="register-legal" :activity="lastSearchedActivity"/>

</template>

<template>

Register of Well Drillers and Well Pump Installers

Learn more about registering as a well driller or well pump installer in B.C.

        <button v-if="!user" type="button" class="btn btn-primary" @click="loginPanelToggle = !loginPanelToggle">Log in</button>
        <button v-if="user" type="button" class="btn btn-secondary" @click="logout" id="logoutButton">Log out</button>

          <form @submit.prevent="login">

                Username
                <input type="text" class="form-control" id="loginUser" placeholder="Search" v-model="credentials.username">

                Password
                <input type="password" class="form-control" id="loginPassword" placeholder="Password" v-model="credentials.password">

                <button id="loginButton" type="submit" class="btn btn-primary">Login</button>

          </form>

Logged in as {{ user.username }}

                <button type="button" class="btn btn-primary">Add new entry</button>
                <button type="button" class="btn btn-primary">Manage companies</button>

Search for a Well Driller or Well Installer

            <form @submit.prevent="drillerSearch" @reset.prevent="drillerSearchReset">

                  Choose professional type:

                    <input type="radio" name="activitySelector" id="activityDriller" v-model="searchParams.activity" value="DRILL" style="margin-top: 0px"> Well Driller

                    <input type="radio" name="activitySelector" id="activityInstaller" v-model="searchParams.activity" value="PUMP" style="margin-top: 0px"> Pump Installer

                  Community
                  <select id="cityOptions" class="form-control" v-model="searchParams.city" multiple="multiple" style="min-height: 5.8rem">
                    <option value="">All</option>
                    <option v-for="city in cityList[formatActivityForCityList]" :key="city.city + city.province" :value="city.city">{{city.city}}</option>
                  </select>

                  Registration status
                  <select v-model="searchParams.status" class="form-control" id="registrationStatusSelect">
                    <option value="">All</option>
                    <option value="PENDING">Pending</option>
                    <option value="INACTIVE">Not registered</option>
                    <option value="ACTIVE">Registered</option>
                    <option value="REMOVED">Removed</option>
                  </select>

                  Individual, company, or registration number
                  <input type="text" class="form-control" id="regTypeInput" placeholder="Search" v-model="searchParams.search">

                  Entries
                  <select class="form-control input-sm" v-model="searchParams.limit"><option>10</option><option>25</option></select>

                  <button type="submit" class="btn btn-primary" id="personSearchSubmit">Submit</button>
                  <button type="reset" class="btn btn-secondary" id="personSearchReset">Reset</button>

            </form>

{{ activityTitle }} Results

        <api-error :error="listError" resetter="setListError"></api-error>

        <register-table @sort="sortTable" :activity="lastSearchedActivity"/>

        <register-legal-text class="register-legal" :activity="lastSearchedActivity"/>

</template>


wyswietlanie podpowiedzi artykulow

wyswietlanie podpowiedzi artykulow

<template>

      <form :action="url" role="search" ref="search" class="flex-grow-1">
        <input
          ref="input"
          @focus="showDropdown"
          @keydown.esc.prevent="hideDropdown"
          @keyup="completion"
          @keyup.up.prevent="up"
          @keyup.down.prevent="down"
          @keydown.enter.prevent="changeUrl"
          @search="clearInput"
          v-model="value"
          type="search"
          name="q"
          autocomplete="off"
          placeholder="Kliknij, aby wyszukać (Ctrl+spacja)"
        >
      </form>

 0" class="search-dropdown">

          <template v-for="category in categories">

{{ getCategoryLabel(category) }}

              <component :is="makeDecorator(child)" :item="child" :value="value"></component>

          </template>

</template>


update

update

<template>

    <component is="{{ component }}" widget="{{ widget }}" editing="{{ isEditing }}"></component>

</template>


Use one color for pagebar

Use one color for pagebar

<template lang='pug'>
transition-group.pagebar(
  :name='animation'
  tag='div'
)
  .page(
    v-for='tisshu of tisshus'
    :key='tisshu.id'
  )
    .contents(
      @click='$emit("jump", tisshu.id)'
      :style='tisshu.style'
      :class='{current: tisshu.current}'
    )
      .fa.fa-circle(v-if='tisshu.ready')
      .fa.fa-circle-o(v-else)
</template>

<script>
module.exports = {
  props: ['c', 'outerAnim'],

  computed: {
    animation() {
      switch(this.outerAnim) {
        case 'up':
        case 'down':
          return `page-${this.outerAnim}`
        break

        default:
          return 'page'
        break
      }
    },

    tisshus() {
      let {tisshus, tisshuIndex} = this.$store.state.posts
      tisshus = tisshus.map((tisshu, index) => {
        let current = index === tisshuIndex
        return Object.assign(
          Object.create(tisshu),
          {
            current,
            style: {
              color: this.c[current ? 4 : 2]
            }
          }
        )
      })

      let after = tisshus.length - tisshuIndex - 1
      let difference = Math.abs(tisshuIndex - after)
      let filler = Array(difference).fill('').map((element, index) => ({
        id: `filler-${index}`,
        style: {visibility: 'hidden'}
      }))

      if(tisshuIndex > after) return [...tisshus, ...filler]
      else return [...filler, ...tisshus]
    }
  }
}
</script>

<template lang='pug'>
transition-group.pagebar(
  :name='animation'
  tag='div'
)
  .page(
    v-for='tisshu of tisshus'
    :key='tisshu.id'
  )
    .contents(
      @click='$emit("jump", tisshu.id)'
      :style='tisshu.style'
      :class='{current: tisshu.current}'
    )
      .fa.fa-circle(v-if='tisshu.ready')
      .fa.fa-circle-o(v-else)
</template>

<script>
module.exports = {
  props: ['c', 'outerAnim'],

  computed: {
    animation() {
      switch(this.outerAnim) {
        case 'up':
        case 'down':
          return `page-${this.outerAnim}`
        break

        default:
          return 'page'
        break
      }
    },

    tisshus() {
      let {tisshus, tisshuIndex} = this.$store.state.posts
      tisshus = tisshus.map((tisshu, index) => {
        let color = tisshu.colors || this.c
        let current = index === tisshuIndex
        return Object.assign(
          Object.create(tisshu),
          {
            current,
            style: {
              color: color[current ? 4 : 2]
            }
          }
        )
      })

      let after = tisshus.length - tisshuIndex - 1
      let difference = Math.abs(tisshuIndex - after)
      let filler = Array(difference).fill('').map((element, index) => ({
        id: `filler-${index}`,
        style: {visibility: 'hidden'}
      }))

      if(tisshuIndex > after) return [...tisshus, ...filler]
      else return [...filler, ...tisshus]
    }
  }
}
</script>


Fix the colors property name `gray` to `grey` (#200)

Signed-off-by: Alexandre Bonneau <583be344e8092fb00993b527f851a56f1bc80909@linuxfr.eu>

<template lang="pug">
  doc-view
    template(slot-scope="{ namespace }")
      section#light-and-dark
        section-head(:value="`${namespace}.lightAndDarkHeader`")
        section-text(:value="`${namespace}.lightAndDarkText1`")
        markup(lang="html")
          |<v-app dark>
          | ...
          |</v-app>
        section-text(:value="`${namespace}.lightAndDarkText2`")

      section#customizing
        section-head(:value="`${namespace}.customizingHeader`")
        section-text(:value="`${namespace}.customizingText1`")
        markup(lang="javascript")
          | {
          |   primary: '#1976D2',
          |   secondary: '#424242',
          |   accent: '#82B1FF',
          |   error: '#FF5252',
          |   info: '#2196F3',
          |   success: '#4CAF50',
          |   warning: '#FFC107'
          | }
        section-text(:value="`${namespace}.customizingText2`")
        markup(lang="javascript")
          | Vue.use(Vuetify, {
          |   theme: {
          |     primary: '#3f51b5',
          |     secondary: '#b0bec5',
          |     accent: '#8c9eff',
          |     error: '#b71c1c'
          |   }
          | })
        section-text(:value="`${namespace}.customizingText3`")
        markup(lang="javascript")
          | import colors from 'vuetify/es5/util/colors'
          |
          | Vue.use(Vuetify, {
          |   theme: {
          |     primary: colors.purple.base,
          |     secondary: colors.grey.darken1,
          |     accent: colors.shades.black,
          |     error: colors.red.accent3
          |   }
          | })
        section-text(:value="`${namespace}.customizingText4`")
        section-text(:value="`${namespace}.customizingText5`")
        markup(lang="javascript")
          | this.$vuetify.theme.primary = '#4caf50'

      section#stylus-guide
        section-head(:value="`${namespace}.stylusHeader`")
        section-text(:value="`${namespace}.stylusText1`")
        h3.mb-3 {{ $t(`${namespace}.stylusHeader2`) }}
        section-text(:value="`${namespace}.stylusText2`")
        markup(lang="cli")
          | $ npm i stylus stylus-loader style-loader css-loader --save-dev
          |// or
          | $ yarn add -D stylus stylus-loader style-loader css-loader
        section-text(:value="`${namespace}.stylusText3`")
        markup(lang="javascript")
          | module: {
          |   rules: [
          |     {
          |       test: /\.styl$/,
          |       loader: ['style-loader', 'css-loader', 'stylus-loader']
          |     }
          |   ]
          | }
        section-text(:value="`${namespace}.stylusText4`")
        markup(lang="stylus")
          | // main.styl
          | @import '~vuetify/src/stylus/main'
        section-text(:value="`${namespace}.stylusText5`")
        markup(lang="javascript")
          | // app.js
          | import './stylus/main.styl'
        section-text(:value="`${namespace}.stylusText6`")
        h3.mb-3 {{ $t(`${namespace}.stylusHeader3`) }}
        section-text(:value="`${namespace}.stylusText7`")
        markup(lang="stylus")
          | $body-font-family = 'Open Sans'
          | $alert-font-size = 18px
          |
          | @import '~vuetify/src/stylus/main'
          | // For a-la-carte
          | @import '~vuetify/src/stylus/app'
</template>

<template lang="pug">
  doc-view
    template(slot-scope="{ namespace }")
      section#light-and-dark
        section-head(:value="`${namespace}.lightAndDarkHeader`")
        section-text(:value="`${namespace}.lightAndDarkText1`")
        markup(lang="html")
          |<v-app dark>
          | ...
          |</v-app>
        section-text(:value="`${namespace}.lightAndDarkText2`")

      section#customizing
        section-head(:value="`${namespace}.customizingHeader`")
        section-text(:value="`${namespace}.customizingText1`")
        markup(lang="javascript")
          | {
          |   primary: '#1976D2',
          |   secondary: '#424242',
          |   accent: '#82B1FF',
          |   error: '#FF5252',
          |   info: '#2196F3',
          |   success: '#4CAF50',
          |   warning: '#FFC107'
          | }
        section-text(:value="`${namespace}.customizingText2`")
        markup(lang="javascript")
          | Vue.use(Vuetify, {
          |   theme: {
          |     primary: '#3f51b5',
          |     secondary: '#b0bec5',
          |     accent: '#8c9eff',
          |     error: '#b71c1c'
          |   }
          | })
        section-text(:value="`${namespace}.customizingText3`")
        markup(lang="javascript")
          | import colors from 'vuetify/es5/util/colors'
          |
          | Vue.use(Vuetify, {
          |   theme: {
          |     primary: colors.purple.base,
          |     secondary: colors.gray.darken1,
          |     accent: colors.shades.black,
          |     error: colors.red.accent3
          |   }
          | })
        section-text(:value="`${namespace}.customizingText4`")
        section-text(:value="`${namespace}.customizingText5`")
        markup(lang="javascript")
          | this.$vuetify.theme.primary = '#4caf50'

      section#stylus-guide
        section-head(:value="`${namespace}.stylusHeader`")
        section-text(:value="`${namespace}.stylusText1`")
        h3.mb-3 {{ $t(`${namespace}.stylusHeader2`) }}
        section-text(:value="`${namespace}.stylusText2`")
        markup(lang="cli")
          | $ npm i stylus stylus-loader style-loader css-loader --save-dev
          |// or
          | $ yarn add -D stylus stylus-loader style-loader css-loader
        section-text(:value="`${namespace}.stylusText3`")
        markup(lang="javascript")
          | module: {
          |   rules: [
          |     {
          |       test: /\.styl$/,
          |       loader: ['style-loader', 'css-loader', 'stylus-loader']
          |     }
          |   ]
          | }
        section-text(:value="`${namespace}.stylusText4`")
        markup(lang="stylus")
          | // main.styl
          | @import '~vuetify/src/stylus/main'
        section-text(:value="`${namespace}.stylusText5`")
        markup(lang="javascript")
          | // app.js
          | import './stylus/main.styl'
        section-text(:value="`${namespace}.stylusText6`")
        h3.mb-3 {{ $t(`${namespace}.stylusHeader3`) }}
        section-text(:value="`${namespace}.stylusText7`")
        markup(lang="stylus")
          | $body-font-family = 'Open Sans'
          | $alert-font-size = 18px
          |
          | @import '~vuetify/src/stylus/main'
          | // For a-la-carte
          | @import '~vuetify/src/stylus/app'
</template>


fix: 🐛 undefined isActive property

fix: 🐛 undefined isActive property

<template>

    <v-item-group
      v-if="step >= 1 && toTokenSymbol && !hasProviderError"
      :value="0"
    >
      <v-row no-gutters>

 0" class="mew-heading-3 mb-5 pl-4">
          Select rate

        <v-col
          v-for="(quote, idx) in providersList"
          :key="`quote-${idx}`"
          cols="12"
          class="mb-1"
        >
          <v-item v-slot="{ active, toggle }" :ref="`card${idx}`">
            <v-container
              :class="[
                active ? 'rate-active' : '',
                'd-flex align-center rate py-0 px-1'
              ]"
              @click="
                toggle();
                setProvider(idx, true);
              "
            >
              <v-row no-gutters class="align-center justify-start">

                <v-col cols="10" sm="7">
                  <v-container class="pa-2">
                    <v-row
                      class="align-center justify-start pl-5 pr-1 py-3 py-sm-4"
                    >

                      <mew-token-container size="small" :img="toTokenIcon" />

                          Best Rate

                            {{ quote.amount }} {{ toTokenSymbol }}

                          <mew-tooltip
                            v-if="quote.amount && quote.amount !== ''"
                            class="pl-1"
                            :text="quote.tooltip"
                          />

                    </v-row>
                  </v-container>
                </v-col>

                <v-col cols="2" sm="5">
                  <v-row class="align-center justify-end pr-3">
                    <mew-checkbox :value="active" />
                  </v-row>
                </v-col>
              </v-row>
            </v-container>
          </v-item>
        </v-col>
      </v-row>
    </v-item-group>

= 1 && providersCut > 0 && toTokenSymbol && !hasProviderError"
      class="cursor--pointer user-select--none greenPrimary--text mt-7 ml-4"
      @click="showMore = !showMore"
    >
      {{ moreProvidersText }}
      <v-icon v-show="!showMore" small color="greenPrimary"
        >mdi-arrow-down</v-icon
      >
      <v-icon v-show="showMore" small color="greenPrimary">mdi-arrow-up</v-icon>

    <app-user-msg-block
      v-if="step >= 1 && hasProviderError && !isLoading"
      :message="providersError"
      :is-alert="false"
      container-padding="pa-4 py-6"
    />

</template>


display SLN only if exists

display SLN only if exists

<template>

          {{ section.curriculum_abbr }}
          {{ section.course_number }}
          {{ section.section_id }}

{{ section.course_title }}

          SLN
          <a
          :href="getTimeScheHref(section)"
          :title="`Time Schedule for SLN ${section.sln}`"
          :data-linklabel="getTimeScheLinkLable(section)"
          target="_blank"
        >
          {{ section.sln }}

            {{ ucfirst(section.section_type) }}

        <b-button v-if="section.mini_card"
            variant="dark" size="sm"
            :aria-label="`Remove ${section.id} mini-card`"
            title="Click to remove this mini-card"
            @click="toggleMini(section)">

        Term

        Summer
        {{
          section.summer_term
            .split('-')
            .map(ucfirst)
            .join('-')
        }}

        Dates

        {{ sectionFormattedDates(section) }}

        Your Status

        On Standby

</template>


Remove eslint no-unused-var temporarily

Remove eslint no-unused-var temporarily

<template>
  <div>
    <codemirror v-model="mdContent" ref="myEditor" :options="editorOption" @changed="codeChange">
    </codemirror>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror';
import navbar from './Navbar';
import viewer from './Viewer';

/* eslint no-unused-vars: 0 */
let codeMirrorInstance = null;

/* eslint prefer-const: 0 */
export default {
  components: {
    codemirror,
    navbar,
    viewer,
  },
  props: ['value'],
  data() {
    return {
      mdContent: this.value,
      editorOption: {
        tabSize: 4,
        mode: 'text/x-markdown',
        theme: 'base16-dark',
        lineNumbers: true,
        lineWrapping: true,
        line: true,
        keyMap: 'sublime',
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        styleSelectedText: true,
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
      }
    };
  },
  methods: {
    codeChange(newCode) {
      this.$emit('input', newCode);
    }
  },
  computed: {
    editor() {
      return this.$refs.myEditor.editor;
    },
  },
  mounted() {
    codeMirrorInstance = this.editor;
  }
};

</script>

<style scoped lang="scss">

</style>

<template>
  <div>
    <codemirror v-model="mdContent" ref="myEditor" :options="editorOption" @changed="codeChange">
    </codemirror>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror';
import navbar from './Navbar';
import viewer from './Viewer';

/* eslint : 0 */
let codeMirrorInstance = null;

/* eslint prefer-const: 0 */
export default {
  components: {
    codemirror,
    navbar,
    viewer,
  },
  props: ['value'],
  data() {
    return {
      mdContent: this.value,
      editorOption: {
        tabSize: 4,
        mode: 'text/x-markdown',
        theme: 'base16-dark',
        lineNumbers: true,
        lineWrapping: true,
        line: true,
        keyMap: 'sublime',
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        styleSelectedText: true,
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
      }
    };
  },
  methods: {
    codeChange(newCode) {
      this.$emit('input', newCode);
    }
  },
  computed: {
    editor() {
      return this.$refs.myEditor.editor;
    },
  },
  mounted() {
    codeMirrorInstance = this.editor;
  }
};

</script>

<style scoped lang="scss">

</style>


#321 作业详情按钮图标颜色优化

#321 作业详情按钮图标颜色优化

<template>

        <Top-bar :domain="domainName" :domain-info="domainInfo"></Top-bar>

                        作业 : {{jobName}}

                    <el-tag :type="statusTag[jobInfo.status]" class="status-tag">运行状态: {{translateStatus[jobInfo.status]}}</el-tag>

                      <el-button size="small" @click="handleActive(true)" v-if="jobInfo.status === 'STOPPING' || jobInfo.status === 'STOPPED'">启用</el-button>
                      <el-button size="small" @click="handleActive(false)" v-if="jobInfo.status === 'READY' || jobInfo.status === 'RUNNING'">禁用</el-button>
                      <el-button size="small" @click="handleOperate('runAtOnce')" v-if="jobInfo.status === 'READY' && jobStatusJudge()">立即执行</el-button>
                      <el-button size="small" @click="handleOperate('stopAtOnce')" v-if="jobInfo.status === 'STOPPING'">立即终止</el-button>
                      <el-button size="small" @click="handleDelete" v-if="jobInfo.status === 'STOPPED' || !jobInfo.enabled">删除</el-button>

              <router-view></router-view>

</template>


#307 code optimization

#307 code optimization

<template>

            <el-row :gutter="20">
                <el-col :span="8">
                    <Panel type="success">

启用作业数 / 总作业数

2 / 3

                    </Panel>
                </el-col>
                <el-col :span="8">
                    <Panel type="warning">

失败率

1%

                    </Panel>
                </el-col>
                <el-col :span="8">
                    <Panel type="danger">

异常作业数

0

                    </Panel>
                </el-col>
            </el-row>

            <FilterPageList :data="jobList" :total="total" :order-by="orderBy" :filters="filters">
                <template slot-scope="scope">
                    <el-form :inline="true" class="table-filter">
                        <el-form-item label="">
                            <el-select v-model="filters.groups" @change="scope.search">
                                <el-option label="全部分组" value=""></el-option>
                                <el-option v-for="item in groupList" :label="item" :value="item" :key="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input placeholder="搜索" v-model="filters.jobName"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="scope.search">查询</el-button>
                        </el-form-item>
                    </el-form>

作业列表
                                <el-button type="text" @click="handleRefresh()"></el-button>

                                <el-button @click="batchEnabled()">启用</el-button>
                                <el-button @click="batchDisabled()">禁用</el-button>
                                <el-button @click="batchDelete()">删除</el-button>
                                <el-button @click="batchPriority()">优先</el-button>

                                <el-button @click="handleAdd()">添加</el-button>
                                <el-button @click="handleImport()">导入</el-button>
                                <el-button @click="handleExport()">导出</el-button>

                        <el-table stripe border ref="multipleTable" @selection-change="handleSelectionChange" @sort-change="scope.onSortChange" :data="scope.pageData" style="width: 100%">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column prop="jobName" label="作业名" sortable>
                                <template slot-scope="scope">
                                    <router-link tag="a" :to="{ name: 'job_setting', params: { domain: domainName, jobName: scope.row.jobName } }">
                                        <el-button type="text">{{scope.row.jobName}}</el-button>
                                    </router-link>
                                </template>
                            </el-table-column>
                            <el-table-column label="状态">
                                <template slot-scope="scope">
                                    <el-tag :type="statusTag[scope.row.status]" close-transition>{{scope.row.status}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="groups" label="分组"></el-table-column>
                            <el-table-column prop="shardingTotalCount" label="分片数"></el-table-column>
                            <el-table-column label="分片情况">
                                <template slot-scope="scope">
                                    <el-tooltip placement="right" :disabled="$array.strToArray(scope.row.shardingList).length === 0">
                                        <el-tag>{{$array.strToArray(scope.row.shardingList).length}} Executor(s)</el-tag>

{{item}}

                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100px">
                                <template slot-scope="scope">
                                    <el-tooltip content="启用" placement="top" v-if="scope.row.status === 'STOPPING' || scope.row.status === 'STOPPED'">
                                        <el-button type="text" @click="handleActive(scope.row, true)"></el-button>
                                    </el-tooltip>
                                    <el-tooltip content="禁用" placement="top" v-if="scope.row.status === 'READY' || scope.row.status === 'RUNNING'">
                                        <el-button type="text" @click="handleActive(scope.row, false)"></el-button>
                                    </el-tooltip>
                                    <el-tooltip content="编辑" placement="top">
                                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
                                    </el-tooltip>
                                    <el-tooltip content="删除" placement="top">
                                        <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                        </el-table>

                </template>
            </FilterPageList>

                <job-info-dialog @close-dialog="closeDialog"></job-info-dialog>

                <batch-priority-dialog :job-names-array="jobNamesArray" :domain-name="domainName" @close-dialog="closePriorityDialog" @batch-priority-success="batchPrioritySuccess"></batch-priority-dialog>

</template>


CollabEditor: placeholder text color for light and dark themes

<template lang="pug">
div
  //- template(v-if="!editor || loading")
  //-   | Connecting to socket server …
  .editor(v-if="editor")
    editor-content.html-editor__textarea(ref="editor", :editor='editor').lmo-markdown-wrapper
    .menubar
      div
        v-layout(align-center v-if="editor.isActive('table')")
          v-btn(icon @click="editor.chain().deleteTable().focus().run()", :title="$t('formatting.remove_table')")
            v-icon mdi-table-remove
          v-btn(icon @click="editor.chain().addColumnBefore().focus().run()", :title="$t('formatting.add_column_before')")
            v-icon mdi-table-column-plus-before
          v-btn(icon @click="editor.chain().addColumnAfter().focus().run()", :title="$t('formatting.add_column_after')")
            v-icon mdi-table-column-plus-after
          v-btn(icon @click="editor.chain().deleteColumn().focus().run()", :title="$t('formatting.remove_column')")
            v-icon mdi-table-column-remove
          v-btn(icon @click="editor.chain().addRowBefore().focus().run()", :title="$t('formatting.add_row_before')")
            v-icon mdi-table-row-plus-before
          v-btn(icon @click="editor.chain().addRowAfter().focus().run()", :title="$t('formatting.add_row_after')")
            v-icon mdi-table-row-plus-after
          v-btn(icon @click="editor.chain().deleteRow().focus().run()", :title="$t('formatting.remove_row')")
            v-icon mdi-table-row-remove
          v-btn(icon @click="editor.chain().mergeOrSplit().focus().run()", :title="$t('formatting.merge_selected')")
            v-icon mdi-table-merge-cells

        .d-flex.py-2.justify-space-between.flex-wrap.align-center(align-center)
          section.d-flex.flex-wrap.formatting-tools(:aria-label="$t('formatting.formatting_tools')")
            //- attach
            v-btn(:small="expanded" icon @click='$refs.filesField.click()', :title="$t('formatting.attach')")
              v-icon mdi-paperclip

            v-btn(:small="expanded" icon @click='$refs.imagesField.click()', :title="$t('formatting.insert_image')")
              v-icon mdi-image

            //- link
            v-menu(:close-on-content-click="!selectedText()", v-model="linkDialogIsOpen", min-width="320px")
              template(v-slot:activator="{on, attrs}")
                template(v-if="editor.isActive('link')")
                  v-btn(small="expanded" icon @click="editor.chain().toggleLink().focus().run()", outlined :title="$t('formatting.link')")
                    v-icon mdi-link-variant
                template(v-else)
                  v-btn(:small="expanded" icon v-on="on" v-bind="attrs", :title="$t('formatting.link')")
                    v-icon mdi-link-variant
              v-card
                template(v-if="selectedText()")
                  v-card-title.title(v-t="'text_editor.insert_link'")
                  v-card-text
                    v-text-field(type="url" label="https://www.example.com" v-model="linkUrl" autofocus ref="focus" v-on:keyup.enter="setLinkUrl()")
                  v-card-actions
                    v-spacer
                    v-btn(small color="primary" @click="setLinkUrl()" v-t="'common.action.apply'")
                template(v-else)
                  v-card-title(v-t="'text_editor.select_text_to_link'")

            //- emoji
            v-menu(:close-on-content-click="false" v-model="closeEmojiMenu")
              template(v-slot:activator="{on, attrs}")
                v-btn.emoji-picker__toggle(:small="expanded" v-on="on" v-bind="attrs" icon :title="$t('formatting.insert_emoji')")
                  v-icon mdi-emoticon-outline
              emoji-picker(:insert="emojiPicked")

            template(v-if="expanded")
              //- v-btn(icon @click='editor.chain().focus().setParagraph().run()' :outlined="editor.isActive('paragraph')" :title="$t('formatting.paragraph')")
              //-   v-icon mdi-format-pilcrow
              template(v-for="i in [1,2,3]")
                v-btn(small icon @click='editor.chain().focus().toggleHeading({ level: i }).run()', :outlined="editor.isActive('heading', { level: i })", :title="$t('formatting.heading'+i)")
                  v-icon {{'mdi-format-header-'+i}}

            //- bold
            v-btn(small icon v-if="expanded", @click='editor.chain().toggleBold().focus().run()', :outlined="editor.isActive('bold')", :title="$t('formatting.bold')")
              v-icon(small) mdi-format-bold

            //- italic
            v-btn(small icon v-if="expanded" @click='editor.chain().toggleItalic().focus().run()', :outlined="editor.isActive('italic')", :title="$t('formatting.italicize')")
              v-icon mdi-format-italic
            //-
            //- //- strikethrough
            v-btn(small icon v-if="expanded" @click='editor.chain().toggleStrike().focus().run()', :outlined="editor.isActive('strike')",  :title="$t('formatting.strikethrough')")
              v-icon mdi-format-strikethrough
            //- underline
            //- v-btn(icon v-if="expanded" @click='editor.chain().toggleUnderline().focus().run()' :outlined="editor.isActive('underline')",  :title="$t('formatting.underline')")
            //-   v-icon mdi-format-underline
            //-

            v-btn(small icon v-if="expanded" @click='editor.chain().toggleBulletList().focus().run()', :outlined="editor.isActive('bulletList')", :title="$t('formatting.bullet_list')")
              v-icon mdi-format-list-bulleted
            v-btn(small icon v-if="expanded" @click='editor.chain().toggleOrderedList().focus().run()', :outlined="editor.isActive('orderedList')",  :title="$t('formatting.number_list')")
              v-icon mdi-format-list-numbered
            v-btn(small icon v-if="expanded" @click='editor.chain().toggleTaskList().focus().run()', :outlined="editor.isActive('taskList')",  :title="$t('formatting.task_list')")
              v-icon mdi-checkbox-marked-outline

            text-highlight-btn(v-if="expanded", :editor="editor")
            text-align-btn(v-if="expanded", :editor="editor")

            //- extra text marks
            template(v-if="expanded")
              //- strikethrough
              v-menu(small :close-on-content-click="false" v-model="iframeDialogIsOpen" min-width="320px")
                template(v-slot:activator="{on}")
                  v-btn(small icon v-on="on", :title="$t('formatting.embed')")
                    v-icon mdi-youtube
                v-card
                  v-card-title.title(v-t="'text_editor.insert_embedded_url'")
                  v-card-text
                    v-text-field(type="url" label="e.g. https://www.youtube.com/watch?v=Zlzuqsunpxc" v-model="iframeUrl" ref="focus" autofocus v-on:keyup.enter="setIframeUrl()")
                  v-card-actions
                    v-spacer
                    v-btn(small color="primary" @click="setIframeUrl()" v-t="'common.action.apply'")
              //- blockquote
              v-btn(small icon @click='editor.chain().toggleBlockquote().focus().run()', :outlined="editor.isActive('blockquote')", :title="$t('formatting.blockquote')")
                v-icon mdi-format-quote-close
              //- //- code block
              v-btn(small icon @click='editor.chain().toggleCodeBlock().focus().run()', :outlined="editor.isActive('codeBlock')", :title="$t('formatting.code_block')")
                v-icon mdi-code-braces
              //- embded
              v-btn(small icon @click='editor.chain().setHorizontalRule().focus().run()', :title="$t('formatting.divider')")
                v-icon mdi-minus
              //- table
              v-btn(small icon @click='editor.chain().insertTable({rows: 3, cols: 3, withHeaderRow: false }).focus().run()', :title="$t('formatting.add_table')", :outlined="editor.isActive('table')")
                v-icon mdi-table
              //- markdown (save experience)
              v-btn(small icon @click="convertToMd", :title="$t('formatting.edit_markdown')")
                v-icon mdi-language-markdown-outline

            v-btn.html-editor__expand(v-if="!expanded" icon @click="toggleExpanded", :title="$t('formatting.expand')")
              v-icon mdi-chevron-right

            v-btn.html-editor__expand(small v-if="expanded" icon @click="toggleExpanded", :title="$t('formatting.collapse')")
              v-icon mdi-chevron-left

          //- save button?
          v-spacer
          slot(v-if="!expanded" name="actions")
          .text-right(dense v-if="maxLength", :class="{'red--text': reasonTooLong, 'text--secondary': !reasonTooLong}")
            span(:style="reasonTooLong ? 'font-weight: 700' : ''")
              | {{editor.getCharacterCount()}} / {{maxLength}}

    div.d-flex(v-if="expanded", name="actions")
      v-spacer
      slot(name="actions")

  link-previews(:model="model", :remove="removeLinkPreview")
  suggestion-list(:query="query", :loading="fetchingMentions", :mentionable="mentionable", :positionStyles="suggestionListStyles" :navigatedUserIndex="navigatedUserIndex", @select-user="selectUser")
  files-list(:files="files", v-on:removeFile="removeFile")

  form(style="display: block" @change="fileSelected")
    input(ref="filesField" type="file" name="files" multiple=true)

  form(style="display: block", @change="imageSelected")
    input(ref="imagesField", type="file", name="files", multiple=true)
</template>


Next and prev slide from 6 to 10. previews from 3 grid to 5 grid.

<template>

                            <screen-slide :slide="slide" :channel="channel" :modules="modules"></screen-slide>

                            <button type="button" class="uk-button uk-modal-close">
                                {{ 'Sluiten' | trans }}
                            </button>
                            <button type="button" @click="saveSlide()" class="uk-button uk-button-primary">
                                {{ 'Opslaan' | trans }}
                            </button>

                                {{ 'Configuratie' | trans }}

                               {{ $trans('Instellingen dia %nr%', {nr: slide.number}) }}

                                {{ 'Achtergrond' | trans }}

                               {{ getBgTypeLabel(slide.background.type) }}

                                {{ 'Modules' | trans }}

                                {{ '{0} %count% actieve modules|{1} %count% actieve module|]1,Inf[ %count% actieve modules' | transChoice slide.modules.length {count:slide.modules.length} }}

                                        <info-icon url="//www.sjow.me/configuratiescherm-algemeen/"
                                                   :title="$trans('Meer informatie')"></info-icon>

                                            {{ 'Toon de dia in deze sjow' | trans }}

                                            <input type="checkbox" v-model="slide.active" id="slide_active"/>

                                        {{ 'Tekstgrootte dia' | trans }}

                                            <select v-model="slide.config.size" id="slide_size" class="uk-form-width-medium">
                                                <option value="small">{{ 'Klein' | trans }}</option>
                                                <option value="medium">{{ 'Normaal' | trans }}</option>
                                                <option value="large">{{ 'Groot' | trans }}</option>
                                                <option value="xlarge">{{ 'Extra groot' | trans }}</option>
                                                <option value="xxlarge">{{ 'Super groot' | trans }}</option>
                                            </select>

                                        {{ 'Tijdsduur dia' | trans
                                            }}

                                            <time-duration :model.sync="slide.config.player.duration"
                                                           :default-value="channel.config.player.duration"></time-duration>

                                            {{ 'Animatie overgang' | trans }}

                                            <select-default :model.sync="slide.config.player.animation"
                                                            option-type="animations"
                                                            :default-value="channel.config.player.animation"></select-default>

{{ 'Titel' | trans }}

                                                <input type="text" v-model="slide.title"
                                                       class="uk-form-large uk-flex-item-1"
                                                       :placeholder="$trans('Voer een titel in voor deze dia')"/>
                                                <info-icon class="uk-margin-small-left" url="//www.sjow.me/configuratie-titel/"
                                                           :title="$trans('Meer informatie')"></info-icon>

                                    <partial name="slide-edit-title"></partial>

{{ 'Selecteer' | trans }}

                                                <field-color :value.sync="slide.background.color"></field-color>

{{ 'Selecteer een achtergrond' | trans }}

                                                <input type="radio" class="uk-margin-small-right"
                                                              v-model="slide.background.bg_type"
                                                              value="media"/>{{ 'Afbeelding/Video' | trans }}

                                                <input type="radio" class="uk-margin-small-right"
                                                              v-model="slide.background.bg_type"
                                                              value="color"/>{{ 'Kleur' | trans }}

                                                    {{ 'Upload eigen bestanden' | trans }}
                                                    <button type="button"
                                                            class="uk-button uk-button-small uk-button-primary"
                                                            @click="uploadMedia()"
                                                            :title="$trans('Upload uw eigen bestanden')"
                                                            data-uk-tooltip="delay:100">

                                                    </button>
                                                    <info-icon url="//www.sjow.me/achtergrond-upload/"
                                                               class="uk-margin-small-left" size="uk-icon-small"
                                                               :title="$trans('Meer informatie')"></info-icon>

                                                    {{ 'Eigen afbeeldingen' | trans }}

                                                    Sjowme collecties
                                                    <info-icon url="//www.sjow.me/achtergrond-sjowme-collectie/"
                                                               class="uk-margin-small-right" size="uk-icon-small"
                                                               :title="$trans('Meer informatie')"></info-icon>

                                                {{coll.label}}

                                    <media-collection :current_collection="current_collection"
                                                      :collections="collections"
                                                      :selected-path="slide.background.path"
                                                      :allow-edit="current_collection == 'user'"
                                                      :on-edit="uploadMedia"
                                                      :on-remove="removeMedia"
                                                      :on-pick="pickMedia"></media-collection>

                                                {{mod.label}}

                                    <slide-modules :current_module="current_module"
                                                   :model.sync="slide.modules"
                                                   :slide="slide"
                                                   :channel="channel"
                                                   :modules="modules"></slide-modules>

                <template v-if="edit_media">
                    <media-upload v-ref:uploader
                                  target="user_collection"
                                  parent-component="slide-edit"
                                  :media.sync="edit_media"
                                  :tags="member_media_tags"
                                  :collections="[]"
                                  :after-upload="afterUpload"
                                  :width="500" :compact="true"></media-upload>
                </template>

                    <button type="button" class="uk-button uk-margin-right" @click="closeUploader">
                        {{ 'Annuleren' | trans }}
                    </button>
                    <button type="button" class="uk-button uk-button-primary" @click="upload">{{ 'Opslaan' | trans }}
                    </button>

</template>


xmas,progressbar finally has progressbar, happy

<template>

Support operational costs of Progressbar

       <progress class="progress is-large is-pink" :value="percentage()" max="100"></progress>

Our monthly rent is {{ funds.monthlyRentTax }}€.
        Our account balance is {{ funds.balance }}€ at the moment.
        We are missing {{ funds.missingFunds }}€ for another month.
        If you like what we do, you can support our operations by donating 👇

        <progress class="progress is-large is-pink" :value="percentage()" max="100"></progress>

IBAN (€)

{{donations.IBAN}}

        <vue-qr
        :correctLevel="1"
        :text="`${donations.payBySquareIBAN}`"
        :size="300"
        :dotScale="1"
        ></vue-qr>

Ethereum, DAI

<a :href='`ethereum:${donations.ethereum.to}`'>{{donations.ethereum.to}}

       <vue-qr
        logoSrc="/static/img/partners/ethereum-1-logo-svg-vector.svg"
        :correctLevel="1"
        :logoScale="0.1"
        :text="`ethereum:${donations.ethereum.to}?value=${donations.ethereum.value}`"
        :size="300"
        :dotScale="1"
        ></vue-qr>

       Pay with tokens

      Pay 0.01 ETH with tokens

        $10 DAI via 💳DAICARD

⚡Lightning Network fan?

          We are supporting LN too 😍

        Support with ⚡LN

₿itcoin <a :href='`bitcoin:${donations.bitcoin}`'>{{donations.bitcoin}}

        <vue-qr
        logoSrc="/static/img/partners/Bitcoin.svg"
        :correctLevel="3"
        :logoScale="0.2"
        :text="`bitcoin:${donations.bitcoin}`"
        :size="300"
        :dotScale="1"
        ></vue-qr>

Łitecoin <a :href='`litecoin:${donations.litecoin}`'>{{donations.litecoin}}

        <vue-qr
        logoSrc="/static/img/partners/Litecoin.svg"
        :correctLevel="3"
        :logoScale="0.2"
        :text="`litecoin:${donations.litecoin}`"
        :size="300"
        :dotScale="1"
        ></vue-qr>

</template>

<template>

Support operational costs of Progressbar

Our monthly rent is {{ funds.monthlyRentTax }}€.
        Our account balance is {{ funds.balance }}€ at the moment.
        We are missing {{ funds.missingFunds }}€ for another month.
        If you like what we do, you can support our operations by donating 👇

IBAN (€)

{{donations.IBAN}}

        <vue-qr
        :correctLevel="1"
        :text="`${donations.payBySquareIBAN}`"
        :size="300"
        :dotScale="1"
        ></vue-qr>

Ethereum, DAI

<a :href='`ethereum:${donations.ethereum.to}`'>{{donations.ethereum.to}}

       <vue-qr
        logoSrc="/static/img/partners/ethereum-1-logo-svg-vector.svg"
        :correctLevel="1"
        :logoScale="0.1"
        :text="`ethereum:${donations.ethereum.to}?value=${donations.ethereum.value}`"
        :size="300"
        :dotScale="1"
        ></vue-qr>

       Pay with tokens

      Pay 0.01 ETH with tokens

        $10 DAI via 💳DAICARD

⚡Lightning Network fan?

          We are supporting LN too 😍

        Support with ⚡LN

₿itcoin <a :href='`bitcoin:${donations.bitcoin}`'>{{donations.bitcoin}}

        <vue-qr
        logoSrc="/static/img/partners/Bitcoin.svg"
        :correctLevel="3"
        :logoScale="0.2"
        :text="`bitcoin:${donations.bitcoin}`"
        :size="300"
        :dotScale="1"
        ></vue-qr>

Łitecoin <a :href='`litecoin:${donations.litecoin}`'>{{donations.litecoin}}

        <vue-qr
        logoSrc="/static/img/partners/Litecoin.svg"
        :correctLevel="3"
        :logoScale="0.2"
        :text="`litecoin:${donations.litecoin}`"
        :size="300"
        :dotScale="1"
        ></vue-qr>

</template>


Update to emit events for FocusTrap in menu in Sync facility data

<template>

  <KPageContainer>

{{ $tr('syncData') }}

      <KButton
        appearance="basic-link"
        :text="$tr('learnMore')"
        @click="displayModal(Modals.PRIVACY)"
      />

    <CoreTable>
      <template #headers>
        {{ $tr('facility') }}
      </template>
      <template #tbody>

              <FacilityNameAndSyncStatus
                :facility="theFacility"
                :isSyncing="isSyncing"
                :syncHasFailed="syncHasFailed"
              />

              <KButtonGroup style="margin-top: 8px; overflow: visible">
                <KButton
                  v-if="!theFacility.dataset.registered"
                  appearance="raised-button"
                  :text="$tr('register')"
                  @click="displayModal(Modals.REGISTER_FACILITY)"
                />
                <KButton
                  v-else-if="!Boolean(syncTaskId)"
                  appearance="raised-button"
                  :text="$tr('sync')"
                  @click="displayModal(Modals.SYNC_FACILITY)"
                />
                <KIconButton
                  ref="moreOptionsButton"
                  data-test="moreOptionsButton"
                  icon="optionsHorizontal"
                  :tooltip="coreString('optionsLabel')"
                  :ariaLabel="coreString('optionsLabel')"
                  @click="toggleMenu"
                />
                <CoreMenu
                  v-show="isMenuOpen"
                  ref="menu"
                  class="menu"
                  :raised="true"
                  :isOpen="isMenuOpen"
                  :containFocus="true"
                  @close="closeMenu"
                  @shouldFocusFirstEl="findFirstEl()"
                >
                  <template #options>
                    <CoreMenuOption
                      v-if="theFacility.dataset.registered"
                      :style="{ 'cursor': 'pointer', textAlign: 'left' }"
                      :label="$tr('register')"
                      @select="displayModal(Modals.REGISTER_FACILITY)"
                    />
                    <CoreMenuOption
                      v-else
                      :style="{ 'cursor': 'pointer', textAlign: 'left' }"
                      :label="$tr('sync')"
                      @select="displayModal(Modals.SYNC_FACILITY)"
                    />
                  </template>
                </CoreMenu>
              </KButtonGroup>

      </template>
    </CoreTable>

    <PrivacyModal
      v-if="modalShown === Modals.PRIVACY"
      @cancel="closeModal"
    />

    <RegisterFacilityModal
      v-if="modalShown === Modals.REGISTER_FACILITY"
      @success="handleValidateSuccess"
      @cancel="closeModal"
    />
    <ConfirmationRegisterModal
      v-if="modalShown === Modals.CONFIRMATION_REGISTER"
      :targetFacility="theFacility"
      :projectName="kdpProject.name"
      :token="kdpProject.token"
      @success="handleConfirmationSuccess"
      @cancel="closeModal"
    />

    <SyncFacilityModalGroup
      v-if="modalShown === Modals.SYNC_FACILITY"
      :facilityForSync="theFacility"
      @close="closeModal"
      @success="handleSyncFacilitySuccess"
      @failure="handleSyncFacilityFailure"
    />

  </KPageContainer>

</template>

<template>

  <KPageContainer>

{{ $tr('syncData') }}

      <KButton
        appearance="basic-link"
        :text="$tr('learnMore')"
        @click="displayModal(Modals.PRIVACY)"
      />

    <CoreTable>
      <template #headers>
        {{ $tr('facility') }}
      </template>
      <template #tbody>

              <FacilityNameAndSyncStatus
                :facility="theFacility"
                :isSyncing="isSyncing"
                :syncHasFailed="syncHasFailed"
              />

              <KButtonGroup style="margin-top: 8px; overflow: visible">
                <KButton
                  v-if="!theFacility.dataset.registered"
                  appearance="raised-button"
                  :text="$tr('register')"
                  @click="displayModal(Modals.REGISTER_FACILITY)"
                />
                <KButton
                  v-else-if="!Boolean(syncTaskId)"
                  appearance="raised-button"
                  :text="$tr('sync')"
                  @click="displayModal(Modals.SYNC_FACILITY)"
                />
                <KIconButton
                  ref="moreOptionsButton"
                  data-test="moreOptionsButton"
                  icon="optionsHorizontal"
                  :tooltip="coreString('optionsLabel')"
                  :ariaLabel="coreString('optionsLabel')"
                  @click="toggleMenu"
                />
                <CoreMenu
                  v-show="isMenuOpen"
                  ref="menu"
                  class="menu"
                  :raised="true"
                  :isOpen="isMenuOpen"
                  :containFocus="true"
                  @close="closeMenu"
                >
                  <template #options>
                    <CoreMenuOption
                      v-if="theFacility.dataset.registered"
                      :style="{ 'cursor': 'pointer', textAlign: 'left' }"
                      :label="$tr('register')"
                      @select="displayModal(Modals.REGISTER_FACILITY)"
                    />
                    <CoreMenuOption
                      v-else
                      :style="{ 'cursor': 'pointer', textAlign: 'left' }"
                      :label="$tr('sync')"
                      @select="displayModal(Modals.SYNC_FACILITY)"
                    />
                  </template>
                </CoreMenu>
              </KButtonGroup>

      </template>
    </CoreTable>

    <PrivacyModal
      v-if="modalShown === Modals.PRIVACY"
      @cancel="closeModal"
    />

    <RegisterFacilityModal
      v-if="modalShown === Modals.REGISTER_FACILITY"
      @success="handleValidateSuccess"
      @cancel="closeModal"
    />
    <ConfirmationRegisterModal
      v-if="modalShown === Modals.CONFIRMATION_REGISTER"
      :targetFacility="theFacility"
      :projectName="kdpProject.name"
      :token="kdpProject.token"
      @success="handleConfirmationSuccess"
      @cancel="closeModal"
    />

    <SyncFacilityModalGroup
      v-if="modalShown === Modals.SYNC_FACILITY"
      :facilityForSync="theFacility"
      @close="closeModal"
      @success="handleSyncFacilitySuccess"
      @failure="handleSyncFacilityFailure"
    />

  </KPageContainer>

</template>