cleanup link picker markup

cleanup link picker markup

<template>

        {{ 'Page' | trans }}

            <select id="form-link-page" class="uk-width-1-1" v-model="view">
                <option value="">{{ '- Select View -' | trans}}</option>
                <option value="@user/login">{{ 'User Login' | trans}}</option>
                <option value="@user/logout">{{ 'User Logout' | trans}}</option>
                <option value="@user/registration">{{ 'User Registration' | trans}}</option>
                <option value="@user/profile">{{ 'User Profile' | trans}}</option>
                <option value="@user/resetpassword">{{ 'User Password Reset' | trans}}</option>
            </select>

</template>

<template>

        {{ 'Page' | trans }}

            <select id="form-link-page" class="uk-form-width-large" v-model="view">
                <option value="">{{ '- Select View -' | trans}}</option>
                <option value="@user/login">{{ 'User Login' | trans}}</option>
                <option value="@user/logout">{{ 'User Logout' | trans}}</option>
                <option value="@user/registration">{{ 'User Registration' | trans}}</option>
                <option value="@user/profile">{{ 'User Profile' | trans}}</option>
                <option value="@user/resetpassword">{{ 'User Password Reset' | trans}}</option>
            </select>

</template>


Remove portal import

Remove portal import

<template>

            <slot/>

</template>

<template>

            <slot/>

</template>


fix: return to the base setting page after quit setting

Former-commit-id: 2dae8e59fb98e4fd42338663819a3041e18e8f59

<template>
	<v-layout align-center fill-height @mousewheel="onScroll">
		<v-item-group v-model="window" class="shrink" mandatory tag="v-flex">
			<v-item v-for="(p, i) in components" :key="i">
				<div slot-scope="{ active, toggle }">
					<v-btn small dark :input-value="active" icon @click="toggle">
						<v-icon small :color="active ? 'primary': ''">lens</v-icon>
					</v-btn>
				</div>
			</v-item>
		</v-item-group>

		<v-flex fill-height class="profile-setting-body">
			<v-window v-model="window" vertical style="height: 100%">
				<v-window-item v-for="(p, i) in components" :key="i" style="height: 100%">
					<sub-window @scroll="onScroll" v-model="subWindows[i]" :selected="i === window" :components="p"
					  @goto="goto">
					</sub-window>
					<v-layout style="position: absolute; z-index: 2; bottom: 10px; width: 100%; padding-left: 4px; padding-right: 16px;"
					  align-center justify-center>
						<v-item-group class="shrink" mandatory tag="v-flex" v-model="subWindows[window]">
							<v-item v-for="(c, i) in components[window]" :key="i">
								<v-icon dark slot-scope="{ active, toggle }" :color="active ? 'primary': ''" @click="toggle">minimize</v-icon>
							</v-item>
						</v-item-group>
					</v-layout>
				</v-window-item>
			</v-window>
		</v-flex>

	</v-layout>
</template>

<script>
import Vue from 'vue';

export default {
  data: () => ({
    components: [
      ['version-setting', 'base-setting', 'advanced-setting'],
      ['game-setting', 'resource-pack-setting'],
      ['mod-setting'],
    ],
    subWindows: [
      1, 0, 0
    ],
    window: 0,
    cooldown: false,
    lastX: null,
    lastY: null,
  }),
  activated() {

  },
  deactivated() {
    this.window = 0;
    Vue.set(this.subWindows, 0, 1);
  },
  methods: {
    computeWinSwap(rawDelta, lastKey, lastValue, length) {
      const delta = Math.abs(rawDelta);
      const last = this[lastKey];
      this[lastKey] = delta;
      if (last > delta) return;
      if (this.cooldown) return;

      const sign = Math.sign(rawDelta);
      let result = lastValue;
      if (delta > 50) {
        result += 1 * sign;
        if (result >= length) {
          result = 0;
        } else if (result < 0) {
          result = length - 1;
        }
        this.cooldown = true;
        setTimeout(() => { this.cooldown = false; }, 800);
      }
      return result;
    },
    onScroll(e) {
      e.preventDefault();
      e.stopPropagation();
      let last = this.subWindows[this.window];
      let result = this.computeWinSwap(e.deltaX, 'lastX', last, this.components[this.window].length);
      if (typeof result === 'number') {
        Vue.set(this.subWindows, this.window, result);
      }
      if (last === result) {
        last = this.window;
        result = this.computeWinSwap(e.deltaY, 'lastY', last, this.components.length);
        if (typeof result === 'number') {
          this.window = result;
        }
      }
    },
    goto(e) {
      const [win, subwin] = e;
      this.window = win;
      Vue.set(this.subWindows, win, subwin);
    },
  },
}
</script>

<style>
.v-window__container {
  height: 100%;
}
.profile-setting-body .container {
  margin-left: 0px;
  padding-left: 4px;
}
</style>

<template>
	<v-layout align-center fill-height @mousewheel="onScroll">
		<v-item-group v-model="window" class="shrink" mandatory tag="v-flex">
			<v-item v-for="(p, i) in components" :key="i">
				<div slot-scope="{ active, toggle }">
					<v-btn small dark :input-value="active" icon @click="toggle">
						<v-icon small :color="active ? 'primary': ''">lens</v-icon>
					</v-btn>
				</div>
			</v-item>
		</v-item-group>

		<v-flex fill-height class="profile-setting-body">
			<v-window v-model="window" vertical style="height: 100%">
				<v-window-item v-for="(p, i) in components" :key="i" style="height: 100%">
					<sub-window @scroll="onScroll" v-model="subWindows[i]" :selected="i === window" :components="p"
					  @goto="goto">
					</sub-window>
					<v-layout style="position: absolute; z-index: 2; bottom: 10px; width: 100%; padding-left: 4px; padding-right: 16px;" align-center
					  justify-center>
						<v-item-group class="shrink" mandatory tag="v-flex" v-model="subWindows[window]">
							<v-item v-for="(c, i) in components[window]" :key="i">
								<v-icon dark slot-scope="{ active, toggle }" :color="active ? 'primary': ''" @click="toggle">minimize</v-icon>
							</v-item>
						</v-item-group>
					</v-layout>
				</v-window-item>
			</v-window>
		</v-flex>

	</v-layout>
</template>

<script>
import Vue from 'vue';

export default {
  data: () => ({
    components: [
      ['version-setting', 'base-setting', 'advanced-setting'],
      ['game-setting', 'resource-pack-setting'],
      ['mod-setting'],
    ],
    subWindows: [
      1, 0, 0
    ],
    window: 0,
    cooldown: false,
    lastX: null,
    lastY: null,
  }),
  methods: {
    computeWinSwap(rawDelta, lastKey, lastValue, length) {
      const delta = Math.abs(rawDelta);
      const last = this[lastKey];
      this[lastKey] = delta;
      if (last > delta) return;
      if (this.cooldown) return;

      const sign = Math.sign(rawDelta);
      let result = lastValue;
      if (delta > 50) {
        result += 1 * sign;
        if (result >= length) {
          result = 0;
        } else if (result < 0) {
          result = length - 1;
        }
        this.cooldown = true;
        setTimeout(() => { this.cooldown = false; }, 800);
      }
      return result;
    },
    onScroll(e) {
      e.preventDefault();
      e.stopPropagation();
      let last = this.subWindows[this.window];
      let result = this.computeWinSwap(e.deltaX, 'lastX', last, this.components[this.window].length);
      if (typeof result === 'number') {
        Vue.set(this.subWindows, this.window, result);
      }
      if (last === result) {
        last = this.window;
        result = this.computeWinSwap(e.deltaY, 'lastY', last, this.components.length);
        if (typeof result === 'number') {
          this.window = result;
        }
      }
    },
    goto(e) {
      const [win, subwin] = e;
      this.window = win;
      Vue.set(this.subWindows, win, subwin);
    },
  },
}
</script>

<style>
.v-window__container {
  height: 100%;
}
.profile-setting-body .container {
  margin-left: 0px;
  padding-left: 4px;
}
</style>


fix rendering bug for dates

fix rendering bug for dates

<template>

Date of event

      <input ref="startDate" type="text" :value="startDate" />
      to
      <input ref="endDate" type="text" :value="endDate" />

</template>


Transparency for points + on hover css

Transparency for points + on hover css

<template>

            90%

            50%

</template>

<template>

            90%

            50%

</template>


Muda de card para div

Muda de card para div

<template>

    <form v-on:submit="step1($event)">

        <v-layout row wrap>
          <v-flex xs12>

Informações Gerais

          </v-flex>
          <v-flex xs3>
          </v-flex>
          <v-flex xs6>
            <v-text-field label="Titulo da Prova" type="text" v-model="test.title"></v-text-field>
          </v-flex>
          <v-flex xs3>
          </v-flex>
          <v-flex xs12>
            <v-text-field label="Descrição da Prova" v-model="test.description"></v-text-field>
          </v-flex>
        </v-layout>
        <v-btn primary type="submit" :loading="loading" :disabled="step1Complete()">Cadastrar</v-btn>

    </form>

</template>

<template>

    <form v-on:submit="step1($event)">
      <v-card class="white lighten-1 z-depth-1 pa-5 ma-3" height="350px">
        <v-layout row wrap>
          <v-flex xs12>

Informações Gerais

          </v-flex>
          <v-flex xs3>
          </v-flex>
          <v-flex xs6>
            <v-text-field label="Titulo da Prova" type="text" v-model="test.title"></v-text-field>
          </v-flex>
          <v-flex xs3>
          </v-flex>
          <v-flex xs12>
            <v-text-field label="Descrição da Prova" v-model="test.description"></v-text-field>
          </v-flex>
        </v-layout>
        <v-btn primary type="submit" :loading="loading" :disabled="step1Complete()">Cadastrar</v-btn>
      </v-card>
    </form>

</template>


Sortable fix

Sortable fix


Fix missing </main>

Fix missing </main>

<template>

Snowy

Mathew Reiss

        <button type="button" class="btn btn-outline-secondary btn-thumbs-up">
        <svg class="svg-icon icon-thumbs-up" width="25px" height="25px" viewBox="0 0 25 25">
          <use xlink:href="#iconThumbsUp"></use>
        </svg>

        2.3K
        </button>

        <svg class="svg-icon icon-download" width="25px" height="25px" viewBox="0 0 25 25">
          <use xlink:href="#iconDownload"></use>
        </svg>
        GET

Description

Snowy is the most popular personal assistant for Pebble Time. Set reminders, translate sentences, control your home through IFTTT - you name it, and chances are Snowy can help you out.

        For just $2.99 through KiezelPay, you can have the app voted "Most Creative Project" at the 2015 Pebble Developer Retreat, and one of Eric Migicovsky's (Founder and CEO of Pebble) favorite apps! Download Snowy and follow the onscreen instructions for obtaining a license. No companion app, no hassle, all awesome.

        The Pebble smartwatch just got a little smarter...

        ---

        For more information, visit MyDogSnowy.com, and if you love Snowy, remember to give him a ❤!

        ===

        DANSK (Beta): mydogsnowy.com/da

        DEUTSCH: mydogsnowy.com/de

        ESPAÑOL: mydogsnowy.com/es

        FRANÇAIS: mydogsnowy.com/fr

        ITALIANO: mydogsnowy.com/it

        PORTUGUÊS (Beta): mydogsnowy.com/pt

        badges: Siri, Cortana, Google Now, Personal Assistant, Voice, Dog, pmkey.xyz

            Developer
            Mathew Reiss

            Tags
            Tools & Utilities

            Updated
            Dec 7, 2016

            Version
            4.4

            Version information

            Website Link

Support

More From This Developer

</template>


Add disable option to combobox widget

Add disable option to combobox widget

<template>

   0">
    {{ label }}

      <select
        class="select-input"
        ref="select"
        :disabled="disabled"
        @keyup.enter="emitEnter()"
        @change="updateValue"
      >
        <option
          v-for="(option, i) in options"
          :key="i + '-' + option.label + '-' + option.value"
          :value="option.value || option.label"
          :selected="value === option.value"
        >
          {{ getOptionLabel(option) }}
        </option>
      </select>

  <select
    class="select-input"
    ref="select"
    @keyup.enter="emitEnter()"
    @change="updateValue"
  >
    <option
      v-for="(option, i) in options"
      :key="i + '-' + option.label + '-' + option.value"
      :value="option.value || option.label"
      :selected="value === option.value"
    >
      {{ getOptionLabel(option) }}
    </option>
  </select>

</template>

<template>

   0">
    {{ label }}

      <select
        class="select-input"
        ref="select"
        @keyup.enter="emitEnter()"
        @change="updateValue"
      >
        <option
          v-for="(option, i) in options"
          :key="i + '-' + option.label + '-' + option.value"
          :value="option.value || option.label"
          :selected="value === option.value"
        >
          {{ getOptionLabel(option) }}
        </option>
      </select>

  <select
    class="select-input"
    ref="select"
    @keyup.enter="emitEnter()"
    @change="updateValue"
  >
    <option
      v-for="(option, i) in options"
      :key="i + '-' + option.label + '-' + option.value"
      :value="option.value || option.label"
      :selected="value === option.value"
    >
      {{ getOptionLabel(option) }}
    </option>
  </select>

</template>


markup to use translation here too

markup to use translation here too

<template>

        {{ trans('general.archive') }}

        <loading></loading>

 0">

            {{ message.message }}

        You have no screengroups!

 0">

            ID
            Name
            Age
            Actions

            {{ screengroup.id }}
            {{ screengroup.name }}
            {{ screengroup.age }}

                Edit
                Delete

</template>

<template>

        List of screengroups

        <loading></loading>

 0">

            {{ message.message }}

        You have no screengroups!

 0">

            ID
            Name
            Age
            Actions

            {{ screengroup.id }}
            {{ screengroup.name }}
            {{ screengroup.age }}

                Edit
                Delete

</template>


Simplified some conditions in the AlbumView.

Refs #78.

<template>
	<v-container fluid>
		<portal v-if="!loading" to="appBarAddons">
			<FavouriteButton :model-id="album.id" type="Album" />
		</portal>

		<AppTasks v-if="!loading" v-model="appTasksMenu">
			<AppTask
				:label="$t('quickTasks.edit.album')"
				:to="`/albums/${album.id}/edit`"
				icon="mdi-book-open-variant dem-overlay-edit"
			/>

			<AppTask
				:label="$t('quickTasks.delete.album')"
				:confirm="$t('quickTasks.delete.album.confirm')"
				icon="mdi-book-open-variant dem-overlay-delete"
				@cancel="appTasksMenu = false"
				@confirm="deleteAlbum"
			/>
			<AppTask
				:label="$t('quickTasks.add.images.to.album')"
				icon="mdi-camera dem-overlay-add"
				@click="appTasksMenu = false; dndDialog = true"
			/>
			<AppTask
				v-if="!isInReadingList"
				:label="$t('quickTasks.add.album.to.readingList')"
				icon="mdi-library dem-overlay-add"
				@click="appTasksMenu = false; addToReadingList()"
			/>
		</AppTasks>
		<DnDImage
			v-model="dndDialog" main-image-label="field.Album.cover"
			other-images-label="field.Album.images" @save="saveDndImages"
		/>

		<SectionCard :loading="loading" :image="album.cover" :title="album.identifyingName">

				<v-row>
					<v-col v-if="album.series.id" cols="12" md="6">
						<FieldValue :label="$t('field.Album.series')">
							<ModelLink :model="album.series" view="SeriesView" />
						</FieldValue>
					</v-col>
					<v-col v-if="album.tags && album.tags.length > 0" cols="12">
						<FieldValue :label="$tc('field.Album.tags', album.tags.length)">
							<TagLink :model="album.tags" />
						</FieldValue>
					</v-col>
				</v-row>

				<v-row>
					<v-col v-if="album.publisher.id" cols="12" md="6">
						<FieldValue :label="$tc('field.Album.publisher', 1)">
							<ModelLink :model="album.publisher" view="PublisherView" />
						</FieldValue>
					</v-col>
					<v-col v-if="album.collection.id" cols="12" md="6">
						<FieldValue :label="$t('field.Album.collection')">
							<ModelLink :model="album.collection" view="CollectionView" />
						</FieldValue>
					</v-col>
				</v-row>

				<v-row>
					<v-col v-if="album.writers && album.writers.length" cols="12" md="6">
						<FieldValue :label="$tc('field.Album.writers', album.writers.length)">
							<ModelLink :model="album.writers" view="AuthorView" />
						</FieldValue>
					</v-col>
					<v-col v-if="album.artists && album.artists.length" cols="12" md="6">
						<FieldValue :label="$tc('field.Album.artists', album.artists.length)">
							<ModelLink :model="album.artists" view="AuthorView" />
						</FieldValue>
					</v-col>
					<v-col v-if="album.colorists && album.colorists.length" cols="12" md="6">
						<FieldValue :label="$tc('field.Album.colorists', album.colorists.length)">
							<ModelLink :model="album.colorists" view="AuthorView" />
						</FieldValue>
					</v-col>
					<v-col v-if="album.inkers && album.inkers.length" cols="12" md="6">
						<FieldValue :label="$tc('field.Album.inkers', album.inkers.length)">
							<ModelLink :model="album.inkers" view="AuthorView" />
						</FieldValue>
					</v-col>
					<v-col v-if="album.translators && album.translators.length" cols="12" md="6">
						<FieldValue :label="$tc('field.Album.translators', album.writers.length)">
							<ModelLink :model="album.translators" view="AuthorView" />
						</FieldValue>
					</v-col>
				</v-row>

				<FieldValue :label="$t('field.Album.location')">
					{{ album.aggregatedLocation }}
				</FieldValue>

		</SectionCard>

		<SectionCard :loading="loading" :subtitle="$t('page.Album.aboutEdition')">

				<v-row>
					<v-col v-if="album.firstEditionDate" cols="12" md="4">
						<FieldValue :label="$t('field.Album.firstEditionDate')">
							{{ $d(new Date(album.firstEditionDate), 'long') }}
							<template v-if="album.currentEditionDate === album.firstEditionDate">
								{{ $t(album.markedAsFirstEdition ?
									'field.Album.markedAsFirstEdition.view' : 'field.Album.isFirstEdition') }}
							</template>
						</FieldValue>
					</v-col>
					<v-col
						v-if="album.currentEditionDate && album.currentEditionDate !== album.firstEditionDate"
						cols="12" md="4"
					>
						<FieldValue :label="$t('field.Album.currentEditionDate')">
							{{ $d(new Date(album.currentEditionDate), 'long') }}
						</FieldValue>
					</v-col>
					<v-col v-if="album.acquisitionDate" cols="12" md="4">
						<FieldValue :label="$t('field.Album.acquisitionDate')">
							{{ $d(new Date(album.acquisitionDate), 'long') }}
						</FieldValue>
					</v-col>
					<v-col v-if="album.wishlist" cols="12" md="4">
						<FieldValue :label="$t('field.Album.wishlist.view')">
							{{ $t('field.Album.wishlist.value.true') }}
						</FieldValue>
					</v-col>
					<v-col v-if="album.isbn" cols="12" md="4">
						<FieldValue :label="$t('field.Album.isbn')">
							{{ album.isbn }}
						</FieldValue>
					</v-col>
				</v-row>

				<v-row>
					<v-col cols="12" md="4">
						<FieldValue v-if="album.binding" :label="$t('field.Album.binding')">
							<ModelLink :model="album.binding" view="BindingView" />
						</FieldValue>
					</v-col>

					<v-col v-if="sizeSpec" cols="12" md="4">
						<FieldValue :label="$t('field.Album.size')">
							{{ sizeSpec }}
						</FieldValue>
					</v-col>

					<template v-if="!sizeSpec">
						<v-col cols="12" md="4">
							<FieldValue v-if="album.height" :label="$t('field.Album.height')">
								{{ album.height }}
							</FieldValue>
						</v-col>
						<v-col cols="12" md="4">
							<FieldValue v-if="album.depth" :label="$t('field.Album.depth')">
								{{ album.depth }}
							</FieldValue>
						</v-col>
					</template>

					<v-col v-if="album.pages" cols="12" md="4">
						<FieldValue :label="$t('field.Album.pages')">
							{{ album.pages }}
						</FieldValue>
					</v-col>
				</v-row>

				<v-row>
					<v-col v-if="album.purchasePrice" cols="12" md="6">
						<FieldValue :label="$t('field.Album.purchasePrice')">
							{{ album.purchasePrice }}
						</FieldValue>
					</v-col>
					<v-col v-if="hasPrices" cols="12" md="6">
						<PriceTable :prices="album.prices" model-name="Album" />
					</v-col>
				</v-row>

		</SectionCard>

		<SectionCard v-if="album.summary || album.comment">
			<FieldValue v-if="album.summary" :label="$t('field.Album.summary')">

			</FieldValue>
			<FieldValue v-if="album.comment" :label="$t('field.Album.comment')">

			</FieldValue>
		</SectionCard>

		<SectionCard v-if="hasImages" :loading="loading" :title="$t('page.Album.gallery')">
			<GalleryIndex :items="album.images">
				<template #default="slotProps">
					<router-link :to="`/images/${slotProps.item.id}/view`">
						{{ slotProps.item.identifyingName }}
					</router-link>
				</template>
			</GalleryIndex>
		</SectionCard>

		<SectionCard
			v-if="derivativeCount > 0" ref="derivativeSection" v-intersect="loadDerivatives"
			:title="$t('field.Album.derivatives')"
		>

				<v-progress-circular indeterminate color="primary" size="64" />

			<GalleryIndex
				:items="derivatives" image-path="mainImage" bordered
				@page-change="$refs.derivativeSection.$el.scrollIntoView()"
			>
				<template #default="slotProps">
					<router-link :to="`/derivatives/${slotProps.item.id}/view`">

							{{ slotProps.item.album.title }}

							{{ slotProps.item.source.identifyingName }}

					</router-link>
				</template>
			</GalleryIndex>
		</SectionCard>

		<v-btn
			v-if="isInReadingList" fab color="accent" fixed
			bottom right @click="markAsRead"
		>
			<v-icon>mdi-library dem-overlay-check</v-icon>
		</v-btn>
	</v-container>
</template>


Help translators

Help translators

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

<template>

		<select class="schemes"
			:value="schemes"
			:disabled="loading"
			:aria-label="t('spreed', 'TURN server schemes')"
			@input="updateSchemes">
			<option value="turn,turns">
				{{ t('spreed', '{option1} and {option2}', { option1: 'turn:', option2: 'turns:' }) }}
			</option>
			<option value="turn">
				{{ t('spreed', '{option} only', { option: 'turn:' }) }}
			</option>
			<option value="turns">
				{{ t('spreed', '{option} only', { option: 'turns:' }) }}
			</option>
		</select>

		<input ref="turn_server"
			v-tooltip.auto="turnServerError"
			type="text"
			name="turn_server"
			placeholder="turnserver:port"
			:class="turnServerClasses"
			:value="server"
			:disabled="loading"
			:aria-label="t('spreed', 'TURN server URL')"
			@input="updateServer">
		<input ref="turn_secret"
			type="text"
			name="turn_secret"
			placeholder="secret"
			:value="secret"
			:disabled="loading"
			:aria-label="t('spreed', 'TURN server secret')"
			@input="updateSecret">

		<select class="protocols"
			:value="protocols"
			:disabled="loading"
			:aria-label="t('spreed', 'TURN server protocols')"
			@input="updateProtocols">
			<option value="udp,tcp">
				{{ t('spreed', '{option1} and {option2}', { option1: 'UDP', option2: 'TCP' }) }}
			</option>
			<option value="udp">
				{{ t('spreed', '{option} only', { option: 'UDP' }) }}
			</option>
			<option value="tcp">
				{{ t('spreed', '{option} only', { option: 'TCP' }) }}
			</option>
		</select>

</template>

<template>

		<select class="schemes"
			:value="schemes"
			:disabled="loading"
			:aria-label="t('spreed', 'TURN server schemes')"
			@input="updateSchemes">
			<option value="turn,turns">
				{{ t('spreed', 'turn: and turns:') }}
			</option>
			<option value="turn">
				{{ t('spreed', 'turn: only') }}
			</option>
			<option value="turns">
				{{ t('spreed', 'turns: only') }}
			</option>
		</select>

		<input ref="turn_server"
			v-tooltip.auto="turnServerError"
			type="text"
			name="turn_server"
			placeholder="turnserver:port"
			:class="turnServerClasses"
			:value="server"
			:disabled="loading"
			:aria-label="t('spreed', 'TURN server URL')"
			@input="updateServer">
		<input ref="turn_secret"
			type="text"
			name="turn_secret"
			placeholder="secret"
			:value="secret"
			:disabled="loading"
			:aria-label="t('spreed', 'TURN server secret')"
			@input="updateSecret">

		<select class="protocols"
			:value="protocols"
			:disabled="loading"
			:aria-label="t('spreed', 'TURN server protocols')"
			@input="updateProtocols">
			<option value="udp,tcp">
				{{ t('spreed', 'UDP and TCP') }}
			</option>
			<option value="udp">
				{{ t('spreed', 'UDP only') }}
			</option>
			<option value="tcp">
				{{ t('spreed', 'TCP only') }}
			</option>
		</select>

</template>


Fix reaction tooltips

Fix reaction tooltips

<template>
  <q-btn
    @click="$emit('click')"
    class="row no-wrap items-center"
    flat
  >
    <div
      class="emoji"
      ref="emoji"
    />
    <slot />
  </q-btn>
</template>

<script>
import { QBtn } from 'quasar'
import emojiList from 'markdown-it-emoji/lib/data/full.json'
import twemoji from 'twemoji'

const EMOJI_CACHE = {}
function getEmojiElement (name) {
  const cached = EMOJI_CACHE[name]
  if (cached) return EMOJI_CACHE[name].cloneNode(true)
  const container = document.createElement('div')
  container.innerHTML = twemoji.parse(emojiList[name])
  const el = container.firstChild
  EMOJI_CACHE[name] = el
  return el
}

export default {
  components: { QBtn },
  props: {
    name: {
      type: String,
      required: true,
    },
  },
  mounted () {
    this.$refs.emoji.appendChild(this.emojiElement)
  },
  watch: {
    emojiElement (emojiElement, prevEmojiElement) {
      this.$refs.emoji.replaceChild(emojiElement, prevEmojiElement)
    },
  },
  computed: {
    emojiElement () {
      return getEmojiElement(this.name)
    },
  },
}
</script>

<style scoped lang="stylus">
.q-btn
  padding 1px 3px
  min-height 0
.emoji
  >>> img.emoji
    height 1em
    width 1em
    margin .1em .1em
    vertical-align middle
</style>

<template>
  <q-btn
    @click="$emit('click')"
    class="row no-wrap items-center"
    flat
    :title="tooltip"
  >
    <div
      class="emoji"
      ref="emoji"
    />
    <slot />
  </q-btn>
</template>

<script>
import { QBtn, QTooltip } from 'quasar'
import emojiList from 'markdown-it-emoji/lib/data/full.json'
import twemoji from 'twemoji'

const EMOJI_CACHE = {}
function getEmojiElement (name) {
  const cached = EMOJI_CACHE[name]
  if (cached) return EMOJI_CACHE[name].cloneNode(true)
  const container = document.createElement('div')
  container.innerHTML = twemoji.parse(emojiList[name])
  const el = container.firstChild
  EMOJI_CACHE[name] = el
  return el
}

export default {
  components: { QBtn, QTooltip },
  props: {
    name: {
      type: String,
      required: true,
    },
    tooltip: {
      type: String,
      default: null,
    },
  },
  mounted () {
    this.$refs.emoji.appendChild(this.emojiElement)
  },
  watch: {
    emojiElement (emojiElement, prevEmojiElement) {
      this.$refs.emoji.replaceChild(emojiElement, prevEmojiElement)
    },
  },
  computed: {
    emojiElement () {
      return getEmojiElement(this.name)
    },
  },
}
</script>

<style scoped lang="stylus">
.q-btn
  padding 1px 3px
  min-height 0
.emoji
  >>> img.emoji
    height 1em
    width 1em
    margin .1em .1em
    vertical-align middle
</style>


Combine export size

Combine export size

<template>

  <core-modal
    :title="$tr('title')"
    :error="wizardState.error ? true : false"
    :enableBgClickCancel="false"
    @cancel="cancel"
    @enter="submit"
  >

      <template v-if="!drivesLoading">

            {{ $tr('exportPrompt', { numChannels: allChannels.length, exportSize }) }}

          <drive-list
            :value="selectedDrive"
            :drives="wizardState.driveList"
            :enabledDrivePred="driveIsEnabled"
            :disabledMsg="$tr('notWritable')"
            :enabledMsg="formatEnabledMsg"
            @change="(driveId) => selectedDrive = driveId"
          />

          <k-button @click="updateWizardLocalDriveList" :disabled="wizardState.busy" :text="$tr('refresh')"/>

      </template>
      <loading-spinner v-else :delay="500" class="spinner"/>

      {{ wizardState.error }}

      <k-button
        @click="cancel"
        :raised="false"
        :text="$tr('cancel')"/>
      <k-button
        :text="$tr('export')"
        @click="submit"
        :disabled="!canSubmit"
        :primary="true"/>

  </core-modal>

</template>

<template>

  <core-modal
    :title="$tr('title')"
    :error="wizardState.error ? true : false"
    :enableBgClickCancel="false"
    @cancel="cancel"
    @enter="submit"
  >

      <template v-if="!drivesLoading">

            {{ $tr('exportPromptPrefix', { numChannels: allChannels.length }) }}
            ({{ exportContentSize }})

          <drive-list
            :value="selectedDrive"
            :drives="wizardState.driveList"
            :enabledDrivePred="driveIsEnabled"
            :disabledMsg="$tr('notWritable')"
            :enabledMsg="formatEnabledMsg"
            @change="(driveId) => selectedDrive = driveId"
          />

          <k-button @click="updateWizardLocalDriveList" :disabled="wizardState.busy" :text="$tr('refresh')"/>

      </template>
      <loading-spinner v-else :delay="500" class="spinner"/>

      {{ wizardState.error }}

      <k-button
        @click="cancel"
        :raised="false"
        :text="$tr('cancel')"/>
      <k-button
        :text="$tr('export')"
        @click="submit"
        :disabled="!canSubmit"
        :primary="true"/>

  </core-modal>

</template>


Fix missing select allow-clear button on older AUI (I think so)

<template>
    <span>
        <input :disabled="disabled" type="hidden" ref="input">
        <slot></slot>
    </span>
</template>

<script>
  export default {
    props: {
      allowClear: Boolean,
      disabled: Boolean,
      dropdownAutoWidth: Boolean,
      initSelection: Function,
      placeholder: String,
      query: Function,
      value: String,
      width: String
    },

    data() {
      return {
        options: []
      }
    },

    created() {
      this.updateOptions()
      this.$on('optionsChanged', this.updateOptions)
    },

    mounted() {
      this.$refs.input.className = this.$el.className
      this.$el.className = ''

      this.$input = AJS.$(this.$refs.input)
      this.$input.val(this.value)
      this.$input.auiSelect2({
        allowClear: this.allowClear,
        query: this.query,
        initSelection: this.initSelection,
        data: () => ({results: this.options}),
        placeholder: this.placeholder,
        width: this.width,
        dropdownAutoWidth: this.dropdownAutoWidth
      });
      this.$input.on('change', this.onSelect2ValueChanged)
    },

    watch: {
      value(value) {
        this.$input.auiSelect2('val', value)
      },
      disabled() {
        this.$input.auiSelect2('val', this.value)
      }
    },

    methods: {
      onSelect2ValueChanged(event) {
        this.$emit('input', event.val)
      },

      updateOptions() {
        this.options = this.$slots.default && this.$slots.default
          .filter(vnode => vnode.tag && vnode.tag.match(/aui-select2-option$/))
          .map(vnode => ({
            id: vnode.componentOptions.propsData.value,
            text: vnode.componentOptions.propsData.text
          }))
        if (this.$input) {
          this.$input.auiSelect2('val', this.value);
        }
      }
    }
  }
</script>

<style>
  .aui-select2-container.select2-container.select2-allowclear .select2-choice abbr {
    display: block;
  }

  .aui-select2-container.select2-container .select2-choice abbr.select2-search-choice-close {
    display: block;
  }
</style>

<template>
    <span>
        <input :disabled="disabled" type="hidden" ref="input">
        <slot></slot>
    </span>
</template>

<script>
  export default {
    props: {
      allowClear: Boolean,
      disabled: Boolean,
      dropdownAutoWidth: Boolean,
      initSelection: Function,
      placeholder: String,
      query: Function,
      value: String,
      width: String
    },

    data() {
      return {
        options: []
      }
    },

    created() {
      this.updateOptions()
      this.$on('optionsChanged', this.updateOptions)
    },

    mounted() {
      this.$refs.input.className = this.$el.className
      this.$el.className = ''

      this.$input = AJS.$(this.$refs.input)
      this.$input.val(this.value)
      this.$input.auiSelect2({
        allowClear: this.allowClear,
        query: this.query,
        initSelection: this.initSelection,
        data: () => ({results: this.options}),
        placeholder: this.placeholder,
        width: this.width,
        dropdownAutoWidth: this.dropdownAutoWidth
      });
      this.$input.on('change', this.onSelect2ValueChanged)
    },

    watch: {
      value(value) {
        this.$input.auiSelect2('val', value)
      },
      disabled() {
        this.$input.auiSelect2('val', this.value)
      }
    },

    methods: {
      onSelect2ValueChanged(event) {
        this.$emit('input', event.val)
      },

      updateOptions() {
        this.options = this.$slots.default && this.$slots.default
          .filter(vnode => vnode.tag && vnode.tag.match(/aui-select2-option$/))
          .map(vnode => ({
            id: vnode.componentOptions.propsData.value,
            text: vnode.componentOptions.propsData.text
          }))
        if (this.$input) {
          this.$input.auiSelect2('val', this.value);
        }
      }
    }
  }
</script>

<style>
  .aui-select2-container.select2-container.select2-allowclear .select2-choice abbr {
    display: block;
  }
</style>


fix(chars): uncomment amcharts

fix(chars): uncomment amcharts

<template>

        <widget class="chart-widget"  header-text="Combo Chart">
          <combo-chart v-bind:chart-data="comboChartData"></combo-chart>
        </widget>

        <widget class="chart-widget"  header-text="Column Chart">
          <column-chart v-bind:chart-data="columnChartData"></column-chart>
        </widget>

        <widget class="chart-widget"  header-text="Time Based Area Chart">
          <time-based-area-chart v-bind:chart-data="timeBasedAreaChartData"></time-based-area-chart>
        </widget>

        <widget class="chart-widget"  header-text="Smoothed Line Chart">
          <smoothed-line-chart v-bind:chart-data="smoothedLineChartData"></smoothed-line-chart>
        </widget>

        <widget class="chart-widget"  header-text="Layered Column Chart">
          <layered-column-chart v-bind:chart-data="layeredColumnChartData"></layered-column-chart>
        </widget>

        <widget class="chart-widget"  header-text="Clustered Bar Chart">
          <clustered-bar-chart v-bind:chart-data="clusteredBarChartData"></clustered-bar-chart>
        </widget>

        <widget class="chart-widget"  header-text="Pie Chart">
          <pie-chart v-bind:chart-data="pieChartData"></pie-chart>
        </widget>

        <widget class="chart-widget"  header-text="Donut Chart">
          <donut-chart v-bind:chart-data="donutChartData"></donut-chart>
        </widget>

</template>


Add focus outline to core menu options

Add focus outline to core menu options

<template>

    <span
      v-if="isDivider"
      class="divider"
      :style="{ borderTop: `solid 1px ${$themeTokens.fineLine}` }"
    >

      <slot>
        <KLabeledIcon>
          <KIcon
            slot="icon"
            :icon="icon"
            :class="$computedClass(optionIconStyle)"
          />

{{ label }}

        </KLabeledIcon>

{{ secondaryText }}

      </slot>

</template>


Remove top margin from buttons group

Remove top margin from buttons group

<template>

    <KGrid :gridStyle="gridStyle">

      <KGridItem
        v-if="windowIsLarge"
        ref="questionListWrapper"
        :layout12="{ span: 4 }"
        class="column-pane"
      >

          <KPageContainer>
            <AnswerHistory
              :questionNumber="questionNumber"
              :wrapperComponentRefs="this.$refs"
              @goToQuestion="goToQuestion"
            />
          </KPageContainer>

      </KGridItem>
      <KGridItem :layout12="{ span: 8 }" class="column-pane">

          <KPageContainer>

              {{ $tr('question', { num: questionNumber + 1, total: exam.question_count }) }}

            <KContentRenderer
              v-if="content && itemId"
              ref="contentRenderer"
              :kind="content.kind"
              :files="content.files"
              :available="content.available"
              :extraFields="content.extra_fields"
              :itemId="itemId"
              :assessment="true"
              :allowHints="false"
              :answerState="currentAttempt.answer"
              @interaction="saveAnswer"
            />
            <UiAlert v-else :dismissible="false" type="error">
              {{ $tr('noItemId') }}
            </UiAlert>
          </KPageContainer>

          <BottomAppBar :dir="bottomBarLayoutDirection" :maxWidth="null">
            <KButtonGroup>
              <UiIconButton
                v-if="windowBreakpoint === 0"
                :aria-label="$tr('nextQuestion')"
                size="large"
                type="secondary"
                class="footer-button"
                :disabled="questionNumber === exam.question_count - 1"
                @click="goToQuestion(questionNumber + 1)"
              >
                <mat-svg
                  name="arrow_forward"
                  category="navigation"
                  :style="{ fill: $themeTokens.primary }"
                />
              </UiIconButton>
              <KButton
                v-else
                :disabled="questionNumber === exam.question_count - 1"
                :primary="true"
                class="footer-button"
                :dir="layoutDirReset"
                @click="goToQuestion(questionNumber + 1)"
              >
                {{ $tr('nextQuestion') }}
                <KIcon slot="iconAfter" icon="forward" color="white" class="forward-icon" />
              </KButton>
              <UiIconButton
                v-if="windowBreakpoint === 0"
                :aria-label="$tr('previousQuestion')"
                size="large"
                type="secondary"
                class="footer-button left-align"
                :disabled="questionNumber === 0"
                @click="goToQuestion(questionNumber - 1)"
              >
                <mat-svg
                  name="arrow_back"
                  category="navigation"
                  :style="{ fill: $themeTokens.primary }"
                />
              </UiIconButton>
              <KButton
                v-else
                :disabled="questionNumber === 0"
                :primary="true"
                class="footer-button"
                :dir="layoutDirReset"
                :class="{ 'left-align': windowIsSmall }"
                @click="goToQuestion(questionNumber - 1)"
              >
                <KIcon slot="icon" icon="back" color="white" class="back-icon" />
                {{ $tr('previousQuestion') }}
              </KButton>
            </KButtonGroup>

                {{ answeredText }}

              <KButton
                :text="$tr('submitExam')"
                :primary="false"
                appearance="flat-button"
                @click="toggleModal"
              />

          </BottomAppBar>

          <KPageContainer v-if="!windowIsLarge">

                {{ answeredText }}

              <KButton
                :text="$tr('submitExam')"
                :primary="false"
                appearance="flat-button"
                @click="toggleModal"
              />

          </KPageContainer>

      </KGridItem>
    </KGrid>

    <KModal
      v-if="submitModalOpen"
      :title="$tr('submitExam')"
      :submitText="$tr('submitExam')"
      :cancelText="coreString('goBackAction')"
      @submit="finishExam"
      @cancel="toggleModal"
    >

{{ $tr('areYouSure') }}

        {{ $tr('unanswered', { numLeft: questionsUnanswered } ) }}

    </KModal>

</template>

<template>

    <KGrid :gridStyle="gridStyle">

      <KGridItem
        v-if="windowIsLarge"
        ref="questionListWrapper"
        :layout12="{ span: 4 }"
        class="column-pane"
      >

          <KPageContainer>
            <AnswerHistory
              :questionNumber="questionNumber"
              :wrapperComponentRefs="this.$refs"
              @goToQuestion="goToQuestion"
            />
          </KPageContainer>

      </KGridItem>
      <KGridItem :layout12="{ span: 8 }" class="column-pane">

          <KPageContainer>

              {{ $tr('question', { num: questionNumber + 1, total: exam.question_count }) }}

            <KContentRenderer
              v-if="content && itemId"
              ref="contentRenderer"
              :kind="content.kind"
              :files="content.files"
              :available="content.available"
              :extraFields="content.extra_fields"
              :itemId="itemId"
              :assessment="true"
              :allowHints="false"
              :answerState="currentAttempt.answer"
              @interaction="saveAnswer"
            />
            <UiAlert v-else :dismissible="false" type="error">
              {{ $tr('noItemId') }}
            </UiAlert>
          </KPageContainer>

          <BottomAppBar :dir="bottomBarLayoutDirection" :maxWidth="null">
            <KButtonGroup style="margin-top: 8px;">
              <UiIconButton
                v-if="windowBreakpoint === 0"
                :aria-label="$tr('nextQuestion')"
                size="large"
                type="secondary"
                class="footer-button"
                :disabled="questionNumber === exam.question_count - 1"
                @click="goToQuestion(questionNumber + 1)"
              >
                <mat-svg
                  name="arrow_forward"
                  category="navigation"
                  :style="{ fill: $themeTokens.primary }"
                />
              </UiIconButton>
              <KButton
                v-else
                :disabled="questionNumber === exam.question_count - 1"
                :primary="true"
                class="footer-button"
                :dir="layoutDirReset"
                @click="goToQuestion(questionNumber + 1)"
              >
                {{ $tr('nextQuestion') }}
                <KIcon slot="iconAfter" icon="forward" color="white" class="forward-icon" />
              </KButton>
              <UiIconButton
                v-if="windowBreakpoint === 0"
                :aria-label="$tr('previousQuestion')"
                size="large"
                type="secondary"
                class="footer-button left-align"
                :disabled="questionNumber === 0"
                @click="goToQuestion(questionNumber - 1)"
              >
                <mat-svg
                  name="arrow_back"
                  category="navigation"
                  :style="{ fill: $themeTokens.primary }"
                />
              </UiIconButton>
              <KButton
                v-else
                :disabled="questionNumber === 0"
                :primary="true"
                class="footer-button"
                :dir="layoutDirReset"
                :class="{ 'left-align': windowIsSmall }"
                @click="goToQuestion(questionNumber - 1)"
              >
                <KIcon slot="icon" icon="back" color="white" class="back-icon" />
                {{ $tr('previousQuestion') }}
              </KButton>
            </KButtonGroup>

                {{ answeredText }}

              <KButton
                :text="$tr('submitExam')"
                :primary="false"
                appearance="flat-button"
                @click="toggleModal"
              />

          </BottomAppBar>

          <KPageContainer v-if="!windowIsLarge">

                {{ answeredText }}

              <KButton
                :text="$tr('submitExam')"
                :primary="false"
                appearance="flat-button"
                @click="toggleModal"
              />

          </KPageContainer>

      </KGridItem>
    </KGrid>

    <KModal
      v-if="submitModalOpen"
      :title="$tr('submitExam')"
      :submitText="$tr('submitExam')"
      :cancelText="coreString('goBackAction')"
      @submit="finishExam"
      @cancel="toggleModal"
    >

{{ $tr('areYouSure') }}

        {{ $tr('unanswered', { numLeft: questionsUnanswered } ) }}

    </KModal>

</template>


really

really

<template>

  <div>
    <div v-el:videowrapperwrapper class="videowrapperwrapper">
      <div v-el:videowrapper class="videowrapper">
        <video v-el:video class="video-js vjs-default-skin">
          <template v-for="video in videoSources">
            <source :src="video.storage_url" :type='"video/" + video.extension'>
          </template>
          <template v-for="track in trackSources">
            <track kind="captions" :src="track.storage_url" :srclang="track.lang" :label="getLangName(track.lang)">
          </template>
        </video>
      </div>
    </div>
  </div>

</template>

<script>

  const videojs = require('video.js');
  const langcodes = require('./langcodes.json');
  require('./videojs-centerbtns');
  const debounce = require('vue').util.debounce;

  module.exports = {

    props: ['files'],

    data: () => ({
      videoWidth: 0,
      videoHeight: 0,
    }),

    computed: {
      posterSource() {
        const posterFileExtensions = ['png', 'jpg'];
        const posterArray = this.files.filter(
          (file) => posterFileExtensions.some((ext) => ext === file.extension)
        );
        if (posterArray.length === 0) {
          return '';
        }
        return posterArray[0].storage_url;
      },

      videoSources() {
        const videoFileExtensions = ['mp4', 'webm', 'ogg'];
        return this.files.filter(
          (file) => videoFileExtensions.some((ext) => ext === file.extension)
        );
      },

      trackSources() {
        const trackFileExtensions = ['vtt'];
        return this.files.filter(
          (file) => trackFileExtensions.some((ext) => ext === file.extension)
        );
      },

      aspectRatio() {
        return this.videoWidth / this.videoHeight;
      },

    },

    methods: {
      getLangName(langCode) {
        return langcodes.filter(
            (lang) => lang.code === langCode
        )[0].lang;
      },

      setPlayState(state) {
        if (state === true) {
          this.videoPlayer.$('.videotoggle').classList.add('videopaused');
          this.videoPlayer.$('.videoreplay').classList.add('display');
          this.videoPlayer.$('.videoforward').classList.add('display');
        } else {
          this.videoPlayer.$('.videotoggle').classList.remove('videopaused');
          this.videoPlayer.$('.videoreplay').classList.remove('display');
          this.videoPlayer.$('.videoforward').classList.remove('display');
        }
      },

      loadedMetaData() {
        this.videoWidth = this.videoPlayer.videoWidth();
        this.videoHeight = this.videoPlayer.videoHeight();
        this.resizeVideo();
      },

      resizeVideo() {
        const wrapperWrapperWidth = this.$els.videowrapperwrapper.clientWidth;
        const wrapperWrapperHeight = this.$els.videowrapperwrapper.clientHeight;

        const neededHeightGivenWidth = wrapperWrapperWidth * (1 / this.aspectRatio);
        const neededWidthGivenHeight = wrapperWrapperHeight * this.aspectRatio;

        let newWidth = 0;
        let newHeight = 0;

        if (neededHeightGivenWidth <= wrapperWrapperHeight) {
          newWidth = wrapperWrapperWidth;
          newHeight = neededHeightGivenWidth;
        } else {
          newWidth = neededWidthGivenHeight;
          newHeight = wrapperWrapperHeight;
        }

        this.$els.videowrapper.setAttribute('style', `width:${newWidth}px;height:${newHeight}px`);
      },

      debouncedResizeVideo() {
        debounce(this.resizeVideo(), 300);
      },
    },

    ready() {
      this.videoPlayer = videojs(this.$els.video, {
        fluid: true,
        inactivityTimeout: 1000,
        controls: true,
        autoplay: false,
        preload: 'auto',
        poster: this.posterSource,
        playbackRates: [0.5, 1.0, 1.25, 1.5, 2.0],
        textTrackDisplay: true,
        ReplayButton: true,
        ForwardButton: true,
        TogglePlayButton: true,
        bigPlayButton: false,
        controlBar: {
          children: [
            { name: 'currentTimeDisplay' },
            { name: 'timeDivider' },
            { name: 'progressControl' },
            { name: 'durationDisplay' },
            { name: 'remainingTimeDisplay' },
            { name: 'muteToggle' },
            { name: 'VolumeBar' },
            { name: 'playbackRateMenuButton' },
            { name: 'captionsButton' },
            { name: 'fullscreenToggle' },
          ],
        },
      },

      () => {
        const centerButtons = this.$els.videowrapper.childNodes[1];
        const toggleButton = centerButtons
          .getElementsByClassName('videotoggle')[0];
        const replayButton = centerButtons
          .getElementsByClassName('videoreplay')[0];
        const forwardButton = centerButtons
          .getElementsByClassName('videoforward')[0];

        videojs(this.$els.video).on('useractive', () => {
          toggleButton.classList.remove('userInactive');
          replayButton.classList.remove('userInactive');
          forwardButton.classList.remove('userInactive');
        });

        videojs(this.$els.video).on('userinactive', () => {
          toggleButton.classList.add('userInactive');
          replayButton.classList.add('userInactive');
          forwardButton.classList.add('userInactive');
        });

        videojs(this.$els.video).on('play', () => {
          this.setPlayState(true);
        });

        videojs(this.$els.video).on('pause', () => {
          this.setPlayState(false);
        });

        videojs(this.$els.video).on('ended', () => {
          this.setPlayState(false);
        });
      });

      this.videoPlayer.on('loadedmetadata', this.loadedMetaData);

      global.addEventListener('resize', this.debouncedResizeVideo);
    },
    beforeDestroy() {
      global.removeEventListener('resize', this.debouncedResizeVideo);
    },
  };

</script>

<style lang="stylus">

  // Default videojs stylesheet
  // Unable to reference the videojs using require since videojs doesn't have good webpack support
  @import '../../../../../../node_modules/video.js/dist/video-js.css'

  // Videojs skin customization
  .video-js
    font-size: 1em
    color: #fff
    margin: 0 auto
    .vjs-slider
      background-color: #545454
      background-color: rgba(84, 84, 84, 0.5)
    .vjs-load-progress
      background: lighten(#545454, 25%)
      background: rgba(84, 84, 84, 0.5)
      div
        background: lighten(#545454, 50%)
        background: rgba(84, 84, 84, 0.75)

  .video-js .vjs-control-bar,
  .video-js .vjs-big-play-button,
  .video-js .vjs-menu-button .vjs-menu-content
    background-color: #000
    background-color: rgba(0, 0, 0, 0.7)

   // Custom style
  .videowrapper
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    position: relative
    height: 100%
    background-color: #000

  .videowrapperwrapper
    width: 100%
    height: 100%
    background-color: #000
    position: relative

  .video-js .vjs-menu
    font-family: 'NotoSans', 'sans-serif'

  .video-js .vjs-current-time
    display: block

  .video-js .vjs-play-progress
    background-color: #996189

  .video-js .userInactive
    visibility: visible
    opacity: 0
    transition: visibility 1s, opacity 1s

  .video-js .videoreplay,
  .video-js .videoforward,
  .video-js .videotoggle
    background-repeat: no-repeat
    background-size: contain
    cursor: pointer
    position: absolute
    top: 50%
    transform: translate(-50%, -50%)

  .video-js .videoreplay,
  .video-js .videoforward
    display: none
    height: 75px
    width: 75px

  .video-js .videoreplay
    background: url('../icons/ic_replay_10_white.svg')
    background-repeat: no-repeat
    background-size: contain
    background-color: rgba(0, 0, 0, 0.3)
    left: calc(50% - 125px)

  .video-js .videoforward
    background: url('../icons/ic_forward_10_white.svg')
    background-repeat: no-repeat
    background-size: contain
    background-color: rgba(0, 0, 0, 0.3)
    left: calc(50% + 125px)

  .video-js .videotoggle
    background: url('../icons/ic_play_circle_outline_white.svg')
    background-repeat: no-repeat
    background-size: contain
    background-color: rgba(0, 0, 0, 0.3)
    left: 50%
    height: 125px
    width: 125px

  .video-js .videopaused
    background: url('../icons/ic_pause_circle_outline_white.svg')
    background-repeat: no-repeat
    background-size: contain
    background-color: rgba(0, 0, 0, 0.3)

  .video-js .display,
  .video-js .display
    display: block

</style>

<template>

  <div>
    <div v-el:videowrapperwrapper class="videowrapperwrapper">
      <div v-el:videowrapper class="videowrapper">
        <video v-el:video class="video-js vjs-default-skin">
          <template v-for="video in videoSources">
            <source :src="video.storage_url" :type='"video/" + video.extension'>
          </template>
          <template v-for="track in trackSources">
            <track kind="captions" :src="track.storage_url" :srclang="track.lang" :label="getLangName(track.lang)">
          </template>
        </video>
      </div>
    </div>
  </div>

</template>

<script>

  const videojs = require('video.js');
  const langcodes = require('./langcodes.json');
  require('./videojs-centerbtns');
  const debounce = require('vue').util.debounce;

  module.exports = {

    props: ['files'],

    data: () => ({
      videoWidth: 0,
      videoHeight: 0,
    }),

    computed: {
      posterSource() {
        const posterFileExtensions = ['png', 'jpg'];
        const posterArray = this.files.filter(
          (file) => posterFileExtensions.some((ext) => ext === file.extension)
        );
        if (posterArray.length === 0) {
          return '';
        }
        return posterArray[0].storage_url;
      },

      videoSources() {
        const videoFileExtensions = ['mp4', 'webm', 'ogg'];
        return this.files.filter(
          (file) => videoFileExtensions.some((ext) => ext === file.extension)
        );
      },

      trackSources() {
        const trackFileExtensions = ['vtt'];
        return this.files.filter(
          (file) => trackFileExtensions.some((ext) => ext === file.extension)
        );
      },

      aspectRatio() {
        return this.videoWidth / this.videoHeight;
      },

    },

    methods: {
      getLangName(langCode) {
        return langcodes.filter(
            (lang) => lang.code === langCode
        )[0].lang;
      },

      setPlayState(state) {
        if (state === true) {
          this.videoPlayer.$('.videotoggle').classList.add('videopaused');
          this.videoPlayer.$('.videoreplay').classList.add('display');
          this.videoPlayer.$('.videoforward').classList.add('display');
        } else {
          this.videoPlayer.$('.videotoggle').classList.remove('videopaused');
          this.videoPlayer.$('.videoreplay').classList.remove('display');
          this.videoPlayer.$('.videoforward').classList.remove('display');
        }
      },

      loadedMetaData() {
        this.videoWidth = this.videoPlayer.videoWidth();
        this.videoHeight = this.videoPlayer.videoHeight();
        this.resizeVideo();
      },

      resizeVideo() {
        const wrapperWrapperWidth = this.$els.videowrapperwrapper.clientWidth;
        const wrapperWrapperHeight = this.$els.videowrapperwrapper.clientHeight;

        const neededHeightGivenWidth = wrapperWrapperWidth * (1 / this.aspectRatio);
        const neededWidthGivenHeight = wrapperWrapperHeight * this.aspectRatio;

        let newWidth = 0;
        let newHeight = 0;

        if (neededHeightGivenWidth <= wrapperWrapperHeight) {
          newWidth = wrapperWrapperWidth;
          newHeight = neededHeightGivenWidth;
        } else {
          newWidth = neededWidthGivenHeight;
          newHeight = wrapperWrapperHeight;
        }

        this.$els.videowrapper.setAttribute('style', `width:${newWidth}px;height:${newHeight}px`);
      },

      debouncedResizeVideo() {
        // TODO: Not working.
        debounce(this.resizeVideo, 300);
      },
    },

    ready() {
      this.videoPlayer = videojs(this.$els.video, {
        fluid: true,
        inactivityTimeout: 1000,
        controls: true,
        autoplay: false,
        preload: 'auto',
        poster: this.posterSource,
        playbackRates: [0.5, 1.0, 1.25, 1.5, 2.0],
        textTrackDisplay: true,
        ReplayButton: true,
        ForwardButton: true,
        TogglePlayButton: true,
        bigPlayButton: false,
        controlBar: {
          children: [
            { name: 'currentTimeDisplay' },
            { name: 'timeDivider' },
            { name: 'progressControl' },
            { name: 'durationDisplay' },
            { name: 'remainingTimeDisplay' },
            { name: 'muteToggle' },
            { name: 'VolumeBar' },
            { name: 'playbackRateMenuButton' },
            { name: 'captionsButton' },
            { name: 'fullscreenToggle' },
          ],
        },
      },

      () => {
        const centerButtons = this.$els.videowrapper.childNodes[1];
        const toggleButton = centerButtons
          .getElementsByClassName('videotoggle')[0];
        const replayButton = centerButtons
          .getElementsByClassName('videoreplay')[0];
        const forwardButton = centerButtons
          .getElementsByClassName('videoforward')[0];

        videojs(this.$els.video).on('useractive', () => {
          toggleButton.classList.remove('userInactive');
          replayButton.classList.remove('userInactive');
          forwardButton.classList.remove('userInactive');
        });

        videojs(this.$els.video).on('userinactive', () => {
          toggleButton.classList.add('userInactive');
          replayButton.classList.add('userInactive');
          forwardButton.classList.add('userInactive');
        });

        videojs(this.$els.video).on('play', () => {
          this.setPlayState(true);
        });

        videojs(this.$els.video).on('pause', () => {
          this.setPlayState(false);
        });

        videojs(this.$els.video).on('ended', () => {
          this.setPlayState(false);
        });
      });

      this.videoPlayer.on('loadedmetadata', this.loadedMetaData);

      global.addEventListener('resize', this.resizeVideo);
    },
    beforeDestroy() {
      global.removeEventListener('resize', this.resizeVideo);
    },
  };

</script>

<style lang="stylus">

  // Default videojs stylesheet
  // Unable to reference the videojs using require since videojs doesn't have good webpack support
  @import '../../../../../../node_modules/video.js/dist/video-js.css'

  // Videojs skin customization
  .video-js
    font-size: 1em
    color: #fff
    margin: 0 auto
    .vjs-slider
      background-color: #545454
      background-color: rgba(84, 84, 84, 0.5)
    .vjs-load-progress
      background: lighten(#545454, 25%)
      background: rgba(84, 84, 84, 0.5)
      div
        background: lighten(#545454, 50%)
        background: rgba(84, 84, 84, 0.75)

  .video-js .vjs-control-bar,
  .video-js .vjs-big-play-button,
  .video-js .vjs-menu-button .vjs-menu-content
    background-color: #000
    background-color: rgba(0, 0, 0, 0.7)

   // Custom style
  .videowrapper
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    position: relative
    height: 100%
    background-color: #000

  .videowrapperwrapper
    width: 100%
    height: 100%
    background-color: #000
    position: relative

  .video-js .vjs-menu
    font-family: 'NotoSans', 'sans-serif'

  .video-js .vjs-current-time
    display: block

  .video-js .vjs-play-progress
    background-color: #996189

  .video-js .userInactive
    visibility: visible
    opacity: 0
    transition: visibility 1s, opacity 1s

  .video-js .videoreplay,
  .video-js .videoforward,
  .video-js .videotoggle
    background-repeat: no-repeat
    background-size: contain
    cursor: pointer
    position: absolute
    top: 50%
    transform: translate(-50%, -50%)

  .video-js .videoreplay,
  .video-js .videoforward
    display: none
    height: 75px
    width: 75px

  .video-js .videoreplay
    background: url('../icons/ic_replay_10_white.svg')
    background-repeat: no-repeat
    background-size: contain
    background-color: rgba(0, 0, 0, 0.3)
    left: calc(50% - 125px)

  .video-js .videoforward
    background: url('../icons/ic_forward_10_white.svg')
    background-repeat: no-repeat
    background-size: contain
    background-color: rgba(0, 0, 0, 0.3)
    left: calc(50% + 125px)

  .video-js .videotoggle
    background: url('../icons/ic_play_circle_outline_white.svg')
    background-repeat: no-repeat
    background-size: contain
    background-color: rgba(0, 0, 0, 0.3)
    left: 50%
    height: 125px
    width: 125px

  .video-js .videopaused
    background: url('../icons/ic_pause_circle_outline_white.svg')
    background-repeat: no-repeat
    background-size: contain
    background-color: rgba(0, 0, 0, 0.3)

  .video-js .display,
  .video-js .display
    display: block

</style>


Removed unused code.

Removed unused code.

<template>

        <v-layout row>
            <user-info :name="answer.creator.name" :thumbnail-url="answer.creator.thumbnailUrl"
                       :created="answer.created" :isAdmin="answer.isAdmin" :link="getExternalLink"
                       :answer-type="$t('pages:detailQuestion.answerType.book')" :answer-title="answer.title"
                       :userId="answer.creator.userId" :slug="answer.creator.slug">
            </user-info>
            <v-spacer></v-spacer>
            <v-menu bottom v-if="answer.isAdmin">
                <v-btn icon slot="activator">
                    <v-icon>more_vert</v-icon>
                </v-btn>
                <v-list>
                    <v-list-tile @click="">
                        <v-list-tile-title>Bearbeiten</v-list-tile-title>
                    </v-list-tile>
                    <v-divider></v-divider>
                    <v-list-tile @click="">
                        <v-list-tile-title>Löschen</v-list-tile-title>
                    </v-list-tile>
                </v-list>
            </v-menu>
        </v-layout>

            <expand-text :expand-text="answer.description" class="answer-description"
                         :class="{'no-book-image': !answer.imageUrl}">
            </expand-text>

        <answer-commands :answer="answer">
        </answer-commands>

</template>


fix(style): left padding in marketplace view

<template>

				<button class="btn btn-xs btn-default" data-route="marketplace/home">{{ back_to_home_text }}</button>

Name

Details

Ratings

Desc

Desc

						<base-image :src="image" :alt="title" />

{{ title }}

						<slot name="detail-header-item"></slot>

								{{ menu_item.label }}

					{{ section.title }}

</template>


DarkMode user friends

DarkMode user friends

<template>

%fa:users%%i18n:@title%

%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/>

	<template v-if="!fetching && users.length != 0">

			<mk-avatar class="avatar" :user="friend"/>

				<router-link class="name" :to="friend | userPage" v-user-preview="friend.id">{{ friend.name }}</router-link>

@{{ friend | acct }}

			<mk-follow-button :user="friend"/>

	</template>

%i18n:@no-users%

</template>


Fix import

Fix import

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

<template>

			<NcCheckboxRadioSwitch :checked="listable !== LISTABLE.NONE"
				:disabled="isListableLoading"
				@update:checked="toggleListableUsers">
				{{ t('spreed', 'Open conversation to registered users') }}
			</NcCheckboxRadioSwitch>

				{{ t('spreed', 'This conversation will be shown in search results') }}

				<NcCheckboxRadioSwitch :checked="listable === LISTABLE.ALL"
					:disabled="isListableLoading"
					@update:checked="toggleListableGuests">
					{{ t('spreed', 'Also open to guest app users') }}
				</NcCheckboxRadioSwitch>

</template>


feat(progress bars): added ordered download for progress-bars

<template>

      <widget class="col-12" headerText="Progress Bars">

            Basic

              <progress-bar ref="hBasic">
              </progress-bar>

            Thin

              <progress-bar size="thin" ref="hThin">
              </progress-bar>

            Thick

              <progress-bar size="thick" ref="hThick">
              </progress-bar>

            Basic Vertical

                <progress-bar type="vertical" ref="vBasic"></progress-bar>

            Thin Vertical

              <progress-bar size="thin" type="vertical" ref="vThin">
              </progress-bar>

            Circle

              <progress-bar type="circle" ref="circle"></progress-bar>

      </widget>
      <widget class="col-12" headerText="Colorful Bars">

            Basic

              <progress-bar ref="chBasic" color="brand-danger">
              </progress-bar>

            Thin

              <progress-bar size="thin" ref="chThin" color="brand-info">
              </progress-bar>

            Thick

              <progress-bar size="thick" ref="chThick" color="brand-warning">
              </progress-bar>

            Basic Vertical

                <progress-bar type="vertical" ref="cvBasic" color="brand-success"></progress-bar>

            Thin Vertical

              <progress-bar size="thin" type="vertical" ref="cvThin" color="black">
              </progress-bar>

            Circle

              <progress-bar type="circle" ref="ccircle"></progress-bar>

      </widget>

</template>


remove 3d event listeners on modal close/destroy

<template>

        <transition name="fade">
            <div class="progress mb-2" style="height: 1px;" v-if="progress<100">

                    {{progress}}

        </transition>

                <button type="button" class="btn btn-outline-info position-absolute m-2" v-if="entity.id" @click="loadAllSubModels" style="left: 0;">
                    {{ $t('plugins.files.modal.detail.threed.load-sub-models') }}
                </button>
                <button type="button" class="btn btn-outline-info position-absolute m-2" v-if="fullscreenHandler" @click="toggleFullscreen" style="right: 0;">

                </button>

</template>


update Model LostAndFound update view LostAndFound update frontend vue LostAndFound

<template>
  <div>
    <el-form ref="form" :model="form">
      <el-form-item label="丢失或者捡到" :required=true>
        <el-radio label="Lost" v-model="form.LostOrFound">丢失</el-radio>
        <el-radio label="Found" v-model="form.LostOrFound">捡到</el-radio>
      </el-form-item>
      <el-form-item label="联系人" :required=true>
        <el-input v-model="form.LinkmanName" placeholder="联系人姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系人年级" :required=true>
        <el-select v-model="form.LinkmanGrade" placeholder="请选择年级" value="">
          <el-option label="高一" value="1"></el-option>
          <el-option label="高二" value="2"></el-option>
          <el-option label="高三" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系人班级" :required=true>
        <el-select v-model="form.LinkmanClass" placeholder="请选择班级" value="">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
          <el-option label="4" value="4"></el-option>
          <el-option label="5" value="5"></el-option>
          <el-option label="6" value="6"></el-option>
          <el-option label="7" value="7"></el-option>
          <el-option label="8" value="8"></el-option>
          <el-option label="9" value="9"></el-option>
          <el-option label="10" value="10"></el-option>
          <el-option label="11" value="11"></el-option>
          <el-option label="12" value="12"></el-option>
          <el-option label="13" value="13"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="丢失物品名称" :required=true>
        <el-input v-model="form.ObjectName"></el-input>
      </el-form-item>
      <el-form-item label="联系人电话">
        <el-input v-model="form.LinkmanPhoneNumber" placeholder="请输入联系人电话"></el-input>
      </el-form-item>
      <el-form-item label="联系人QQ">
        <el-input v-model="form.LinkmanQq" placeholder="请输入联系人QQ"></el-input>
      </el-form-item>
      <el-form-item label="丢失区域" :required=true>
        <el-select v-model="form.Region" placeholder="请选择丢失区域" value="">
          <el-option label="挹芬楼" value="挹芬楼"></el-option>
          <el-option label="远翔楼" value="远翔楼"></el-option>
          <el-option label="致真楼" value="致真楼"></el-option>
          <el-option label="行政楼" value="行政楼"></el-option>
          <el-option label="济美楼" value="济美楼"></el-option>
          <el-option label="体育馆" value="体育馆"></el-option>
          <el-option label="弘渊楼" value="弘渊楼"></el-option>
          <el-option label="篮球场" value="篮球场"></el-option>
          <el-option label="足球场" value="足球场"></el-option>
          <el-option label="金苹果大道" value="金苹果大道"></el-option>
          <el-option label="食堂" value="食堂"></el-option>
          <el-option label="宿舍" value="宿舍"></el-option>
          <el-option label="思贤堂" value="思贤堂"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="丢失时间" :required=true>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2"
                          style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="重要物品" :required=true>
        <el-switch :on-text="" :off-text="" v-model="form.Importance"></el-switch>
      </el-form-item>
      <el-form-item label="物品描述" :required=true>
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item :required=true>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    data () {
      return {
        form: {
          LostOrFound: "",
          ObjectName: '',
          Region: '',
          date1: '',
          date2: '',
          Importance: false,
          desc: '',
          LinkmanGrade: '',
          LinkmanName: '',
          LinkmanClass: '',
          LinkmanQq: '',
          LinkmanPhoneNumber: ''
        }
      }
    },
    methods: {
      onSubmit () {
        axios({
          method: 'POST',
          url: '/api/index/LAF/Submit',
          data: JSON.stringify({
            LostOrFound: this.LostOrFound,
            ObjectName: this.ObjectNameName,
            LinkmanName: this.LinkmanName,
            LinkmanGrade: this.LinkmanGrade,
            LinkmanPhoneNumber: this.LinkmanPhoneNumber,
            LinkmanQq: this.LinkmanQq,
            Region: this.Region,
            Date1: this.date1,
            Date2: this.date2,
            Importance: this.Importance,
            Desc: this.desc,
            Token: this.GetToken
          })
        }).then(function (response) {
          if (response.data.message === 'Error') {
            console.log('error')
          } else if (response.data.message === 'success') {
            console.log('success')
          }
        }.bind(this)).catch(function () {
          alert('error: PostEdit')
        })
      }
    }
  }
</script>

<template>
  <div>
    <el-form ref="form" :model="form">
      <el-form-item label="丢失或者捡到" :required=true>
        <el-radio label="Lost" v-model="form.LostOrFound">丢失</el-radio>
        <el-radio label="Found" v-model="form.LostOrFound">捡到</el-radio>
      </el-form-item>
      <el-form-item label="联系人" :required=true>
        <el-input v-model="form.LinkmanName" placeholder="联系人姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系人年级" :required=true>
        <el-select v-model="form.LinkmanGrade" placeholder="请选择年级" value="">
          <el-option label="高一" value="1"></el-option>
          <el-option label="高二" value="2"></el-option>
          <el-option label="高三" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系人班级" :required=true>
        <el-select v-model="form.LinkmanClass" placeholder="请选择班级" value="">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
          <el-option label="4" value="4"></el-option>
          <el-option label="5" value="5"></el-option>
          <el-option label="6" value="6"></el-option>
          <el-option label="7" value="7"></el-option>
          <el-option label="8" value="8"></el-option>
          <el-option label="9" value="9"></el-option>
          <el-option label="10" value="10"></el-option>
          <el-option label="11" value="11"></el-option>
          <el-option label="12" value="12"></el-option>
          <el-option label="13" value="13"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="丢失物品名称" :required=true>
        <el-input v-model="form.ObjectName"></el-input>
      </el-form-item>
      <el-form-item label="联系人电话">
        <el-input v-model="form.LinkmanPhoneNumber" placeholder="请输入联系人电话"></el-input>
      </el-form-item>
      <el-form-item label="联系人QQ">
        <el-input v-model="form.LinkmanQq" placeholder="请输入联系人QQ"></el-input>
      </el-form-item>
      <el-form-item label="丢失区域" :required=true>
        <el-select v-model="form.Region" placeholder="请选择丢失区域" value="">
          <el-option label="挹芬楼" value="挹芬楼"></el-option>
          <el-option label="远翔楼" value="远翔楼"></el-option>
          <el-option label="致真楼" value="致真楼"></el-option>
          <el-option label="行政楼" value="行政楼"></el-option>
          <el-option label="济美楼" value="济美楼"></el-option>
          <el-option label="体育馆" value="体育馆"></el-option>
          <el-option label="弘渊楼" value="弘渊楼"></el-option>
          <el-option label="篮球场" value="篮球场"></el-option>
          <el-option label="足球场" value="足球场"></el-option>
          <el-option label="金苹果大道" value="金苹果大道"></el-option>
          <el-option label="食堂" value="食堂"></el-option>
          <el-option label="宿舍" value="宿舍"></el-option>
          <el-option label="思贤堂" value="思贤堂"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="丢失时间" :required=true>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2"
                          style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="重要物品" :required=true>
        <el-switch :on-text="" :off-text="" v-model="form.Importance"></el-switch>
      </el-form-item>
      <el-form-item label="物品描述" :required=true>
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item :required=true>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-form-item label="联系人QQ">
    <el-input v-model="form.LinkmanQq" placeholder="请输入联系人QQ"></el-input>
  </el-form-item>
  <el-form-item label="联系人电话">
    <el-input v-model="form.LinkmanPhoneNumber" placeholder="请输入联系人电话"></el-input>
  </el-form-item>
</template>
<script>
  import axios from 'axios'
  export default {
    data () {
      return {
        form: {
          LostOrFound: "",
          ObjectName: '',
          Region: '',
          date1: '',
          date2: '',
          Importance: false,
          desc: '',
          LinkmanGrade: '',
          LinkmanName: '',
          LinkmanClass: '',
          LinkmanQq: '',
          LinkmanPhoneNumber: ''
        }
      }
    },
    methods: {
      onSubmit () {
        axios({
          method: 'POST',
          url: '/api/index/LAF/Submit',
          data: JSON.stringify({
            LostOrFound: this.LostOrFound,
            ObjectName: this.ObjectNameName,
            LinkmanName: this.LinkmanName,
            LinkmanGrade: this.LinkmanGrade,
            LinkmanPhoneNumber: this.LinkmanPhoneNumber,
            LinkmanQq: this.LinkmanQq,
            Region: this.Region,
            Date1: this.date1,
            Date2: this.date2,
            Importance: this.Importance,
            Desc: this.desc,
            Token: this.GetToken
          })
        }).then(function (response) {
          if (response.data.message === 'Error') {
            console.log('error')
          } else if (response.data.message === 'success') {
            console.log('success')
          }
        }.bind(this)).catch(function () {
          alert('error: PostEdit')
        })
      }
    }
  }
</script>


:bug: (overview) Fixed input type for SVG in <plant-intro />

<template>

    <svgicon
      class="preview-icon"
      icon="cactus"
      :width="iconSize"
      :height="iconSize"
      color="#fff">
    </svgicon>

      Looks like you haven't added any friends yet.

      Tap on the bottom button to start!

</template>


fix: tx id wrapping on smaller screens (#696)

<template>

    <TableWrapper
      v-bind="$attrs"
      :columns="columns"
      v-on="$listeners"
      @on-row-click="onRowClick"
      @on-sort-change="onSortChange"
    >
      <template
        slot-scope="data"
      >

            {{ data.formattedRow['id'] }}

            <SvgIcon
              name="open-external"
              view-box="0 0 12 12"
              class="text-theme-page-text-light"
            />

          <span
            v-tooltip="{
              content: `${$t('TRANSACTION.AMOUNT')}: ${data.formattedRow['amount']}<br>${$t('TRANSACTION.FEE')}: ${formatAmount(data.row.fee)}`,
              html: true,
              classes: 'leading-loose',
              trigger: 'hover',
              placement: 'left'
            }"
            class="font-bold mr-2 whitespace-no-wrap"
          >
            {{ data.row.isSender ? '-' : '+' }}
            {{ data.formattedRow['amount'] }}

          <span
            v-if="!isWellConfirmed(data.row.confirmations)"
            v-tooltip="{
              content: $t('TRANSACTION.CONFIRMATION_COUNT', [data.row.confirmations]),
              classes: 'text-xs',
              trigger: 'hover'
            }"
            :class="{
              'text-theme-transaction-confirmations-sent bg-theme-transaction-sent': data.row.isSender,
              'text-theme-transaction-confirmations-received bg-theme-transaction-received': !data.row.isSender
            }"
            class="rounded-full h-6 w-6 flex items-center justify-center"
          >
            <SvgIcon
              name="time"
              view-box="0 0 12 13"
            />

          <span
            v-else
            v-tooltip="{
              content: $t('TRANSACTION.WELL_CONFIRMED_COUNT', { confirmations: data.row.confirmations }),
              classes: 'text-xs',
              trigger: 'hover'
            }"
            :class="{
              'text-theme-transaction-sent-arrow bg-theme-transaction-sent': data.row.isSender,
              'text-theme-transaction-received-arrow bg-theme-transaction-received': !data.row.isSender
            }"
            class="rounded-full h-6 w-6 flex items-center justify-center"
          >
            <SvgIcon
              :name="data.row.isSender ? 'arrow-sent' : 'arrow-received'"
              class="text-center"
              view-box="0 0 8 8"
            />

          <WalletAddress :address="data.row.sender" />

          <WalletAddress
            :address="data.row.recipient"
            :type="data.row.type"
            :asset="data.row.asset"
          />

          {{ data.formattedRow[data.column.field] }}

      </template>
    </TableWrapper>

    <portal
      v-if="selected"
      to="modal"
    >
      <TransactionShow
        :transaction="selected"
        @close="onCloseModal"
      />
    </portal>

</template>


:art:

:art:

<template>
<ui-card>

<fa icon="user"/> {{ $t('title') }}

			<mk-avatar class="avatar" :user="$store.state.i" :disable-preview="true" :disable-link="true"/>

		<ui-form :disabled="saving">
			<ui-input v-model="name" :max="30">
				{{ $t('name') }}
			</ui-input>

			<ui-input v-model="username" readonly>
				{{ $t('account') }}
				@
				@{{ host }}
			</ui-input>

			<ui-input v-model="location">
				{{ $t('location') }}
				<fa icon="map-marker-alt"/>
			</ui-input>

			<ui-input v-model="birthday" type="date">
				{{ $t('birthday') }}
				<fa icon="birthday-cake"/>
			</ui-input>

			<ui-textarea v-model="description" :max="500">
				{{ $t('description') }}
			</ui-textarea>

			<ui-input type="file" @change="onAvatarChange">
				{{ $t('avatar') }}
				<fa icon="image"/>
				{{ $t('uploading') }}<mk-ellipsis/>
			</ui-input>

			<ui-input type="file" @change="onBannerChange">
				{{ $t('banner') }}
				<fa icon="image"/>
				{{ $t('uploading') }}<mk-ellipsis/>
			</ui-input>

			<ui-button @click="save(true)">{{ $t('save') }}</ui-button>
		</ui-form>

		{{ $t('advanced') }}

			<ui-switch v-model="isCat" @change="save(false)">{{ $t('is-cat') }}</ui-switch>
			<ui-switch v-model="isBot" @change="save(false)">{{ $t('is-bot') }}</ui-switch>
			<ui-switch v-model="alwaysMarkNsfw">{{ $t('@.always-mark-nsfw') }}</ui-switch>

		{{ $t('privacy') }}

			<ui-switch v-model="isLocked" @change="save(false)">{{ $t('is-locked') }}</ui-switch>
			<ui-switch v-model="carefulBot" @change="save(false)">{{ $t('careful-bot') }}</ui-switch>

</ui-card>
</template>

<template>
<ui-card>

<fa icon="user"/> {{ $t('title') }}

		<ui-form :disabled="saving">
			<ui-input v-model="name" :max="30">
				{{ $t('name') }}
			</ui-input>

			<ui-input v-model="username" readonly>
				{{ $t('account') }}
				@
				@{{ host }}
			</ui-input>

			<ui-input v-model="location">
				{{ $t('location') }}
				<fa icon="map-marker-alt"/>
			</ui-input>

			<ui-input v-model="birthday" type="date">
				{{ $t('birthday') }}
				<fa icon="birthday-cake"/>
			</ui-input>

			<ui-textarea v-model="description" :max="500">
				{{ $t('description') }}
			</ui-textarea>

			<ui-input type="file" @change="onAvatarChange">
				{{ $t('avatar') }}
				<fa icon="image"/>
				{{ $t('uploading') }}<mk-ellipsis/>
			</ui-input>

			<ui-input type="file" @change="onBannerChange">
				{{ $t('banner') }}
				<fa icon="image"/>
				{{ $t('uploading') }}<mk-ellipsis/>
			</ui-input>

			<ui-button @click="save(true)">{{ $t('save') }}</ui-button>
		</ui-form>

		{{ $t('advanced') }}

			<ui-switch v-model="isCat" @change="save(false)">{{ $t('is-cat') }}</ui-switch>
			<ui-switch v-model="isBot" @change="save(false)">{{ $t('is-bot') }}</ui-switch>
			<ui-switch v-model="alwaysMarkNsfw">{{ $t('@.always-mark-nsfw') }}</ui-switch>

		{{ $t('privacy') }}

			<ui-switch v-model="isLocked" @change="save(false)">{{ $t('is-locked') }}</ui-switch>
			<ui-switch v-model="carefulBot" @change="save(false)">{{ $t('careful-bot') }}</ui-switch>

</ui-card>
</template>


fix: remove mdc-chip icon element from mdc-chip__text element


add some text when submissions not available

/*
Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/
<template>
  <fieldset class="mt-5" v-if="filteredSubmissions && filteredSubmissions.length > 0">

        <legend :id="id">Activity Reports</legend>

          There {{ filteredSubmissions.length !== 1 ? 'are' : 'is' }} {{ filteredSubmissions.length }} activity {{ filteredSubmissions.length !== 1 ? 'reports' : 'report' }} for well {{ $route.params.id }}.

        <b-table
            id="submissionHistoryTable"
            ref="submissionHistoryTable"
            :busy.sync="submissionsBusy"
            :items="filteredSubmissions"
            :fields="tableHeaders"
            responsive
            show-empty
            empty-text="No submission report history for this well. Not all activity reports submitted prior to 2019 are digitized. Scanned copies of paper reports may be available as an attachment in the well summary."
            :per-page="submissionsPerPage"
            :current-page="submissionsPage"
          >
          <template slot="report" slot-scope="data">

              <router-link :to="{ name: 'SubmissionDetail', params: { id: $route.params.id, submissionId: data.item.filing_number }}">{{ data.item.well_activity_description }}</router-link>

          </template>
          <template slot="date_entered" slot-scope="data">

              {{ data.item.create_date | moment("MMMM Do YYYY [at] LT") }}

          </template>
          <template slot="entered_by" slot-scope="data">

              {{ data.item.create_user }}

          </template>

         submissionsPerPage" size="md" :total-rows="filteredSubmissions.length" v-model="submissionsPage" :per-page="submissionsPerPage" :disabled="submissionsBusy" />

  </fieldset>
</template>

/*
Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/
<template>
  <fieldset class="mt-5" v-if="filteredSubmissions && filteredSubmissions.length > 0">

        <legend :id="id">Activity Reports</legend>

          There {{ filteredSubmissions.length !== 1 ? 'are' : 'is' }} {{ filteredSubmissions.length }} activity {{ filteredSubmissions.length !== 1 ? 'reports' : 'report' }} for well {{ $route.params.id }}.

          <template slot="report" slot-scope="data">

              <router-link :to="{ name: 'SubmissionDetail', params: { id: $route.params.id, submissionId: data.item.filing_number }}">{{ data.item.well_activity_description }}</router-link>

          </template>
          <template slot="date_entered" slot-scope="data">

              {{ data.item.create_date | moment("MMMM Do YYYY [at] LT") }}

          </template>
          <template slot="entered_by" slot-scope="data">

              {{ data.item.create_user }}

          </template>

         submissionsPerPage" size="md" :total-rows="filteredSubmissions.length" v-model="submissionsPage" :per-page="submissionsPerPage" :disabled="submissionsBusy" />

  </fieldset>
</template>


Removing missing console.log

Removing missing console.log

<template>
  <div>
    <Table
      :items="items"
      :routing-member="'tenders_show'"
      :columns="columns"
    />
  </div>
</template>

<script>
import ContractsShow from "./TendersShow.vue";
import Table from "../../components/Table.vue";

export default {
  name: 'TendersIndex',
  components: {
    ContractsShow,
    Table
  },
  data() {
    return {
      tendersData: this.$root.$data.tendersData,
      items: [],
      columns: [
        {field: 'contractor', translation: I18n.t('gobierto_dashboards.dashboards.contracts.contractor')},
        {field: 'status', translation: I18n.t('gobierto_dashboards.dashboards.contracts.status')},
        {field: 'submission_date', translation: I18n.t('gobierto_dashboards.dashboards.contracts.submission_date')},
      ]
    }
  },
  created() {
    this.items = this.tendersData.slice(0, 50);
  }
}
</script>

<template>
  <div>
    <Table
      :items="items"
      :routing-member="'tenders_show'"
      :columns="columns"
    />
  </div>
</template>

<script>
import ContractsShow from "./TendersShow.vue";
import Table from "../../components/Table.vue";

export default {
  name: 'TendersIndex',
  components: {
    ContractsShow,
    Table
  },
  data() {
    return {
      tendersData: this.$root.$data.tendersData,
      items: [],
      columns: [
        {field: 'contractor', translation: I18n.t('gobierto_dashboards.dashboards.contracts.contractor')},
        {field: 'status', translation: I18n.t('gobierto_dashboards.dashboards.contracts.status')},
        {field: 'submission_date', translation: I18n.t('gobierto_dashboards.dashboards.contracts.submission_date')},
      ]
    }
  },
  created() {
    this.items = this.tendersData.slice(0, 50);
    console.log(this.items[0])
  }
}
</script>


feat(charts): charts grid

feat(charts): charts grid

<template>

        <widget class="chart-widget"  header-text="Column Chart">
          <column-chart v-bind:chart-data="columnChartData"></column-chart>
        </widget>

        <widget class="chart-widget"  header-text="Time Based Area Chart">
          <time-based-area-chart v-bind:chart-data="timeBasedAreaChartData"></time-based-area-chart>
        </widget>

        <widget class="chart-widget"  header-text="Smoothed Line Chart">
          <smoothed-line-chart v-bind:chart-data="smoothedLineChartData"></smoothed-line-chart>
        </widget>

        <widget class="chart-widget"  header-text="Layered Column Chart">
          <layered-column-chart v-bind:chart-data="layeredColumnChartData"></layered-column-chart>
        </widget>

        <widget class="chart-widget"  header-text="Clustered Bar Chart">
          <clustered-bar-chart v-bind:chart-data="clusteredBarChartData"></clustered-bar-chart>
        </widget>

        <widget class="chart-widget"  header-text="Pie Chart">
          <pie-chart v-bind:chart-data="pieChartData"></pie-chart>
        </widget>

        <widget class="chart-widget"  header-text="Donut Chart">
          <donut-chart v-bind:chart-data="donutChartData"></donut-chart>
        </widget>

</template>

<template>

      <widget class="col-sm-12 chart-widget"  header-text="Smoothed Line Chart">
        <smoothed-line-chart v-bind:chart-data="smoothedLineChartData"></smoothed-line-chart>
      </widget>
      <widget class="col-sm-12 chart-widget"  header-text="Column Chart">
        <column-chart v-bind:chart-data="columnChartData"></column-chart>
      </widget>
      <widget class="col-sm-12 chart-widget"  header-text="Time Based Area Chart">
        <time-based-area-chart v-bind:chart-data="timeBasedAreaChartData"></time-based-area-chart>
      </widget>
      <widget class="col-sm-12 chart-widget"  header-text="Layered Column Chart">
        <layered-column-chart v-bind:chart-data="layeredColumnChartData"></layered-column-chart>
      </widget>
      <widget class="col-sm-12 chart-widget"  header-text="Clustered Bar Chart">
        <clustered-bar-chart v-bind:chart-data="clusteredBarChartData"></clustered-bar-chart>
      </widget>
      <widget class="col-sm-12 chart-widget"  header-text="Pie Chart">
        <pie-chart v-bind:chart-data="pieChartData"></pie-chart>
      </widget>
      <widget class="col-sm-12 chart-widget"  header-text="Donut Chart">
        <donut-chart v-bind:chart-data="donutChartData"></donut-chart>
      </widget>

</template>


Include old code for reference.

Include old code for reference.

<template>

        Announcements

        custom messages go here

        New here?

          See MyUW at a glance

</template>


Do not render drawer if message is not present

<template>
  <Drawer
    v-if="message"
    placement="right"
    :closeable="false"
    :visible="message && showMessage"
    width="50%"
    height="auto"
    @close="dismissMessage">

      <button type="button" class="btn btn-default btn-link btn-close" @click="dismissMessage">Close</button>

Message of The Day

  </Drawer>
</template>

<template>
  <Drawer
    placement="right"
    :closeable="false"
    :visible="message && showMessage"
    width="50%"
    height="auto"
    @close="dismissMessage">

      <button type="button" class="btn btn-default btn-link btn-close" @click="dismissMessage">Close</button>

Message of The Day

  </Drawer>
</template>


updateProfile component

updateProfile component

<template>

                    <input type="file" class="hidden" @change="getFile">
                    Browse

                <button v-if="newPhoto" class="btn btn-primary" @click="updateAvatar()"> update</button>

                        ×

{{error}}

                        ×

{{message}}

Personal info

                <form>

                        <input type="text" class="form-control" placeholder="Email" :value="userEmail">

                        <input v-model="userName" type="text" class="form-control" placeholder="Username">

                    <button class="btn btn-primary" @click ="updateProfile()">Save Changes</button>
                </form>

</template>

<template>

                ×

{{error}}

                ×

{{message}}

                Update Profile {{userEmail}}

                            <input type="file" class="hidden" @change="getFile">

                        <button v-if="newPhoto" class="btn btn-xs btn-primary" @click="updateAvatar()"> update</button>

                        <input type="text" class = "form-control" placeholder="email" :value ="userEmail">
                        <input v-model = "userName" type="text" class = "form-control push-down" placeholder="userName" :value="userName">

                <button class="btn btn-primary" @click = "updateProfile()">Submit</button>

</template>