How to use olymp - 10 common examples

To help you get started, we’ve selected a few olymp examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github olymp / olymp / src / gzk / _old / views / news.js View on Github external
import React, { Component } from 'react';
import { Link, graphql, gql, withItem, withAuth, Helmet } from 'olymp';
import { Spin } from 'antd';
import { Image, SlateMate } from 'olymp-cms';
import { Gateway } from 'react-gateway';
import moment from 'moment';

const fieldNames = 'id, art, date, name, extrakt, slug, text, bild { height, width, url, crop }';
@withAuth
@graphql(gql`
  query termin($slug: String) {
    termin(query: { slug: { eq: $slug } }) {
      ${fieldNames}
    }
  }
`, {
  options: ({ location }) => ({ variables: { slug: location.pathname.split('/news')[1] } }),
})
@withItem({ typeName: 'termin', fieldNames })
export default class News extends Component {
  render() {
    const { item, auth, location, save, patch } = this.props;
    const readOnly = !auth.user || auth.user.einrichtung;
    if (!item) return ;
    // style="border-bottom-right-radius:130px;200px;"
    return (
github olymp / olymp / src / cms-next / cloudinary / thumbs.js View on Github external
import React, { Component, PropTypes } from 'react';
import { Icon, Button as AntButton, Tooltip } from 'antd';
import { styled } from 'olymp';
import Image from './image';

const ThumbContainer = styled(({ theme }) => ({
  margin: '1rem',
  display: 'flex',
  flexFlow: 'row wrap',
  justifyContent: 'space-around',
  alignContent: 'space-around',
  alignItems: 'baseline',
}), 'div', p => p);

const Thumb = styled(({ theme, isActive }) => ({
  margin: '.25rem 0',
  outline: isActive ? `2px solid ${theme.color}` : 'none',
  // transform: isActive ? 'scale(1.1)' : 'none',
  zIndex: isActive ? 2 : 1,
  cursor: 'pointer',
  position: 'relative',
  /* boxShadow: '0px 0px 12px 0px rgba(0,0,0,0.75)',
  ':hover': {
    transform: 'scale(1.2)',
    transition: 'all .15s ease-in-out',
    zIndex: 3,
  }*/
}), 'div', ({ isActive, ...p }) => p);

const Button = styled(({ theme }) => ({
  margin: '.25rem 0',
github olymp / olymp / src2 / cms / views / container.js View on Github external
import { auth, withRouter } from '../decorators';
import { useLightboxes } from '../edits/image/with-lightbox';
import PageModal from './pages/modals/page';
import MediaDetail from './media/detail';
import UploadModal from './media/upload';
import CollectionDetail from './collections/detail';
import './container.less';

const SubMenu = Menu.SubMenu;
// const MenuItemGroup = Menu.ItemGroup;

@auth
@useLightboxes
@withRouter
@graphql(gql`
  query schema {
    schema: __schema {
      types {
        name
        description
        interfaces {
          name
        }
        fields {
          name
          type {
            kind
            name
          }
        }
      }
github olymp / olymp / src / cms-next / cloudinary / thumbs.js View on Github external
const Thumb = styled(({ theme, isActive }) => ({
  margin: '.25rem 0',
  outline: isActive ? `2px solid ${theme.color}` : 'none',
  // transform: isActive ? 'scale(1.1)' : 'none',
  zIndex: isActive ? 2 : 1,
  cursor: 'pointer',
  position: 'relative',
  /* boxShadow: '0px 0px 12px 0px rgba(0,0,0,0.75)',
  ':hover': {
    transform: 'scale(1.2)',
    transition: 'all .15s ease-in-out',
    zIndex: 3,
  }*/
}), 'div', ({ isActive, ...p }) => p);

const Button = styled(({ theme }) => ({
  margin: '.25rem 0',
  zIndex: 1,
  /*boxShadow: '0px 0px 12px 0px rgba(0,0,0,0.75)',
  ':hover': {
    transform: 'scale(1.2)',
    transition: 'all .15s ease-in-out',
    zIndex: 3,
  }*/
}), AntButton, p => p);

const Label = styled(({ theme }) => ({
  // opacity: .75,
  position: "absolute",
  top: '50%',
  left: '50%',
  transform: "translate(-50%, -50%)",
github olymp / olymp / src / ui / list / item.js View on Github external
import React from 'react';
import { styled, Link } from 'olymp';
import { Icon } from 'antd';
import Image from '../../cms/cloudinary/image';

const Content = styled(({ active, disabled, theme }) => ({
  display: 'flex',
  alignItems: 'center',
  padding: '5px 6px',
  width: '100%',
  minHeight: 51,
  color: disabled ? theme.dark3 : theme.dark1,
  // background: active ? 'linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.083))' : 'linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.033))',
  background: active && 'rgba(0, 0, 0, 0.03)',
  lineHeight: '20px',
  borderBottom: '1px solid rgb(233, 233, 233)',
  cursor: disabled ? 'not-allowed' : 'pointer',
  '> img': {
    marginRight: 8,
    width: 37,
    height: 37,
    borderRadius: 500,
github olymp / olymp / packages / fela / src / navbar / editable.js View on Github external
editable,
      router,
      brand,
      fill,
      pages,
      location,
      dark,
      light,
    } = this.props;
    const { query, pathname } = location;
    const navigation = !!query && query.navigation !== undefined; // null/page.id => true, undefined => false

    return (
      <div>
        <nav>
          {brand
            ? {brand}
            : null}

          <button>
              router.push({
                pathname,
                query: { navigation: navigation ? undefined : null },
              })}
            className="navbar-toggler hidden-md-up"</button></nav></div>
github olymp / olymp / src / fela / navbar / editable.js View on Github external
render() {
    const { editable, router, brand, fill, pages, location, dark, light } = this.props;
    const { query, pathname } = location;
    const navigation = !!query &amp;&amp; query.navigation !== undefined; // null/page.id =&gt; true, undefined =&gt; false

    return (
      <div>
        <nav>
          {brand ? {brand} : null}

          <button> router.push({ pathname, query: { navigation: navigation ? undefined : null } })}
            className="navbar-toggler hidden-md-up"
          &gt;
            <span></span>
          </button>

          <div>
            </div></nav></div>
github olymp / olymp / _old / hashtax / edit / editor.js View on Github external
import Mark from 'slate/lib/models/mark';
import Raw from './serializer/raw';
import { Popover, Tag } from 'antd';
import { parseComponent } from '../processors';
import { styled } from 'olymp';

const deserialize = (value) =&gt; {
  console.log('DESERIALIZE', value);
  return Raw.deserialize(value, { terse: true });
};
const serialize = (state) =&gt; {
  console.log('SERIALIZE', state);
  return Raw.serialize(state, { terse: true });
};

const Highlighted = styled(() =&gt; ({
  fontWeight: 'bold',
}), 'span', p =&gt; p);

const addMarks = (startChar, closeChar, markType, characters, string) =&gt; {
  const mark = Mark.create({ type: markType });
  let start = -startChar.length;
  while (true) {
    start = string.indexOf(startChar, start + startChar.length);
    if (start === -1) break;
    const end = string.indexOf(closeChar, start + startChar.length) + startChar.length;
    const size = end === 0 ? characters.size : end;
    for (let i = start; i &lt; size; i + 1) {
      let char = characters.get(i);
      let { marks } = char;
      marks = marks.add(mark);
      char = char.set('marks', marks);
github olymp / olymp / src / _old / hashtax / edit / editor.js View on Github external
import Mark from 'slate/lib/models/mark';
import Raw from './serializer/raw';
import { Popover, Tag } from 'antd';
import { parseComponent } from '../processors';
import { styled } from 'olymp';

const deserialize = (value) => {
  console.log('DESERIALIZE', value);
  return Raw.deserialize(value, { terse: true });
};
const serialize = (state) => {
  console.log('SERIALIZE', state);
  return Raw.serialize(state, { terse: true });
};

const Highlighted = styled(
  () => ({
    fontWeight: 'bold',
  }),
  'span',
  p => p
);

const addMarks = (startChar, closeChar, markType, characters, string) => {
  const mark = Mark.create({ type: markType });
  let start = -startChar.length;
  while (true) {
    start = string.indexOf(startChar, start + startChar.length);
    if (start === -1) { break; }
    const end =
      string.indexOf(closeChar, start + startChar.length) + startChar.length;
    const size = end === 0 ? characters.size : end;
github olymp / olymp / src / slate / decorators / index.js View on Github external
const blockTypes = Object.keys(types).reduce((result, key) => {
    if (!types[key].label) {
      result[key] = types[key];
    } else {
      let { component, styles, editable, ...rest } = types[key];
      if (styles && typeof styles === 'object') component = styled(() => styles, component, p => p);
      if (styles && typeof styles === 'function') component = styled(styles, component, p => p);
      result[key] = useBlockBase({ isVoid: !editable, isAtomic: true })(component);
      result[key].slate = { ...result[key].slate, key, ...rest };
    }
    return result;
  }, { });
  return WrappedComponent => class UseBlockTypes extends Component {

olymp

MIT
Latest version published 4 years ago

Package Health Score

40 / 100
Full package analysis

Popular olymp functions