Update src/components/MessagesList/MessagesList.vue

Co-authored-by: Marco <3397c7e210a9d1588196cfebb12b2c6b133f6934@icloud.com>
Signed-off-by: Joas Schilling <2bd0f8145e76cd3bbdf3e5ce202d948f0d8b62eb@users.noreply.github.com>

<docs>

This component is a wrapper for the list of messages. It's main purpose it to
get the messagesList array and loop through the list to generate the messages.

</docs>

<template>

		<MessagesGroup v-for="(item, index) of messagesGroupedByAuthor"
			:key="item[0].id"
			:style="{ height: item.height + 'px' }"
			v-bind="item"
			:last-read-message-id="visualLastReadMessageId"
			:messages="item"
			:next-message-id="(messagesGroupedByAuthor[index + 1] && messagesGroupedByAuthor[index + 1][0].id) || 0"
			:previous-message-id="(index > 0 && messagesGroupedByAuthor[index - 1][messagesGroupedByAuthor[index - 1].length - 1].id) || 0" />
		<template v-if="showLoadingAnimation">
			<LoadingPlaceholder type="messages"
				:count="15" />
		</template>
		<NcEmptyContent v-else-if="showEmptyContent"
			:title="t('spreed', 'No messages')"
			:description="t('spreed', 'All messages have expired or have been deleted.')">
			<template #icon>
				<Message :size="64" />
			</template>
		</NcEmptyContent>
		<transition name="fade">
			<NcButton v-show="!isChatScrolledToBottom"
				type="secondary"
				:aria-label="scrollToBottomAriaLabel"
				class="scroll-to-bottom"
				@click="smoothScrollToBottom">
				<template #icon>
					<ChevronDown :size="20" />
				</template>
			</NcButton>
		</transition>

</template>

<docs>

This component is a wrapper for the list of messages. It's main purpose it to
get the messagesList array and loop through the list to generate the messages.

</docs>

<template>

		<MessagesGroup v-for="(item, index) of messagesGroupedByAuthor"
			:key="item[0].id"
			:style="{ height: item.height + 'px' }"
			v-bind="item"
			:last-read-message-id="visualLastReadMessageId"
			:messages="item"
			:next-message-id="(messagesGroupedByAuthor[index + 1] && messagesGroupedByAuthor[index + 1][0].id) || 0"
			:previous-message-id="(index > 0 && messagesGroupedByAuthor[index - 1][messagesGroupedByAuthor[index - 1].length - 1].id) || 0" />
		<template v-if="showLoadingAnimation">
			<LoadingPlaceholder type="messages"
				:count="15" />
		</template>
		<NcEmptyContent v-else-if="showEmptyContent"
			:title="t('spreed', 'No messages')"
			:description="t('spreed', 'All messages have been expired or deleted. Restart the conversation!')">
			<template #icon>
				<Message :size="64" />
			</template>
		</NcEmptyContent>
		<transition name="fade">
			<NcButton v-show="!isChatScrolledToBottom"
				type="secondary"
				:aria-label="scrollToBottomAriaLabel"
				class="scroll-to-bottom"
				@click="smoothScrollToBottom">
				<template #icon>
					<ChevronDown :size="20" />
				</template>
			</NcButton>
		</transition>

</template>


Update copy for form actions.

Update copy for form actions.

<template>
  <SectionSlice :class="$options.className">
    <PrismicRichtext
      v-if="slice.primary.content"
      :class="`${$options.className}__content`"
      :html="slice.primary.content" />

      <ButtonIcon
        label="I’d like to book you in"
        color="red"
        @click.native="modalOpen('booking')">
        <g-image
          src="/icons/icon-working.png"
          width="60"
          height="60"
          alt="I’d like to book you in" />
      </ButtonIcon>

      <ButtonIcon
        label="I’d like a quote for a project"
        color="yellow"
        @click.native="modalOpen('quote')">
        <g-image
          src="/icons/icon-money.png"
          width="60"
          height="60"
          alt="I’d like a quote for a project" />
      </ButtonIcon>

      <ButtonIcon
        label="I’d like to ask a question"
        color="green"
        @click.native="modalOpen('question')">
        <g-image
          src="/icons/icon-wave.png"
          width="60"
          height="60"
          alt="I’d like to ask a question" />
      </ButtonIcon>

    <portal to="modal">
      <ModalDialog
        :open="modalActive"
        @close="modalClose">
        <template #header>
          <ButtonIcon
            v-if="type === 'booking'"
            label="I’d like to book you in"
            color="red"
            tag="div">
            <g-image
              src="/icons/icon-working.png"
              width="60"
              height="60"
              alt="I’d like to book you in" />
          </ButtonIcon>

          <ButtonIcon
            v-if="type === 'quote'"
            label="I’d like a quote for a project"
            color="yellow"
            tag="div">
            <g-image
              src="/icons/icon-money.png"
              width="60"
              height="60"
              alt="I’d like a quote for a project" />
          </ButtonIcon>

          <ButtonIcon
            v-if="type === 'question'"
            label="I’d like to ask a question"
            color="green"
            tag="div">
            <g-image
              src="/icons/icon-wave.png"
              width="60"
              height="60"
              alt="I’d like to ask a question" />
          </ButtonIcon>
        </template>
        <template #main>
          <FormContact
            :key="renderKey"
            :to="type" />
        </template>
      </ModalDialog>
    </portal>
  </SectionSlice>
</template>

<template>
  <SectionSlice :class="$options.className">
    <PrismicRichtext
      v-if="slice.primary.content"
      :class="`${$options.className}__content`"
      :html="slice.primary.content" />

      <ButtonIcon
        label="I’d like to book you in for work"
        color="red"
        @click.native="modalOpen('booking')">
        <g-image
          src="/icons/icon-working.png"
          width="60"
          height="60"
          alt="I’d like to book you in for work" />
      </ButtonIcon>

      <ButtonIcon
        label="I’d like a quote for a project"
        color="yellow"
        @click.native="modalOpen('quote')">
        <g-image
          src="/icons/icon-money.png"
          width="60"
          height="60"
          alt="I’d like a quote for a project" />
      </ButtonIcon>

      <ButtonIcon
        label="I’d like to ask a general question"
        color="green"
        @click.native="modalOpen('question')">
        <g-image
          src="/icons/icon-wave.png"
          width="60"
          height="60"
          alt="I’d like to ask a general question" />
      </ButtonIcon>

    <portal to="modal">
      <ModalDialog
        :open="modalActive"
        @close="modalClose">
        <template #header>
          <ButtonIcon
            v-if="type === 'booking'"
            label="I’d like to book you in for work"
            color="red"
            tag="div">
            <g-image
              src="/icons/icon-working.png"
              width="60"
              height="60"
              alt="I’d like to book you in for work" />
          </ButtonIcon>

          <ButtonIcon
            v-if="type === 'quote'"
            label="I’d like a quote for a project"
            color="yellow"
            tag="div">
            <g-image
              src="/icons/icon-money.png"
              width="60"
              height="60"
              alt="I’d like a quote for a project" />
          </ButtonIcon>

          <ButtonIcon
            v-if="type === 'question'"
            label="I’d like to ask a general question"
            color="green"
            tag="div">
            <g-image
              src="/icons/icon-wave.png"
              width="60"
              height="60"
              alt="I’d like to ask a general question" />
          </ButtonIcon>
        </template>
        <template #main>
          <FormContact
            :key="renderKey"
            :to="type" />
        </template>
      </ModalDialog>
    </portal>
  </SectionSlice>
</template>


Alliance details

Alliance details

<template>

Adrien

        <svg viewBox="0 0 100 100" class="foods-icon">
          <use xlink:href="#foods-icon-chou"></use>
        </svg>

2

Chou

Suivi de vos actions

    <fieldset class="step final-step">
      <form>
        <svg viewBox="0 0 100 100" class="alliance-icon">
          <use xlink:href="#app-icon-note"></use>
        </svg>

          Laissez un avis à Ludovic

          Votre échange était :

        <select class="alliance-form-vote-select" v-model="selectedProductType">
          <option>Parfait</option>
          <option>Moyen</option>
        </select>
      </form>
    </fieldset>

Valider

    <fieldset class="step user-side">
      <legend>
        <svg viewBox="0 0 100 100" class="alliance-icon">
          <use xlink:href="#app-icon-bugle"></use>
        </svg>
      </legend>
      <form>

Avez-vous récupéré le produit ?

      </form>
    </fieldset>

Oui

Non

      Les coordonnées de Ludovic sont :

      Appartement 5, étage 2

      20 rue du Trésum

      74000 Annecy

    <fieldset class="step my-side">
      <legend>
        <svg viewBox="0 0 100 100" class="alliance-icon">
          <use xlink:href="#app-icon-helmet"></use>
        </svg>
      </legend>

Ludovic est disponible :

Entre 10h et 12h

        Jeudi 28/02/16
    </fieldset>

    <fieldset class="step user-side">
      <legend>
        <svg viewBox="0 0 100 100" class="alliance-icon">
          <use xlink:href="#app-icon-bugle"></use>
        </svg>
      </legend>
      <form>

Ludovic n'est pas disponible aujourd'hui mais il vous propose les créneaux suivants

          <input type="radio" id="date-1" class="filter" value="false" v-model="productType">

Entre 10h et 12h

            Jeudi 28/02/16

          <input type="radio" id="date-2"  class="filter" value="true" v-model="productType">

Entre 18h et 20h

            Jeudi 28/02/16

      </form>
    </fieldset>

Refuser

Accepter

    <fieldset class="step my-side">
      <legend>
        <svg viewBox="0 0 100 100" class="alliance-icon">
          <use xlink:href="#app-icon-helmet"></use>
        </svg>
      </legend>

Vous avez contacté Ludovic le :

28/02/16

    </fieldset>

</template>


Remove test text

Remove test text

<template lang="html">

          Creating commitment for {{ fullDomainName }},

          hang on tight!

Commit created! Complete registration for {{ fullDomainName }}

          Secret Phrase
          <input
            v-model="secretPhrase"
            placeholder="Please enter secret phrase"
            name="secret-phrase"
          />

          How many years do you want to keep the name?
          <input
            v-model="durationInYears"
            min="1"
            type="number"
            name="duration-input"
          />

        <button
          :class="[
            'large-round-button-green-filled',
            !canRegister ? 'disabled' : ''
          ]"
          @click="registerWithDuration(secretPhrase, durationInYears)"
        >

            {{ canRegister ? 'Register' : ticker }}

        </button>

    <interface-bottom-text
      :link-text="$t('interface.helpCenter')"
      :question="$t('interface.haveIssues')"
      link="https://kb.myetherwallet.com"
    />

</template>

<template lang="html">

          Creating commitment for {{ fullDomainName }},

          hang on tight!

REEEEEEEEEE

          Secret Phrase
          <input
            v-model="secretPhrase"
            placeholder="Please enter secret phrase"
            name="secret-phrase"
          />

          How many years do you want to keep the name?
          <input
            v-model="durationInYears"
            min="1"
            type="number"
            name="duration-input"
          />

        <button
          :class="[
            'large-round-button-green-filled',
            !canRegister ? 'disabled' : ''
          ]"
          @click="registerWithDuration(secretPhrase, durationInYears)"
        >

            {{ canRegister ? 'Register' : ticker }}

        </button>

    <interface-bottom-text
      :link-text="$t('interface.helpCenter')"
      :question="$t('interface.haveIssues')"
      link="https://kb.myetherwallet.com"
    />

</template>


locale param

locale param


Refactor EdgeProperties to make use of Vuetify

<template>
  <v-expansion-panels class="ma-1 full-control" multiple>

    <v-expansion-panel>
      <v-expansion-panel-header>Meta-Information</v-expansion-panel-header>

      <v-expansion-panel-content>
        <v-container>

          <v-row
              v-if="edge.labels"
              v-for="(label, index) in edge.labels"
              :key="`${edge.name}-labels-${index}`">
            <v-col>
              <v-text-field label="Name" :value="label.text" @input="name => onAttributeNameChange(edge, name)"/>
            </v-col>
          </v-row>

          <v-row>
            <v-col>
              <v-text-field label="Description" v-model="edge.style.model.description"/>
            </v-col>
          </v-row>

          <v-row>
            <v-col>
              <v-checkbox v-model="edge.style.model.sourceDeletionDeletesTarget"
                          :label="'sourceDeletionDeletesTarget'"
                          @change="onSourceDeletionDeletesTargetChange(edge)"/>
              <v-checkbox v-model="edge.style.model.targetDeletionDeletesSource"
                          :label="'targetDeletionDeletesSource'"
                          @change="onTargetDeletionDeletesSourceChange(edge)"/>
            </v-col>
          </v-row>

        </v-container>
      </v-expansion-panel-content>
    </v-expansion-panel>

    <v-expansion-panel>
      <v-expansion-panel-header>Attributes</v-expansion-panel-header>

      <v-expansion-panel-content>
        <v-container>

          <v-row
              v-if="edge.style.model.attributes"
              v-for="(attribute, index) in edge.style.model.attributes"
              :key="`${edge.style.model.name}-properties-attributes-${index}`">
            <v-col>
              <v-text-field
                  label="Name"
                  v-model="attribute.name">
                <v-btn slot="append-outer" icon @click="onDeleteAttribute(edge.style.model, attribute.name)">
                  <v-icon color="red">mdi-trash-can-outline</v-icon>
                </v-btn>
              </v-text-field>
            </v-col>
          </v-row>

          <v-row>
            <v-col>
              <v-btn color="primary" @click="onAddAttribute(edge.style.model)">Add Attribute</v-btn>
            </v-col>
          </v-row>

        </v-container>
      </v-expansion-panel-content>
    </v-expansion-panel>

    <v-expansion-panel>
      <v-expansion-panel-header>Operations</v-expansion-panel-header>

      <v-expansion-panel-content>
        <v-container>

          <v-row
              v-if="edge.style.model.operations"
              v-for="(operation, index) in edge.style.model.operations"
              :key="`${edge.style.model.name}-properties-operations-${index}`">
            <v-col>
              <v-text-field
                  label="Name"
                  v-model="operation.name">
                <v-btn slot="append-outer" icon @click="onDeleteOperation(edge.style.model, operation.name)">
                  <v-icon color="red">mdi-trash-can-outline</v-icon>
                </v-btn>
              </v-text-field>
            </v-col>
          </v-row>

          <v-row>
            <v-col>
              <v-btn color="primary" @click="onAddOperation(edge.style.model)">Add Operation</v-btn>
            </v-col>
          </v-row>

        </v-container>
      </v-expansion-panel-content>
    </v-expansion-panel>

  </v-expansion-panels>
</template>

<script>
export default {
  name: 'EdgeProperties',
  data: function () {
    return {}
  },
  watch: {
    edge: function (newVal, oldVal) { // watch it
      if (newVal.name !== oldVal.name) {
        console.log("name changed");
      }
      console.log('Prop changed: ', newVal, ' | was: ', oldVal)
    }
  },
  props: {
    edge: {
      validator: prop => typeof prop === 'object' || prop === null,
      required: true
    }
  },
  methods: {
    onAttributeNameChange(edge, name) {
      this.$emit('on-edge-name-change', edge, name)
    },
    onSourceDeletionDeletesTargetChange(edge) {
      this.$emit('on-edge-style-change', edge);
    },
    onTargetDeletionDeletesSourceChange(edge) {
      this.$emit('on-edge-style-change', edge);
    },
    onDeleteAttribute(model, name) {
      this.$emit('delete-attribute', model, name);
    },
    onAddAttribute(model) {
      this.$emit('add-attribute', model, 'default');
    },
    onDeleteOperation(model, name) {
      this.$emit('delete-operation', model, name);
    },
    onAddOperation(model) {
      this.$emit('add-operation', model, 'default');
    }
  }
}
</script>

<style scoped>

</style>

<template>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

            <md-list :md-expand-single="false">
                <md-list-item md-expand>
                    Meta-Information
                    <md-list slot="md-expand">
                        <md-list-item class="md-inset">
                            <md-field
                                    v-if="edge.labels"
                                    v-for="(label, index) in edge.labels"
                                    :key="`${edge.name}-labels-${index}`"
                            >
                                Name
                                <md-input :value="label.text" @input="name => $emit('on-edge-name-change', edge, name)"/>
                            </md-field>
                        </md-list-item>
                        <md-list-item class="md-inset">
                            <md-field>
                                Description
                                <md-input v-model="edge.style.model.description" />
                            </md-field>
                        </md-list-item>
                        <md-list-item class="md-inset">
                            <md-checkbox v-model="edge.style.model.sourceDeletionDeletesTarget" @change="$emit('on-edge-style-change', edge)">sourceDeletionDeletesTarget</md-checkbox>
                        </md-list-item>
                        <md-list-item class="md-inset">
                            <md-checkbox v-model="edge.style.model.targetDeletionDeletesSource" @change="$emit('on-edge-style-change', edge)">targetDeletionDeletesSource</md-checkbox>
                        </md-list-item>
                    </md-list>
                </md-list-item>

                <md-list-item md-expand>
                    Attributes
                    <md-list slot="md-expand">
                        <md-list-item
                                v-if="edge.style.model.attributes"
                                v-for="(attribute, index) in edge.style.model.attributes"
                                :key="`${edge.style.model.name}-properties-attributes-${index}`"
                                class="md-inset"
                        >
                            <md-field>
                                Name
                                <md-input v-model="attribute.name"/>
                            </md-field>
                            <md-button class="md-icon-button md-dense md-primary" @click="$emit('delete-attribute', edge.style.model, attribute.name)">
                                <md-icon class="fa fa-trash" />
                            </md-button>
                        </md-list-item>
                        <md-list-item class="md-inset">
                            <md-button class="md-raised md-primary" @click="$emit('add-attribute', edge.style.model, 'default')">Add Attribute</md-button>
                        </md-list-item>
                    </md-list>
                </md-list-item>

                <md-list-item md-expand>
                    Operations
                    <md-list slot="md-expand">
                        <md-list-item
                                v-if="edge.style.model.operations"
                                v-for="(operation, index) in edge.style.model.operations"
                                :key="`${edge.style.model.name}-properties-operations-${index}`"
                                class="md-inset"
                        >
                            <md-field>
                                Name
                                <md-input v-model="operation.name" />
                            </md-field>
                            <md-button class="md-icon-button md-dense md-primary" @click="$emit('delete-operation', edge.style.model, operation.name)">
                                <md-icon
                                        class="fa fa-trash"
                                />
                            </md-button>
                        </md-list-item>
                        <md-list-item class="md-inset">
                            <md-button class="md-raised md-primary" @click="$emit('add-operation', edge.style.model, 'default')">Add Operation</md-button>
                        </md-list-item>
                    </md-list>
                </md-list-item>
            </md-list>

</template>


スプラッシュがクリックに反応するように (#4561)

スプラッシュがクリックに反応するように (#4561)

* confirm silence

* Resolve #4554

* Revert "confirm silence"

This reverts commit e1dbdc2bfc0f41c2b308b142c70e9e4573c98cf9.

<template>

		<template v-if="type == 'signin'">
			<mk-signin/>
		</template>
		<template v-else>

<fa :icon="icon"/>

			<ui-input v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></ui-input>
			<ui-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><template #prefix>@</template></ui-input>
			<ui-select v-if="select" v-model="selectedValue" autofocus>
				<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
			</ui-select>
			<ui-horizon-group no-grow class="buttons fit-bottom" v-if="!splash">
				<ui-button @click="ok" primary :autofocus="!input && !select && !user">{{ (showCancelButton || input || select || user) ? $t('@.ok') : $t('@.got-it') }}</ui-button>
				<ui-button @click="cancel" v-if="showCancelButton || input || select || user">{{ $t('@.cancel') }}</ui-button>
			</ui-horizon-group>
		</template>

</template>


markdown style

markdown style

<template>
    <markdown-editor
            :autoinit="element.autoInit"
            :highlight="element.highlight"
            :configs="element.configs"
            v-model="currentValue"
            ref="markdownEditor">
    </markdown-editor>
</template>

<script>
    import vModel from '../../../../mixins/model'
    import markdownEditor from 'vue-simplemde/src/markdown-editor'

    export default {
        name: "vMarkdown",
        data() {
            return {}
        },
        mixins: [
            vModel
        ],
        components: {
            markdownEditor
        },
        props: {
            element: Object,
        },
    }
</script>

<style>
    @import '~simplemde/dist/simplemde.min.css';
    .markdown-editor .fullscreen {
        z-index: 1031 !important;
    }
    .markdown-editor .CodeMirror-fullscreen {
        z-index: 1031 !important;
    }
</style>

<template>
    <markdown-editor
            :autoinit="element.autoInit"
            :highlight="element.highlight"
            :configs="element.configs"
            v-model="currentValue"
            ref="markdownEditor">
    </markdown-editor>
</template>

<script>
    import vModel from '../../../../mixins/model'
    import markdownEditor from 'vue-simplemde/src/markdown-editor'

    export default {
        name: "vMarkdown",
        data() {
            return {}
        },
        mixins: [
            vModel
        ],
        components: {
            markdownEditor
        },
        props: {
            element: Object,
        },
    }
</script>

<style scoped>
    @import '~simplemde/dist/simplemde.min.css';
</style>


chore: remove invalid swal param

chore: remove invalid swal param

Signed-off-by: Daniel Hsing <815f09ca528d6c1556f06eec7d08163b2f13c4ee@gmail.com>

<template>

        <template v-for="team in teams">

                    {{ team.name }}

        </template>

</template>


add click handler (#359)

add click handler (#359)

<template>

				<app-fireside-post-like-widget :post="post" :show-user-follow="showUserFollow" trans />

				<template v-if="showCommentsButton">
					<app-button
						icon="comment"
						circle
						trans
						@click="openComments()"
						v-app-tooltip="$gettext('View Comments')"
					/>

					 0" @click="openComments()">

							{{ commentsCount | number }}

				</template>

				<app-popper @show="isShowingShare = true" @hide="isShowingShare = false">
					<app-button icon="share-airplane" circle trans v-app-tooltip="$gettext('Share')" />

							<app-social-twitter-share :url="shareUrl" :content="post.leadStr" />

							<app-social-facebook-like :url="shareUrl" />

						<app-button block @click="copyShareUrl">
							<translate>Copy Permalink</translate>
						</app-button>

				</app-popper>

				<translate
					:translate-n="post.view_count || 0"
					:translate-params="{ count: number(post.view_count || 0) }"
					translate-plural="%{ count } views"
				>
					%{ count } view
				</translate>

				<translate
					:translate-n="post.expand_count || 0"
					:translate-params="{ count: number(post.expand_count || 0) }"
					translate-plural="%{ count } expands"
				>
					%{ count } expand
				</translate>

					<app-jolticon icon="help-circle" />

				<template v-if="shouldShowEdit">
					<app-button v-if="canPublish" class="-inline-button" primary @click="publish()">
						<translate>Publish</translate>
					</app-button>
					<app-button class="-inline-button" @click="openEdit()">
						<translate>Edit</translate>
					</app-button>
				</template>

				<app-event-item-controls-fireside-post-extra
					v-if="shouldShowExtra"
					:post="post"
					@remove="emitRemove"
					@feature="emitFeature"
					@unfeature="emitUnfeature"
					@move-channel="emitMoveChannel"
					@reject="emitReject"
					@pin="emitPin"
					@unpin="emitUnpin"
				/>

</template>

<template>

				<app-fireside-post-like-widget :post="post" :show-user-follow="showUserFollow" trans />

				<template v-if="showCommentsButton">
					<app-button
						icon="comment"
						circle
						trans
						@click="openComments()"
						v-app-tooltip="$gettext('View Comments')"
					/>

					 0">

							{{ commentsCount | number }}

				</template>

				<app-popper @show="isShowingShare = true" @hide="isShowingShare = false">
					<app-button icon="share-airplane" circle trans v-app-tooltip="$gettext('Share')" />

							<app-social-twitter-share :url="shareUrl" :content="post.leadStr" />

							<app-social-facebook-like :url="shareUrl" />

						<app-button block @click="copyShareUrl">
							<translate>Copy Permalink</translate>
						</app-button>

				</app-popper>

				<translate
					:translate-n="post.view_count || 0"
					:translate-params="{ count: number(post.view_count || 0) }"
					translate-plural="%{ count } views"
				>
					%{ count } view
				</translate>

				<translate
					:translate-n="post.expand_count || 0"
					:translate-params="{ count: number(post.expand_count || 0) }"
					translate-plural="%{ count } expands"
				>
					%{ count } expand
				</translate>

					<app-jolticon icon="help-circle" />

				<template v-if="shouldShowEdit">
					<app-button v-if="canPublish" class="-inline-button" primary @click="publish()">
						<translate>Publish</translate>
					</app-button>
					<app-button class="-inline-button" @click="openEdit()">
						<translate>Edit</translate>
					</app-button>
				</template>

				<app-event-item-controls-fireside-post-extra
					v-if="shouldShowExtra"
					:post="post"
					@remove="emitRemove"
					@feature="emitFeature"
					@unfeature="emitUnfeature"
					@move-channel="emitMoveChannel"
					@reject="emitReject"
					@pin="emitPin"
					@unpin="emitUnpin"
				/>

</template>


devop: adjust mnemonic access mobile ui

devop: adjust mnemonic access mobile ui

<template>
  <mew-stepper :items="stepperItems" :on-step="step">

    <template v-if="step === 1" #stepperContent1>
      <v-sheet color="white" class="border-radius--10px pa-4 pa-md-10">
        <v-row class="align-end justify-start mb-3 mb-md-5">
          <v-col cols="12">

STEP 1.

              Enter your Mnemonic Phrase

              Please type the mnemonic phrase you wrote down in the right order.

              <v-select
                v-model="length"
                style="max-width: 150px"
                hide-details
                dense
                item-text="label"
                item-value="value"
                :items="mnemonicOptions"
                label=""
                outlined
              ></v-select>

            <phrase-block class="mb-8">
              <v-row>
                <v-col
                  v-for="n in length"
                  :key="`mnemonicInput${n}`"
                  cols="6"
                  lg="3"
                  md="3"
                  sm="4"
                >
                  <v-text-field
                    :ref="`mnemonicInput${n}`"
                    v-model="phrase[n]"
                    :name="`mnemonicInput${n}`"
                    :label="`${n}.`"
                  ></v-text-field>
                </v-col>
              </v-row>
            </phrase-block>

            <mew-expand-panel
              :has-dividers="true"
              :panel-items="extraWordPanel"
              :idx-to-expand="null"
            >
              <template #panelBody1>
                <mew-input
                  v-model="extraWord"
                  type="password"
                  label="Enter Extra word"
                  placeholder="Enter your extra word"
                />
              </template>
            </mew-expand-panel>

              <mew-button
                title="Next"
                btn-size="xlarge"
                :disabled="!isValidMnemonic"
                @click.native="unlockBtn"
              />

          </v-col>
        </v-row>
      </v-sheet>
    </template>

    <template v-if="step === 2" #stepperContent2>
      <v-sheet color="white" class="border-radius--10px pa-4 pa-md-10">
        <v-row class="align-end justify-start">
          <v-col cols="12">

STEP 2.

              Select HD Derivation Path

              Please select HD Derivation Path that you you want to interact
              with or enter a custom one.

            <mew-select
              v-model="selectedPath"
              label="Select Path"
              :has-filter="true"
              :items="parsedPaths"
              filter-placeholder="Search Path"
            />
          </v-col>
        </v-row>

        <mew-expand-panel
          is-toggle
          :has-dividers="true"
          :idx-to-expand="null"
          :panel-items="[
            {
              name: 'Add custom path'
            }
          ]"
        >
          <template #panelBody1>
            <mew-input
              v-model="customPathName"
              label="Enter Alias"
              placeholder="Enter custom path alias"
            />
            <mew-input
              v-model="customPathValue"
              label="Enter Path"
              placeholder="m/44'/1'/0'/0"
            />
            <v-row class="align-center justify-center mb-5">
              <mew-button
                btn-size="small"
                title="Add Path"
                btn-style="outline"
                :disable="!selectedPath"
                @click.native="saveCustomPath"
            /></v-row>
          </template>
        </mew-expand-panel>

        <v-row dense class="align-center justify-center my-2">
          <v-col cols="12" sm="4" order="last" order-sm="first" class="px-sm-2">
            <mew-button
              has-full-width
              title="Back"
              btn-style="outline"
              btn-size="xlarge"
              @click.native="step = 1"
            />
          </v-col>
          <v-col cols="12" sm="4" class="px-sm-2">
            <mew-button
              has-full-width
              btn-size="xlarge"
              title="Next"
              :disable="!selectedPath"
              @click.native="nextStepThree"
            />
          </v-col>
        </v-row> </v-sheet
    ></template>

    <template v-if="step === 3" #stepperContent3>
      <v-sheet color="white" class="border-radius--10px pa-4 pa-md-10">
        <v-row class="align-end justify-start">
          <v-col cols="12">

STEP 3.

              Select Address and Network

              Please select address that you want to interact with and network.

          </v-col>
        </v-row>
        <mew-expand-panel :interactive-content="true" :panel-items="panelItems">

          <template #panelBody1>

              <v-radio-group v-model="selectedAddress">

                <v-row dense class="table-header">
                  <v-col offset="2">

Adddress

                  </v-col>
                  <v-col cols="4" sm="3">

ETH Balance

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

                <v-row
                  v-for="acc in accounts"
                  v-show="accounts.length > 0"
                  :key="acc.address"
                  dense
                  class="table-row-class align-center justify-start py-1"
                >
                  <v-col cols="2" sm="1">
                    <v-radio label="" :value="acc.address" class="mx-2" />
                  </v-col>
                  <v-col cols="6" sm="8">
                    <v-row
                      dense
                      class="align-center justify-start pl-1 pl-sm-3 pr-2 pr-sm-3"
                    >
                      <mew-blockie
                        width="25px"
                        height="25px"
                        :address="acc.address"
                        class="mr-2"
                      />
                      <v-col cols="9" class="d-none d-sm-flex">
                        <mew-transform-hash :hash="acc.address" />
                      </v-col>

                        {{ acc.address | concatAddressXS }}

                      <mew-copy
                        is-small
                        :copy-ref="acc.address"
                        tooltip="Copy Address"
                        :copy-value="acc.address"
                        class="ml-2"
                      />
                    </v-row>
                  </v-col>
                  <v-col cols="4" sm="3">

                      {{
                        acc.balance === 'Loading..'
                          ? acc.balance
                          : `${acc.balance} ${network.type.name}`
                      }}

                  </v-col>
                </v-row>
              </v-radio-group>

              <v-row align="center" justify="center">

                  <mew-button
                    title="Previous"
                    color-theme="basic"
                    icon="mdi-chevron-left"
                    icon-type="mdi"
                    btn-size="small"
                    icon-align="left"
                    btn-style="transparent"
                    @click.native="previousAddressSet"
                  />
                  <mew-button
                    title="Next"
                    color-theme="basic"
                    icon="mdi-chevron-right"
                    icon-type="mdi"
                    btn-size="small"
                    icon-align="right"
                    btn-style="transparent"
                    @click.native="nextAddressSet"
                  />

              </v-row>

          </template>

          <template #panelBody2>

              <v-radio-group v-model="selectedNetwork">

                    {{ type }}

                  <v-container>
                    <v-row dense align="center" justify="space-between">
                      <v-col
                        v-for="(item, idx) in Networks[type]"
                        :key="item.service + idx"
                        cols="12"
                        sm="6"
                      >
                        <v-radio :label="item.service" :value="item.url" />
                      </v-col>
                    </v-row>
                  </v-container>
                  <v-divider
                    v-if="networkTypes.length != i + 1"
                    class="mt-0 mb-5"
                  />

              </v-radio-group>

          </template>
        </mew-expand-panel>

          <mew-checkbox
            v-model="acceptTerms"
            label="To access my wallet, I accept "
            :link="link"
            class="justify-center"
          />

        <v-row dense class="align-center justify-center my-2">
          <v-col cols="12" sm="4" order="last" order-sm="first" class="px-sm-2">
            <mew-button
              has-full-width
              title="Back"
              btn-style="outline"
              btn-size="xlarge"
              @click.native="backStepTwo()"
            />
          </v-col>
          <v-col cols="12" sm="4" class="px-sm-2">
            <mew-button
              has-full-width
              btn-size="xlarge"
              title="Access Wallet"
              :disabled="!acceptTerms"
              @click.native="accessWallet()"
            />
          </v-col>
        </v-row>
      </v-sheet>
    </template>
  </mew-stepper>
</template>

<template>
  <mew-stepper :items="stepperItems" :on-step="step">

    <template v-if="step === 1" #stepperContent1>
      <v-sheet color="white" class="border-radius--10px pa-4 pa-md-10">
        <v-row class="align-end justify-start mb-3 mb-md-5">
          <v-col cols="12">

STEP 1.

              Enter your Mnemonic Phrase

              Please type the mnemonic phrase you wrote down in the right order.

              <v-select
                v-model="length"
                style="max-width: 150px"
                hide-details
                dense
                item-text="label"
                item-value="value"
                :items="mnemonicOptions"
                label=""
                outlined
              ></v-select>

            <phrase-block class="mb-8">
              <v-row>
                <v-col
                  v-for="n in length"
                  :key="`mnemonicInput${n}`"
                  cols="6"
                  lg="3"
                  md="3"
                  sm="4"
                >
                  <v-text-field
                    :ref="`mnemonicInput${n}`"
                    v-model="phrase[n]"
                    :name="`mnemonicInput${n}`"
                    :label="`${n}.`"
                  ></v-text-field>
                </v-col>
              </v-row>
            </phrase-block>

            <mew-expand-panel
              :has-dividers="true"
              :panel-items="extraWordPanel"
              :idx-to-expand="null"
            >
              <template #panelBody1>
                <mew-input
                  v-model="extraWord"
                  type="password"
                  label="Enter Extra word"
                  placeholder="Enter your extra word"
                />
              </template>
            </mew-expand-panel>

              <mew-button
                title="Next"
                btn-size="xlarge"
                :disabled="!isValidMnemonic"
                @click.native="unlockBtn"
              />

          </v-col>
        </v-row>
      </v-sheet>
    </template>

    <template v-if="step === 2" #stepperContent2>
      <v-sheet color="white" class="border-radius--10px pa-4 pa-md-10">
        <v-row class="align-end justify-start">
          <v-col cols="12">

STEP 2.

              Select HD Derivation Path

              Please select HD Derivation Path that you you want to interact
              with or enter a custom one.

            <mew-select
              v-model="selectedPath"
              label="Select Path"
              :has-filter="true"
              :items="parsedPaths"
              filter-placeholder="Search Path"
            />
          </v-col>
        </v-row>

        <mew-expand-panel
          is-toggle
          :has-dividers="true"
          :idx-to-expand="null"
          :panel-items="[
            {
              name: 'Add custom path'
            }
          ]"
        >
          <template #panelBody1>
            <mew-input
              v-model="customPathName"
              label="Enter Alias"
              placeholder="Enter custom path alias"
            />
            <mew-input
              v-model="customPathValue"
              label="Enter Path"
              placeholder="m/44'/1'/0'/0"
            />
            <v-row class="align-center justify-center mb-5">
              <mew-button
                btn-size="small"
                title="Add Path"
                btn-style="outline"
                :disable="!selectedPath"
                @click.native="saveCustomPath"
            /></v-row>
          </template>
        </mew-expand-panel>

        <v-row dense class="align-center justify-center my-2">
          <v-col cols="12" sm="4" order="last" order-sm="first" class="px-sm-2">
            <mew-button
              has-full-width
              title="Back"
              btn-style="outline"
              btn-size="xlarge"
              @click.native="step = 1"
            />
          </v-col>
          <v-col cols="12" sm="4" class="px-sm-2">
            <mew-button
              has-full-width
              btn-size="xlarge"
              title="Next"
              :disable="!selectedPath"
              @click.native="nextStepThree"
            />
          </v-col>
        </v-row> </v-sheet
    ></template>

    <template v-if="step === 3" #stepperContent3>
      <v-sheet color="white" class="border-radius--10px pa-4 pa-md-10">
        <v-row class="align-end justify-start">
          <v-col cols="12">

STEP 3.

              Select Address and Network

              Please select address that you want to interact with and network.

          </v-col>
        </v-row>
        <mew-expand-panel :interactive-content="true" :panel-items="panelItems">

          <template #panelBody1>

              <v-radio-group v-model="selectedAddress">

                <v-row dense class="table-header">
                  <v-col offset="2">

Adddress

                  </v-col>
                  <v-col cols="4" md="3">

ETH Balance

                  </v-col>
                  <v-col cols="2">

Tokens

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

                <v-row
                  v-for="acc in accounts"
                  v-show="accounts.length > 0"
                  :key="acc.address"
                  dense
                  class="table-row-class align-center justify-start py-1"
                >
                  <v-col cols="1">
                    <v-radio label="" :value="acc.address" />
                  </v-col>
                  <v-col cols="1">
                    <mew-blockie
                      width="25px"
                      height="25px"
                      :address="acc.address"
                    />
                  </v-col>
                  <v-col>
                    <v-row dense class="align-center justify-start pl-2 pr-3">
                      <v-col>

{{ acc.address | concatAddress }}

                      </v-col>
                      <v-col>
                        <mew-copy
                          is-small
                          :copy-ref="acc.address"
                          tooltip="Copy Address"
                          :copy-value="acc.address"
                        /> </v-col
                    ></v-row>
                  </v-col>
                  <v-col cols="4" md="3">

                      {{
                        acc.balance === 'Loading..'
                          ? acc.balance
                          : `${acc.balance} ${network.type.name}`
                      }}

                  </v-col>
                  <v-col cols="2">

{{ !acc.tokens ? acc.tokens : acc.tokens }}

                  </v-col>
                </v-row>
              </v-radio-group>

              <v-row align="center" justify="center">

                  <mew-button
                    title="Previous"
                    color-theme="basic"
                    icon="mdi-chevron-left"
                    icon-type="mdi"
                    btn-size="small"
                    icon-align="left"
                    btn-style="transparent"
                    @click.native="previousAddressSet"
                  />
                  <mew-button
                    title="Next"
                    color-theme="basic"
                    icon="mdi-chevron-right"
                    icon-type="mdi"
                    btn-size="small"
                    icon-align="right"
                    btn-style="transparent"
                    @click.native="nextAddressSet"
                  />

              </v-row>

          </template>

          <template #panelBody2>

              <v-radio-group v-model="selectedNetwork">

                    {{ type }}

                  <v-container>
                    <v-row dense align="center" justify="space-between">
                      <v-col
                        v-for="(item, idx) in Networks[type]"
                        :key="item.service + idx"
                        cols="12"
                        sm="6"
                      >
                        <v-radio :label="item.service" :value="item.url" />
                      </v-col>
                    </v-row>
                  </v-container>
                  <v-divider
                    v-if="networkTypes.length != i + 1"
                    class="mt-0 mb-5"
                  />

              </v-radio-group>

          </template>
        </mew-expand-panel>

          <mew-checkbox
            v-model="acceptTerms"
            label="To access my wallet, I accept "
            :link="link"
            class="justify-center"
          />

        <v-row dense class="align-center justify-center my-2">
          <v-col cols="12" sm="4" order="last" order-sm="first" class="px-sm-2">
            <mew-button
              has-full-width
              title="Back"
              btn-style="outline"
              btn-size="xlarge"
              @click.native="backStepTwo()"
            />
          </v-col>
          <v-col cols="12" sm="4" class="px-sm-2">
            <mew-button
              has-full-width
              btn-size="xlarge"
              title="Access Wallet"
              :disabled="!acceptTerms"
              @click.native="accessWallet()"
            />
          </v-col>
        </v-row>
      </v-sheet>
    </template>
  </mew-stepper>
</template>


replaced string `discussion` with string `thread` in mr-widget component state

<template>

    <status-icon :show-disabled-button="true" status="warning" />

        {{ s__('mrWidget|There are unresolved threads. Please resolve these threads') }}

        {{ s__('mrWidget|Create an issue to resolve them later') }}

</template>

<template>

    <status-icon :show-disabled-button="true" status="warning" />

        {{ s__('mrWidget|There are unresolved discussions. Please resolve these discussions') }}

        {{ s__('mrWidget|Create an issue to resolve them later') }}

</template>


站点配置修改提示文案

站点配置修改提示文案

站点配置修改提示文案

<template>

        站点配置

          <loading :loadding="loadding"></loading>

              金币

                  <input type="radio" :value="radio.on"  v-model="site.gold.status" :disabled="!site.status"> 开启

                  <input type="radio" :value="radio.off" v-model="site.gold.status" :disabled="!site.status"> 关闭

                启动规则，用户完成相应的节点操作可以获取对应的奖励
关闭规则，用户完成相应的节点操作不能获取对应的奖励

              打赏

                  <input type="radio" :value="radio.on"  v-model="site.reward.status" :disabled="!site.status"> 开启

                  <input type="radio" :value="radio.off"  v-model="site.reward.status" :disabled="!site.status"> 关闭

                用户打赏开启与关闭

              打赏金额

                <input type="text" class="form-control" v-model="site.reward.amounts">

                打赏金额配置，单位(元)，多个金额用小写","分割 例如:5,10,15。

              预留呢称

                <input type="text" class="form-control" v-model="site.reserved_nickname">

                预留呢称，多个呢称用小写","分割

              客户邮箱

                <input type="text" class="form-control" v-model="site.client_email">

                客户邮箱

              用户邀请模版

                <textarea class="form-control" v-model="site.user_invite_template">
                </textarea>

                用户邀请模版

                <button class="btn btn-primary btn-block"
                @click.prevent="updateSiteConfigure"
                data-loading-text="提交中"
                autocomplete="off" id="submit-btn">确认</button>

                 {{ message.success }}
                 {{ message.error }}

</template>

<template>

        站点配置

          <loading :loadding="loadding"></loading>

              金币

                  <input type="radio" :value="radio.on"  v-model="site.gold.status" :disabled="!site.status"> 开启

                  <input type="radio" :value="radio.off" v-model="site.gold.status" :disabled="!site.status"> 关闭

                启动规则，用户完成相应的节点操作可以获取对应的奖励
关闭规则，用户完成相应的节点操作不能获取对应的奖励

              打赏

                  <input type="radio" :value="radio.on"  v-model="site.reward.status" :disabled="!site.status"> 开启

                  <input type="radio" :value="radio.off"  v-model="site.reward.status" :disabled="!site.status"> 关闭

                用户打赏开启与关闭

              打赏金额

                <input type="text" class="form-control" v-model="site.reward.amounts">

                打赏金额配置，多个金额用小写","分割，例如:5,10,15

              预留呢称

                <input type="text" class="form-control" v-model="site.reserved_nickname">

                预留呢称，多个呢称用小写","分割

              客户邮箱

                <input type="text" class="form-control" v-model="site.client_email">

                客户邮箱

              用户邀请模版

                <textarea class="form-control" v-model="site.user_invite_template">
                </textarea>

                用户邀请模版

                <button class="btn btn-primary btn-block"
                @click.prevent="updateSiteConfigure"
                data-loading-text="提交中"
                autocomplete="off" id="submit-btn">确认</button>

                 {{ message.success }}
                 {{ message.error }}

</template>


lock icon lighter

lock icon lighter

<template>

{{ $t(title) }}

<slot name="add-button"></slot>

            <slot name="buttons"></slot>

 1">
                <button
                    class="btn btn-light dropdown-toggle"
                    type="button"
                    id="dropdownLangSwitcher"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                >
                    {{ locales.find(item => item.short === currentLocale).long }}
                </button>

                    <button
                        class="dropdown-item"
                        :class="{ active: locale === currentLocale }"
                        type="button"
                        v-for="locale in locales"
                        @click="switchLocale(locale.short)"
                        :key="locale.short"
                    >
                        {{ locale.long }}
                    </button>

        <sl-vue-tree v-model="models" :allowMultiselect="false" ref="slVueTree" @drop="drop" @toggle="toggle">
            <template slot="title" slot-scope="{ node }">

                {{ $t('Edit') }}

{{ node.data.title_translated }}

                    {{ node.data.module }}

            </template>

            <template slot="toggle" slot-scope="{ node }">

            </template>
        </sl-vue-tree>

</template>


Update ItemListTree.vue

Update ItemListTree.vue

<template>

{{ $t(title) }}

                <slot name="add-button"></slot>

            <slot name="buttons"></slot>

                    {{ $t('Loading…') }}

 1">
                <button
                    class="btn btn-light dropdown-toggle"
                    type="button"
                    id="dropdownLangSwitcher"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                >
                    {{ locales.find((item) => item.short === currentLocale).long }}
                </button>

                    <button
                        class="dropdown-item"
                        :class="{ active: locale === currentLocale }"
                        type="button"
                        v-for="locale in locales"
                        @click="switchLocale(locale.short)"
                        :key="locale.short"
                    >
                        {{ locale.long }}
                    </button>

        <sl-vue-tree v-model="models" :allowMultiselect="false" ref="slVueTree" @drop="drop" @toggle="toggle">
            <template slot="title" slot-scope="{ node }">
                <button
                    class="btn btn-xs btn-link"
                    type="button"
                    @click="deleteFromNested(node)"
                    v-if="$can('delete ' + table)"
                >
                    <svg
                        width="12"
                        height="12"
                        viewBox="0 0 1792 1792"
                        fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"
                        />
                    </svg>
                </button>

                    {{ $t('Edit') }}

                <svg
                    class="text-muted"
                    v-if="node.data.is_home === 1"
                    width="1rem"
                    height="1rem"
                    viewBox="0 0 16 16"
                    fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M6.5 10.995V14.5a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V11c0-.25-.25-.5-.5-.5H7c-.25 0-.5.25-.5.495z"
                    />
                    <path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z" />
                </svg>

                <svg
                    class="text-muted"
                    v-if="node.data.private === 1"
                    width="1rem"
                    height="1rem"
                    viewBox="0 0 16 16"
                    fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path d="M2.5 9a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-7a2 2 0 0 1-2-2V9z" />
                    <path fill-rule="evenodd" d="M4.5 4a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z" />
                </svg>

{{ node.data.title_translated }}

                <svg
                    class="text-muted"
                    v-if="node.data.redirect === 1"
                    :title="$t('Redirect to first child')"
                    width="1rem"
                    height="1rem"
                    fill="currentColor"
                    viewBox="0 0 1792 1792"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M416 256h704q13 0 22.5 9.5t9.5 23.5v863h192q40 0 58 37t-9 69l-320 384q-18 22-49 22t-49-22l-320-384q-26-31-9-69 18-37 58-37h192v-640h-320q-14 0-25-11l-160-192q-13-14-4-34 9-19 29-19z"
                    />
                </svg>

                    {{ $t(node.data.module.charAt(0).toUpperCase() + node.data.module.slice(1)) }}

            </template>

            <template slot="toggle" slot-scope="{ node }">
                <svg
                    v-if="node.children.length > 0 && node.isExpanded"
                    width="0.8rem"
                    height="0.8rem"
                    viewBox="0 0 16 16"
                    fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"
                    />
                </svg>
                <svg
                    v-if="node.children.length > 0 && !node.isExpanded"
                    width="0.8rem"
                    height="0.8rem"
                    viewBox="0 0 16 16"
                    fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"
                    />
                </svg>
            </template>
        </sl-vue-tree>

</template>


Add proper links to API (not finished)

Add proper links to API (not finished)

Signed-off-by: Matt Snell <0571cfbefc19de26e906feb2eaf27aeab74db0a0@unomaha.edu>

<template>
  <d-card>
    <d-card-body :title="title" class="text-center">
      <spinner v-if="!loaded"></spinner>

            {{header}}

                {{el['short_name']}}

                  <div v-if="el['license_id'] < 500">

                      {{el['count']}}

= 500">

                    {{el['count']}}

    </d-card-body>
  </d-card>
</template>

<template>
  <d-card>
    <d-card-body :title="title" class="text-center">
      <spinner v-if="!loaded"></spinner>

            {{header}}

                {{el['short_name']}}

              {{el['count']}}

    </d-card-body>
  </d-card>
</template>


Also fix the status recycling in the mention dropdown

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

<template>
	<At ref="at"
		v-model="text"
		class="atwho-wrapper"
		name-key="label"
		:members="autoCompleteMentionCandidates"
		:filter-match="atFilter"
		:tab-select="true"
		:allow-spaces="false"
		@at="handleAtEvent">
		<template #item="scope">
			<Avatar v-if="isMentionToAll(scope.item.id)"
				:size="44"
				:icon-class="'icon-group-forced-white'"
				:disable-tooltip="true"
				:disable-menu="true"
				:is-no-user="true" />

				{{ getFirstLetterOfGuestName(scope.item.label) }}

			<Avatar v-else
				:key="scope.item.source + '#' + scope.item.id"
				:size="44"
				:user="atRemoveQuotesFromUserIdForAvatars(scope.item.id)"
				:show-user-status-compact="false"
				:display-name="scope.item.label"
				:disable-tooltip="true"
				:disable-menu="true" />

				{{ scope.item.label }}

					{{ getStatusMessage(scope.item) }}

		</template>
		<template #embeddedItem="scope">

				<Mention
					v-if="scope.current.id"
					:id="scope.current.id"
					:type="getTypeForMentionComponent(scope.current)"
					:name="scope.current.label"
					:data-mention-id="scope.current.id" />

		</template>

	</At>
</template>

<template>
	<At ref="at"
		v-model="text"
		class="atwho-wrapper"
		name-key="label"
		:members="autoCompleteMentionCandidates"
		:filter-match="atFilter"
		:tab-select="true"
		:allow-spaces="false"
		@at="handleAtEvent">
		<template #item="scope">
			<Avatar v-if="isMentionToAll(scope.item.id)"
				:size="44"
				:icon-class="'icon-group-forced-white'"
				:disable-tooltip="true"
				:disable-menu="true"
				:is-no-user="true" />

				{{ getFirstLetterOfGuestName(scope.item.label) }}

			<Avatar v-else
				:size="44"
				:user="atRemoveQuotesFromUserIdForAvatars(scope.item.id)"
				:display-name="scope.item.label"
				:disable-tooltip="true"
				:disable-menu="true" />

				{{ scope.item.label }}

					{{ getStatusMessage(scope.item) }}

		</template>
		<template #embeddedItem="scope">

				<Mention
					v-if="scope.current.id"
					:id="scope.current.id"
					:type="getTypeForMentionComponent(scope.current)"
					:name="scope.current.label"
					:data-mention-id="scope.current.id" />

		</template>

	</At>
</template>


Change DSL on click

Change DSL on click

<template>
  <v-card>
    <v-overlay v-if="modelInstances.length" :absolute="true" :opacity="0.85">
      <v-icon x-large>mdi-folder-lock</v-icon>

        Locked because there are model instances

    </v-overlay>

    <v-card-title>
      Edit project {{ gdslProject.name }}
    </v-card-title>

    <v-divider class="ma-0"></v-divider>

    <v-card-text>
      <v-stepper>
        <v-stepper-header>
          <v-stepper-step :complete="!isConceptEmpty" step="1">Concept
Editor</v-stepper-step>
          <v-divider></v-divider>
          <v-stepper-step :complete="!isShapeEmpty" step="2">Shape</v-stepper-step>
          <v-divider></v-divider>
          <v-stepper-step :complete="!isStyleEmpty" step="3">Style</v-stepper-step>
          <v-divider></v-divider>
          <v-stepper-step :complete="!isDiagramEmpty" step="4">Diagram</v-stepper-step>
        </v-stepper-header>
      </v-stepper>

      <v-dialog v-model="editProjectDialog" eager fullscreen hide-overlay transition="dialog-bottom-transition">
        <template v-slot:activator="{ on, attrs }">

            <v-btn v-on:click="onOpenEditorDialog" class="mt-4" color="primary" depressed v-bind="attrs"
                   v-on="on">
              Edit project
            </v-btn>

        </template>

        <v-card>
          <v-toolbar dark color="primary" class="rounded-0">
            <v-btn icon dark @click="closeEditorDialog">
              <v-icon>mdi-close</v-icon>
            </v-btn>
            <v-toolbar-title>Edit project</v-toolbar-title>
            <v-spacer></v-spacer>

            <v-toolbar-items>
              <v-stepper v-model="currentStep" class="elevation-0 rounded-0">
                <v-stepper-header>
                  <v-stepper-step class="stepper-step-hover" @click="setCurrentStep(1)" :complete="isConceptStepCompleted" step="1">
                    {{ step1 }}
                  </v-stepper-step>
                  <v-divider></v-divider>
                  <v-stepper-step class="stepper-step-hover" @click="setCurrentStep(2)" :complete="isShapeStepCompleted" step="2">
                    {{ step2 }}
                  </v-stepper-step>
                  <v-divider></v-divider>
                  <v-stepper-step class="stepper-step-hover" @click="setCurrentStep(3)" :complete="isStyleStepCompleted" step="3">
                    {{ step3 }}
                  </v-stepper-step>
                  <v-divider></v-divider>
                  <v-stepper-step class="stepper-step-hover" @click="setCurrentStep(4)" :complete="isDiagramStepCompleted" step="4">
                    {{ step4 }}
                  </v-stepper-step>
                </v-stepper-header>
              </v-stepper>

              <v-btn :disabled="!allowContinue" text v-on:click="setCurrentStep(++currentStep)">Continue</v-btn>
            </v-toolbar-items>
          </v-toolbar>

          <GraphEditor v-if="isConceptActive" ref="GraphComponent"></GraphEditor>

          <v-container fluid class="py-0">
            <v-row v-show="!isConceptActive">
              <v-col md="3">

              </v-col>

              <v-col md="3" class="code-editor" ref="shapeEditorElement" :data-meta-model-id="gdslProject.id"
                     :data-dsl-type="step2" @click="setCurrentStep(2)" v-bind:class="{pointer: !isShapeActive}">
                <v-card :disabled="!isShapeActive">
                  <v-card-title>
                    {{ step2 }}
                    <v-spacer></v-spacer>

                      <v-chip class="js-save-successful" style="display: none" color="green" text-color="white">
                        Saving succeed
                      </v-chip>
                      <v-chip class="js-save-failed" style="display: none" color="red" text-color="white">
                        Saving failed
                      </v-chip>
                      <v-btn :disabled="!isShapeActive" class="js-save" icon color="primary">
                        <v-icon>mdi-content-save</v-icon>
                      </v-btn>

                  </v-card-title>

                  <v-card-text>

                  </v-card-text>
                </v-card>
              </v-col>

              <v-col md="3" class="code-editor" ref="styleEditorElement" :data-meta-model-id="gdslProject.id"
                     :data-dsl-type="step3" @click="setCurrentStep(3)" v-bind:class="{pointer: !isStyleActive}">
                <v-card :disabled="!isStyleActive">
                  <v-card-title>
                    {{ step3 }}
                    <v-spacer></v-spacer>

                      <v-chip class="js-save-successful" style="display: none" color="green" text-color="white">
                        Saving succeed
                      </v-chip>
                      <v-chip class="js-save-failed" style="display: none" color="red" text-color="white">
                        Saving failed
                      </v-chip>
                      <v-btn :disabled="!isStyleActive" class="js-save" icon color="primary">
                        <v-icon>mdi-content-save</v-icon>
                      </v-btn>

                  </v-card-title>

                  <v-card-text>

                  </v-card-text>
                </v-card>
              </v-col>

              <v-col md="3" class="code-editor" ref="diagramEditorElement" :data-meta-model-id="gdslProject.id"
                     :data-dsl-type="step4" @click="setCurrentStep(4)" v-bind:class="{pointer: !isDiagramActive}">
                <v-card :disabled="!isDiagramActive">
                  <v-card-title>
                    {{ step4 }}
                    <v-spacer></v-spacer>

                      <v-chip class="js-save-successful" style="display: none" color="green" text-color="white">
                        Saving succeed
                      </v-chip>
                      <v-chip class="js-save-failed" style="display: none" color="red" text-color="white">
                        Saving failed
                      </v-chip>
                      <v-btn :disabled="!isDiagramActive" class="js-save" icon color="primary">
                        <v-icon>mdi-content-save</v-icon>
                      </v-btn>

                  </v-card-title>

                  <v-card-text>

                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-dialog>
    </v-card-text>

    <v-divider class="ma-0"></v-divider>

    <v-card-actions>
      <v-menu offset-y>
        <template v-slot:activator="{ on }">
          <v-btn color="secondary" outlined v-on="on">
            Validator
            <v-icon class="ml-1">mdi-chevron-down</v-icon>
          </v-btn>
        </template>
        <v-list>
          <v-list-item v-on:click="validatorGenerate" id="validatorGenerate">
            <v-list-item-title>Generate / Update Validator</v-list-item-title>
          </v-list-item>
          <v-list-item v-on:click="validatorShow" id="validatorShow">
            <v-list-item-title>Show Validation Rules</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-card-actions>
  </v-card>
</template>

<template>
  <v-card>
    <v-overlay v-if="modelInstances.length" :absolute="true" :opacity="0.85">
      <v-icon x-large>mdi-folder-lock</v-icon>

        Locked because there are model instances

    </v-overlay>

    <v-card-title>
      Edit project {{ gdslProject.name }}
    </v-card-title>

    <v-divider class="ma-0"></v-divider>

    <v-card-text>
      <v-stepper>
        <v-stepper-header>
          <v-stepper-step :complete="!isConceptEmpty" step="1">Concept
Editor</v-stepper-step>
          <v-divider></v-divider>
          <v-stepper-step :complete="!isShapeEmpty" step="2">Shape</v-stepper-step>
          <v-divider></v-divider>
          <v-stepper-step :complete="!isStyleEmpty" step="3">Style</v-stepper-step>
          <v-divider></v-divider>
          <v-stepper-step :complete="!isDiagramEmpty" step="4">Diagram</v-stepper-step>
        </v-stepper-header>
      </v-stepper>

      <v-dialog v-model="editProjectDialog" eager fullscreen hide-overlay transition="dialog-bottom-transition">
        <template v-slot:activator="{ on, attrs }">

            <v-btn v-on:click="onOpenEditorDialog" class="mt-4" color="primary" depressed v-bind="attrs"
                   v-on="on">
              Edit project
            </v-btn>

        </template>

        <v-card>
          <v-toolbar dark color="primary" class="rounded-0">
            <v-btn icon dark @click="closeEditorDialog">
              <v-icon>mdi-close</v-icon>
            </v-btn>
            <v-toolbar-title>Edit project</v-toolbar-title>
            <v-spacer></v-spacer>

            <v-toolbar-items>
              <v-stepper v-model="currentStep" class="elevation-0 rounded-0">
                <v-stepper-header>
                  <v-stepper-step class="stepper-step-hover" @click="setCurrentStep(1)" :complete="isConceptStepCompleted" step="1">
                    {{ step1 }}
                  </v-stepper-step>
                  <v-divider></v-divider>
                  <v-stepper-step class="stepper-step-hover" @click="setCurrentStep(2)" :complete="isShapeStepCompleted" step="2">
                    {{ step2 }}
                  </v-stepper-step>
                  <v-divider></v-divider>
                  <v-stepper-step class="stepper-step-hover" @click="setCurrentStep(3)" :complete="isStyleStepCompleted" step="3">
                    {{ step3 }}
                  </v-stepper-step>
                  <v-divider></v-divider>
                  <v-stepper-step class="stepper-step-hover" @click="setCurrentStep(4)" :complete="isDiagramStepCompleted" step="4">
                    {{ step4 }}
                  </v-stepper-step>
                </v-stepper-header>
              </v-stepper>

              <v-btn :disabled="!allowContinue" text v-on:click="setCurrentStep(++currentStep)">Continue</v-btn>
            </v-toolbar-items>
          </v-toolbar>

          <GraphEditor v-if="isConceptActive" ref="GraphComponent"></GraphEditor>

          <v-container fluid class="py-0">
            <v-row v-show="!isConceptActive">
              <v-col md="3">

              </v-col>

              <v-col md="3" class="code-editor" ref="shapeEditorElement" :data-meta-model-id="gdslProject.id"
                     :data-dsl-type="step2">
                <v-card :disabled="!isShapeActive">
                  <v-card-title>
                    {{ step2 }}
                    <v-spacer></v-spacer>

                      <v-chip class="js-save-successful" style="display: none" color="green" text-color="white">
                        Saving succeed
                      </v-chip>
                      <v-chip class="js-save-failed" style="display: none" color="red" text-color="white">
                        Saving failed
                      </v-chip>
                      <v-btn :disabled="!isShapeActive" class="js-save" icon color="primary">
                        <v-icon>mdi-content-save</v-icon>
                      </v-btn>

                  </v-card-title>

                  <v-card-text>

                  </v-card-text>
                </v-card>
              </v-col>

              <v-col md="3" class="code-editor" ref="styleEditorElement" :data-meta-model-id="gdslProject.id"
                     :data-dsl-type="step3">
                <v-card :disabled="!isStyleActive">
                  <v-card-title>
                    {{ step3 }}
                    <v-spacer></v-spacer>

                      <v-chip class="js-save-successful" style="display: none" color="green" text-color="white">
                        Saving succeed
                      </v-chip>
                      <v-chip class="js-save-failed" style="display: none" color="red" text-color="white">
                        Saving failed
                      </v-chip>
                      <v-btn :disabled="!isStyleActive" class="js-save" icon color="primary">
                        <v-icon>mdi-content-save</v-icon>
                      </v-btn>

                  </v-card-title>

                  <v-card-text>

                  </v-card-text>
                </v-card>
              </v-col>

              <v-col md="3" class="code-editor" ref="diagramEditorElement" :data-meta-model-id="gdslProject.id"
                     :data-dsl-type="step4">
                <v-card :disabled="!isDiagramActive">
                  <v-card-title>
                    {{ step4 }}
                    <v-spacer></v-spacer>

                      <v-chip class="js-save-successful" style="display: none" color="green" text-color="white">
                        Saving succeed
                      </v-chip>
                      <v-chip class="js-save-failed" style="display: none" color="red" text-color="white">
                        Saving failed
                      </v-chip>
                      <v-btn :disabled="!isDiagramActive" class="js-save" icon color="primary">
                        <v-icon>mdi-content-save</v-icon>
                      </v-btn>

                  </v-card-title>

                  <v-card-text>

                  </v-card-text>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-dialog>
    </v-card-text>

    <v-divider class="ma-0"></v-divider>

    <v-card-actions>
      <v-menu offset-y>
        <template v-slot:activator="{ on }">
          <v-btn color="secondary" outlined v-on="on">
            Validator
            <v-icon class="ml-1">mdi-chevron-down</v-icon>
          </v-btn>
        </template>
        <v-list>
          <v-list-item v-on:click="validatorGenerate" id="validatorGenerate">
            <v-list-item-title>Generate / Update Validator</v-list-item-title>
          </v-list-item>
          <v-list-item v-on:click="validatorShow" id="validatorShow">
            <v-list-item-title>Show Validation Rules</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-card-actions>
  </v-card>
</template>


chore(Snackbar): update message

chore(Snackbar): update message

<template>
  <v-fade-transition appear>
    <core-documentation v-if="!examples" />
    <div
      v-else
      id="app"
    >
      <router-view />
    </div>
  </v-fade-transition>
</template>

<script>
  import Meta from '@/mixins/meta'

  // Utilities
  import asyncData from '@/util/asyncData'

  import {
    mapMutations,
    mapState
  } from 'vuex'

  export default {
    mixins: [asyncData, Meta],

    asyncData ({ store }) {
      if (store.state.store.hasFetchedProducts &&
        store.state.store.products.length
      ) return Promise.resolve()

      return store.dispatch('store/getProducts')
    },

    computed: {
      ...mapState({
        isFullscreen: state => state.isFullscreen
      }),
      examples () {
        return !!this.$route.params.example
      }
    },

    mounted () {
      this.getReleases()

      this.snackbar({
        color: 'default',
        close: true,
        id: 'cognito-module-release',
        text: 'Go to Docs',
        msg: '🎉 **NEW**: Vuetify Vuex Cognito Module',
        href: 'https://cognito.vuetifyjs.com',
        timeout: 0
      })
    },

    methods: {
      ...mapMutations('app', {
        snackbar: 'SNACKBAR'
      }),
      getReleases () {
        this.$http.get('/releases/releases.json').then(({ data }) => {
          this.$store.commit('app/RELEASES', data)
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>

<style lang="stylus">
  @import '~vuetify/src/stylus/settings/_variables.styl'

  main
    section
      &:before
        content ''
        display block
        position relative
        width 0
        height 80px
        margin-top -80px

  .container.page
    max-width: 1185px !important
    padding-top: 75px
    padding-bottom: 0
    transition: .2s $transition.fast-out-slow-in

    section
      margin-bottom: 48px
</style>

<template>
  <v-fade-transition appear>
    <core-documentation v-if="!examples" />
    <div
      v-else
      id="app"
    >
      <router-view />
    </div>
  </v-fade-transition>
</template>

<script>
  import Meta from '@/mixins/meta'

  // Utilities
  import asyncData from '@/util/asyncData'

  import {
    mapMutations,
    mapState
  } from 'vuex'

  export default {
    mixins: [asyncData, Meta],

    asyncData ({ store }) {
      if (store.state.store.hasFetchedProducts &&
        store.state.store.products.length
      ) return Promise.resolve()

      return store.dispatch('store/getProducts')
    },

    computed: {
      ...mapState({
        isFullscreen: state => state.isFullscreen
      }),
      examples () {
        return !!this.$route.params.example
      }
    },

    mounted () {
      this.getReleases()

      // this.snackbar({
      //   color: 'store',
      //   close: true,
      //   id: 'cyber-monday-sale',
      //   text: 'Shop now',
      //   msg: 'Happy Cyber Monday',
      //   to: '/store/',
      //   timeout: 0
      // })
    },

    methods: {
      ...mapMutations('app', {
        snackbar: 'SNACKBAR'
      }),
      getReleases () {
        this.$http.get('/releases/releases.json').then(({ data }) => {
          this.$store.commit('app/RELEASES', data)
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>

<style lang="stylus">
  @import '~vuetify/src/stylus/settings/_variables.styl'

  main
    section
      &:before
        content ''
        display block
        position relative
        width 0
        height 80px
        margin-top -80px

  .container.page
    max-width: 1185px !important
    padding-top: 75px
    padding-bottom: 0
    transition: .2s $transition.fast-out-slow-in

    section
      margin-bottom: 48px
</style>


Add a somewhat more useful subheading to the teams dues sequence page

<template>

      <dues-required-info :user="user" @next="next">
      </dues-required-info>

      <safety-agreement :user-uid="user.uid" @next="next"></safety-agreement>

      <dues-additional-info :user="user" @next="next"></dues-additional-info>

      <demographics :user="user" @next="next"></demographics>

Join a Team

Team membership in MyRoboJackets helps us with membership statistics, etc.

        <team-card v-for="team in teams" v-if="team.self_serviceable" :team="team" :user="user" :user-teams="userTeams" :key="team.id"></team-card>

      <payment-instructions>

          To complete your annual registration, please submit the SGA-mandated dues payments. RoboJackets dues are $100 for the year or $55 for the semester.

      </payment-instructions>

</template>

<template>

      <dues-required-info :user="user" @next="next">
      </dues-required-info>

      <safety-agreement :user-uid="user.uid" @next="next"></safety-agreement>

      <dues-additional-info :user="user" @next="next"></dues-additional-info>

      <demographics :user="user" @next="next"></demographics>

Join a Team

insert useful message here

        <team-card v-for="team in teams" v-if="team.self_serviceable" :team="team" :user="user" :user-teams="userTeams" :key="team.id"></team-card>

      <payment-instructions>

          To complete your annual registration, please submit the SGA-mandated dues payments. RoboJackets dues are $100 for the year or $55 for the semester.

      </payment-instructions>

</template>


Fixed controls switch in top asso component

<template>
    <v-layout row wrap justify-space-around>
        <v-flex xs3 wrap v-if="showControls.length>0 && view.controlPosition !== 'right'" class="associations-control-container">

-1">

MAF

                <v-checkbox v-model="filters.maf" primary label="<1% ( % of SNPs)" value="1" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary label="1-5% ( % of SNPs)" value="1-5" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary label="5-10% ( % of SNPs)" value="5-10" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary label=">10% ( % of SNPs)" value="10" class="mt-0"></v-checkbox>

-1">

Chromosomes

                <v-checkbox v-model="filters.chr" primary label="1 ( % of SNPs)" value="1" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary label="2 ( % of SNPs)" value="2" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary label="3 ( % of SNPs)" value="3" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary label="4 ( % of SNPs)" value="4" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary label="5 ( % of SNPs)" value="5" class="mt-0"></v-checkbox>

-1">

Annotation

                <v-checkbox v-model="filters.annotation" primary label="Non-synonymous coding ( % of SNPs)" value="ns" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary label="Synonymous coding ( % of SNPs)" value="s" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary label="Intron ( % of SNPs)" value="in" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary label="Intergenic ( % of SNPs)" value="i" class="mt-0 mb-0"></v-checkbox>

-1">

Type

                <v-checkbox v-model="filters.type" primary label="Genic ( % of SNPs)" value="genic" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.type" primary label="Non-genic ( % of SNPs)" value="non-genic" class="mt-0 mb-0"></v-checkbox>

        </v-flex>
        <v-flex xs9 wrap fill-height class="association-table-container">
            <v-data-table
                    v-bind:headers="headers"
                    v-bind:items="associations"
                    v-bind:pagination.sync="pagination"
                    hide-actions
                    :loading="loading"
                    class="elevation-1 mt-2 asso-table"
            >
                <template slot="headers" scope="props">

                      {{ props.item.text | capitalize }}

                </template>
                <template slot="items" scope="props">

{{ props.item.snp.chr | capitalize }}:{{ props.item.snp.position }}

Missing SNP info

                        {{ props.item.score | round }}

                            <router-link :to="{name: 'phenotypeDetail', params: { id: props.item.study.phenotype.id }}" v-bind:class="{'blue--text': props.item.overFDR}">{{ props.item.study.phenotype.name }}</router-link>

                            <router-link v-if="'snp' in props.item" :to="{name: 'geneDetail', params: { geneId: props.item.snp.geneName }}" v-bind:class="{'blue--text': props.item.overFDR}">{{ props.item.snp.geneName }}</router-link>
Missing SNP info

                        {{ props.item.maf | round }}

                            <router-link :to="{name: 'studyDetail', params: { id: props.item.study.id }}" v-bind:class="{'blue--text': props.item.overFDR}">{{ props.item.study.name }}</router-link>
                </template>
            </v-data-table>

                <v-pagination :length.number="pageCount" v-model="currentPage" />

        </v-flex>
        <v-flex xs3>
            <v-flex xs12 v-show="showControls.length>0 && view.controlPosition === 'right' && !showSwitch" class="text-xs-right">

<v-switch v-model="showSwitch" primary label="Controls" class="mb-0 switch"></v-switch>

            </v-flex>
            <v-flex xs12 wrap v-if="showControls.length>0 && view.controlPosition === 'right' && showSwitch" class="associations-control-container">

<v-switch v-model="showSwitch" primary label="Controls" class="mb-0 " ></v-switch>

-1">

MAF

                    <v-checkbox v-model="filters.maf" primary label="<1% ( % of SNPs)" value="1" class="mb-0"></v-checkbox>
                    <v-checkbox v-model="filters.maf" primary label="1-5% ( % of SNPs)" value="1-5" class="mt-0 mb-0"></v-checkbox>
                    <v-checkbox v-model="filters.maf" primary label="5-10% ( % of SNPs)" value="5-10" class="mt-0 mb-0"></v-checkbox>
                    <v-checkbox v-model="filters.maf" primary label=">10% ( % of SNPs)" value="10" class="mt-0"></v-checkbox>

-1">

Chromosomes

                    <v-checkbox v-model="filters.chr" primary label="1 ( % of SNPs)" value="1" class="mb-0"></v-checkbox>
                    <v-checkbox v-model="filters.chr" primary label="2 ( % of SNPs)" value="2" class="mt-0 mb-0"></v-checkbox>
                    <v-checkbox v-model="filters.chr" primary label="3 ( % of SNPs)" value="3" class="mt-0 mb-0"></v-checkbox>
                    <v-checkbox v-model="filters.chr" primary label="4 ( % of SNPs)" value="4" class="mt-0 mb-0"></v-checkbox>
                    <v-checkbox v-model="filters.chr" primary label="5 ( % of SNPs)" value="5" class="mt-0"></v-checkbox>

-1">

Annotation

                    <v-checkbox v-model="filters.annotation" primary label="Non-synonymous coding ( % of SNPs)" value="ns" class="mb-0"></v-checkbox>
                    <v-checkbox v-model="filters.annotation" primary label="Synonymous coding ( % of SNPs)" value="s" class="mt-0 mb-0"></v-checkbox>
                    <v-checkbox v-model="filters.annotation" primary label="Intron ( % of SNPs)" value="in" class="mt-0 mb-0"></v-checkbox>
                    <v-checkbox v-model="filters.annotation" primary label="Intergenic ( % of SNPs)" value="i" class="mt-0 mb-0"></v-checkbox>

-1">

Type

                    <v-checkbox v-model="filters.type" primary label="Genic ( % of SNPs)" value="genic" class="mb-0"></v-checkbox>
                    <v-checkbox v-model="filters.type" primary label="Non-genic ( % of SNPs)" value="non-genic" class="mt-0 mb-0"></v-checkbox>

            </v-flex>
        </v-flex>

    </v-layout>
</template>

<template>
    <v-layout row wrap justify-space-around>
        <v-flex xs3 wrap v-if="showControls.length>0 && view.controlPosition !== 'right'" class="associations-control-container">

-1">

MAF

                <v-checkbox v-model="filters.maf" primary label="<1% ( % of SNPs)" value="1" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary label="1-5% ( % of SNPs)" value="1-5" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary label="5-10% ( % of SNPs)" value="5-10" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary label=">10% ( % of SNPs)" value="10" class="mt-0"></v-checkbox>

-1">

Chromosomes

                <v-checkbox v-model="filters.chr" primary label="1 ( % of SNPs)" value="1" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary label="2 ( % of SNPs)" value="2" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary label="3 ( % of SNPs)" value="3" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary label="4 ( % of SNPs)" value="4" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary label="5 ( % of SNPs)" value="5" class="mt-0"></v-checkbox>

-1">

Annotation

                <v-checkbox v-model="filters.annotation" primary label="Non-synonymous coding ( % of SNPs)" value="ns" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary label="Synonymous coding ( % of SNPs)" value="s" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary label="Intron ( % of SNPs)" value="in" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary label="Intergenic ( % of SNPs)" value="i" class="mt-0 mb-0"></v-checkbox>

-1">

Type

                <v-checkbox v-model="filters.type" primary label="Genic ( % of SNPs)" value="genic" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.type" primary label="Non-genic ( % of SNPs)" value="non-genic" class="mt-0 mb-0"></v-checkbox>

        </v-flex>
        <v-flex xs9 wrap fill-height class="association-table-container">
            <v-data-table
                    v-bind:headers="headers"
                    v-bind:items="associations"
                    v-bind:pagination.sync="pagination"
                    hide-actions
                    :loading="loading"
                    class="elevation-1 mt-2 asso-table"
            >
                <template slot="headers" scope="props">

                      {{ props.item.text | capitalize }}

                </template>
                <template slot="items" scope="props">

{{ props.item.snp.chr | capitalize }}:{{ props.item.snp.position }}

Missing SNP info

                        {{ props.item.score | round }}

                            <router-link :to="{name: 'phenotypeDetail', params: { id: props.item.study.phenotype.id }}" v-bind:class="{'blue--text': props.item.overFDR}">{{ props.item.study.phenotype.name }}</router-link>

                            <router-link v-if="'snp' in props.item" :to="{name: 'geneDetail', params: { geneId: props.item.snp.geneName }}" v-bind:class="{'blue--text': props.item.overFDR}">{{ props.item.snp.geneName }}</router-link>
Missing SNP info

                        {{ props.item.maf | round }}

                            <router-link :to="{name: 'studyDetail', params: { id: props.item.study.id }}" v-bind:class="{'blue--text': props.item.overFDR}">{{ props.item.study.name }}</router-link>
                </template>
            </v-data-table>

                <v-pagination :length.number="pageCount" v-model="currentPage" />

        </v-flex>
        <v-flex xs1 wrap v-show="showControls.length>0 && view.controlPosition === 'right' && !showSwitch" class="text-xs-right">
            <v-switch v-model="showSwitch" primary label="Controls" class="mb-0 switch"></v-switch>
        </v-flex>
        <v-flex xs3 wrap v-if="showControls.length>0 && view.controlPosition === 'right' && showSwitch" class="associations-control-container">
            <v-switch v-model="showSwitch" primary label="Controls" class="text-xs-right mb-0 " ></v-switch>

-1">

MAF

                <v-checkbox v-model="filters.maf" primary label="<1% ( % of SNPs)" value="1" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary label="1-5% ( % of SNPs)" value="1-5" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary label="5-10% ( % of SNPs)" value="5-10" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.maf" primary label=">10% ( % of SNPs)" value="10" class="mt-0"></v-checkbox>

-1">

Chromosomes

                <v-checkbox v-model="filters.chr" primary label="1 ( % of SNPs)" value="1" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary label="2 ( % of SNPs)" value="2" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary label="3 ( % of SNPs)" value="3" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary label="4 ( % of SNPs)" value="4" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.chr" primary label="5 ( % of SNPs)" value="5" class="mt-0"></v-checkbox>

-1">

Annotation

                <v-checkbox v-model="filters.annotation" primary label="Non-synonymous coding ( % of SNPs)" value="ns" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary label="Synonymous coding ( % of SNPs)" value="s" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary label="Intron ( % of SNPs)" value="in" class="mt-0 mb-0"></v-checkbox>
                <v-checkbox v-model="filters.annotation" primary label="Intergenic ( % of SNPs)" value="i" class="mt-0 mb-0"></v-checkbox>

-1">

Type

                <v-checkbox v-model="filters.type" primary label="Genic ( % of SNPs)" value="genic" class="mb-0"></v-checkbox>
                <v-checkbox v-model="filters.type" primary label="Non-genic ( % of SNPs)" value="non-genic" class="mt-0 mb-0"></v-checkbox>

        </v-flex>
    </v-layout>
</template>


Android でマウス系操作が正しく動作しないので無効化した

Android でマウス系操作が正しく動作しないので無効化した

<template>

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

                <transition name="fade">

                            <v-btn v-if="duration > 0" class="add-shadow mx-4" icon dark v-on:click="rewindTime(30)">
                                <v-icon dark>mdi-rewind-30</v-icon>
                            </v-btn>
                            <v-btn v-if="duration > 0" class="add-shadow mx-4" icon dark v-on:click="rewindTime(10)">
                                <v-icon dark>mdi-rewind-10</v-icon>
                            </v-btn>
                            <v-btn class="play-button add-shadow mx-4" icon dark v-on:click="togglePlay">
                                <v-icon v-if="isPause === true" dark>mdi-play</v-icon>
                                <v-icon v-else dark>mdi-pause</v-icon>
                            </v-btn>
                            <v-btn v-if="duration > 0" class="add-shadow mx-4" icon dark v-on:click="forwardTime(10)">
                                <v-icon dark>mdi-fast-forward-10</v-icon>
                            </v-btn>
                            <v-btn v-if="duration > 0" class="add-shadow mx-4" icon dark v-on:click="forwardTime(30)">
                                <v-icon dark>mdi-fast-forward-30</v-icon>
                            </v-btn>

 0"
                            class="d-flex flex-column align-center left-buttons"
                            v-on:click="stopPropagation"
                        >
                            <v-btn class="add-shadow" icon dark v-on:click="speedUp">
                                <v-icon dark>mdi-plus-circle</v-icon>
                            </v-btn>
                            <v-btn class="add-shadow my-2" text dark v-on:click="resetSpeed">
                                x{{ playbackRate.toFixed(1) }}
                            </v-btn>
                            <v-btn class="add-shadow" icon dark v-on:click="speedDown">
                                <v-icon dark>mdi-minus-circle</v-icon>
                            </v-btn>

                                <v-slider
                                    class="slider"
                                    v-model="currentTime"
                                    :max="duration"
                                    color="white"
                                    track-color="grey"
                                    :disabled="duration === 0"
                                    v-on:start="startChangeCurrentPosition"
                                    v-on:change="endChangeCurrentPosition"
                                    v-on:input="updateCurrentPosition"
                                ></v-slider>

                                    <v-btn class="play" icon dark v-on:click="togglePlay">
                                        <v-icon v-if="isPause === true">mdi-play</v-icon>
                                        <v-icon v-else>mdi-pause</v-icon>
                                    </v-btn>

                                        <v-btn icon dark v-on:click="switchMute">
                                            <v-icon v-if="volume > 0.4">mdi-volume-high</v-icon>
                                            <v-icon v-else-if="volume > 0.0">mdi-volume-medium</v-icon>
                                            <v-icon v-else>mdi-volume-off</v-icon>
                                        </v-btn>
                                        <v-slider
                                            class="slider"
                                            v-model="volume"
                                            min="0.0"
                                            max="1.0"
                                            step="0.1"
                                            color="white"
                                            track-color="grey"
                                            v-on:input="changeVolume"
                                            v-on:change="updateLastSeekTime"
                                        ></v-slider>

                                        {{ currentTimeStr }}
                                        /
                                        {{ durationStr }}

                                    <v-spacer></v-spacer>
                                    <v-btn v-if="isEnabledSubtitles === true" icon dark>
                                        <v-icon>mdi-subtitles</v-icon>
                                    </v-btn>
                                    <v-btn v-if="this.isEnabledPip === true" icon dark v-on:click="switchPip">
                                        <v-icon>mdi-picture-in-picture-bottom-right</v-icon>
                                    </v-btn>
                                    <v-btn icon dark v-on:click="switchFullScreen">
                                        <v-icon v-if="isFullscreen === false">mdi-fullscreen</v-icon>
                                        <v-icon v-else>mdi-fullscreen-exit</v-icon>
                                    </v-btn>

                </transition>

            <Video
                v-if="videoSrc !== null"
                ref="video"
                v-bind:videoSrc.sync="videoSrc"
                v-on:timeupdate="onTimeupdate"
                v-on:waiting="onWaiting"
                v-on:loadeddata="onLoadeddata"
                v-on:canplay="onCanplay"
                v-on:ended="onEnded"
                v-on:play="onPlay"
                v-on:pause="onPause"
                v-on:ratechange="onChangePlaybackRate"
                v-on:volumechange="onVolumechange"
            ></Video>

</template>