rails_design 0.0.1

data/app/assets/stylesheets/ui_tooltip/_mixins.scss

@@ -0,0 +1,46 @@
+@mixin arrow-down() {
+  width: 10px;
+  height: 10px;
+  border: $tip-arrow-size solid transparent;
+  border-top-color: var(--tip-color);
+}
+
+@mixin arrow-up() {
+  width: 0;
+  height: 0;
+  border: $tip-arrow-size solid transparent;
+  border-bottom-color: var(--tip-color);
+}
+
+@mixin arrow-left() {
+  width: 0;
+  height: 0;
+  border: $tip-arrow-size solid transparent;
+  border-right-color: var(--tip-color);
+}
+
+@mixin arrow-right() {
+  width: 0;
+  height: 0;
+  border: $tip-arrow-size solid transparent;
+  border-left-color: var(--tip-color);
+}
+
+@mixin base-effects() {
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.18s ease-out 0.18s;
+}
+
+@mixin no-effects() {
+  transition: none;
+}
+
+@mixin normalized-text() {
+  text-indent: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  text-shadow: none;
+  font-size: var(--tip-font-size);
+}

data/app/assets/stylesheets/ui_tooltip/_variables.scss

@@ -0,0 +1,5 @@
+$tip-bg: fade-out(#fff, 0.05) !default;
+$tip-font: invert($tip-bg);
+$tip-base-size: 12px !default;
+$tip-arrow-size: 0 !default;
+$tip-move: 4px !default;

data/app/assets/stylesheets/ui_tooltip/index.scss

@@ -0,0 +1,278 @@
+@import './variables';
+@import './mixins';
+
+:root {
+  --tip-color: #{$tip-bg};
+  --tip-font: #{$tip-font};
+  --tip-font-size: #{$tip-base-size};
+  --tip-move: #{$tip-move};
+}
+
+// IE 11 button bugfix
+button[aria-label] {
+  &[data-tip_pos] {
+    overflow: visible;
+  }
+}
+
+[aria-label] {
+  position: relative; // alt. absolute or fixed
+
+  // Fixing iOS Safari event issue.
+  // More info at: https://goo.gl/w8JF4W
+  cursor: pointer;
+
+  &:after {
+    @include base-effects();
+    @include normalized-text();
+
+    background: var(--tip-color);
+    border-radius: 2px;
+    color: var(--tip-font);
+    content: attr(aria-label);
+    padding: .5em 1em;
+    position: absolute;
+    white-space: nowrap;
+    box-shadow: 1px 1px 1px 1px #bababc;
+    z-index: 20;
+  }
+
+  &:before {
+    @include arrow-down();
+    @include base-effects();
+
+    background: var(--tip-color);
+    content: '';
+    position: absolute;
+    box-shadow: 1px 1px 0 0 #bababc;
+    z-index: 21;
+  }
+
+  &:hover,
+  &.tip-visible,
+  &:not([data-tip_nofocus]):focus {
+    &:before,
+    &:after {
+      opacity: 1;
+      pointer-events: none;
+    }
+  }
+
+  &.fa:after {
+    font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  &[data-tip_break] {
+    &:after {
+      white-space: pre;
+    }
+
+    &[data-tip_length] {
+      &:after {
+        white-space: pre-line;
+        word-break: break-word;
+      }
+    }
+  }
+
+  &[data-tip_blunt] {
+    &:before,
+    &:after {
+      @include no-effects();
+    }
+  }
+  &:after {
+    bottom: 100%;
+    left: 50%;
+    margin-bottom: $tip-arrow-size + 7px;
+    transform: translate(-50%, var(--tip-move));
+    transform-origin: top;
+  }
+  &:before {
+    bottom: 100%;
+    left: 50%;
+    transform: rotate(45deg) scale(1) translate(-50%, var(--tip-move));
+    transform-origin: top;
+    margin-bottom: -2px;
+  }
+  &:hover,
+  &.tip-visible {
+    &:after {
+      transform: translate(-50%, 0);
+    }
+    &:before {
+      transform: rotate(45deg) scale(1) translate(-50%, 0);
+    }
+  }
+
+  &.tip-up-left {
+    &:after {
+      bottom: 100%;
+      left: 0;
+      margin-bottom: $tip-arrow-size + 7px;
+      transform: translate(0, var(--tip-move));
+      transform-origin: top;
+    }
+    &:before {
+      bottom: 100%;
+      left: 5px;
+      transform: translate(0, var(--tip-move));
+      transform-origin: top;
+    }
+    &:hover,
+    &.tip-visible {
+      &:after {
+        transform: translate(0, 0);
+      }
+      &:before {
+        transform: translate(0, 0);
+      }
+    }
+  }
+
+  &.tip-up-right {
+    &:after {
+      bottom: 100%;
+      right: 0;
+      margin-bottom: $tip-arrow-size + 7px;
+      transform: translate(0, var(--tip-move));
+      transform-origin: top;
+    }
+    &:before {
+      bottom: 100%;
+      right: 5px;
+      transform: translate(0, var(--tip-move));
+      transform-origin: top;
+    }
+    &:hover,
+    &.tip-visible {
+      &:after {
+        transform: translate(0, 0);
+      }
+      &:before {
+        transform: translate(0, 0);
+      }
+    }
+  }
+
+  &.tip-down {
+    &:after {
+      left: 50%;
+      margin-top: $tip-arrow-size + 7px;
+      top: 100%;
+      transform: translate(-50%, calc(var(--tip-move) * -1));
+    }
+    &:before {
+      @include arrow-up();
+      left: 50%;
+      top: 100%;
+      transform: translate(-50%, calc(var(--tip-move) * -1));
+    }
+    &:hover,
+    &.tip-visible {
+      &:after {
+        transform: translate(-50%, 0);
+      }
+      &:before {
+        transform: translate(-50%, 0);
+      }
+    }
+  }
+
+  &.tip-down-left {
+    &:after {
+      left: 0;
+      margin-top: $tip-arrow-size + 7px;
+      top: 100%;
+      transform: translate(0, calc(var(--tip-move) * -1));
+    }
+    &:before {
+      @include arrow-up();
+      left: 5px;
+      top: 100%;
+      transform: translate(0, calc(var(--tip-move) * -1));
+    }
+    &:hover,
+    &.tip-visible {
+      &:after {
+        transform: translate(0, 0);
+      }
+      &:before {
+        transform: translate(0, 0);
+      }
+    }
+  }
+
+  &.tip-down-right {
+    &:after {
+      right: 0;
+      margin-top: $tip-arrow-size + 7px;
+      top: 100%;
+      transform: translate(0, calc(var(--tip-move) * -1));
+    }
+    &:before {
+      @include arrow-up();
+      right: 5px;
+      top: 100%;
+      transform: translate(0, calc(var(--tip-move) * -1));
+    }
+    &:hover,
+    &.tip-visible {
+      &:after {
+        transform: translate(0, 0);
+      }
+      &:before {
+        transform: translate(0, 0);
+      }
+    }
+  }
+
+  &.tip-left {
+    &:after {
+      margin-right: $tip-arrow-size + 7px;
+      right: 100%;
+      top: 50%;
+      transform: translate(var(--tip-move), -50%);
+    }
+    &:before {
+      @include arrow-right();
+      right: 100%;
+      top: 50%;
+      transform: translate(var(--tip-move), -50%);
+    }
+    &:hover, &.tip-visible {
+      &:after {
+        transform: translate(0, -50%);
+      }
+      &:before {
+        transform: translate(0, -50%);
+      }
+    }
+  }
+
+  &.tip-right {
+    &:after {
+      left: 100%;
+      margin-left: $tip-arrow-size + 7px;
+      top: 50%;
+      transform: translate(calc(var(--tip-move) * -1), -50%);
+    }
+    &:before {
+      @include arrow-left();
+      left: 100%;
+      top: 50%;
+      transform: translate(calc(var(--tip-move) * -1), -50%);
+    }
+    &:hover,
+    &.tip-visible {
+      &:after {
+        transform: translate(0, -50%);
+      }
+
+      &:before {
+        transform: translate(0, -50%);
+      }
+    }
+  }
+
+}

data/app/controllers/design/base_controller.rb

@@ -0,0 +1,4 @@
+module Design
+  class BaseController < BaseController
+  end
+end

data/app/controllers/design/home_controller.rb

@@ -0,0 +1,13 @@
+module Design
+  class HomeController < BaseController
+
+    def swipe
+      @videos = [
+        'http://qiniu-xinshengyin.work.design/01.mp4',
+        'http://qiniu-xinshengyin.work.design/02.mp4',
+        'http://qiniu-xinshengyin.work.design/03.mp4'
+      ]
+    end
+
+  end
+end

data/app/views/design/home/swipe.html.erb

@@ -0,0 +1,7 @@
+<div data-controller="slide-y" data-slide-y-debug-value="false" class="slide-y">
+<% @videos.each_with_index do |url, index| %>
+  <figure data-action="touchmove->slide-y#move:passive touchend->slide-y#end:passive" data-index="<%= index %>" style="z-index: <%= index == 0 ? 0 : -2 %>">
+    <%= video_tag(url, controls: true, preload: 'auto') %>
+  </figure>
+<% end %>
+</div>

data/app/views/layouts/ui/base.html.erb

@@ -0,0 +1,5 @@
+<%= render layout: 'layouts/phone_head' do %>
+  <body>
+    <%= yield %>
+  </body>
+<% end %>

data/config/routes.rb

@@ -0,0 +1,11 @@
+Rails.application.routes.draw do
+
+  namespace :design, defaults: { business: 'design' } do
+
+    controller :home do
+      get :swipe
+    end
+
+  end
+
+end

data/lib/rails_design/config.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require 'active_support/configurable'
+
+module RailsDesign #:nodoc:
+  include ActiveSupport::Configurable
+
+end

data/lib/rails_design/engine.rb

@@ -0,0 +1,5 @@
+module RailsDesign
+  class Engine < ::Rails::Engine
+
+  end
+end

data/lib/rails_design.rb

@@ -0,0 +1,2 @@
+require 'rails_design/config'
+require 'rails_design/engine'

metadata

@@ -0,0 +1,181 @@
+--- !ruby/object:Gem::Specification
+name: rails_design
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- qinmingyuan
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2021-09-10 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Description of RailsUi.
+email:
+- mingyuan0715@foxmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- Rakefile
+- app/assets/images/image-square.png
+- app/assets/images/logo.png
+- app/assets/javascripts/default_form/datetime.js
+- app/assets/javascripts/default_form/default_valid.js
+- app/assets/javascripts/default_form/field.js
+- app/assets/javascripts/default_form/index.js
+- app/assets/javascripts/default_form/valid_weui.js
+- app/assets/javascripts/rails_design/attachment.js
+- app/assets/javascripts/rails_design/cable.js
+- app/assets/javascripts/rails_design/dataset.js
+- app/assets/javascripts/rails_design/index.js
+- app/assets/javascripts/rails_design/stimulus.js
+- app/assets/javascripts/rails_design/turbo.js
+- app/assets/javascripts/stimulus_com/checkbox.js
+- app/assets/javascripts/stimulus_com/choice.js
+- app/assets/javascripts/stimulus_com/common.js
+- app/assets/javascripts/stimulus_com/count_down.js
+- app/assets/javascripts/stimulus_com/former.js
+- app/assets/javascripts/stimulus_com/hover.js
+- app/assets/javascripts/stimulus_com/index.js
+- app/assets/javascripts/stimulus_com/input.js
+- app/assets/javascripts/stimulus_com/menu.js
+- app/assets/javascripts/stimulus_com/modal.js
+- app/assets/javascripts/stimulus_com/modal_show.js
+- app/assets/javascripts/stimulus_com/navbar.js
+- app/assets/javascripts/stimulus_com/notice.js
+- app/assets/javascripts/stimulus_com/picture.js
+- app/assets/javascripts/stimulus_com/show.js
+- app/assets/javascripts/stimulus_com/showcase.js
+- app/assets/javascripts/stimulus_com/slide.js
+- app/assets/javascripts/stimulus_com/slide_y.js
+- app/assets/javascripts/stimulus_com/sortable.js
+- app/assets/javascripts/stimulus_com/sticky.js
+- app/assets/javascripts/stimulus_com/swipe.js
+- app/assets/javascripts/stimulus_com/taxon.js
+- app/assets/javascripts/stimulus_com/time.js
+- app/assets/javascripts/stimulus_com/touch.js
+- app/assets/javascripts/stimulus_com/tree.js
+- app/assets/javascripts/stimulus_com/tree_remote.js
+- app/assets/javascripts/stimulus_com/typer.js
+- app/assets/javascripts/stimulus_com/visit.js
+- app/assets/javascripts/stimulus_phone/index.js
+- app/assets/javascripts/stimulus_phone/qq_map.js
+- app/assets/javascripts/stimulus_phone/search.js
+- app/assets/javascripts/stimulus_phone/wechat.js
+- app/assets/javascripts/stimulus_phone/weui-actionsheet.js
+- app/assets/javascripts/stimulus_phone/weui-datepicker.js
+- app/assets/javascripts/stimulus_phone/weui-dialog.js
+- app/assets/javascripts/stimulus_phone/weui-picker.js
+- app/assets/javascripts/stimulus_phone/wxpay.js
+- app/assets/stylesheets/app.scss
+- app/assets/stylesheets/ext_bulma/base/_all.scss
+- app/assets/stylesheets/ext_bulma/base/_choices.scss
+- app/assets/stylesheets/ext_bulma/base/_global.scss
+- app/assets/stylesheets/ext_bulma/base/_main.scss
+- app/assets/stylesheets/ext_bulma/components/_all.scss
+- app/assets/stylesheets/ext_bulma/components/_box.scss
+- app/assets/stylesheets/ext_bulma/components/_breadcrumb.scss
+- app/assets/stylesheets/ext_bulma/components/_card.scss
+- app/assets/stylesheets/ext_bulma/components/_level.scss
+- app/assets/stylesheets/ext_bulma/components/_media.scss
+- app/assets/stylesheets/ext_bulma/components/_menu.scss
+- app/assets/stylesheets/ext_bulma/components/_pagination.scss
+- app/assets/stylesheets/ext_bulma/components/_panel.scss
+- app/assets/stylesheets/ext_bulma/elements/_all.scss
+- app/assets/stylesheets/ext_bulma/elements/_button.scss
+- app/assets/stylesheets/ext_bulma/elements/_fa.scss
+- app/assets/stylesheets/ext_bulma/elements/_image.scss
+- app/assets/stylesheets/ext_bulma/elements/_table.scss
+- app/assets/stylesheets/ext_bulma/elements/_title.scss
+- app/assets/stylesheets/ext_bulma/expand/_all.scss
+- app/assets/stylesheets/ext_bulma/expand/_slide.scss
+- app/assets/stylesheets/ext_bulma/expand/_sortable.scss
+- app/assets/stylesheets/ext_bulma/form/_all.scss
+- app/assets/stylesheets/ext_bulma/form/_checkbox.scss
+- app/assets/stylesheets/ext_bulma/form/_file.scss
+- app/assets/stylesheets/ext_bulma/form/_select.scss
+- app/assets/stylesheets/ext_bulma/form/_tools.scss
+- app/assets/stylesheets/ext_bulma/grid/_all.scss
+- app/assets/stylesheets/ext_bulma/grid/_columns.scss
+- app/assets/stylesheets/ext_bulma/helpers/_all.scss
+- app/assets/stylesheets/ext_bulma/helpers/_dot.scss
+- app/assets/stylesheets/ext_bulma/helpers/_drawable.scss
+- app/assets/stylesheets/ext_bulma/helpers/_grid.scss
+- app/assets/stylesheets/ext_bulma/index.scss
+- app/assets/stylesheets/ext_bulma/layout/_all.scss
+- app/assets/stylesheets/ext_bulma/layout/_footer.scss
+- app/assets/stylesheets/ext_bulma/layout/_level.scss
+- app/assets/stylesheets/ext_choices/index.scss
+- app/assets/stylesheets/ext_font/index.scss
+- app/assets/stylesheets/ext_weui/index.scss
+- app/assets/stylesheets/ext_weui/widget/_actionsheet.scss
+- app/assets/stylesheets/ext_weui/widget/_article.scss
+- app/assets/stylesheets/ext_weui/widget/_button.scss
+- app/assets/stylesheets/ext_weui/widget/_cell.scss
+- app/assets/stylesheets/ext_weui/widget/_form.scss
+- app/assets/stylesheets/ext_weui/widget/_half_screen_dialog.scss
+- app/assets/stylesheets/ext_weui/widget/_icon.scss
+- app/assets/stylesheets/ext_weui/widget/_media.scss
+- app/assets/stylesheets/ext_weui/widget/_panel.scss
+- app/assets/stylesheets/ext_weui/widget/_preview.scss
+- app/assets/stylesheets/ext_weui/widget/_search.scss
+- app/assets/stylesheets/ext_weui/widget/_tab.scss
+- app/assets/stylesheets/ext_weui/widget/_tabbar.scss
+- app/assets/stylesheets/ext_weui/widget/_uploader.scss
+- app/assets/stylesheets/phone.scss
+- app/assets/stylesheets/slide/index.scss
+- app/assets/stylesheets/ui_tooltip/_mixins.scss
+- app/assets/stylesheets/ui_tooltip/_variables.scss
+- app/assets/stylesheets/ui_tooltip/index.scss
+- app/controllers/design/base_controller.rb
+- app/controllers/design/home_controller.rb
+- app/views/design/home/swipe.html.erb
+- app/views/layouts/ui/base.html.erb
+- config/routes.rb
+- lib/rails_design.rb
+- lib/rails_design/config.rb
+- lib/rails_design/engine.rb
+homepage: https://github.com/work-design/rails_design
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/work-design/rails_design
+  source_code_uri: https://github.com/work-design/rails_design
+  changelog_uri: https://github.com/work-design/rails_design
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.2.22
+signing_key: 
+specification_version: 4
+summary: Work Design UI Project
+test_files: []