@shzlx/ui-default 4.58.2

package/components/navigation/navigation.page.styl

@@ -0,0 +1,211 @@
+.nav--placeholder
+  height: $nav-item-height
+
+.nav
+  position: relative
+  left: 0
+  top: 0
+  width: 100%
+  height: rem($nav-item-height)
+  font-size: rem($font-size-secondary)
+  transition: background .2s
+  transition-timing-function: ease-out-cubic
+  z-index: 500
+  background: rgba(#FFF, 0.98)
+
+  .nav__item
+    color: $text-1-color
+    &.nav--active
+      border-color: $nav-item-active-color
+      &:before
+        box-shadow: 0 0 30px $nav-item-active-color,
+                    0 0 30px $nav-item-active-color
+    &:hover
+      border-color: $nav-item-hover-color
+      background: #F8F8F8
+      &:before
+        box-shadow: none
+
+  .nav__item--round
+    border-color: $primary-color
+    color: $primary-color
+
+    &:hover
+      background-color: $primary-color
+      color: #FFF
+
+    &:visited, &:active
+      color: $primary-color
+
+  .hasjs &
+    position: fixed
+
+  .nojs &
+    box-shadow: 0 0 10px rgba(#000, 0.4)
+    margin-bottom: rem(-($nav-item-height))
+    overflow: hidden
+
+.nav > .row
+  transition: max-width .5s ease-out-cubic
+
+.nav--shadow
+  position: fixed
+  left: 0
+  top: 0
+  width: 100%
+  height: rem($nav-item-height)
+  z-index: 300
+  transition: box-shadow .2s
+  transition-timing-function: ease-out-cubic
+  box-shadow: 0 0 6px rgba(#000, 0.3)
+
+  .nojs &
+    display: none
+
+.nav__list, .nav__list-item
+  list-style: none
+
+.nav__list--main
+  float: left
+
+.nav__item
+  display: block
+  line-height: rem($nav-item-height - 6)
+  padding: rem(0 20px 3px 20px)
+  border-top: 3px solid transparent
+  color: #000
+  transition: border-color .2s, background .2s, color .2s
+  transition-timing-function: ease-out-cubic
+  position: relative
+
+  &:before
+    content: ''
+    position: absolute
+    left: 0
+    top: -1px
+    width: 100%
+    height: 1px
+
+  &:visited, &:active
+    color: #000
+
+  &.nav--active
+    border-color: $nav-item-active-immersive-color
+    &:before
+      box-shadow: 0 0 30px #FFF,
+                  0 0 30px #FFF,
+                  0 0 30px #FFF
+
+  &:hover
+    text-decoration: none
+    border-color: lighten($nav-item-hover-color, 60%)
+    background: rgba(#FFF, 0.3)
+
+
+.nav__list--secondary
+  float: right
+
+.nav__item--round
+  display: block
+  line-height: rem($nav-item-round-height - 2 * $nav-item-round-border)
+  margin: rem((($nav-item-height - $nav-item-round-height) / 2) 0)
+  padding: rem(0 25px)
+  border-radius: rem($nav-item-round-height / 2)
+  color: #FFF
+  border: $nav-item-round-border solid #FFF
+  transition: background .2s, color .2s, border-color .2s
+  transition-timing-function: ease-out-cubic
+
+  &:visited, &:active
+    color: #FFF
+
+  &:hover
+    text-decoration: none
+    background: #FFF
+    color: #666
+
+.nav__list-item
+  float: left
+
+.nav__list--main .nav__item--round
+  margin-right: rem(5px)
+
+.nav__list--secondary .nav__item--round
+  margin-left: rem(5px)
+
+.nav__logo
+  display: block
+  height: rem($nav-logo-height)
+  margin: rem((($nav-item-height - $nav-logo-height) / 2) 5px)
+
+  &:hover
+    text-decoration: none
+
+  +mobile()
+    display: none
+
+// For Mobile: show a slideout vertical arranged menu
++mobile()
+
+  .nav .columns
+    padding: 0
+
+  .nav--shadow
+    display: none
+
+  .nav.slideout-menu
+    background: #1D1F20
+
+  .nav__list
+    float: none
+
+  .nav__list-item
+    float: none
+
+  .nav__item,
+  .nav__item--round,
+  .nav .dropdown-target.menu .menu__link
+    line-height: rem($nav-item-height - 6)
+    padding: rem(0 20px 3px 20px)
+    border: 0
+    border-left: 3px solid transparent
+    margin: 0
+    border-radius: 0
+    background: none
+
+    .icon
+      line-height: inherit
+
+    &.nav--active
+      border-color: $nav-item-active-color
+
+    &:visited, &:active
+      background: none
+      color: #FFF
+
+    &:hover
+      border-color: $nav-item-hover-color
+      background: rgba(#FFF, 0.10)
+      color: #FFF
+
+  .nav__item
+    &:before
+      left: -2px
+      top: 0
+      height: 100%
+      width: 1px
+
+  .nav .dropdown-target.menu
+    display: block
+    background: none
+    border: 0
+    box-shadow: none
+
+    .menu__link
+      padding-left: rem(35px)
+
+    .menu__seperator
+      display: none
+
+  .nav__list--secondary
+    border-top: 1px solid #666

package/components/notification/index.ts

@@ -0,0 +1,105 @@
+import { MantineProvider } from '@mantine/core';
+import { Notifications, notifications } from '@mantine/notifications';
+import $ from 'jquery';
+import React from 'react';
+import { theme } from 'vj/components/mantine.page';
+import { tpl, zIndexManager } from 'vj/utils/base';
+
+document.body.append(tpl(
+  React.createElement(MantineProvider, { theme },
+    React.createElement(Notifications, { position: 'bottom-left', zIndex: 99999 }),
+  ), true),
+);
+
+interface NotificationOptions {
+  avatar?: string;
+  title?: string;
+  message: string;
+  type?: string;
+  duration?: number;
+  action?: any;
+}
+
+export default class Notification {
+  type: string;
+  action: any;
+  $dom: JQuery<HTMLElement>;
+  $n: JQuery<HTMLElement>;
+  duration: number;
+  autoHideTimer?: NodeJS.Timeout;
+
+  constructor({
+    avatar, title, message, type = '', duration = 3000, action,
+  }: NotificationOptions) {
+    this.type = type;
+    if (avatar) this.type += ' avatar';
+    if (title) this.type += ' title';
+    this.action = action || (() => { });
+    this.$dom = $(tpl`<div class="notification ${this.type} hide"></div>`);
+    if (avatar) $(tpl`<img width="32" height="32" class="avatar" src="${avatar}"></img>`).appendTo(this.$dom);
+    const content = message.split('\n').map((line) => tpl`<p>${line}</p>`).join('');
+    if (title) {
+      $(tpl`<div class="notification-content"><h2>${title}</h2>${{ templateRaw: true, html: content }}</div>`).appendTo(this.$dom);
+    } else $(`<div>${content}</div>`).appendTo(this.$dom);
+    this.$dom.on('click', this.handleClick.bind(this));
+    this.$n = this.$dom
+      .css('z-index', zIndexManager.getNext())
+      .appendTo(document.body);
+    this.$n.width(); // force reflow
+    this.duration = duration;
+  }
+
+  handleClick() {
+    this.action();
+  }
+
+  show(autohide = true) {
+    this.$n.removeClass('hide');
+    if (this.duration && autohide) this.autoHideTimer = setTimeout(this.hide.bind(this), this.duration);
+  }
+
+  hide() {
+    this.$n.addClass('hide');
+    setTimeout(() => this.$n.remove(), 200);
+  }
+
+  static success(message: string, duration?: number) {
+    return notifications.show({
+      title: message,
+      color: '#238551',
+      message: '',
+      icon: React.createElement('i', { className: 'icon icon-check' }),
+      autoClose: duration,
+    });
+  }
+
+  static info(message: string, duration?: number) {
+    return notifications.show({
+      title: message,
+      color: '#2d72d2',
+      message: '',
+      icon: React.createElement('i', { className: 'icon icon-info--circle' }),
+      autoClose: duration,
+    });
+  }
+
+  static warn(message: string, duration?: number) {
+    return notifications.show({
+      title: message,
+      color: '#fbb360',
+      message: '',
+      icon: React.createElement('i', { className: 'icon icon-warning' }),
+      autoClose: duration,
+    });
+  }
+
+  static error(message: string, duration?: number) {
+    return notifications.show({
+      title: message,
+      color: '#cd4246',
+      message: '',
+      icon: React.createElement('i', { className: 'icon icon-close--circle' }),
+      autoClose: duration,
+    });
+  }
+}

package/components/notification/notification.page.js

@@ -0,0 +1,14 @@
+import Notification from 'vj/components/notification/index';
+import { AutoloadPage } from 'vj/misc/Page';
+import { i18n } from 'vj/utils';
+
+export default new AutoloadPage('notificationPage', (pagename) => {
+  const message = i18n(`Hint::Page::${pagename}`);
+  const item = localStorage.getItem(`hint.${message}`);
+  if (message !== `Hint::Page::${pagename}` && !item) {
+    Notification.info(message, message.length * 500);
+    localStorage.setItem(`hint.${message}`, true);
+  }
+  const text = new URL(window.location.href).searchParams.get('notification');
+  if (text) Notification.success(text);
+});

package/components/notification/notification.page.styl

@@ -0,0 +1,84 @@
+.notification
+  position: fixed
+  left: rem(20px)
+  bottom: rem(20px)
+  padding: rem(10px)
+  border-radius: rem(2px)
+  background: rgba(#222, 0.9)
+  color: #FFF
+  font-size: rem($font-size-secondary)
+  transition: transform .2s, opacity .2s
+  transition-timing-function: ease-out-cubic
+  z-index: 1000  // managed
+  line-height: rem(20px)
+  box-shadow: 0 4px 10px rgba(#000, 0.4)
+  min-width: rem(150px)
+
+  img
+    border-radius: 50%
+
+  &.hide
+    opacity: 0
+    transform: translateY(20px) scale(0.9)
+
+  &.avatar
+    display: flex
+    align-items: center
+
+  .avatar
+    display: inline-block
+    vertical-align: top
+    margin-right: rem(10px)
+
+  &:before
+    display: inline-block
+    font-family: $icon-font-name !important
+    margin-right: rem(10px)
+    font-size: rem($font-size-icon)
+    line-height: 1
+    vertical-align: top
+    margin-top: rem((20px - $font-size-icon) / 2)
+
+  &.avatar:before
+    display: none !important
+
+  for key, value in $notification-color
+    &.{key}
+      border-left: 5px solid value
+      &:before
+        color: value
+
+  for key, value in $notification-icon
+    &:not(.avatar).{key}:before
+      content: value
+
++mobile()
+  .notification
+    padding: rem(20px 15px)
+    left: 0
+    width: 100%
+    min-width: auto
+    bottom: 0
+
+.notification-content
+  float: right
+  margin-top: rem(7px)
+  margin-left: rem(10px)
+  margin-right: rem(15px)
+
+  h2
+    color: #FFFFFF
+
+  p
+    margin-top: rem(7px);
+    font-size: larger
+
+@media print {
+  .notification {
+    display: none !important
+  }
+}
+
+.mantine-notifications-close-button:hover {
+  background-color: rgba(0, 0, 0, 0.1) !important;
+}

package/components/nprogress.page.styl

@@ -0,0 +1,50 @@
+$spinner-size = 18px
+$spinner-margin = ($nav-item-height - $spinner-size) / 2
+
+#nprogress
+  pointer-events: none
+
+#nprogress .bar
+  background: $nprogress-color
+  position: fixed
+  top: $nav-item-height
+  z-index: 99
+  left: 0
+  width: 100%
+  height: 2px
+  +mobile()
+    margin-top: rem(10px)
+
+#nprogress .peg
+  display: none
+
+#nprogress .spinner
+  display: block
+  position: fixed
+  z-index: 99999
+  top: rem($spinner-margin)
+  right: rem($spinner-margin)
+
+#nprogress .spinner-icon
+  width: rem($spinner-size)
+  height: rem($spinner-size)
+  box-sizing: border-box
+  border: solid 2px transparent
+  border-top-color: $nprogress-color
+  border-left-color: $nprogress-color
+  border-radius: 50%
+  animation: nprogress-spinner 400ms linear infinite
+
+.nprogress-custom-parent
+  overflow: hidden
+  position: relative
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar
+  position: absolute
+
+@keyframes nprogress-spinner
+  0%
+    transform: rotate(0deg)
+  100%
+    transform: rotate(360deg)

package/components/omnisearch/index.page.tsx

@@ -0,0 +1,124 @@
+import { debounce } from 'lodash';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { STATUS_CODES } from 'vj/constant/record';
+import { AutoloadPage } from 'vj/misc/Page';
+import {
+  api, i18n, request,
+} from 'vj/utils';
+
+export default new AutoloadPage('omnibar', () => {
+  if (document.documentElement.dataset.layout !== 'basic') return;
+  const $search = $(`
+    <div class='omnibar' data-hotkey="esc:click" style="opacity:0;display:none;">
+      <div class='omnibar-main'>
+        <div>
+          <input placeholder="Search" />
+          <span class="icon icon-search"></span>
+        </div>
+        <div id='omnibar-content'></div>
+      </div>
+    </div>
+  `);
+  const $entry = $(`
+    <button class="omnibar-toggle" data-global-hotkey="ctrl+k:click">
+      <span class="icon icon-search"></span>
+    </button>
+  `);
+  $(document.body).append($search);
+  $(document.body).append($entry);
+  const $input = $('.omnibar input') as JQuery<HTMLInputElement>;
+
+  const prefix = window.location.pathname.startsWith('/d/') ? `/d/${UiContext.domainId}` : '';
+  let setSearching;
+  let pdocs = [];
+  let psdict = {};
+  let udocs = [];
+  function SearchResult() {
+    const [searching, set] = React.useState(false);
+    setSearching = set;
+    return (
+      <>
+        {searching && <div>Searching...</div>}
+        {pdocs.length > 0 && <div className="omnibar-content-title">{i18n('Problems')}</div>}
+        {pdocs.map((i) => ({ ...i, base: i.domainId !== UiContext.domainId ? `/d/${i.domainId}` : prefix })).map(({
+          domainId, docId, pid, title, nSubmit, nAccept, base,
+        }) => (
+          <a
+            key={domainId + docId}
+            className="omnibar-content-section omnibar-problem"
+            href={`${base}/p/${pid || docId}`}
+          >
+            <div>
+              <p
+                onClick={(ev) => {
+                  if (psdict[`${domainId}#${docId}`]?.rid) {
+                    window.location.href = `${base}/record/${psdict[`${domainId}#${docId}`]?.rid}`;
+                  }
+                  ev.preventDefault();
+                }}
+                className={`record-status--text ${STATUS_CODES[psdict[`${domainId}#${docId}`]?.status]}`}
+              >
+                <span className={`icon record-status--icon ${STATUS_CODES[psdict[`${domainId}#${docId}`]?.status]}`}></span>
+              </p>
+              <div>{title}</div>
+            </div>
+            <div>
+              <span className="icon icon-book" />{domainId !== UiContext.domainId ? `${domainId}#` : ''}{pid || docId}
+              <span className="icon icon-pie-chart" />{nAccept}/{nSubmit}
+            </div>
+          </a>
+        ))}
+        {udocs.length > 0 && <div className="omnibar-content-title">{i18n('Users')}</div>}
+        {udocs.map(({
+          _id, uname, avatarUrl,
+        }) => (
+          <a key={_id} className="omnibar-content-section omnibar-user" href={`${prefix}/user/${_id}`}>
+            <div>
+              <img src={avatarUrl} alt={uname} />
+              <div className="omnibar-user-info">
+                <span>UID {_id}</span><br />
+                <div><span style={{ lineHeight: '20px' }}>{uname}</span></div>
+              </div>
+            </div>
+          </a>
+        ))}
+      </>
+    );
+  }
+  ReactDOM.createRoot(document.getElementById('omnibar-content')!).render(<SearchResult />);
+
+  async function search(query: string) {
+    if (!query?.trim()) {
+      pdocs = [];
+      setSearching?.(false);
+      return;
+    }
+    setSearching?.(true);
+    [{ pdocs, psdict }, udocs] = await Promise.all([
+      request.get(`/d/${UiContext.domainId}/p`, { q: query, limit: 10 }),
+      api('users', { search: query }, ['_id', 'uname', 'displayName', 'avatarUrl']),
+    ]);
+    setSearching?.(false);
+  }
+  $input.on('input', debounce((ev) => search(ev.target.value), 1000));
+
+  let open = false;
+  const show = () => {
+    $search.show();
+    setTimeout(() => {
+      $search.css('opacity', '1');
+      $input.focus();
+    }, 20);
+    open = true;
+  };
+  const hide = () => {
+    $search.css('opacity', '0');
+    setTimeout(() => $search.hide(), 200);
+    open = false;
+  };
+  $entry.on('click', () => (open ? hide() : show()));
+  $input.on('click', (ev) => ev.stopPropagation());
+  $('.omnibar-main').on('click', '.omnibar-content-section', (ev) => ev.stopPropagation());
+  $search.on('click', hide);
+});