<commit_before><style lang="sass">
  @import '../../styleguide/toolbar';
  @import '../../styleguide/layers';

  .kiln-wrapper.view-mode {
    @include toolbar-wrapper();

    pointer-events: none;

    & > * {
      pointer-events: all;
    }

    .view-menu-button {
      margin: 10px;
    }

    .kiln-progress {
      height: 3px;
      left: 0;
      position: fixed;
      top: 0;
      width: 100%;
    }

    .view-edit-button,
    .view-new-button {
      margin: 10px 18px;
    }

    .ui-snackbar-container {
      @include confirm-layer();

      bottom: 0;
      position: fixed;
    }
  }
</style>

<template>
  <div class="kiln-wrapper view-mode">
    <alert-container></alert-container>
    <div class="kiln-progress">
      <progress-bar></progress-bar>
    </div>
    <ui-fab size="normal" color="primary" icon="menu" tooltip="Clay Menu" tooltipPosition="right middle" class="view-menu-button" @click="openNav"></ui-fab>
    <ui-fab size="small" color="default" icon="mode_edit" tooltip="Edit Page" tooltipPosition="right middle" class="view-edit-button" @click="startEditing"></ui-fab>
    <ui-fab size="small" color="default" icon="add" tooltip="New Page" tooltipPosition="right middle" class="view-new-button" @click="openNewPage"></ui-fab>
    <nav-background></nav-background>
    <nav-menu></nav-menu>
    <nav-content></nav-content>
    <simple-modal></simple-modal>
    <confirm></confirm>
    <ui-snackbar-container ref="snacks"></ui-snackbar-container>
  </div>
</template>

<script>
  import _ from 'lodash';
  import toggleEdit from '../utils/toggle-edit';
  import { getItem } from '../utils/local';
  import navBackground from '../nav/nav-background.vue';
  import navMenu from '../nav/nav-menu.vue';
  import navContent from '../nav/nav-content.vue';
  import UiFab from 'keen/UiFab';
  import simpleModal from './simple-modal.vue';
  import confirm from './confirm.vue';
  import progressBar from './progress.vue';
  import UiSnackbarContainer from 'keen/UiSnackbarContainer';
  import alertContainer from './alert-container.vue';

  export default {
    data() {
      return {};
    },
    computed: {
      snackbar() {
        return _.get(this.$store, 'state.ui.snackbar') && _.toPlainObject(_.get(this.$store, 'state.ui.snackbar'));
      }
    },
    watch: {
      snackbar(val) {
        if (val) {
          this.$refs.snacks.createSnackbar(val);
          this.$store.dispatch('hideSnackbar'); // clear the store
        }
      }
    },
    methods: {
      startEditing() {
        toggleEdit();
      },
      openNav() {
        return getItem('claymenu:activetab').then((savedTab) => {
          const activeNav = savedTab || 'all-pages';

          return this.$store.dispatch('openNav', activeNav);<commit_msg>fix #1027, add status to view mode edit button tooltip (#1029)<commit_after><style lang="sass">
  @import '../../styleguide/toolbar';
  @import '../../styleguide/layers';

  .kiln-wrapper.view-mode {
    @include toolbar-wrapper();

    pointer-events: none;

    & > * {
      pointer-events: all;
    }

    .view-menu-button {
      margin: 10px;
    }

    .kiln-progress {
      height: 3px;
      left: 0;
      position: fixed;
      top: 0;
      width: 100%;
    }

    .view-edit-button,
    .view-new-button {
      margin: 10px 18px;
    }

    .ui-snackbar-container {
      @include confirm-layer();

      bottom: 0;
      position: fixed;
    }
  }
</style>

<template>
  <div class="kiln-wrapper view-mode">
    <alert-container></alert-container>
    <div class="kiln-progress">
      <progress-bar></progress-bar>
    </div>
    <ui-fab size="normal" color="primary" icon="menu" tooltip="Clay Menu" tooltipPosition="right middle" class="view-menu-button" @click="openNav"></ui-fab>
    <ui-fab size="small" color="default" icon="mode_edit" :tooltip="'Edit Page' + status" tooltipPosition="right middle" class="view-edit-button" @click="startEditing"></ui-fab>
    <ui-fab size="small" color="default" icon="add" tooltip="New Page" tooltipPosition="right middle" class="view-new-button" @click="openNewPage"></ui-fab>
    <nav-background></nav-background>
    <nav-menu></nav-menu>
    <nav-content></nav-content>
    <simple-modal></simple-modal>
    <confirm></confirm>
    <ui-snackbar-container ref="snacks"></ui-snackbar-container>
  </div>
</template>

<script>
  import _ from 'lodash';
  import isAfter from 'date-fns/is_after';
  import addSeconds from 'date-fns/add_seconds';
  import toggleEdit from '../utils/toggle-edit';
  import { getItem } from '../utils/local';
  import navBackground from '../nav/nav-background.vue';
  import navMenu from '../nav/nav-menu.vue';
  import navContent from '../nav/nav-content.vue';
  import UiFab from 'keen/UiFab';
  import simpleModal from './simple-modal.vue';
  import confirm from './confirm.vue';
  import progressBar from './progress.vue';
  import UiSnackbarContainer from 'keen/UiSnackbarContainer';
  import alertContainer from './alert-container.vue';

  export default {
    data() {
      return {};
    },
    computed: {
      snackbar() {
        return _.get(this.$store, 'state.ui.snackbar') && _.toPlainObject(_.get(this.$store, 'state.ui.snackbar'));
      },
      isLoading() {
        return _.get(this.$store, 'state.isLoading');
      },
      pageState() {
        return _.get(this.$store, 'state.page.state');
      },
      hasChanges() {
        const pubTime = _.get(this.pageState, 'publishTime'), // latest published timestamp
          upTime = _.get(this.pageState, 'updateTime'); // latest updated timestamp

        if (pubTime && upTime) {
          return isAfter(upTime, addSeconds(pubTime, 30)); // give it 30 seconds of leeway, in case there are slow updates to the server
        } else {
          return false;
        }
      },
      status() {
        if (this.isLoading) {
          return ''; // still loading the page, don't display any status
        } else if (this.pageState.scheduled) {
          return ' (Scheduled)';
        } else if (this.pageState.published && this.hasChanges) {
          return ' (Unpublished Changes)';
        } else if (this.pageState.published) {
          return ' (Published)';
        } else {
          return ' (Draft)';
        }
      }
    },
    watch: {
      snackbar(val) {
        if (val) {
          this.$refs.snacks.createSnackbar(val);
          this.$store.dispatch('hideSnackbar'); // clear the store
        }
      }
    },
    methods: {
      startEditing() {
        toggleEdit();
      },
      openNav() {
        return getItem('claymenu:activetab').then((savedTab) => {
          const activeNav = savedTab || 'all-pages';

          return this.$store.dispatch('openNav', activeNav);
{'fraction_non_alphanumeric': 0.16409036860879905, 'fraction_numerical': 0.005648038049940547, 'mean_word_length': 2.61579795808705, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 69, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5497667', 'n_tokens_mistral': 2184, 'n_tokens_neox': 2123, 'n_words': 435}