mirror of
https://github.com/opf/openproject.git
synced 2026-06-13 19:20:00 +00:00
Remove livingstyleguide
This commit is contained in:
Oliver Günther
@@ -275,10 +275,6 @@ group :development do
|
||||
gem 'spring'
|
||||
gem 'spring-commands-rspec'
|
||||
|
||||
# Gems for living styleguide
|
||||
gem 'livingstyleguide', '~> 2.1.0'
|
||||
gem 'sassc-rails'
|
||||
|
||||
# Lookbook
|
||||
gem 'lookbook', '~> 2.0.3'
|
||||
|
||||
|
||||
+2
-20
@@ -378,11 +378,11 @@ GEM
|
||||
crack (0.4.5)
|
||||
rexml
|
||||
crass (1.0.6)
|
||||
css_parser (1.14.0)
|
||||
addressable
|
||||
cuprite (0.14.3)
|
||||
capybara (~> 3.0)
|
||||
ferrum (~> 0.13.0)
|
||||
css_parser (1.14.0)
|
||||
addressable
|
||||
daemons (1.4.1)
|
||||
dalli (3.2.5)
|
||||
date (3.3.3)
|
||||
@@ -586,12 +586,6 @@ GEM
|
||||
listen (3.8.0)
|
||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||
rb-inotify (~> 0.9, >= 0.9.10)
|
||||
livingstyleguide (2.1.0)
|
||||
minisyntax (>= 0.2.5)
|
||||
redcarpet
|
||||
sassc
|
||||
thor
|
||||
tilt
|
||||
lobby_boy (0.1.3)
|
||||
omniauth (~> 1.1)
|
||||
omniauth-openid-connect (>= 0.2.1)
|
||||
@@ -634,7 +628,6 @@ GEM
|
||||
mini_magick (4.12.0)
|
||||
mini_mime (1.1.2)
|
||||
mini_portile2 (2.8.2)
|
||||
minisyntax (0.2.5)
|
||||
minitest (5.18.1)
|
||||
msgpack (1.7.1)
|
||||
multi_json (1.15.0)
|
||||
@@ -888,14 +881,6 @@ GEM
|
||||
sanitize (6.0.2)
|
||||
crass (~> 1.0.2)
|
||||
nokogiri (>= 1.12.0)
|
||||
sassc (2.4.0)
|
||||
ffi (~> 1.9)
|
||||
sassc-rails (2.1.2)
|
||||
railties (>= 4.0.0)
|
||||
sassc (>= 2.0)
|
||||
sprockets (> 3.0)
|
||||
sprockets-rails
|
||||
tilt
|
||||
secure_headers (6.5.0)
|
||||
selenium-webdriver (4.10.0)
|
||||
rexml (~> 3.2, >= 3.2.5)
|
||||
@@ -943,7 +928,6 @@ GEM
|
||||
test-prof (1.2.2)
|
||||
text-hyphen (1.5.0)
|
||||
thor (1.2.2)
|
||||
tilt (2.2.0)
|
||||
timecop (0.9.6)
|
||||
timeout (0.4.0)
|
||||
trailblazer-option (0.1.2)
|
||||
@@ -1073,7 +1057,6 @@ DEPENDENCIES
|
||||
lefthook
|
||||
letter_opener
|
||||
listen (~> 3.8.0)
|
||||
livingstyleguide (~> 2.1.0)
|
||||
lograge (~> 0.12.0)
|
||||
lookbook (~> 2.0.3)
|
||||
mail (= 2.8.1)
|
||||
@@ -1156,7 +1139,6 @@ DEPENDENCIES
|
||||
ruby-progressbar (~> 1.13.0)
|
||||
rubytree (~> 2.0.0)
|
||||
sanitize (~> 6.0.2)
|
||||
sassc-rails
|
||||
secure_headers (~> 6.5.0)
|
||||
selenium-webdriver (~> 4.0)
|
||||
semantic (~> 1.6.1)
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
@import ../../../frontend/src/global_styles/**/_*.lsg
|
||||
@@ -1,174 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<base href="/" />
|
||||
<meta charset="utf-8">
|
||||
<meta content="ie=edge" http-equiv="x-ua-compatible">
|
||||
<meta content="width=device-width,initial-scale=1" name="viewport">
|
||||
<meta name="openproject_initializer"
|
||||
data-locale="en"
|
||||
data-default-locale="en" />
|
||||
<meta content="livingstyleguide.org <%= LivingStyleGuide::VERSION %>" name="generator">
|
||||
<title>Living Style Guide for OpenProject</title>
|
||||
<script type="application/javascript" src="/assets/frontend/vendor.js"></script>
|
||||
<script type="application/javascript" src="/assets/frontend/polyfills.js"></script>
|
||||
<script type="application/javascript" src="/assets/frontend/runtime.js"></script>
|
||||
<script type="application/javascript" src="/assets/frontend/main.js"></script>
|
||||
<link rel="stylesheet" media="all" href="/assets/frontend/styles.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
max-width: 65vw;
|
||||
margin: 0 auto;
|
||||
font-family: Lato;
|
||||
font-size: 16px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.styleguide-nav--menu-items {
|
||||
margin: 0;
|
||||
background: var(--primary-color);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.styleguide-nav li {
|
||||
padding: 0.5rem 1rem;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.styleguide-nav li:hover {
|
||||
background: var(--header-item-bg-hover-color);
|
||||
}
|
||||
|
||||
.styleguide-nav a {
|
||||
color: var(--header-item-font-color);
|
||||
}
|
||||
|
||||
.styleguide-nav a:hover {
|
||||
color: var(--header-item-font-hover-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.lsg-headline {
|
||||
margin-top: 3rem
|
||||
}
|
||||
|
||||
.lsg-headline:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lsg-sub-headline {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.lsg-code-block {
|
||||
margin: 1rem 0;
|
||||
border: 1px solid var(--toolbar-item--border-color);
|
||||
}
|
||||
|
||||
.lsg-code {
|
||||
display: inline-block;
|
||||
min-width: 100%;
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.styleguide-banner {
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
max-width: 700px;
|
||||
margin: 1rem auto 3rem auto;
|
||||
}
|
||||
|
||||
.styleguide-banner--text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.styleguide-nav--menu-items {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.livingstyleguide--code-block {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.livingstyleguide--example {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.lsg-search-box {
|
||||
width: 40%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icon-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icon-list li {
|
||||
flex: 1;
|
||||
flex-basis: 15%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.icon-list span.icon {
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
/* Tablet screen size */
|
||||
@media only screen and (max-width: 1210px) {
|
||||
body {
|
||||
max-width: unset;
|
||||
margin: 0 1rem;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile screen size */
|
||||
@media only screen and (max-width: 679px) {
|
||||
.styleguide-banner {
|
||||
padding: 25% 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="lsg">
|
||||
<header class="livingstyleguide--header grid-content">
|
||||
<div class="styleguide-banner">
|
||||
<h1 class="styleguide-banner--text">Living Style Guide</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav class="styleguide-nav">
|
||||
<ul class="styleguide-nav--menu-items">
|
||||
<li><a target="_self" href="#fonts">Fonts</a></li>
|
||||
<li><a target="_self" href="#forms">Forms</a></li>
|
||||
<li><a target="_self" href="#notifications">Notifications</a></li>
|
||||
<li><a target="_self" href="#buttons">Buttons</a></li>
|
||||
<li><a target="_self" href="#pagination">Pagination</a></li>
|
||||
<li><a target="_self" href="#user-content">User Content</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section class="livingstyleguide--intro grid-content">
|
||||
<p> </p>
|
||||
</section>
|
||||
<article class="lsg-container">
|
||||
<%= html %>
|
||||
</article>
|
||||
<footer class="livingstyleguide--footer grid-content">
|
||||
Copyright © 2020 OpenProject - All rights reserved.
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,45 +0,0 @@
|
||||
#-- copyright
|
||||
# OpenProject is an open source project management software.
|
||||
# Copyright (C) 2012-2023 the OpenProject GmbH
|
||||
#
|
||||
# This program is free software; you can redistribute it and/or
|
||||
# modify it under the terms of the GNU General Public License version 3.
|
||||
#
|
||||
# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
|
||||
# Copyright (C) 2006-2013 Jean-Philippe Lang
|
||||
# Copyright (C) 2010-2013 the ChiliProject Team
|
||||
#
|
||||
# This program is free software; you can redistribute it and/or
|
||||
# modify it under the terms of the GNU General Public License
|
||||
# as published by the Free Software Foundation; either version 2
|
||||
# of the License, or (at your option) any later version.
|
||||
#
|
||||
# This program is distributed in the hope that it will be useful,
|
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
# GNU General Public License for more details.
|
||||
#
|
||||
# You should have received a copy of the GNU General Public License
|
||||
# along with this program; if not, write to the Free Software
|
||||
# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
#
|
||||
# See COPYRIGHT and LICENSE files for more details.
|
||||
#++
|
||||
#
|
||||
if defined?(LivingStyleGuide)
|
||||
##
|
||||
# Override CSS to never be called
|
||||
module DocumentTemplatePatch
|
||||
##
|
||||
# Define our own template
|
||||
def template_erb
|
||||
if @template == :layout
|
||||
File.read(Rails.root.join('app/views/layouts/styleguide/styleguide.layout.html.erb'))
|
||||
else
|
||||
super
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
LivingStyleGuide::Document.prepend DocumentTemplatePatch
|
||||
end
|
||||
@@ -601,9 +601,6 @@ OpenProject::Application.routes.draw do
|
||||
get 'callback', controller: 'oauth_clients', action: :callback
|
||||
end
|
||||
|
||||
# Routes for design related documentation and examples pages
|
||||
get '/design/styleguide' => redirect('/assets/styleguide.html')
|
||||
|
||||
if Rails.env.development?
|
||||
mount Lookbook::Engine, at: "/design/lookbook"
|
||||
end
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
## OpenProject Icon Font
|
||||
|
||||
*OpenProject Icon Font* for icons:
|
||||
|
||||
<ul class="icon-list">
|
||||
{{#each names}}
|
||||
<li><span class="icon icon-{{this}}"></span>{{this}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
@@ -1,22 +0,0 @@
|
||||
# Accounts
|
||||
|
||||
|
||||
```
|
||||
<div class="login-auth-providers">
|
||||
<h3 class="login-auth-providers-title"><span>
|
||||
or sign in with your existing account
|
||||
</span></h3>
|
||||
|
||||
<div class="login-auth-provider-list">
|
||||
<a href="/auth/developer" class="auth-provider auth-provider-developer button">
|
||||
<span class="auth-provider-name">Omniauth Developer</span>
|
||||
</a>
|
||||
<a href="/auth/developer" class="auth-provider auth-provider-developer button">
|
||||
<span class="auth-provider-name">Omniauth Developer</span>
|
||||
</a>
|
||||
<a href="/auth/developer" class="auth-provider auth-provider-developer button">
|
||||
<span class="auth-provider-name">Omniauth Developer</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -1,25 +0,0 @@
|
||||
# Copy to clipboard
|
||||
|
||||
```
|
||||
<div class="toolbar-container">
|
||||
<div class="toolbar">
|
||||
<div class="title-container">
|
||||
<h2 title="Toolbar">Toolbar</h2></div>
|
||||
<ul class="toolbar-items">
|
||||
<li class="toolbar-item toolbar-input-group">
|
||||
<div class="toolbar-input-group--affix -prepend">
|
||||
<span>git clone</span>
|
||||
</div>
|
||||
<input id="repository-checkout-url" type="text" class="-clickable" value="https://localhost/git/asdf.git"
|
||||
copy-to-clipboard
|
||||
clipboard-target="#repository-checkout-url">
|
||||
<div class="toolbar-input-group--affix -append"
|
||||
copy-to-clipboard
|
||||
clipboard-target="#repository-checkout-url">
|
||||
<span class="icon-copy"></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -1,6 +0,0 @@
|
||||
## Datepicker
|
||||
|
||||
```
|
||||
<input type="text" id="datepicker-input" class='-augmented-datepicker'>
|
||||
|
||||
```
|
||||
@@ -1,55 +0,0 @@
|
||||
# Icon Controls
|
||||
|
||||
```
|
||||
<div style="padding: 0.25rem">
|
||||
<span class="icon-control">
|
||||
<span class="icon-control--icon icon-star" title="Star">
|
||||
<span class="hidden-for-sighted">Star</span>
|
||||
</span>
|
||||
</span>
|
||||
Nur e kian landonomo, ol ind duona anstataŭa.
|
||||
</div>
|
||||
<div style="padding: 0.25rem">
|
||||
<span class="icon-control -active">
|
||||
<span class="icon-control--icon icon-star" title="Unstar">
|
||||
<span class="hidden-for-sighted">Unstar</span>
|
||||
</span>
|
||||
</span>
|
||||
Far ki aliam samideano noniliono.
|
||||
</div>
|
||||
|
||||
<div style="padding: 0.25rem; background-color: #eee">
|
||||
<span class="icon-control">
|
||||
<span class="icon-control--icon icon-watched" title="Watch">
|
||||
<span class="hidden-for-sighted">Watch</span>
|
||||
</span>
|
||||
</span>
|
||||
Περπετυα περσεκυερις υθ ηας
|
||||
</div>
|
||||
<div style="padding: 0.25rem; background-color: #eee">
|
||||
<span class="icon-control -active">
|
||||
<span class="icon-control--icon icon-watched" title="Unwatch">
|
||||
<span class="hidden-for-sighted">Unwatch</span>
|
||||
</span>
|
||||
</span>
|
||||
Ηας παρτεμ λεγενδως δεφινιθιονεμ νο, συμ ευ λαυδεμ εσεντ εκυιδεμ
|
||||
</div>
|
||||
|
||||
<div style="padding: 0.25rem">
|
||||
<span class="icon-control">
|
||||
<span class="icon-control--icon icon-group" title="Group">
|
||||
<span class="hidden-for-sighted">Group</span>
|
||||
</span>
|
||||
</span>
|
||||
Group
|
||||
</div>
|
||||
<div style="padding: 0.25rem">
|
||||
<span class="icon-control -active">
|
||||
<span class="icon-control--icon icon-group" title="Leave the group">
|
||||
<span class="hidden-for-sighted"></span>
|
||||
</span>
|
||||
</span>
|
||||
Leave the Group
|
||||
</div>
|
||||
|
||||
```
|
||||
@@ -1,19 +0,0 @@
|
||||
# In place editing
|
||||
|
||||
## In place editing: Title
|
||||
|
||||
```
|
||||
<div class="toolbar-container -editable">
|
||||
<div class="toolbar">
|
||||
<editable-toolbar-title class="title-container">
|
||||
<div class="editable-toolbar-title--container">
|
||||
<input class="wp-query--selectable-title -border-on-hover-only toolbar--editable-toolbar ellipsis"
|
||||
placeholder="Page title"
|
||||
aria-label="Page title"
|
||||
type="text"
|
||||
name="foobar" />
|
||||
</div>
|
||||
</editable-toolbar-title>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -1,73 +0,0 @@
|
||||
# Info boxes
|
||||
|
||||
## Simple info boxes
|
||||
```
|
||||
<div class="info-boxes">
|
||||
<h2 class="info-boxes--title">Heading</h2>
|
||||
<div class="info-boxes--container">
|
||||
<div class="info-boxes--item">
|
||||
<h3 class="info-boxes--item-title">Box 1</h3>
|
||||
<div class="info-boxes--item-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-boxes--item">
|
||||
<h3 class="info-boxes--item-title">Box 2</h3>
|
||||
<div class="info-boxes--item-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-boxes--item">
|
||||
<h3 class="info-boxes--item-title">Box 3</h3>
|
||||
<div class="info-boxes--item-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Centered with image and links
|
||||
```
|
||||
<div class="info-boxes -centered">
|
||||
<h2 class="info-boxes--title">Heading</h2>
|
||||
<div class="info-boxes--container">
|
||||
<div class="info-boxes--item">
|
||||
<img src="https://via.placeholder.com/250x200" class="info-boxes--teaser-image">
|
||||
<h3 class="info-boxes--item-title">Box 1</h3>
|
||||
<div class="info-boxes--item-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<ul class="widget-box--arrow-links">
|
||||
<li>
|
||||
<a href="" target="_blank">Learn more</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-boxes--item">
|
||||
<img src="https://via.placeholder.com/250x200" class="info-boxes--teaser-image">
|
||||
<h3 class="info-boxes--item-title">Box 2</h3>
|
||||
<div class="info-boxes--item-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<ul class="widget-box--arrow-links">
|
||||
<li>
|
||||
<a href="" target="_blank">Learn more</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-boxes--item">
|
||||
<img src="https://via.placeholder.com/250x200" class="info-boxes--teaser-image">
|
||||
<h3 class="info-boxes--item-title">Box 3</h3>
|
||||
<div class="info-boxes--item-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<ul class="widget-box--arrow-links">
|
||||
<li>
|
||||
<a href="" target="_blank">Learn more</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -1,16 +0,0 @@
|
||||
# Links
|
||||
|
||||
```
|
||||
<a href="#">A normal link</a>
|
||||
|
||||
<div>
|
||||
<a href="#" class="sort asc">Sort link</a>
|
||||
<a href="#" class="sort desc">Sort link</a>
|
||||
</div>
|
||||
|
||||
<a href="#" class="issue">#2999 open issue</a>
|
||||
<a href="#" class="issue closed">#2999 closed issue</a>
|
||||
|
||||
<a href="#" class="icon"> </a>
|
||||
<a href="#" class="icon-context"> </a>
|
||||
```
|
||||
@@ -1,100 +0,0 @@
|
||||
# Simple filters
|
||||
|
||||
|
||||
|
||||
```
|
||||
@full-width
|
||||
|
||||
<fieldset class="simple-filters--container">
|
||||
<a title="Close filter" class="simple-filters--close icon-context icon-close"></a>
|
||||
<legend>Simple Filters</legend>
|
||||
<ul class="simple-filters--filters">
|
||||
<li class="simple-filters--filter">
|
||||
<label for="filter-1" class="simple-filters--filter-name">Project</label>
|
||||
<div class="simple-filters--filter-value">
|
||||
<input id="filter-1" type="text" placeholder="select">
|
||||
</div>
|
||||
</li>
|
||||
<li class="simple-filters--filter">
|
||||
<label for="filter-2" class="simple-filters--filter-name">Status</label>
|
||||
<div class="simple-filters--filter-value">
|
||||
<select id="filter-2" class="simple-filters--select">
|
||||
<option value="=" label="Active" selected="selected">Active</option>
|
||||
<option value="!" label="Archived">Archived</option>
|
||||
<option value="!*" label="All">all</option>
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
<li class="simple-filters--filter">
|
||||
<label for="filter-3" class="simple-filters--filter-name">Name</label>
|
||||
<div class="simple-filters--filter-value">
|
||||
<select id="filter-3" class="simple-filters--select">
|
||||
<option value="=" label="Active" selected="selected">Active</option>
|
||||
<option value="!" label="Archived">Archived</option>
|
||||
<option value="!*" label="All">all</option>
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
<li class="simple-filters--controls">
|
||||
<a class="button -highlight -small" href="#">Apply</a>
|
||||
<a class="button -small -with-icon icon-undo" href="#">Clear</a>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
```
|
||||
|
||||
## Simple filters: With radio buttons
|
||||
|
||||
```
|
||||
@full-width
|
||||
|
||||
<fieldset class="simple-filters--container">
|
||||
<a title="Close filter" class="simple-filters--close icon-context icon-close"></a>
|
||||
<legend>Simple Filters</legend>
|
||||
<ul class="simple-filters--filters">
|
||||
<li class="simple-filters--filter -with-radio-buttons">
|
||||
<span class="form--radio-button-container">
|
||||
<input type="radio" name="period_type" class="form--radio-button">
|
||||
</span>
|
||||
<label class="simple-filters--filter-name form--label" title="From" for="from">
|
||||
This is a simple filter with radio button and label
|
||||
</label>
|
||||
</li>
|
||||
<li class="simple-filters--filter -with-radio-buttons">
|
||||
<span class="form--radio-button-container">
|
||||
<input type="radio" name="period_type" class="form--radio-button">
|
||||
</span>
|
||||
<label class="simple-filters--filter-name form--label" title="From" for="from">From</label>
|
||||
<div class="simple-filters--filter-value">
|
||||
<span class="form--text-field-container">
|
||||
<input type="text" name="from" id="from" class="-augmented-datepicker form--text-field">
|
||||
</span>
|
||||
</div>
|
||||
<label class="simple-filters--filter-name form--label" title="To" for="to">To</label>
|
||||
<div class="simple-filters--filter-value">
|
||||
<span class="form--text-field-container">
|
||||
<input type="text" name="to" class="-augmented-datepicker form--text-field">
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="simple-filters--filter -with-radio-buttons">
|
||||
<span class="form--radio-button-container">
|
||||
<input type="radio" name="period_type" value="1" class="form--radio-button" checked="checked">
|
||||
</span>
|
||||
<div class="simple-filters--filter-value">
|
||||
<span class="form--select-container">
|
||||
<select name="period" id="period" class="-narrow form--select">
|
||||
<option value="all">all time</option>
|
||||
<option value="today">today</option>
|
||||
<option value="yesterday">yesterday</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="simple-filters--controls">
|
||||
<a class="button -highlight -small" href="#">Apply</a>
|
||||
<a class="button -small -with-icon icon-undo" href="#">Clear</a>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
```
|
||||
@@ -1,9 +0,0 @@
|
||||
# Slide toggle checkbox
|
||||
|
||||
```
|
||||
<slide-toggle data-active="true"
|
||||
data-container-classes="advanced-filters--filter-value"
|
||||
data-input-name="v-filter-foo"
|
||||
data-filter-name="boolean">
|
||||
</slide-toggle>
|
||||
```
|
||||
@@ -1 +0,0 @@
|
||||
# Tabular
|
||||
@@ -1,3 +0,0 @@
|
||||
# User Content
|
||||
|
||||
##
|
||||
@@ -1,171 +0,0 @@
|
||||
# Work packages table
|
||||
|
||||
## with work packages
|
||||
|
||||
```
|
||||
<div class="generic-table--container work-package-table--container">
|
||||
<div class="generic-table--results-container">
|
||||
<table class="generic-table">
|
||||
<colgroup>
|
||||
<col opHighlightCol>
|
||||
<col opHighlightCol>
|
||||
<col opHighlightCol>
|
||||
<col opHighlightCol>
|
||||
<col opHighlightCol>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<div class="generic-table--sort-header-outer">
|
||||
<span class="generic-table--sort-header">
|
||||
ID
|
||||
<op-icon>
|
||||
<i class="dropdown-indicator icon-pulldown icon-small"></i>
|
||||
</op-icon>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="active-column">
|
||||
<div class="generic-table--sort-header-outer">
|
||||
<span class="generic-table--sort-header">
|
||||
Subject
|
||||
<op-icon>
|
||||
<i class="dropdown-indicator icon-pulldown icon-small"></i>
|
||||
</op-icon>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="generic-table--sort-header-outer">
|
||||
<span class="generic-table--sort-header">
|
||||
Type
|
||||
<op-icon>
|
||||
<i class="dropdown-indicator icon-pulldown icon-small"></i>
|
||||
</op-icon>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="generic-table--sort-header-outer">
|
||||
<span class="generic-table--sort-header">
|
||||
Status
|
||||
<op-icon>
|
||||
<i class="dropdown-indicator icon-pulldown icon-small"></i>
|
||||
</op-icon>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="generic-table--sort-header-outer">
|
||||
<span class="generic-table--sort-header">
|
||||
Priority
|
||||
<op-icon>
|
||||
<i class="dropdown-indicator icon-pulldown icon-small"></i>
|
||||
</op-icon>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="generic-table--sort-header-outer">
|
||||
<span class="generic-table--sort-header">
|
||||
Assignee
|
||||
<op-icon>
|
||||
<i class="dropdown-indicator icon-pulldown icon-small"></i>
|
||||
</op-icon>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="wp-table--configuration-modal--trigger">
|
||||
<div class="generic-table--sort-header-outer">
|
||||
<a href="" title="Configure view">
|
||||
<i class="icon-settings icon-small"></i>
|
||||
</a>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="wp-table--row issue -checked">
|
||||
<td class="id">
|
||||
<a href="#">1234</a>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-edit--display-field -editable">Lorem ipsum</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-edit--display-field -editable">User Story</span>
|
||||
<div class="active-column"></div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-edit--display-field -editable">In Progress</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-edit--display-field -editable">Normal</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-edit--display-field -editable">John Doe</span>
|
||||
</td>
|
||||
<td class="wp-table--context-menu-td">
|
||||
<span>
|
||||
<a href="#" class="wp-table--details-link wp-table-context-menu-icon" title="Open details view">
|
||||
<i class="icon icon-info2"></i>
|
||||
</a>
|
||||
<a href="#" class="wp-table-context-menu-link wp-table-context-menu-icon" title="Open context menu">
|
||||
<i class="icon icon-show-more-horizontal"></i>
|
||||
</a>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="wp-table--row issue">
|
||||
<td class="id">
|
||||
<a href="#">1234</a>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-edit--display-field -editable">Lorem ipsum</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-edit--display-field -editable">User Story</span>
|
||||
<div class="active-column"></div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-edit--display-field -editable">In Progress</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-edit--display-field -editable">Normal</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="inline-edit--display-field -editable">John Doe</span>
|
||||
</td>
|
||||
<td class="wp-table--context-menu-td">
|
||||
<span>
|
||||
<a href="#" class="wp-table--details-link wp-table-context-menu-icon" title="Open details view">
|
||||
<i class="icon icon-info2"></i>
|
||||
</a>
|
||||
<a href="#" class="wp-table-context-menu-link wp-table-context-menu-icon" title="Open context menu">
|
||||
<i class="icon icon-show-more-horizontal"></i>
|
||||
</a>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## with no work packages
|
||||
|
||||
```
|
||||
<div class="generic-table--container work-package-table--container" style="height:150px">
|
||||
<div class="generic-table--no-results-container">
|
||||
<i class="icon-info1"></i>
|
||||
<span class="generic-table--no-results-title">
|
||||
No work packages to display
|
||||
</span>
|
||||
<div class="generic-table--no-results-description">
|
||||
<p>Either none have been created or all work packages are filtered out.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
Reference in New Issue
Block a user