Any user facing string/text has to be translated.
Translations are considered to be in the responsibility of the consuming project.

• Any text has to be passed in via properties/slots
• No translation function is to be used within ODS

Description

First of all we need basic elements to start build patterns on top.

To ensure painless creation we should start to build all already used elements we used from vuetify. In my opinion this does not include things as OcList for example since OcList ist using alot of v- components inside.

My proposed break-down of what's to do and when to do:

• icons, buttons and navigations - ELEMENTS
  • v-icon
  • v-btn
  • v-img
  • v-radio
  • v-checkbox
  • v-text-field
  • v-textarea
  • v-switch
• fancy stuff - ELEMENTS
  • v-alert
  • v-avatar
  • v-snackbar
  • v-progress-circular
  • v-progress-linear
  • v-autocomplete
• left-overs - ELEMENTS (tbd)
  • v-card
  • v-card-stuff
  • v-dialog
  • v-footer
  • v-menu
• discuss further use of layout components like v-flex
• discuss further use of spacer/helper components vs (spacing-)helpers as proposed by vueds
• discuss & start building patterns out of existing components like:
  • OcList
  • ...

Patterns

• v-breadcrumb #17
• v-list(-group) and insides #19
• v-radio-group

NotSortedYet

• v-bottom-sheet
• v-navigation-drawer
• v-subheader
• v-tab(-item/tabs)

LayoutComps and style-helpers (tbd)

• v-container
• v-content
• v-divider
• v-spacer
• v-flex
• v-layout

modelled after https://vuetifyjs.com/en/components/lists#list

Use examples

File list

<oc-list>
  <oc-list-tile> <!-- represents a row-->
    <oc-list-tile-action> <!-- represents an actionable cell-->
      <oc-checkbox />
    </oc-list-tile-action>
    <oc-list-tile-action> <!-- represents an actionable cell-->
      <oc-icon name='edit' />
    </oc-list-tile-action>
    <oc-list-tile-content>
        <oc-list-tile-title v-translate>Name</oc-list-tile-title>
        <oc-list-tile-sub-title class="text--primary" v-translate>Size</oc-list-tile-sub-title>
        <oc-list-tile-sub-title v-translate>Modification Time</oc-list-tile-sub-title>
      </oc-list-tile-content>
  </oc-list-tile>
</oc-list>

Implementation

UiKits Grid component should help to build the list properly - see https://getuikit.com/docs/dropdown#grid-in-dropdown

Screenshot

elements

• title
• input fiels
• icon
• linear infinite progress bar

behavior

• title acts as placeholder when not focused
• title move to top when not focused
• when hitting enter (or pressing the button?) the component is disabled and the progress bar shows

events

• inout event when the user hits enter

properties

• title, string, default: search (translated)
• icon name

• define menu elements - see https://vuikit.js.org/guide/nav and https://vuikit.js.org/guide/dropdown#nav-in-dropdown
• [ ]

Following https://vuejs.org/v2/guide/components-registration.html#Name-Casing we should consider naming our components in PascalCase

This allows on the one hand side to use PascalCase and kebap-case and on the otherside this renders the docs a bit nicer

Background

There are some user facing strings in ODS. We shall provide translations.

refs

see https://vuetifyjs.com/en/components/progress#indeterminate

behavior

• a spinner which is design like the progress bar

@DeepDiver1975 @felixheidecke please fill in the gaps...

the topbars need the capability to stick to the browser window.

cauton: this also applies in case where we have two top bars ....

As I'm working on the grid element, I am heavily depending on the width and visibility classes.

Those classes are component agnostic and help with making them responsive, hide or display them and all that jazz. I'm mainly talking:

• Width
• Flex
• Visibility
• Utility

As well as things such as sticky, sortable, scrollspy, and the like.

@DeepDiver1975 @LukasHirt I don't currently know how to make them available to developers without resorting back to the regular class system, but I need a solution quickly.

Example

1. The wrapper for the search-bar (in this case a column in the grid) turns invisible in a small viewport
2. small search-bar is shown in medium viewports in the dropdown

We need the support for the existing components as well as any simple HTML tag (div, span, etc.)

screenshots

behavior

• slides in and out - on mobile we better use a full screen approach - note for later
• has a title and a close button
• within the default slot further inner components can be rendered
• sticks to the app top bar - does not scroll

events

• close
• open

properties

• title, string

vuetify components as used today in phoenix:

• v-alert
• v-autocomplete
• v-avatar
• v-bottom-sheet
• v-breadcrumbs
• v-btn
• v-card
• v-card-actions
• v-card-text
• v-card-title
• v-checkbox
• v-container
• v-content
• v-dialog
• v-divider
• v-flex
• v-footer
• v-icon
• v-img
• v-layout
• v-list
• v-list-group
• v-list-tile
• v-list-tile-action
• v-list-tile-action-text
• v-list-tile-avatar
• v-list-tile-content
• v-list-tile-sub-title
• v-list-tile-title
• v-menu
• v-navigation-drawer
• v-progress-circular
• v-progress-linear
• v-radio
• v-radio-group
• v-snackbar
• v-spacer
• v-subheader
• v-switch
• v-tab
• v-tab-item
• v-tabs
• v-textarea
• v-text-field

steps to reproduce

1. <oc-text-input v-model="inputValue" ..
2. enter text into the input fiels
3. see the data element inputValue not being updated

feels strange - no idea if intended

@felixheidecke can you comment pelase?

THX

screenshots

elements

• title
• description (optinal)
• input field (optional)
• ok button
• cancle button

behavior

we currently have to variants of the dialog: prompt and confirmation
upon clicking ok elements will be disabled and a spinner is shown
the calling component controls closing of the dialog

events

• clicking ok
• clicking cancel

properties

• title, string
• description, string
• input field value
• ok button text, string, default: ok (translated)
• cancel button text, string, default: cancel (translated)

• property actions is missing - there is no way to control the actions from out side the component - example code works by accident from my understanding
• toggling the component should be done via an bound variable - just like everywhere else
• same for the file name

^ we have all these information available in the vuex store - just need to connect stuff ...

First look, incomplete, not yet checked with assistive technology:

• oc-button: Primary button needs a distinct focus style
• oc-checkbox: Needs a focus style, needs a label (implicit or explicit)
• oc-image: Alt attribute is missing. Attribute can be left blank if image is purely decorative, but must exist
• oc-radio: Needs a focus style, needs a label (implicit or explicit)
• oc-spinner: "spinner" is a rather odd accessible name example in aria-label. Suggestion: "content is loading". Another suggestion would be the use of an aria-live region
• oc-switch: Needs a focus style, needs a label (implicit or explicit)
• oc-textarea: In output HTML the label prop is applied on the textarea. Should be aria-label or an implicit or explicit label
• oc-textarea: Promote the use of placeholder attribute to supply an example instead of repeating of substituting the label/aria-label: https://www.w3.org/WAI/tutorials/forms/instructions/
• oc-text-field: In output HTML the label prop is applied on the textarea. Should be aria-label or an implicit or explicit label
• oc-text-field: Promote the use of placeholder attribute to supply an example instead of repeating of substituting the label/aria-label: https://www.w3.org/WAI/tutorials/forms/instructions/

The following is a standalone demo of the overall wrapper and the base styles applied.
We can not use uk-height-viewport here, as the offsets would be part of the attribute which should be part of theming / scss. The scrollbar attaches itself to the application container instead of the whole page making it much nicer to use.

$navbar-nav-item-height determines the height of the navbar and the offset(s).

The ingredients here are <header>, <main> and <aside>

@DeepDiver1975 not sure how to bring that to the ods. :-/

<!DOCTYPE html>
<html lang="en-gb" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Introduction - UIkit</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="../images/favicon.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" />
    <style>
        body {
            height: 100vh;
            overflow: hidden;
        }

        #top-bar {}

        #main-menu {
            /* Use $navbar-nav-item-height variable here */
            top: 80px;
        }

        #app-container{
            /* Use $navbar-nav-item-height variable here */
            height: calc(100vh - 80px);
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <header id="top-bar" class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">
            <button uk-toggle="target: #main-menu" class="uk-button" type="button">Open Sidebar</button>
        </div>
        <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li>
                    <a href="#">Parent</a>
                    <div class="uk-navbar-dropdown">
                        <ul class="uk-nav uk-navbar-dropdown-nav">
                            <li class="uk-active"><a href="#">Active</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </header>
    <main id="app-container">

        <!-- DEMO CONTENT START -->

        <div style="height:120vh;">
            <p>
                    This is demo content that scrolls
            </p>
        </div>

        <!-- DEMO CONTENT END -->

    </main>
    <aside id="main-menu" uk-offcanvas>
        <div class="uk-offcanvas-bar">
            <button class="uk-offcanvas-close" type="button" uk-close></button>
        </div>
    </aside>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-core.min.js"></script>
</body>
</html>

As "naming things" was driving me crazy, I hereby propose these names for these sections:

Feel free to comment and improve 👍

screenshot

elemets

• footer (own pattern)
• fullscreen base layout
• text elements like h{1-3} and p
• text coloring capabilities - respect contrast color based on background

@DeepDiver1975 @LukasHirt I propose a flexible dropdown solution for the current implementation of the oc-menu.

Split this into a simple drop-down components with a single slot where multiple items can fit. e.g.:

<oc-button-row>
   <oc-button id="foo">I so happen to be placed in a button row</oc-button>
   <oc-button>Hello there</oc-button>
</oc-button-row>

[…]

<oc-dropdown uk-dropdown="boundary: #foo; toggle: #foo">
   <span>some text</span>
   <oc-menu>
      <oc-menu-item />
      <oc-menu-item />
      <oc-menu-item />
   </oc-menu>
   <span>other text</span>
   <oc-search-bar />
</oc-dropdown>

This approach allows for easy arrangement on elements in the dropdown, like having an aditional search-bar in the filter-dropdown. The trigger can also live outside in a button-row.

screenshots

behavior

• this is basically a 2 layered list
• each top level element can be expanded to its inner children

TODO

search for reasonable uikit component

as discussed some time back:
we need a better component for the secondary nav bar

Requirements

• allow responsive behavior
• introduce this as new component - we will delete oc-top-bar later after the transition
• use slots to place elements inside the nav bar

Why?

Because translating the button text is then easier

<oc-button><translate>Button text to be translated</translate></oc-button>

Why?

the object base approach is causing to much hassle.
we need to create a temporary object for each and every file to bind the correct values 💥

File name and extension are split into two elements and the dot is not present in text but only in css (as far as I understood this).

From an accessibility poc this is not acceptable - same for the acceptance tests ....

Proposal

Prefix all components with oc- and use kebab-casing.

Examples:

oc-button
oc-list

same as #124 - better for integrating translations
see #144 for the solution

1. there is no close handler - we need this from an integration perspective

2. alerts need to be displayed on top of all the other components

finished from #87

refs get component layout ideas from https://vuikit.js.org/guide/navbar

  <div :id="name">
    <div class="uk-offcanvas-bar uk-background-muted">
      <button class="uk-offcanvas-close" type="button" @click="onClose" uk-close></button>
      <ul class="uk-nav-default uk-nav-parent-icon uk-margin-medium-top" uk-nav="multiple: true">
        <li class="uk-parent uk-open">
            <router-link to="#" class="uk-text-uppercase">
              <oc-icon name="folder" /><span class="uk-text-uppercase">Files</span>
            </router-link>
            <ul class="uk-nav-sub">
                <li>
                  <router-link to="#">All files</router-link>
                </li>
                <li>
                  <router-link to="#">Favorites</router-link>
                </li>
                <li>
                  <router-link to="#">Shared by me</router-link>
                </li>
                <li>
                  <router-link to="#">Shared with me</router-link>
                </li>
                <li>
                  <router-link to="#">External storage</router-link>
                </li>
            </ul>
        </li>
        <li class="uk-nav-divider"></li>
        <li class="uk-parent">
            <router-link to="#">
              <oc-icon name="prototype" /><span class="uk-text-uppercase">Editor</span></router-link>
            <ul class="uk-nav-sub">
                <li>
                  <router-link to="#">Foo</router-link>
                </li>
                <li>
                  <router-link to="#">Bar</router-link>
                </li>
            </ul>
        </li>
        <li class="uk-nav-divider"></li>
        <li>
          <router-link to="#">
            <oc-icon name="image" /><span class="uk-text-uppercase">Gallery</span>
          </router-link>
        </li>
        <li class="uk-parent uk-margin-medium-top">
          <router-link to="#">
            <oc-icon name="account_circle" /><span class="uk-text-uppercase">Personal</span>
          </router-link>
          <ul class="uk-nav-sub">
            <li><router-link to="#">Profile</router-link></li>
            <li><router-link to="#">Storage</router-link></li>
            <li><router-link to="#">Security</router-link></li>
          </ul>
        </li>
        <li class="uk-nav-divider"></li>
        <li>
          <router-link to="#">
            <oc-icon name="application" /><span class="uk-text-uppercase">Administration</span>
          </router-link>
        </li>
        <li class="uk-nav-divider"></li>
        <li>
          <router-link to="#">
            <oc-icon name="info" /><span class="uk-text-uppercase">Help</span>
          </router-link>
        </li>
        <li class="uk-margin-medium-top">
          <router-link to="#">
            <oc-icon name="exit_to_app" /><span class="uk-text-uppercase">Logout</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>

Sass

.oc-main-menu {
    @extend .uk-nav-default;
    @extend .uk-nav-parent-icon;
    @extend .uk-margin-medium-top;

    .oc-icon {
        // 2px offset to align with line-height
        transform: translate(-50%, 3px);

        &, & > svg {
            width: $global-font-size + 1 !important;
            height: $global-font-size + 1 !important;
        }

        & > svg {
            fill : $global-color !important;
        }
    }
}

Following variants in usage shall be possible:

1. Default rendering items

<oc-breadcrumbs :items="items" divider=">"></oc-breadcrumbs>

Items are plain objects with the properties:

• text: the text which is displayed in the breadcrumb
• to: the vue router link
• disabled: if true the breadcrumb is not clickable

2. Render a given template

<oc-breadcrumbs :items="items" divider=">">
  <template slot='items slot-scope="props">
    <oc-icon name="ready"/><span>{{ props.item.text.toUpperCase }}</span>
  </template>
</oc-breadcrumbs>

For implementing the styling use UiKit breadbrumb classes https://getuikit.com/docs/breadcrumb

@DeepDiver1975 @tempelgogo @scramb I am raising the idea if we can get rid of native attributes such as type, href and the like.

https://github.com/owncloud/owncloud-design-system/blob/pure-uikit/src/elements/OcButton.vue#L4

These attributes will work without having them as a props in the component and they don't receive additional validation. These props are … in essence … not doing anything at all ;-) What do you think?

screenshots

elements

• the side bar element which is sliding in and out
• holds a list of menu items (oc-menu variant or oc-table ???)

behavior

• slide in
• slide out
• sticks to the top menu bar
• does not scroll together with the app content - e.g. file lsit

events

• ?

properties

• slot for the inner content

see https://owncloud.github.io/owncloud-design-system/#/Patterns/oc-application-menu
see https://owncloud.github.io/owncloud-design-system/#/Patterns/oc-menu

1. In case there is no avatar image we shall display a place holder - let's start with the account_circle icon - later we can add e.g. the first letter of the user name and some generated color or what ever ...

2. while loading the image data a spinner has to be shown

The logic is basically in here - https://github.com/owncloud/phoenix/blob/master/src/components/Avatar.vue - but the data loading part shall stay in phoenix - https://github.com/owncloud/phoenix/blob/f9e2b114ef835838bb75bb5ed556d63ba6b7240b/src/components/Avatar.vue#L35

we only use templates as show cases in the generated documentation
we don't need them in the distributed system

In case an icon button is disabled there is no visual difference to an enabled icon button.

Radios need more complex inner structure like a two lined text with different font style

we might want to keep the label for accessibility

<oc-radio>
<h3>Title</h3>
<span>description</span>
<oc-radio>

screenshots

behavior

• upon clicking a file this action element opens
• a list of actions is displayed
• upon clicking outside of the element it closes
• upon clicking on one of the actions the element closes
• today this is basically a footer bar or something - can change in the future - let's just rebuild what we have

events

• action click event

properties

• file name, string
• items, array of objects with icon, name and event callback (??)

screenshots

behavior

• a list of tabs is displayed

events

• action click event

properties

• title, string
• active, boolean
• disabled, boolean

refs

We can pretty much build this component like the tabs component of vueuikit https://vuikit.js.org/guide/tabs