From dfcd9c592efcd6e2afd9c341342e9aa792a5d221 Mon Sep 17 00:00:00 2001 From: Enoch Tamulonis Date: Wed, 3 Dec 2025 11:31:10 +0700 Subject: [PATCH 1/3] new changes --- .DS_Store | Bin 0 -> 8196 bytes app/assets/stylesheets/app_ui_settings.css | 53 -------- app/assets/stylesheets/application.css | 123 +++++++++++++++++- app/assets/stylesheets/colors.css | 10 -- .../stylesheets/internal_app_color_scheme.css | 13 -- app/assets/stylesheets/ui_components.css | 32 ++++- app/controllers/application_controller.rb | 2 +- app/controllers/ui_components_controller.rb | 1 + app/controllers/ui_libraries_controller.rb | 16 +++ app/helpers/application_helper.rb | 3 + app/models/ui_library.rb | 2 + app/services/css_bundler_service.rb | 6 +- app/views/color_scheme/show.html.erb | 33 +++++ app/views/layouts/_navbar.html.erb | 9 +- app/views/layouts/application.html.erb | 2 +- app/views/ui_components/index.html.erb | 33 ----- app/views/ui_libraries/new.html.erb | 11 ++ config/routes.rb | 3 +- .../20251202095228_create_ui_libraries.rb | 9 ++ db/schema.rb | 19 +++ test/fixtures/ui_libraries.yml | 7 + test/models/ui_library_test.rb | 7 + 22 files changed, 266 insertions(+), 128 deletions(-) create mode 100644 .DS_Store delete mode 100644 app/assets/stylesheets/app_ui_settings.css delete mode 100644 app/assets/stylesheets/colors.css delete mode 100644 app/assets/stylesheets/internal_app_color_scheme.css create mode 100644 app/controllers/ui_libraries_controller.rb create mode 100644 app/models/ui_library.rb create mode 100644 app/views/color_scheme/show.html.erb create mode 100644 app/views/ui_libraries/new.html.erb create mode 100644 db/migrate/20251202095228_create_ui_libraries.rb create mode 100644 db/schema.rb create mode 100644 test/fixtures/ui_libraries.yml create mode 100644 test/models/ui_library_test.rb diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..fcac132709cf810b50db0f527d84942b18b52709 GIT binary patch literal 8196 zcmeHMziSjh6n>LCE(fAq5lsSu+X%4{4zv(|aE6NzY{Y=52wpCCUc~#c#6(a*5BviX ziH(rLN(-?H(LxKgv51AeAeNRvf`ygeo0+?PvzxU@AqmdF?mOmtZ@zE7o1M*Eh)9hu z)QUtSM3l$Hv9JfXEgIu|CE9@PIfbZDPt8VgYNpc)6PdolJK!Dg4tNK=1Kxq1;sD;+ z-0~^!eS`YDcfdRFUpm11Lx788$;PgUdh5VV9{~`v=++IN3;Y2wu(4!g*F+#_%9J9S zQe}@A%9Nu&uz4jLyC#})QugqnEVHsF6s6fQexTDyl}z+^?|^q8=>VVIvviaibd%_Fus9O8tn1XEG}qc=~<2*!QI|*fVJVWRu9H;$-VgXRdBv)eHLR#1!*~s4i&PF0jkAU-J#K5 zzvR99p+9F`Bl+T(!$TLCCqqrlbgT7k5y|!W*Xet9E%ni86(v!ZkLfgDC+6(r#r+W? z`PScVJ`jAUle0^r4&P*j`EppTcz*RPXWZ}e#k)8zxsM;)+p_zJGlo=u8rHB`yTf9Z!v~ckd`BL zklJ7!yQO7}&=EfWPo)3;zgwo`b$SQ91KV&wWy@3LaTMCKbz%rUYX`V0xVUj%*F;@{ zn?8;s>f<1u{a?=r=NkY1XD9so K->iondH(}J6GlG( literal 0 HcmV?d00001 diff --git a/app/assets/stylesheets/app_ui_settings.css b/app/assets/stylesheets/app_ui_settings.css deleted file mode 100644 index 39f5bbc..0000000 --- a/app/assets/stylesheets/app_ui_settings.css +++ /dev/null @@ -1,53 +0,0 @@ - -/* UI for AppUISettings page */ - -.switch-type-section { - display: flex; - gap: 16px; - margin-top: 16px; -} - -/* Manual select partial styling */ - -.internal-app-color-scheme { - display: flex; - gap: 16px; - flex-wrap: wrap; - margin-top: 32px; - - .color-scheme-column { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - - h4 { - font-size: 32px; - } - - p { - font-size: 20px; - } - - .preview { - height: 32px; - } - } -} - -/* Auto gen color scheme styling */ - -.auto-gen-container { - margin-top: 16px; - - .color-pallete-container { - margin-top: 16px; - display: flex; - flex-direction: column; - gap: 16px; - - h2 { - font-size: 36px; - } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 29915f7..37b080c 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -33,6 +33,20 @@ a { /* Default reset CSS - End */ +/* Apply styling for internal app: Meaning our app's UI not related to the users UI library */ + +h1, h2, h3, h4, h5, h6 { + color: var(--internal-app-header); +} + +p, span, a, svg, label { + color: var(--internal-app-text); +} + +body { + background-color: var(--internal-app-background); +} + .large-container { max-width: var(--large-screen-size); min-height: 100vh; @@ -107,8 +121,7 @@ a { top: 0px; left: 0px; z-index: 1000; - border-bottom: 0.5px hsl(from var(--internal-app-background) h s calc(l + 40)) solid; - box-shadow: var(--box-shadow-h-offset) var(--box-shadow-v-offset) var(--box-shadow-blur) hsl(from var(--internal-app-background) h s calc(l + 20)); + box-shadow: var(--box-shadow-h-offset) var(--box-shadow-v-offset) var(--box-shadow-blur) hsl(from var(--internal-app-background) h s calc(l + 5)); display: flex; .navbar-content { @@ -125,8 +138,8 @@ a { font-size: 24px; } - .ui-settings-link { - width: 32px; + .ui-library-name { + font-size: 24px; margin-left: auto; } @@ -144,4 +157,106 @@ a { 100% { transform: rotate(359deg); } +} + + +/* UI for AppUISettings page */ + +.switch-type-section { + display: flex; + gap: 16px; + margin-top: 16px; +} + +/* Manual select partial styling */ + +.internal-app-color-scheme { + display: flex; + gap: 16px; + flex-wrap: wrap; + margin-top: 32px; + + .color-scheme-column { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + + h4 { + font-size: 32px; + } + + p { + font-size: 20px; + } + + .preview { + height: 32px; + } + } +} + +/* Auto gen color scheme styling */ + +.auto-gen-container { + margin-top: 16px; + + .color-pallete-container { + margin-top: 16px; + display: flex; + flex-direction: column; + gap: 16px; + + h2 { + font-size: 36px; + } + } +} + +/* Form styling for UI library page and potentially other form pages */ + +.internal-form-container { + max-width: 700px; + width: 100%; + min-height: 500px; + padding: 64px 32px 64px 32px; + border-radius: 8px; + margin: 0px auto 0px auto; + display: flex; + justify-content: center; + + form { + width: 75%; + display: flex; + flex-direction: column; + gap: 40px; + + .field-container { + display: flex; + flex-direction: column; + gap: 14px; + + label { + font-size: 24px; + } + + input { + font-size: 18px; + padding: 8px; + border-radius: 8px; + border: 1px solid black; + width: 100%; + } + + .submit { + padding: 4px 6px 4px 6px; + background-color: rgb(50, 50, 196); + color: rgb(234, 234, 241); + font-size: 20px; + padding: 8px; + border-radius: 8px; + cursor: pointer; + } + } + } } \ No newline at end of file diff --git a/app/assets/stylesheets/colors.css b/app/assets/stylesheets/colors.css deleted file mode 100644 index 7ace132..0000000 --- a/app/assets/stylesheets/colors.css +++ /dev/null @@ -1,10 +0,0 @@ -/* :root { - --black: hsl(253, 69%, 5%); - --dark-gray: hsl(268, 12%, 24%); - --light-gray: hsl(258, 16%, 66%); - --white: hsl(249, 33%, 96%); - --red: hsl(0, 82%, 48%); - --green: hsl(125, 68%, 40%); - --primary: hsl(270, 50%, 54%); - --secondary: hsl(211, 68%, 57%); -} */ \ No newline at end of file diff --git a/app/assets/stylesheets/internal_app_color_scheme.css b/app/assets/stylesheets/internal_app_color_scheme.css deleted file mode 100644 index 0047878..0000000 --- a/app/assets/stylesheets/internal_app_color_scheme.css +++ /dev/null @@ -1,13 +0,0 @@ -/* Apply styling for internal app: Meaning our app's UI not related to the users UI library */ - -h1, h2, h3, h4, h5, h6 { - color: var(--internal-app-header); -} - -p, span, a, svg { - color: var(--internal-app-text); -} - -body { - background-color: var(--internal-app-background); -} \ No newline at end of file diff --git a/app/assets/stylesheets/ui_components.css b/app/assets/stylesheets/ui_components.css index 49e3f1a..b289239 100644 --- a/app/assets/stylesheets/ui_components.css +++ b/app/assets/stylesheets/ui_components.css @@ -55,8 +55,6 @@ } .color-scheme-container { - margin-top: 32px; - display: flex; flex-wrap: wrap; align-items: start; @@ -117,4 +115,34 @@ width: 100%; object-fit: cover; } +} + +.large-container { + .button-actions-container { + margin-top: 32px; + display: flex; + align-items: center; + gap: 32px; + + .color-scheme-button { + display: flex; + align-items: center; + gap: 10px; + background-color: hsl(from var(--internal-app-background) h s calc(l - 20)); + padding: 14px 20px 14px 20px; + border-radius: 14px; + font-size: 20px; + transition: transform 0.5s ease-in-out; + transition: background 1s ease-in-out; + + svg { + width: 20px; + } + } + + .color-scheme-button:hover { + transform: scale(1.025); + background-color: hsl(from var(--internal-app-background) h s calc(l - 10)) + } + } } \ No newline at end of file diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 5faeb0f..85eeca2 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -1,7 +1,7 @@ require "ostruct" class ApplicationController < ActionController::Base - include UiLibraryColorScheme, InternalAppColorScheme + include UiLibraryColorScheme, InternalAppColorScheme, ApplicationHelper # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has. allow_browser versions: :modern end \ No newline at end of file diff --git a/app/controllers/ui_components_controller.rb b/app/controllers/ui_components_controller.rb index b51ef18..2003255 100644 --- a/app/controllers/ui_components_controller.rb +++ b/app/controllers/ui_components_controller.rb @@ -1,4 +1,5 @@ class UiComponentsController < ApplicationController def index + redirect_to new_ui_library_path if !current_ui_library end end diff --git a/app/controllers/ui_libraries_controller.rb b/app/controllers/ui_libraries_controller.rb new file mode 100644 index 0000000..9a12d15 --- /dev/null +++ b/app/controllers/ui_libraries_controller.rb @@ -0,0 +1,16 @@ +class UiLibrariesController < ApplicationController + def new + @ui_library = UiLibrary.new + end + + def create + if @ui_library = UiLibrary.create(ui_library_params) + session[:ui_library_id] = @ui_library.id + redirect_to root_path + end + end +private + def ui_library_params + params.expect(ui_library: [:name]) + end +end \ No newline at end of file diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index de6be79..ad079f5 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -1,2 +1,5 @@ module ApplicationHelper + def current_ui_library + @_current_ui_library ||= UiLibrary.find_by_id(session[:ui_library_id]) + end end diff --git a/app/models/ui_library.rb b/app/models/ui_library.rb new file mode 100644 index 0000000..7bfaef7 --- /dev/null +++ b/app/models/ui_library.rb @@ -0,0 +1,2 @@ +class UiLibrary < ApplicationRecord +end diff --git a/app/services/css_bundler_service.rb b/app/services/css_bundler_service.rb index 8139b35..ef6ce60 100644 --- a/app/services/css_bundler_service.rb +++ b/app/services/css_bundler_service.rb @@ -18,9 +18,6 @@ def create_css_file @tmp_css_output_path = "tmp/output_css/output_css_file_#{uniq_id}.css" @css_file_paths = Dir.glob("app/assets/stylesheets/component-styles/*") File.open(@tmp_css_output_path, "w") do |f| - @css_file_paths.each do |file_path| - f.write "#{File.read(file_path)}\n" - end f.write """ :root { /* User UI Library Color Scheme */ @@ -35,6 +32,9 @@ def create_css_file --secondary: #{@color_scheme[:secondary]}; }\n """.strip + @css_file_paths.each do |file_path| + f.write "#{File.read(file_path)}\n" + end end end diff --git a/app/views/color_scheme/show.html.erb b/app/views/color_scheme/show.html.erb new file mode 100644 index 0000000..8b293d9 --- /dev/null +++ b/app/views/color_scheme/show.html.erb @@ -0,0 +1,33 @@ +
+
+
+
+

Color Scheme

+

All user friendly apps require a good color scheme.

+
+

Basic Colors

+

Every website requires these essential colors

+
+
+ <%= render ColorSchemePreviewComponent.new("black", @color_scheme.black) %> + <%= render ColorSchemePreviewComponent.new("dark-gray", @color_scheme.light_gray) %> + <%= render ColorSchemePreviewComponent.new("light-gray", @color_scheme.light_gray) %> + <%= render ColorSchemePreviewComponent.new("white", @color_scheme.white) %> + <%= render ColorSchemePreviewComponent.new("red", @color_scheme.red) %> + <%= render ColorSchemePreviewComponent.new("green", @color_scheme.green) %> +
+
+ +
+
+

Brand colors

+

This is where you can choose what color associates with your brand

+
+ +
+ <%= render ColorSchemePreviewComponent.new("primary", @color_scheme.primary) %> + <%= render ColorSchemePreviewComponent.new("secondary", @color_scheme.secondary) %> +
+
+
+
\ No newline at end of file diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb index f070894..d71d4a1 100644 --- a/app/views/layouts/_navbar.html.erb +++ b/app/views/layouts/_navbar.html.erb @@ -1,14 +1,9 @@
<%= link_to "Home", "/" %> - - <%= link_to app_ui_settings_path, class: "ui-settings-link" do %> - - - - - <% end %> + <%= link_to current_ui_library.name, app_ui_settings_path, class: "ui-library-name" %> + <%= link_to exports_path, class: "export-link" do %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 760b9c5..b04065b 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -27,7 +27,7 @@ - <%= render "layouts/navbar" %> + <%= render "layouts/navbar" if current_ui_library %> <%= yield %> <%= render "layouts/all_color_scheme_css" %> diff --git a/app/views/ui_components/index.html.erb b/app/views/ui_components/index.html.erb index b38debd..56a1955 100644 --- a/app/views/ui_components/index.html.erb +++ b/app/views/ui_components/index.html.erb @@ -1,39 +1,6 @@

Welcome to your UI Library

These are your custom UI components

- -
-
-
-

Color Scheme

-

All user friendly apps require a good color scheme.

-
-

Basic Colors

-

Every website requires these essential colors

-
-
- <%= render ColorSchemePreviewComponent.new("black", @color_scheme.black) %> - <%= render ColorSchemePreviewComponent.new("dark-gray", @color_scheme.light_gray) %> - <%= render ColorSchemePreviewComponent.new("light-gray", @color_scheme.light_gray) %> - <%= render ColorSchemePreviewComponent.new("white", @color_scheme.white) %> - <%= render ColorSchemePreviewComponent.new("red", @color_scheme.red) %> - <%= render ColorSchemePreviewComponent.new("green", @color_scheme.green) %> -
-
- -
-
-

Brand colors

-

This is where you can choose what color associates with your brand

-
- -
- <%= render ColorSchemePreviewComponent.new("primary", @color_scheme.primary) %> - <%= render ColorSchemePreviewComponent.new("secondary", @color_scheme.secondary) %> -
-
-
- <%= render UiComponentPreviewComponent.new("button") %> <%= render UiComponentPreviewComponent.new("card") %> <%= render UiComponentPreviewComponent.new("alert", position_static: true) %> diff --git a/app/views/ui_libraries/new.html.erb b/app/views/ui_libraries/new.html.erb new file mode 100644 index 0000000..9ea10f6 --- /dev/null +++ b/app/views/ui_libraries/new.html.erb @@ -0,0 +1,11 @@ +
+
+ <%= form_with url: ui_libraries_path, model: @ui_library do |form| %> +
+ <%= form.label :name, "Enter the name of your UI Library", class: "label" %> + <%= form.text_field :name, class: "field" %> + <%= form.submit "Create Library", class: "submit" %> +
+ <% end %> +
+
\ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb index b53424c..51f426e 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,11 +1,12 @@ Rails.application.routes.draw do resource :app_ui_settings, only: [:show, :create] # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html - resource :color_scheme, only: [:create], controller: :color_scheme + resource :color_scheme, only: [:show, :create], controller: :color_scheme resource :exports, only: [:show, :create] resource :bundle_css, only: [:show], controller: :bundle_css do get "download", on: :member end + resources :ui_libraries, only: [:new, :create] # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500. # Can be used by load balancers and uptime monitors to verify that the app is live. get "up" => "rails/health#show", as: :rails_health_check diff --git a/db/migrate/20251202095228_create_ui_libraries.rb b/db/migrate/20251202095228_create_ui_libraries.rb new file mode 100644 index 0000000..a33b46e --- /dev/null +++ b/db/migrate/20251202095228_create_ui_libraries.rb @@ -0,0 +1,9 @@ +class CreateUiLibraries < ActiveRecord::Migration[8.0] + def change + create_table :ui_libraries do |t| + t.string :name + + t.timestamps + end + end +end diff --git a/db/schema.rb b/db/schema.rb new file mode 100644 index 0000000..c1f2efc --- /dev/null +++ b/db/schema.rb @@ -0,0 +1,19 @@ +# This file is auto-generated from the current state of the database. Instead +# of editing this file, please use the migrations feature of Active Record to +# incrementally modify your database, and then regenerate this schema definition. +# +# This file is the source Rails uses to define your schema when running `bin/rails +# db:schema:load`. When creating a new database, `bin/rails db:schema:load` tends to +# be faster and is potentially less error prone than running all of your +# migrations from scratch. Old migrations may fail to apply correctly if those +# migrations use external dependencies or application code. +# +# It's strongly recommended that you check this file into your version control system. + +ActiveRecord::Schema[8.0].define(version: 2025_12_02_095228) do + create_table "ui_libraries", force: :cascade do |t| + t.string "name" + t.datetime "created_at", null: false + t.datetime "updated_at", null: false + end +end diff --git a/test/fixtures/ui_libraries.yml b/test/fixtures/ui_libraries.yml new file mode 100644 index 0000000..7d41224 --- /dev/null +++ b/test/fixtures/ui_libraries.yml @@ -0,0 +1,7 @@ +# Read about fixtures at https://api.rubyonrails.org/classes/ActiveRecord/FixtureSet.html + +one: + name: MyString + +two: + name: MyString diff --git a/test/models/ui_library_test.rb b/test/models/ui_library_test.rb new file mode 100644 index 0000000..9d382a9 --- /dev/null +++ b/test/models/ui_library_test.rb @@ -0,0 +1,7 @@ +require "test_helper" + +class UiLibraryTest < ActiveSupport::TestCase + # test "the truth" do + # assert true + # end +end From ea9a171a8fb81c44ca12660c39b89a7458908bbc Mon Sep 17 00:00:00 2001 From: Enoch Tamulonis Date: Wed, 3 Dec 2025 11:49:18 +0700 Subject: [PATCH 2/3] sidebar! too easy --- app/assets/stylesheets/application.css | 30 +++++++++++++++++++++-- app/views/color_scheme/show.html.erb | 4 +-- app/views/ui_components/index.html.erb | 34 +++++++++++++++----------- 3 files changed, 50 insertions(+), 18 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 37b080c..3f47037 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -14,6 +14,8 @@ :root { --large-screen-size: 1400px; --medium-screen-size: 700px; + --internal-sidebar-width: 400px; + --internal-navbar-height: 4rem; } * { @@ -54,7 +56,7 @@ body { padding: 64px 32px 64px 32px; } -.large-container { +.large-container, .internal-sidebar-page { h1 { font-size: 44px; } @@ -114,7 +116,7 @@ body { } .internal-app-navbar { - height: 4rem; + height: var(--internal-navbar-height); background-color: hsl(from var(--internal-app-background) h s calc(l - 10)); width: 100%; position: sticky; @@ -259,4 +261,28 @@ body { } } } +} + +/* Styling for sidebar popout/ main content positioned left/right */ + +.internal-sidebar-page { + display: flex; + width: 100%; + + .page-content { + max-width: calc(100% - var(--internal-sidebar-width)); + min-height: 100vh; + margin: 0px auto 0px 0px; + padding: 64px 32px 64px 32px; + } + + .internal-sidebar { + width: var(--internal-sidebar-width); + height: calc(100vh - var(--internal-navbar-height)); + position: sticky; + top: var(--internal-navbar-height); + right: 0px; + background-color: hsl(from var(--internal-app-background) h s calc(l - 10)); + padding: 8px; + } } \ No newline at end of file diff --git a/app/views/color_scheme/show.html.erb b/app/views/color_scheme/show.html.erb index 8b293d9..d53d152 100644 --- a/app/views/color_scheme/show.html.erb +++ b/app/views/color_scheme/show.html.erb @@ -1,4 +1,4 @@ -
+<%= turbo_frame_tag :color_scheme do %>
@@ -30,4 +30,4 @@
-
\ No newline at end of file +<% end %> \ No newline at end of file diff --git a/app/views/ui_components/index.html.erb b/app/views/ui_components/index.html.erb index 56a1955..3c22a3c 100644 --- a/app/views/ui_components/index.html.erb +++ b/app/views/ui_components/index.html.erb @@ -1,15 +1,21 @@ -
-

Welcome to your UI Library

-

These are your custom UI components

- <%= render UiComponentPreviewComponent.new("button") %> - <%= render UiComponentPreviewComponent.new("card") %> - <%= render UiComponentPreviewComponent.new("alert", position_static: true) %> - <%= render UiComponentPreviewComponent.new("navbar", position_static: true) %> - <%= render UiComponentPreviewComponent.new("form") %> - <%= render UiComponentPreviewComponent.new("inline_modal", - description: "This is an example of a modal styled to be displayed inline", - header_text: "Inline modal example", position_static: true) %> - <%= render UiComponentPreviewComponent.new("live_modal", - description: "This is a live example allowing you to view the real experience of using the modal.", - header_text: "Live modal example") %> +
+
+

Welcome to your UI Library

+

These are your custom UI components

+ <%= render UiComponentPreviewComponent.new("button") %> + <%= render UiComponentPreviewComponent.new("card") %> + <%= render UiComponentPreviewComponent.new("alert", position_static: true) %> + <%= render UiComponentPreviewComponent.new("navbar", position_static: true) %> + <%= render UiComponentPreviewComponent.new("form") %> + <%= render UiComponentPreviewComponent.new("inline_modal", + description: "This is an example of a modal styled to be displayed inline", + header_text: "Inline modal example", position_static: true) %> + <%= render UiComponentPreviewComponent.new("live_modal", + description: "This is a live example allowing you to view the real experience of using the modal.", + header_text: "Live modal example") %> +
+ +
+ <%= turbo_frame_tag :color_scheme, src: color_scheme_path %> +
\ No newline at end of file From 1afe112bf72790406ff48e74aa38d78776b8850a Mon Sep 17 00:00:00 2001 From: Enoch Tamulonis Date: Fri, 5 Dec 2025 09:37:43 +0700 Subject: [PATCH 3/3] ui improv sidebar. add back button sidebar navigation --- app/assets/stylesheets/application.css | 46 +++++++++++++++++-- app/assets/stylesheets/ui_components.css | 2 +- .../concerns/internal_app_color_scheme.rb | 4 +- app/views/color_scheme/show.html.erb | 33 +++++++------ .../layouts/_all_color_scheme_css.html.erb | 6 +-- app/views/ui_components/index.html.erb | 4 +- app/views/ui_libraries/new.html.erb | 2 + .../ui_libraries/sidebar/_links.html.erb | 10 ++++ 8 files changed, 83 insertions(+), 24 deletions(-) create mode 100644 app/views/ui_libraries/sidebar/_links.html.erb diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 3f47037..fedd226 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -231,7 +231,7 @@ body { width: 75%; display: flex; flex-direction: column; - gap: 40px; + gap: 16px; .field-container { display: flex; @@ -249,12 +249,18 @@ body { border: 1px solid black; width: 100%; } + } + + .action-buttons { + display: flex; + align-items: center; + gap: 20px; .submit { padding: 4px 6px 4px 6px; background-color: rgb(50, 50, 196); color: rgb(234, 234, 241); - font-size: 20px; + font-size: 16px; padding: 8px; border-radius: 8px; cursor: pointer; @@ -283,6 +289,40 @@ body { top: var(--internal-navbar-height); right: 0px; background-color: hsl(from var(--internal-app-background) h s calc(l - 10)); - padding: 8px; + padding: 10px; + + .sidebar-links { + display: grid; + grid-template-columns: auto auto; + gap: 16px; + + .icon-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 10px; + gap: 10px; + border: 1px solid hsl(from var(--internal-app-background) h s calc(l - 30)); + border-radius: 8px; + height: 140px; + + span { + font-size: 20px; + } + + svg { + width: 24px; + } + } + } + } +} + +turbo-frame[id='sidebar'] { + .back-link { + svg { + width: 24px; + } } } \ No newline at end of file diff --git a/app/assets/stylesheets/ui_components.css b/app/assets/stylesheets/ui_components.css index b289239..c38889b 100644 --- a/app/assets/stylesheets/ui_components.css +++ b/app/assets/stylesheets/ui_components.css @@ -94,7 +94,7 @@ } .color-scheme-text-container { - height: 10rem; + margin-bottom: 32px; } } diff --git a/app/controllers/concerns/internal_app_color_scheme.rb b/app/controllers/concerns/internal_app_color_scheme.rb index a86b055..c1a4bc9 100644 --- a/app/controllers/concerns/internal_app_color_scheme.rb +++ b/app/controllers/concerns/internal_app_color_scheme.rb @@ -17,8 +17,8 @@ def find_or_create_internal_app_color_scheme session[:internal_app_color_scheme] else session[:internal_app_color_scheme] = { - header: "hsl(0, 0, 0)", - text: "hsl(0, 0, 0)", + header: "hsl(131 0% 5.3%)", + text: "hsl(131 0% 14.1%)", background: "hsl(0, 0, 100)", } session[:internal_app_color_scheme] diff --git a/app/views/color_scheme/show.html.erb b/app/views/color_scheme/show.html.erb index d53d152..cfb9f1e 100644 --- a/app/views/color_scheme/show.html.erb +++ b/app/views/color_scheme/show.html.erb @@ -1,6 +1,23 @@ -<%= turbo_frame_tag :color_scheme do %> +<%= turbo_frame_tag :sidebar do %> + <%= link_to root_path, class: "back-link" do %> + + + + <% end %>
-
+
+
+

Brand colors

+

This is where you can choose what color associates with your brand

+
+ +
+ <%= render ColorSchemePreviewComponent.new("primary", @color_scheme.primary) %> + <%= render ColorSchemePreviewComponent.new("secondary", @color_scheme.secondary) %> +
+
+ +

Color Scheme

All user friendly apps require a good color scheme.

@@ -17,17 +34,5 @@ <%= render ColorSchemePreviewComponent.new("green", @color_scheme.green) %>
- -
-
-

Brand colors

-

This is where you can choose what color associates with your brand

-
- -
- <%= render ColorSchemePreviewComponent.new("primary", @color_scheme.primary) %> - <%= render ColorSchemePreviewComponent.new("secondary", @color_scheme.secondary) %> -
-
<% end %> \ No newline at end of file diff --git a/app/views/layouts/_all_color_scheme_css.html.erb b/app/views/layouts/_all_color_scheme_css.html.erb index ec19c46..49cf122 100644 --- a/app/views/layouts/_all_color_scheme_css.html.erb +++ b/app/views/layouts/_all_color_scheme_css.html.erb @@ -13,8 +13,8 @@ /* Internal App Color Scheme */ - --internal-app-header: <%= @internal_app_color_scheme.header %>; - --internal-app-text: <%= @internal_app_color_scheme.text %>; - --internal-app-background: <%= @internal_app_color_scheme.background %>; + --internal-app-header: <%= @internal_app_color_scheme.header || "hsl(51 85.1% 6%)" %>; + --internal-app-text: <%= @internal_app_color_scheme.text || "hsl(63 41.1% 9.3%)" %>; + --internal-app-background: <%= @internal_app_color_scheme.background || "hsl(360 86.2% 100%)" %>; } \ No newline at end of file diff --git a/app/views/ui_components/index.html.erb b/app/views/ui_components/index.html.erb index 3c22a3c..f3eb3f4 100644 --- a/app/views/ui_components/index.html.erb +++ b/app/views/ui_components/index.html.erb @@ -16,6 +16,8 @@
- <%= turbo_frame_tag :color_scheme, src: color_scheme_path %> + <%= turbo_frame_tag :sidebar do %> + <%= render "ui_libraries/sidebar/links" %> + <% end %>
\ No newline at end of file diff --git a/app/views/ui_libraries/new.html.erb b/app/views/ui_libraries/new.html.erb index 9ea10f6..f78833c 100644 --- a/app/views/ui_libraries/new.html.erb +++ b/app/views/ui_libraries/new.html.erb @@ -4,6 +4,8 @@
<%= form.label :name, "Enter the name of your UI Library", class: "label" %> <%= form.text_field :name, class: "field" %> +
+
<%= form.submit "Create Library", class: "submit" %>
<% end %> diff --git a/app/views/ui_libraries/sidebar/_links.html.erb b/app/views/ui_libraries/sidebar/_links.html.erb new file mode 100644 index 0000000..049a091 --- /dev/null +++ b/app/views/ui_libraries/sidebar/_links.html.erb @@ -0,0 +1,10 @@ +
+ <%= link_to color_scheme_path do %> +
+ Colors + + + +
+ <% end %> +
\ No newline at end of file