tao_ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 0d4d901b1597816e397750ba39e8ef3a0e632318
+  data.tar.gz: 44086ffcac375f165bb49f5538ebb07fc041fa56
+SHA512:
+  metadata.gz: bd5083c5fb220186472ce6219971275b860a887642ba562e38d8b82bee0478418d986205d6f0fd98aff4aa342279fdf707fd2d6b90ae3f9f5c4c668978f49321
+  data.tar.gz: d8e3171e35d58959cb777404aa167c6cff5292c94fe0c14778d70f6f2d41441cfe62aba9eef2a45424aafa56ee0021f7852823192ca41c2cb6bfda374f13ca85

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 彩程设计
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,20 @@
+# Tao UI
+
+Tao UI provide basic global styles and related tools for [Tao](https://github.com/mycolorway/tao_on_rails) project.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'tao_ui'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install tao_ui
+```

data/Rakefile

@@ -0,0 +1,20 @@
+require "bundler/gem_tasks"
+require "rake/testtask"
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'TaoUi'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.libs << "lib"
+  t.pattern = 'test/**/*_test.rb'
+end
+
+task default: :test

data/lib/assets/icons/Loading.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
+    <title>Loading</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="zhiren_icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Main" fill="#4A4A4A">
+            <rect id="Path" opacity="0.5" x="9" y="0" width="2" height="6" rx="1"></rect>
+            <rect id="Path" opacity="0.600000024" transform="translate(14.828427, 4.828427) rotate(45.000000) translate(-14.828427, -4.828427) " x="13.8284271" y="1.82842712" width="2" height="6" rx="1"></rect>
+            <rect id="Path" opacity="0.400000006" transform="translate(4.828427, 4.828427) scale(-1, 1) rotate(45.000000) translate(-4.828427, -4.828427) " x="3.82842712" y="1.82842712" width="2" height="6" rx="1"></rect>
+            <rect id="Path" opacity="0.200000003" transform="translate(4.828427, 14.828427) rotate(45.000000) translate(-4.828427, -14.828427) " x="3.82842712" y="11.8284271" width="2" height="6" rx="1"></rect>
+            <rect id="Rectangle-24" opacity="0.300000012" x="0" y="9" width="6" height="2" rx="1"></rect>
+            <rect id="Rectangle-24" opacity="0.699999988" x="14" y="9" width="6" height="2" rx="1"></rect>
+            <rect id="Rectangle-24" opacity="0.05" transform="translate(14.828427, 14.828427) rotate(45.000000) translate(-14.828427, -14.828427) " x="11.8284271" y="13.8284271" width="6" height="2" rx="1"></rect>
+            <rect id="Combined-Shape" opacity="0.100000001" x="9" y="14" width="2" height="6" rx="1"></rect>
+        </g>
+    </g>
+</svg>

data/lib/assets/javascripts/tao/ui/icons/basic.coffee

@@ -0,0 +1,4 @@
+Tao.icons += '''
+  <symbol id="icon-loading" viewBox="0 0 20 20" width="100%" height="100%"><defs/><g class="zhiren_icon" stroke="none" stroke-width="1" fill-rule="evenodd"><g class="Main"><rect class="Path" opacity="0.5" x="9" y="0" width="2" height="6" rx="1"/><rect class="Path" opacity="0.600000024" transform="translate(14.828427, 4.828427) rotate(45.000000) translate(-14.828427, -4.828427) " x="13.8284271" y="1.82842712" width="2" height="6" rx="1"/><rect class="Path" opacity="0.400000006" transform="translate(4.828427, 4.828427) scale(-1, 1) rotate(45.000000) translate(-4.828427, -4.828427) " x="3.82842712" y="1.82842712" width="2" height="6" rx="1"/><rect class="Path" opacity="0.200000003" transform="translate(4.828427, 14.828427) rotate(45.000000) translate(-4.828427, -14.828427) " x="3.82842712" y="11.8284271" width="2" height="6" rx="1"/><rect class="Rectangle-24" opacity="0.300000012" x="0" y="9" width="6" height="2" rx="1"/><rect class="Rectangle-24" opacity="0.699999988" x="14" y="9" width="6" height="2" rx="1"/><rect class="Rectangle-24" opacity="0.05" transform="translate(14.828427, 14.828427) rotate(45.000000) translate(-14.828427, -14.828427) " x="11.8284271" y="13.8284271" width="6" height="2" rx="1"/><rect class="Combined-Shape" opacity="0.100000001" x="9" y="14" width="2" height="6" rx="1"/></g></g></symbol>
+
+'''

data/lib/assets/javascripts/tao/ui/icons/index.coffee

@@ -0,0 +1,20 @@
+#= require_self
+#= require ./basic
+
+Tao.ui =
+
+  icons: ''
+
+  iconTag: (name, attributes={}) ->
+    $("<svg><use xlink:href=\"#icon-#{name}\"/></svg>")
+      .attr attributes
+      .addClass "icon icon-#{name}"
+
+Tao.Application.initializer 'icons', (app) ->
+  app.on 'page-load', (page) ->
+    return if $('#tao-icons').length > 0
+    document.body.insertAdjacentHTML 'afterbegin', """
+    <svg id="tao-icons" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
+      #{Tao.ui.icons}
+    </svg>
+    """

data/lib/assets/javascripts/tao/ui/index.coffee

@@ -0,0 +1,4 @@
+#= require_self
+#= require ./icons
+
+window.Tao ||= {}

data/lib/assets/javascripts/tao/ui/mobile/index.coffee

@@ -0,0 +1,4 @@
+#= require_self
+#= require ../icons
+
+window.Tao ||= {}

data/lib/assets/stylesheets/tao/ui/_custom.scss

@@ -0,0 +1 @@
+// override this file in project

data/lib/assets/stylesheets/tao/ui/_globals.scss

@@ -0,0 +1,3 @@
+@import 'tao/ui/custom';
+@import 'tao/ui/variables';
+@import 'tao/ui/mixins';

data/lib/assets/stylesheets/tao/ui/_mixins.scss

@@ -0,0 +1,2 @@
+@import 'tao/ui/mixins/base';
+@import 'tao/ui/mixins/buttons';

data/lib/assets/stylesheets/tao/ui/_variables.scss

@@ -0,0 +1,3 @@
+@import 'tao/ui/variables/base';
+@import 'tao/ui/variables/buttons';
+@import 'tao/ui/variables/tables';

data/lib/assets/stylesheets/tao/ui/basic.scss

@@ -0,0 +1,154 @@
+@import 'tao/ui/globals';
+
+html {
+  box-sizing: border-box;
+  height: 100%;
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -ms-overflow-style: scrollbar;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: $font-size;
+  font-family: "Helvetica Neue", "PingFang SC", "Microsoft Yahei", 微软雅黑, STXihei, 华文细黑, sans-serif;
+  line-height: $default-line-height;
+  color: $text-color;
+  fill: $text-color;
+  background-color: $white-color;
+}
+
+small,
+.small {
+  font-size: $font-size-s;
+  font-weight: normal;
+}
+
+.x-small {
+  font-size: $font-size-xs;
+  font-weight: normal;
+}
+
+big,
+.big,
+.large {
+  font-size: $font-size-l;
+}
+
+mark,
+.mark {
+  padding: 0.2em;
+  background-color: yellow;
+}
+
+a {
+  color: $link-color;
+  fill: $link-color;
+  text-decoration: none;
+  background-color: transparent; // Remove the gray background on active links in IE 10.
+  -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
+
+  @if not $mobile {
+    &:hover {
+      color: $link-hover-color;
+    }
+  }
+
+  &.warn {
+    color: $red-color;
+    fill: $red-color;
+
+    @if not $mobile {
+      &:hover {
+        color: lighten($red-color, 10%);
+        fill: lighten($red-color, 10%);
+      }
+    }
+  }
+
+  &.disabled {
+    color: $lightest-grey-color;
+    fill: $lightest-grey-color;
+    cursor: not-allowed;;
+  }
+}
+
+a:not([href]):not([tabindex]) {
+  color: inherit;
+  fill: inherit;
+
+  @if not $mobile {
+    &:hover {
+      color: inherit;
+      fill: inherit;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+  }
+}
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  margin-top: 1.5em;
+  margin-bottom: 1em;
+  line-height: $default-line-height;
+  color: $black-color;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+h1, .h1 { font-size: $font-size-h1; }
+h2, .h2 { font-size: $font-size-h2; }
+h3, .h3 { font-size: $font-size-h3; }
+h4, .h4 { font-size: $font-size-h4; }
+h5, .h5 { font-size: $font-size-h5; }
+h6, .h6 { font-size: $font-size-h6; }
+
+
+hr {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border: 0;
+  border-top: 1px solid $border-color;
+}
+
+p {
+  line-height: 2.0;
+  margin: 0 0 1em 0;
+}
+
+ul, ol {
+  margin: 0 0 1em 0;
+  padding: 0 0 0 2em;
+
+  li {
+    line-height: 2.0
+  }
+
+  ul, ol {
+    margin-bottom: 0;
+  }
+}
+
+blockquote {
+  margin: 0 0 1em 0;
+  padding: 0.5em 1em;
+  color: $light-grey-color;
+  border-left: 0.25em solid $border-color;
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}

data/lib/assets/stylesheets/tao/ui/buttons.scss

@@ -0,0 +1,63 @@
+@import 'tao/ui/globals';
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: $button-padding;
+  font-size: $button-font-size;
+  line-height: $button-line-height;
+  border-radius: $border-radius-s;
+  cursor: pointer;
+  text-decoration: none;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  user-select: none;
+  transition: background 200ms, color 200ms, fill 200ms, border-color 200ms, box-shadow 200ms;
+  @include button-colors($default-button-colors);
+
+  .icon {
+    width: 1em;
+    height: 1em;
+    margin: 0 0.4em 0 0;
+  }
+
+  &:focus, &.focus {
+    outline: none;
+  }
+
+  @if not $mobile {
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &.disabled,
+  &[disabled] {
+    cursor: not-allowed;
+  }
+
+  &.button-warning {
+    @include button-colors($warning-button-colors);
+  }
+
+  &.button-primary {
+    @include button-colors($primary-button-colors);
+  }
+
+  &.button-primary-warning {
+    @include button-colors($primary-warning-button-colors);
+  }
+
+  &.button-small {
+    padding: $small-button-padding;
+    font-size: $small-button-font-size;
+    line-height: $small-button-line-height;
+  }
+
+  &.button-block {
+    display: flex;
+    width: 100%;
+  }
+}

data/lib/assets/stylesheets/tao/ui/code.scss

@@ -0,0 +1,56 @@
+@import 'tao/ui/globals';
+
+// Inline and block code styles
+code,
+kbd,
+pre,
+samp {
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+code {
+  padding: 0.2em 0.4em;
+  font-size: 85%;
+  background-color: $lighter-grey-bg-color;
+  border-radius: $border-radius;
+  word-wrap: break-word;
+
+  a > & {
+    padding: 0;
+    color: inherit;
+    background-color: inherit;
+  }
+}
+
+kbd {
+  padding: 0.2em 0.4em;
+  font-size: 85%;
+  background-color: $lighter-grey-bg-color;
+  border-radius: $border-radius;
+
+  kbd {
+    padding: 0;
+    font-size: 100%;
+  }
+}
+
+pre {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 1em;
+  padding: 1.5em;
+  font-size: 85%;
+  background-color: $lighter-grey-bg-color;
+  overflow: auto;
+  border-radius: $border-radius;
+  white-space: pre-wrap;
+
+  code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    background-color: transparent;
+    border-radius: 0;
+    word-wrap: normal;
+  }
+}

data/lib/assets/stylesheets/tao/ui/icons.scss

@@ -0,0 +1,18 @@
+@import 'tao/ui/globals';
+
+@keyframes spin {
+  from { transform:rotate(0deg); }
+  to { transform:rotate(360deg); }
+}
+
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  fill: inherit;
+
+  &.spin {
+    animation: spin 1s infinite linear;
+  }
+}

data/lib/assets/stylesheets/tao/ui/index.scss

@@ -0,0 +1,6 @@
+//= require normalize
+//= require ./icons
+//= require ./basic
+//= require ./code
+//= require ./buttons
+//= require ./tables

data/lib/assets/stylesheets/tao/ui/mixins/_base.scss

@@ -0,0 +1,6 @@
+
+@mixin truncate-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

data/lib/assets/stylesheets/tao/ui/mixins/_buttons.scss

@@ -0,0 +1,42 @@
+
+@mixin button-colors($colors) {
+  $normal-colors: map-get($colors, 'normal');
+  background: map-get($normal-colors, 'bg');
+  border: 1px solid map-get($normal-colors, 'border');
+  color: map-get($normal-colors, 'text');
+  fill: map-get($normal-colors, 'text');
+
+
+  @if not $mobile {
+    &:focus, &.focus {
+      box-shadow: 0px 0px 0 2px rgba(map-get($normal-colors, 'border'), 0.5);
+    }
+    
+    &:hover {
+      $hover-colors: map-get($colors, 'hover');
+      background: map-get($hover-colors, 'bg');
+      border: 1px solid map-get($hover-colors, 'border');
+      color: map-get($hover-colors, 'text');
+      fill: map-get($hover-colors, 'text');
+    }
+  }
+
+  &:active {
+    $active-colors: map-get($colors, 'active');
+    background: map-get($active-colors, 'bg');
+    border: 1px solid map-get($active-colors, 'border');
+    color: map-get($active-colors, 'text');
+    fill: map-get($active-colors, 'text');
+    box-shadow: 0px 0px 0 2px rgba(map-get($active-colors, 'border'), 0.5);
+  }
+
+  &.disabled,
+  &[disabled] {
+    $disable-colors: map-get($colors, 'disable');
+    background: map-get($disable-colors, 'bg');
+    border: 1px solid map-get($disable-colors, 'border');
+    color: map-get($disable-colors, 'text');
+    fill: map-get($disable-colors, 'text');
+    box-shadow: none;
+  }
+}

data/lib/assets/stylesheets/tao/ui/mobile/_custom.scss

@@ -0,0 +1 @@
+// override this file in project

data/lib/assets/stylesheets/tao/ui/mobile/_globals.scss

@@ -0,0 +1,3 @@
+@import 'tao/ui/mobile/custom';
+@import 'tao/ui/mobile/variables';
+@import 'tao/ui/mobile/mixins';

data/lib/assets/stylesheets/tao/ui/mobile/_mixins.scss

@@ -0,0 +1,2 @@
+@import 'tao/ui/mobile/mixins/base';
+@import 'tao/ui/mobile/mixins/buttons';

data/lib/assets/stylesheets/tao/ui/mobile/_variables.scss

@@ -0,0 +1,3 @@
+@import 'tao/ui/mobile/variables/base';
+@import 'tao/ui/mobile/variables/buttons';
+@import 'tao/ui/mobile/variables/tables';

data/lib/assets/stylesheets/tao/ui/mobile/basic.scss

@@ -0,0 +1,24 @@
+@import 'tao/ui/mobile/globals';
+@import 'tao/ui/basic';
+
+// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
+//
+// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
+// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
+// However, they DO support removing the click delay via `touch-action: manipulation`.
+// See:
+// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
+// * http://caniuse.com/#feat=css-touch-action
+// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
+
+a,
+area,
+button,
+[role="button"],
+input,
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}

data/lib/assets/stylesheets/tao/ui/mobile/buttons.scss

@@ -0,0 +1,2 @@
+@import 'tao/ui/mobile/globals';
+@import 'tao/ui/buttons';

data/lib/assets/stylesheets/tao/ui/mobile/code.scss

@@ -0,0 +1,2 @@
+@import 'tao/ui/mobile/globals';
+@import 'tao/ui/code';

data/lib/assets/stylesheets/tao/ui/mobile/icons.scss

@@ -0,0 +1,2 @@
+@import 'tao/ui/mobile/globals';
+@import 'tao/ui/icons';

data/lib/assets/stylesheets/tao/ui/mobile/index.scss

@@ -0,0 +1,6 @@
+//= require normalize
+//= require ./icons
+//= require ./basic
+//= require ./code
+//= require ./buttons
+//= require ./tables

data/lib/assets/stylesheets/tao/ui/mobile/mixins/_base.scss

@@ -0,0 +1 @@
+@import 'tao/ui/mixins/base';

data/lib/assets/stylesheets/tao/ui/mobile/mixins/_buttons.scss

@@ -0,0 +1 @@
+@import 'tao/ui/mixins/buttons';

data/lib/assets/stylesheets/tao/ui/mobile/tables.scss

@@ -0,0 +1,2 @@
+@import 'tao/ui/mobile/globals';
+@import 'tao/ui/tables';

data/lib/assets/stylesheets/tao/ui/mobile/variables/_base.scss

@@ -0,0 +1,11 @@
+
+$mobile: true !default;
+
+$font-size-h1: 1.375rem !default;
+$font-size-h2: 1.25rem !default;
+$font-size-h3: 1.125rem !default;
+$font-size-h4: 1rem !default;
+$font-size-h5: 0.875rem !default;
+$font-size-h6: 0.75rem !default;
+
+@import 'tao/ui/variables/base';

data/lib/assets/stylesheets/tao/ui/mobile/variables/_buttons.scss

@@ -0,0 +1 @@
+@import 'tao/ui/variables/buttons';

data/lib/assets/stylesheets/tao/ui/mobile/variables/_tables.scss

@@ -0,0 +1 @@
+@import 'tao/ui/variables/tables';

data/lib/assets/stylesheets/tao/ui/tables.scss

@@ -0,0 +1,46 @@
+@import 'tao/ui/globals';
+
+table.table {
+  width: 100%;
+  max-width: 100%;
+  border-collapse: collapse;
+
+  th {
+    border-top: 1px solid $table-border-color;
+    border-bottom: 1px solid $table-border-color;
+    padding: 0.875rem 0.625rem;
+    font-size: $font-size-xs;
+    font-weight: normal;
+    line-height: 1.125;
+    color: $lighter-grey-color;
+    text-align: left;
+  }
+
+  td {
+    border-bottom: 1px solid $table-border-color;
+    padding: 1.125rem 0.625rem;
+    line-height: 1.125;
+    text-align: left;
+  }
+
+  th.align-left,
+  td.align-left {
+    text-align: left;
+  }
+
+  th.align-right,
+  td.align-right {
+    text-align: right;
+  }
+
+  th.align-center,
+  td.align-center {
+    text-align: center;
+  }
+
+  @if not $mobile {
+    tbody tr:hover {
+      background-color: $table-row-hover-color;
+    }
+  }
+}