From 9e7627d9b579018b830b946e55f95529d7e8311c Mon Sep 17 00:00:00 2001
From: Mauricio Giacomini Girardello <mgg12@inf.ufpr.br>
Date: Wed, 9 Mar 2016 15:43:46 -0300
Subject: [PATCH] improve learning object studio UI
---
.../stylesheets/application/form-wizard.scss | 7 +-
.../learning_objects_controller.rb | 10 +++
app/models/concerns/thumbnailable.rb | 2 +-
.../layouts/learning_object_studio.html.erb | 2 +-
app/views/learning_objects/_form.html.erb | 81 +++++++++----------
.../build/_file_upload_form.html.erb | 21 ++---
.../build/select_thumbnail.html.erb | 41 ++++++++--
.../build/upload_attachments.html.erb | 33 +++++++-
app/views/learning_objects/edit.html.erb | 33 +++++++-
app/views/learning_objects/new.html.erb | 32 +++++++-
10 files changed, 191 insertions(+), 71 deletions(-)
diff --git a/app/assets/stylesheets/application/form-wizard.scss b/app/assets/stylesheets/application/form-wizard.scss
index c5b8f0d1..88816846 100644
--- a/app/assets/stylesheets/application/form-wizard.scss
+++ b/app/assets/stylesheets/application/form-wizard.scss
@@ -16,7 +16,7 @@
box-sizing: border-box;
}
> div.board-inner {
- background: image-url('geometry2.png');
+ background: white; /*image-url('geometry2.png');*/
background-size: 30%;
}
@@ -202,6 +202,11 @@
/*border: 2px solid #5cb85c;*/
color: #ffffff;
}
+ .btn.red {
+ background-color: #b84e47;
+ /*border: 2px solid #5cb85c;*/
+ color: #ffffff;
+ }
@media (max-width: 585px) {
.board {
diff --git a/app/controllers/learning_objects_controller.rb b/app/controllers/learning_objects_controller.rb
index a9f30df7..d11a3da9 100644
--- a/app/controllers/learning_objects_controller.rb
+++ b/app/controllers/learning_objects_controller.rb
@@ -2,6 +2,7 @@ require 'uri'
class LearningObjectsController < ApplicationController
include Reportable
+ layout :resolve_layout
before_action :authenticate_user!, except: [:index, :show]
before_action :set_learning_object, only: [:show, :edit, :update,
@@ -138,4 +139,13 @@ class LearningObjectsController < ApplicationController
redirect_to (root_path)
end
+ def resolve_layout
+ case action_name
+ when 'new', 'edit', 'create', 'update'
+ 'learning_object_studio'
+ else
+ 'application'
+ end
+ end
+
end
diff --git a/app/models/concerns/thumbnailable.rb b/app/models/concerns/thumbnailable.rb
index b497ae77..e22d871b 100644
--- a/app/models/concerns/thumbnailable.rb
+++ b/app/models/concerns/thumbnailable.rb
@@ -2,7 +2,7 @@ module Thumbnailable
extend ActiveSupport::Concern
included do
- has_attached_file :thumbnail, styles: { medium: '530x300', small: '250x140' }
+ has_attached_file :thumbnail, styles: { medium: '530x300', small: '250x140' }, default_url: 'learning-object-preview.png'
validates_attachment_content_type :thumbnail, content_type: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
end
diff --git a/app/views/layouts/learning_object_studio.html.erb b/app/views/layouts/learning_object_studio.html.erb
index e771a3e3..d67fb805 100644
--- a/app/views/layouts/learning_object_studio.html.erb
+++ b/app/views/layouts/learning_object_studio.html.erb
@@ -2,7 +2,7 @@
<div class="container">
<div class="row">
<div class="board">
- <h2>Bem vindo ao estúdio de criação de conteúdos educacionais <span style="color:#f48260;">♥</span></h2>
+ <h2>Estúdio de criação de conteúdos educacionais <span style="color:#f48260;"><i class="fa fa-book"></i></span></h2>
<div class="board-inner">
<%= yield(:learning_object_studio_navigation) %>
</div>
diff --git a/app/views/learning_objects/_form.html.erb b/app/views/learning_objects/_form.html.erb
index a97178e6..1bd28e92 100644
--- a/app/views/learning_objects/_form.html.erb
+++ b/app/views/learning_objects/_form.html.erb
@@ -14,56 +14,53 @@
<div class="row">
<div class="col-md-12">
+ <fieldset>
+ <%= f.label :name, "TÃtulo" %>
+ <%= f.text_field :name, class: "form-control" %> <br>
- </div>
+ <%= f.label :description, "Descreva seu objeto" %>
+ <%= f.text_area :description, class: "form-control" %><br>
- <div class="row">
- <div class="col-md-12">
- <fieldset>
- <legend>Envie seu objeto educacional</legend>
- <%= f.label :name, "TÃtulo" %>
- <%= f.text_field :name, class: "form-control" %> <br>
+ <%= f.label :language, "Idioma do objeto" %><br>
+ <%= f.collection_select(:language, @languages, :id, :name, {prompt: "Por favor informe o idioma do objeto "}, {class: "form-control"}) %>
+ <br>
+ <%= f.label :author, "Autor" %>
+ <%= f.text_field :author, class: "form-control" %><br>
- <%= f.label :description, "Descreva seu objeto" %>
- <%= f.text_area :description, class: "form-control" %><br>
+ <%= f.label :object_type_id, "Tipo do objeto" %>
+ <div class="radio">
+ <%= f.collection_radio_buttons :object_type_id, @types, :id, :name do |b|
+ b.label { b.radio_button + b.text } + '<br />'.html_safe
+ end %>
+ </div>
- <%= f.label :language, "Idioma do objeto" %><br>
- <%= f.collection_select(:language, @languages, :id, :name, {prompt: "Por favor informe o idioma do objeto "}, {class: "form-control"}) %>
+ <div id="link-input" style="display: none;">
+ <label for="learning_object[link]">Link</label>
+ <input type="text" name="learning_object[link]" class="form-control">
<br>
- <%= f.label :author, "Autor" %>
- <%= f.text_field :author, class: "form-control" %><br>
-
- <%= f.label :object_type_id, "Tipo do objeto" %>
- <div class="radio">
- <%= f.collection_radio_buttons :object_type_id, @types, :id, :name do |b|
- b.label { b.radio_button + b.text } + '<br />'.html_safe
- end %>
- </div>
+ </div>
- <div id="link-input" style="display: none;">
- <label for="learning_object[link]">Link</label>
- <input type="text" name="learning_object[link]" class="form-control">
- <br>
- </div>
-
- <%= f.label :topics, 'Assuntos' %>
- <select id='subjectSelect' name="learning_object[topics][]" multiple>
- <%= @topics.each do |t| %>
- <option value='<%= t.id %>'><%= t.name %></option>
- <% end %>
- </select>
- <span class="help-block">Selecione um ou mais assuntos</span>
+ <%= f.label :topics, 'Assuntos' %>
+ <select id='subjectSelect' name="learning_object[topics][]" multiple>
+ <%= @topics.each do |t| %>
+ <option value='<%= t.id %>'><%= t.name %></option>
+ <% end %>
+ </select>
+ <span class="help-block">Selecione um ou mais assuntos</span>
- <%= f.label :school_level, "NÃvel Escolar" %><br>
- <select name="learning_object[school_level]">
- <%= @school_levels.each do |school_level| %>
- <option value="<%= school_level %>"><%= school_level %></option>
+ <%= f.label :school_level, "NÃvel Escolar" %><br>
+ <select name="learning_object[school_level]">
+ <%= @school_levels.each do |school_level| %>
+ <option value="<%= school_level %>"><%= school_level %></option>
+ <% end %>
+ </select>
+ <br><br>
+ <button type="submit" class="btn-submit btn btn-success btn-outline-rounded green">
+ Salvar e continuar <i style="margin-left:10px;" class="fa fa-paper-plane"></i></button>
+ <%= link_to :back do %>
+ <button type="button" class="btn-submit btn btn-danger btn-outline-rounded red">Cancelar</button>
<% end %>
- </select>
- <br><br>
- <%= f.submit 'Criar Objeto' %>
- </fieldset>
- </div>
+ </fieldset>
</div>
</div>
diff --git a/app/views/learning_objects/build/_file_upload_form.html.erb b/app/views/learning_objects/build/_file_upload_form.html.erb
index a80aa150..dd36d0a9 100644
--- a/app/views/learning_objects/build/_file_upload_form.html.erb
+++ b/app/views/learning_objects/build/_file_upload_form.html.erb
@@ -1,6 +1,6 @@
<div class="row">
<div class="large-12 columns">
- <p class="lead">Envie os arquivos de <strong><%= @learning_object.name %></strong></p>
+ <p class="lead">Gerencie os arquivos do conteúdo <strong><%= @learning_object.name %></strong></p>
<div class="alert alert-box alert-success alert-dismissible" role="alert" id="upload_message">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
@@ -21,24 +21,17 @@
</div>
<br>
- <div id="existentsAttachments" class="panel">
- <% @learning_object.attachments.each do |attachment| %>
- <dl>
- <dt><%= image_tag attachment.thumbnail.url(:small) %></dt>
- <dd>
- <button class="btn btn-primary"><i class="fa fa-star"></i> Definir como principal</button>
- <button class="btn btn-danger"><i class="fa fa-trash"></i> Apagar</button>
- </dd>
- </dl>
- <% end %>
- </div>
+
<div id="results" class="panel"></div>
<div class="large-12 columns">
<%= link_to @learning_object do %>
- <button class="btn btn-primary"><i class="fa fa-eye fa-1g"></i> Visualizar objeto</button>
+ <button type="submit" class="btn-submit btn btn-primary btn-outline-rounded blue">
+ Visualizar <i style="margin-left:10px;" class="fa fa-eye"></i></button>
<% end %>
- <button class="btn btn-success" id="uploadFiles"><i class="fa fa-book fa-1g"></i> Publicar conteúdo</button>
+
+ <button id="uploadFile" type="submit" class="btn-submit btn btn-success btn-outline-rounded green">
+ Enviar arquivos <i style="margin-left:10px;" class="fa fa-book"></i></button>
<%= link_to next_wizard_path, id: 'uploadThumbnail' do %>
<button class="btn btn-success"><i class="fa fa-book fa-1g"></i>Selecionar imagem de destaque</button>
diff --git a/app/views/learning_objects/build/select_thumbnail.html.erb b/app/views/learning_objects/build/select_thumbnail.html.erb
index 1be35c13..411af1f7 100644
--- a/app/views/learning_objects/build/select_thumbnail.html.erb
+++ b/app/views/learning_objects/build/select_thumbnail.html.erb
@@ -1,12 +1,43 @@
-<div class="row">
- <div class="large-12 columns">
+<% content_for :learning_object_studio_navigation do %>
+ <ul class="nav nav-tabs">
+ <div class="liner"></div>
+ <li>
+ <a href="<%= edit_learning_object_path(@learning_object) %>" title="Alguma informação está errada? Edite aqui.">
+ <span class="round-tabs one">
+ <i class="fa fa-pencil-square-o"></i>
+ </span>
+ </a></li>
+ <li><a href="<%= learning_object_build_path(learning_object_id: @learning_object.id, id: :upload_attachments) %>" title="Deseja atualizar os arquivos do seu conteúdo ou enviar novos?">
+ <span class="round-tabs two">
+ <i class="fa fa-paperclip"></i>
+ </span>
+ </a>
+ </li>
+
+
+ <li class="active"><a href="#" title="Selecione uma imagem de destaque para visualização no portal.">
+ <span class="round-tabs five">
+ <i class="fa fa-picture-o"></i>
+ </span> </a>
+ </li>
+
+ </ul>
+<% end %>
+
+<% content_for :learning_object_studio_content do %>
+ <h3 class="head text-center">Welcome to Bootsnipp<sup>™</sup> <span style="color:#f48260;">♥</span></h3>
<p class="lead">Envie uma foto de destaque para <strong><%= @learning_object.name %></strong></p>
<%= form_for @learning_object, url: wizard_path, method: :put, html: { multipart: true } do |f| %>
<%= f.file_field :thumbnail %>
- <%= f.submit "Enviar imagem" %>
+
+ <button type="submit" class="btn-submit btn btn-success btn-outline-rounded green">
+ Enviar <i style="margin-left:10px;" class="fa fa-paper-plane"></i></button>
+ <%= link_to :back do %>
+ <button type="button" class="btn-submit btn btn-danger btn-outline-rounded red">Voltar</button>
+ <% end %>
<% end %>
+<% end %>
- </div>
-</div>
\ No newline at end of file
+<!-- -->
\ No newline at end of file
diff --git a/app/views/learning_objects/build/upload_attachments.html.erb b/app/views/learning_objects/build/upload_attachments.html.erb
index 16518177..99a7f6d6 100644
--- a/app/views/learning_objects/build/upload_attachments.html.erb
+++ b/app/views/learning_objects/build/upload_attachments.html.erb
@@ -1 +1,32 @@
-<%= render 'file_upload_form' %>
\ No newline at end of file
+<% content_for :learning_object_studio_navigation do %>
+ <ul class="nav nav-tabs">
+ <div class="liner"></div>
+ <li>
+ <a href="<%= edit_learning_object_path(@learning_object) %>" title="Alguma informação está errada? Edite aqui.">
+ <span class="round-tabs one">
+ <i class="fa fa-pencil-square-o"></i>
+ </span>
+ </a></li>
+
+ <li class="active"><a href="#" title="Deseja atualizar os arquivos do seu conteúdo ou enviar novos?">
+ <span class="round-tabs two">
+ <i class="fa fa-paperclip"></i>
+ </span>
+ </a>
+ </li>
+
+
+ <li><a href="<%= learning_object_build_path(learning_object_id: @learning_object.id, id: :select_thumbnail) %>" title="Selecione uma imagem de destaque para visualização no portal.">
+ <span class="round-tabs five">
+ <i class="fa fa-picture-o"></i>
+ </span> </a>
+ </li>
+
+ </ul>
+<% end %>
+
+<% content_for :learning_object_studio_content do %>
+<%= render 'file_upload_form' %>
+<% end %>
+
+<!-- -->
\ No newline at end of file
diff --git a/app/views/learning_objects/edit.html.erb b/app/views/learning_objects/edit.html.erb
index 9564e46a..53d2bf3c 100644
--- a/app/views/learning_objects/edit.html.erb
+++ b/app/views/learning_objects/edit.html.erb
@@ -1,6 +1,31 @@
-<h1>Editing Learning Object</h1>
+<% content_for :learning_object_studio_navigation do %>
+ <ul class="nav nav-tabs">
+ <div class="liner"></div>
+ <li class="active">
+ <a href="#" title="Alguma informação está errada? Edite aqui.">
+ <span class="round-tabs one">
+ <i class="fa fa-pencil-square-o"></i>
+ </span>
+ </a></li>
-<%= render 'form' %>
+ <li><a href="<%= learning_object_build_path(learning_object_id: @learning_object.id, id: :upload_attachments) %>" title="Deseja atualizar os arquivos do seu conteúdo ou enviar novos?">
+ <span class="round-tabs two">
+ <i class="fa fa-paperclip"></i>
+ </span>
+ </a>
+ </li>
-<%= link_to 'Show', @learning_object %> |
-<%= link_to 'Back', learning_objects_path %>
+
+ <li><a href="<%= learning_object_build_path(learning_object_id: @learning_object.id, id: :select_thumbnail) %>" title="Selecione uma imagem de destaque para visualização no portal.">
+ <span class="round-tabs five">
+ <i class="fa fa-picture-o"></i>
+ </span> </a>
+ </li>
+
+ </ul>
+<% end %>
+
+<% content_for :learning_object_studio_content do %>
+ <h3 class="head text-center">Edite as informações do seu conteúdo!</h3>
+ <%= render 'form' %>
+<% end %>
\ No newline at end of file
diff --git a/app/views/learning_objects/new.html.erb b/app/views/learning_objects/new.html.erb
index bcaa5061..2934391f 100644
--- a/app/views/learning_objects/new.html.erb
+++ b/app/views/learning_objects/new.html.erb
@@ -1,3 +1,31 @@
-<%= render 'form' %>
+<% content_for :learning_object_studio_navigation do %>
+ <ul class="nav nav-tabs">
+ <div class="liner"></div>
+ <li class="active">
+ <a href="#" title="Fale um pouco sobre o conteúdo que está sendo criado!">
+ <span class="round-tabs one">
+ <i class="fa fa-pencil-square-o"></i>
+ </span>
+ </a></li>
-<%= link_to 'Voltar', learning_objects_path %>
+ <li class="disabled"><a href="#" title="Envie os arquivos necessários">
+ <span class="round-tabs two">
+ <i class="fa fa-paperclip"></i>
+ </span>
+ </a>
+ </li>
+
+
+ <li class="disabled"><a href="#" title="Selecione uma imagem de destaque para visualização no portal.">
+ <span class="round-tabs five">
+ <i class="fa fa-picture-o"></i>
+ </span> </a>
+ </li>
+
+ </ul>
+<% end %>
+
+<% content_for :learning_object_studio_content do %>
+ <h3 class="head text-center">Crie seu conteúdo educacional e compartilhe!</h3>
+ <%= render 'form' %>
+<% end %>
\ No newline at end of file
--
GitLab