From 25d7c1b6eaf03ddaec892c82f7d93a128b79a872 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 14 Mar 2016 17:41:13 +0100 Subject: [PATCH] Customizing the last of doorkeeper views, adding CSS for dashboard forms --- app/assets/stylesheets/dashboard.scss | 121 +++++++++++++++++- .../applications/_delete_form.html.erb | 5 - .../doorkeeper/applications/_form.html.erb | 47 ------- .../doorkeeper/applications/_form.html.haml | 9 ++ .../doorkeeper/applications/edit.html.erb | 5 - .../doorkeeper/applications/edit.html.haml | 4 + .../doorkeeper/applications/index.html.haml | 12 +- .../doorkeeper/applications/new.html.erb | 5 - .../doorkeeper/applications/new.html.haml | 4 + .../doorkeeper/applications/show.html.erb | 39 ------ .../doorkeeper/applications/show.html.haml | 35 +++++ .../_delete_form.html.haml | 3 - .../authorized_applications/index.html.haml | 4 +- app/views/settings/show.html.haml | 18 ++- 14 files changed, 192 insertions(+), 119 deletions(-) delete mode 100644 app/views/doorkeeper/applications/_delete_form.html.erb delete mode 100644 app/views/doorkeeper/applications/_form.html.erb create mode 100644 app/views/doorkeeper/applications/_form.html.haml delete mode 100644 app/views/doorkeeper/applications/edit.html.erb create mode 100644 app/views/doorkeeper/applications/edit.html.haml delete mode 100644 app/views/doorkeeper/applications/new.html.erb create mode 100644 app/views/doorkeeper/applications/new.html.haml delete mode 100644 app/views/doorkeeper/applications/show.html.erb create mode 100644 app/views/doorkeeper/applications/show.html.haml delete mode 100644 app/views/doorkeeper/authorized_applications/_delete_form.html.haml diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 74192dafa..166ce42c1 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -4,10 +4,12 @@ margin: 20px auto; width: 940px; display: flex; + overflow: hidden; .dashboard__sidebar { width: 240px; border-radius: 4px 0 0 4px; + flex-shrink: 0; .dashboard__top-bar { border-radius: 4px 0 0 0; @@ -175,8 +177,8 @@ display: inline-block; border: 0; background: #2b90d9; - border-radius: 4px; - padding: 4px 16px; + border-radius: 16px; + padding: 6px 16px; font-size: 12px; font-weight: 500; color: #fff; @@ -187,6 +189,16 @@ &:hover { background: lighten(#2b90d9, 5%); } + + &.btn-iconized { + font-size: 16px; + font-weight: 400; + width: 24px; + text-align: center; + padding: 10px 7px; + border-radius: 100px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + } } } @@ -194,5 +206,110 @@ border-radius: 0 4px 0 0; } } +} + +.simple_form { + .form-actions { + padding-top: 20px; + text-align: center; + } + .input { + margin-bottom: 15px; + + label { + display: block; + text-transform: uppercase; + font-size: 11px; + font-weight: 500; + margin-bottom: 10px; + } + + input[type=text], input[type=email], input[type=password], textarea { + display: block; + box-sizing: border-box; + width: 100%; + border: 0; + background: transparent; + border-bottom: 1px solid lighten(#282c37, 55%); + padding: 5px 0; + outline: 0; + padding-bottom: 6px; + font-size: 14px; + font-family: 'Roboto', sans-serif; + + &:focus { + border-bottom: 2px solid #2b90d9; + padding-bottom: 5px; + } + } + + input[type=file] { + display: block; + } + } +} + +.panel { + box-sizing: border-box; + padding: 10px 15px; + background: lighten(#d9e1e8, 5%); + margin-bottom: 20px; + border-radius: 4px; + + .panel-heading { + font-size: 13px; + text-transform: uppercase; + color: lighten(#282c37, 25%); + margin-bottom: 10px; + } + + &.panel-full { + width: 100%; + } + + .panel-row { + display: flex; + + dt { + color: #282c37; + width: 100px; + } + + dd { + flex: 1; + color: lighten(#282c37, 25%); + } + + &.panel-row-wider { + dt { + width: auto; + flex: 1; + } + } + } +} + +.row { + overflow: hidden; + clear: both; + + .panel { + float: left; + width: 320px; + margin-right: 20px; + + &:last-child { + margin-right: 0; + } + } +} + +.page-actions { + margin-top: 20px; + text-align: right; + + .btn { + margin-left: 5px; + } } diff --git a/app/views/doorkeeper/applications/_delete_form.html.erb b/app/views/doorkeeper/applications/_delete_form.html.erb deleted file mode 100644 index 8d8c93f87..000000000 --- a/app/views/doorkeeper/applications/_delete_form.html.erb +++ /dev/null @@ -1,5 +0,0 @@ -<%- submit_btn_css ||= 'btn btn-link' %> -<%= form_tag oauth_application_path(application) do %> - - <%= submit_tag t('doorkeeper.applications.buttons.destroy'), onclick: "return confirm('#{ t('doorkeeper.applications.confirmations.destroy') }')", class: submit_btn_css %> -<% end %> diff --git a/app/views/doorkeeper/applications/_form.html.erb b/app/views/doorkeeper/applications/_form.html.erb deleted file mode 100644 index f42cfdc10..000000000 --- a/app/views/doorkeeper/applications/_form.html.erb +++ /dev/null @@ -1,47 +0,0 @@ -<%= form_for application, url: doorkeeper_submit_path(application), html: {class: 'form-horizontal', role: 'form'} do |f| %> - <% if application.errors.any? %> -

<%= t('doorkeeper.applications.form.error') %>

- <% end %> - - <%= content_tag :div, class: "form-group#{' has-error' if application.errors[:name].present?}" do %> - <%= f.label :name, class: 'col-sm-2 control-label' %> -
- <%= f.text_field :name, class: 'form-control' %> - <%= doorkeeper_errors_for application, :name %> -
- <% end %> - - <%= content_tag :div, class: "form-group#{' has-error' if application.errors[:redirect_uri].present?}" do %> - <%= f.label :redirect_uri, class: 'col-sm-2 control-label' %> -
- <%= f.text_area :redirect_uri, class: 'form-control' %> - <%= doorkeeper_errors_for application, :redirect_uri %> - - <%= t('doorkeeper.applications.help.redirect_uri') %> - - <% if Doorkeeper.configuration.native_redirect_uri %> - - <%= raw t('doorkeeper.applications.help.native_redirect_uri', native_redirect_uri: "#{ Doorkeeper.configuration.native_redirect_uri }") %> - - <% end %> -
- <% end %> - - <%= content_tag :div, class: "form-group#{' has-error' if application.errors[:scopes].present?}" do %> - <%= f.label :scopes, class: 'col-sm-2 control-label' %> -
- <%= f.text_field :scopes, class: 'form-control' %> - <%= doorkeeper_errors_for application, :scopes %> - - <%= t('doorkeeper.applications.help.scopes') %> - -
- <% end %> - -
-
- <%= f.submit t('doorkeeper.applications.buttons.submit'), class: "btn btn-primary" %> - <%= link_to t('doorkeeper.applications.buttons.cancel'), oauth_applications_path, :class => "btn btn-default" %> -
-
-<% end %> diff --git a/app/views/doorkeeper/applications/_form.html.haml b/app/views/doorkeeper/applications/_form.html.haml new file mode 100644 index 000000000..94ba441a8 --- /dev/null +++ b/app/views/doorkeeper/applications/_form.html.haml @@ -0,0 +1,9 @@ += simple_form_for application, url: doorkeeper_submit_path(application) do |f| + = f.error_notification + + .form-inputs + = f.input :name + = f.input :redirect_uri, hint: t('doorkeeper.applications.help.redirect_uri') + = f.input :scopes, hint: t('doorkeeper.applications.help.scopes') + .form-actions + = f.button :submit, 'Save' diff --git a/app/views/doorkeeper/applications/edit.html.erb b/app/views/doorkeeper/applications/edit.html.erb deleted file mode 100644 index 05bddd2e4..000000000 --- a/app/views/doorkeeper/applications/edit.html.erb +++ /dev/null @@ -1,5 +0,0 @@ -
-

<%= t('.title') %>

-
- -<%= render 'form', application: @application %> diff --git a/app/views/doorkeeper/applications/edit.html.haml b/app/views/doorkeeper/applications/edit.html.haml new file mode 100644 index 000000000..55bbfbab0 --- /dev/null +++ b/app/views/doorkeeper/applications/edit.html.haml @@ -0,0 +1,4 @@ +- content_for :page_title do + Edit app + += render 'form', application: @application diff --git a/app/views/doorkeeper/applications/index.html.haml b/app/views/doorkeeper/applications/index.html.haml index 908f664f2..2c88cbd89 100644 --- a/app/views/doorkeeper/applications/index.html.haml +++ b/app/views/doorkeeper/applications/index.html.haml @@ -1,13 +1,13 @@ - content_for :page_title do - Applications + Apps -%p= link_to t('.new'), new_oauth_application_path, class: 'btn btn-success' +%p= link_to 'Add new', new_oauth_application_path, class: 'btn btn-success' %table.table %thead %tr - %th= t('.name') - %th= t('.callback_url') + %th App + %th Callback URL %th %th %tbody @@ -15,5 +15,5 @@ %tr %td= link_to application.name, oauth_application_path(application) %td= application.redirect_uri - %td= link_to t('doorkeeper.applications.buttons.edit'), edit_oauth_application_path(application), class: 'btn btn-link' - %td= render 'delete_form', application: application + %td= link_to 'Edit', edit_oauth_application_path(application) + %td= link_to 'Delete', oauth_application_path(application), method: :delete, data: { confirm: 'Are you sure?' } diff --git a/app/views/doorkeeper/applications/new.html.erb b/app/views/doorkeeper/applications/new.html.erb deleted file mode 100644 index 05bddd2e4..000000000 --- a/app/views/doorkeeper/applications/new.html.erb +++ /dev/null @@ -1,5 +0,0 @@ -
-

<%= t('.title') %>

-
- -<%= render 'form', application: @application %> diff --git a/app/views/doorkeeper/applications/new.html.haml b/app/views/doorkeeper/applications/new.html.haml new file mode 100644 index 000000000..ad5a66e3a --- /dev/null +++ b/app/views/doorkeeper/applications/new.html.haml @@ -0,0 +1,4 @@ +- content_for :page_title do + New app + += render 'form', application: @application diff --git a/app/views/doorkeeper/applications/show.html.erb b/app/views/doorkeeper/applications/show.html.erb deleted file mode 100644 index ac89f32b1..000000000 --- a/app/views/doorkeeper/applications/show.html.erb +++ /dev/null @@ -1,39 +0,0 @@ -
-

<%= t('.title', name: @application.name) %>

-
- -
-
-

<%= t('.application_id') %>:

-

<%= @application.uid %>

- -

<%= t('.secret') %>:

-

<%= @application.secret %>

- -

<%= t('.scopes') %>:

-

<%= @application.scopes %>

- -

<%= t('.callback_urls') %>:

- - - <% @application.redirect_uri.split.each do |uri| %> - - - - - <% end %> -
- <%= uri %> - - <%= link_to t('doorkeeper.applications.buttons.authorize'), oauth_authorization_path(client_id: @application.uid, redirect_uri: uri, response_type: 'code'), class: 'btn btn-success', target: '_blank' %> -
-
- -
-

<%= t('.actions') %>

- -

<%= link_to t('doorkeeper.applications.buttons.edit'), edit_oauth_application_path(@application), class: 'btn btn-primary' %>

- -

<%= render 'delete_form', application: @application, submit_btn_css: 'btn btn-danger' %>

-
-
diff --git a/app/views/doorkeeper/applications/show.html.haml b/app/views/doorkeeper/applications/show.html.haml new file mode 100644 index 000000000..cc7f4be88 --- /dev/null +++ b/app/views/doorkeeper/applications/show.html.haml @@ -0,0 +1,35 @@ +- content_for :page_title do + = @application.name + +.row + .panel + .panel-heading General + .panel-row + %dt Name + %dd= @application.name + .panel-row + %dt Scopes: + %dd= @application.scopes + +.panel.panel-full + .panel-heading Details + .panel-row + %dt Client ID: + %dd + %samp= @application.uid + .panel-row + %dt Secret: + %dd + %samp= @application.secret + +.panel.panel-full + .panel-heading Callback URLs + - @application.redirect_uri.split.each do |uri| + .panel-row.panel-row-wider + %dt + %samp= uri + %dd= link_to 'Authorize', oauth_authorization_path(client_id: @application.uid, redirect_uri: uri, response_type: 'code') + +.page-actions + = link_to fa_icon('edit'), edit_oauth_application_path(@application), class: 'btn btn-iconized' + = link_to fa_icon('trash'), oauth_application_path(@application), method: :delete, class: 'btn btn-iconized', data: { confirm: 'Are you sure?' } diff --git a/app/views/doorkeeper/authorized_applications/_delete_form.html.haml b/app/views/doorkeeper/authorized_applications/_delete_form.html.haml deleted file mode 100644 index 8400efcfe..000000000 --- a/app/views/doorkeeper/authorized_applications/_delete_form.html.haml +++ /dev/null @@ -1,3 +0,0 @@ -= form_tag oauth_authorized_application_path(application) do - %input{type: "hidden", name: "_method", value: "delete"} - = submit_tag 'Revoke', class: 'btn' diff --git a/app/views/doorkeeper/authorized_applications/index.html.haml b/app/views/doorkeeper/authorized_applications/index.html.haml index f2f238e87..a75c43129 100644 --- a/app/views/doorkeeper/authorized_applications/index.html.haml +++ b/app/views/doorkeeper/authorized_applications/index.html.haml @@ -8,9 +8,9 @@ %table.table %thead %tr - %th= t('doorkeeper.authorized_applications.index.application') + %th App %th - @applications.each do |application| %tr %td= application.name - %td= render 'delete_form', application: application + %td= link_to 'Revoke', oauth_authorized_application_path(application), method: :delete diff --git a/app/views/settings/show.html.haml b/app/views/settings/show.html.haml index ac5a1c36f..e184d1ca6 100644 --- a/app/views/settings/show.html.haml +++ b/app/views/settings/show.html.haml @@ -1,6 +1,14 @@ +- content_for :page_title do + Edit profile + = simple_form_for @account, url: settings_path, method: :put do |f| - = f.input :display_name - = f.input :note - = f.input :avatar - = f.input :header - = f.button :submit + = f.error_notification + + .form-inputs + = f.input :display_name + = f.input :note + = f.input :avatar + = f.input :header + + .form-actions + = f.button :submit, 'Save changes'