Add page to list all translations (#56)

app/assets/javascripts/rosetta/application.js

@@ -0,0 +1,10 @@
+//= require ./vue.min
+
+function initPhrasesList(selector, phrases) {
+  new Vue({
+    el: selector,
+    data: {
+      phrases: phrases
+    }
+  });
+}

app/assets/stylesheets/rosetta/application.css

@@ -0,0 +1,190 @@
+.phrases-menu {
+    height: 100%;
+    width: 350px;
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    left: -350px;
+    background-color: #F5F5F5;
+    transition: 0.2s;
+    -webkit-box-shadow: 3px 4px 6px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 3px 4px 6px 0 rgba(0, 0, 0, 0.2);
+}
+
+.phrases-menu.match-phrase,
+.phrases-menu.match-phrase .open-phrases-menu-btn {
+    background-color: #eaffdd;
+}
+
+.phrases-menu.match-phrase .phrases-menu__block {
+    background-color: #f7fff3;
+}
+
+.phrases-menu.unmatch-phrase,
+.phrases-menu.unmatch-phrase .open-phrases-menu-btn {
+    background-color: #fae0dd;
+}
+
+.phrases-menu.open {
+    left: 0px;
+}
+
+.phrases-menu__header {
+    height: 45px;
+    position: relative;
+}
+
+.phrases-menu__content {
+    height: calc(100% - 46px);
+    padding: 2px 0 12px 0;
+    overflow: auto;
+    box-sizing: border-box;
+}
+
+.phrases-menu__title {
+    margin: 0;
+    padding: 12px 9px;
+    font-size: 18px;
+    text-transform: uppercase;
+    border-bottom: 1px solid #dedede;
+}
+
+.phrases-menu__block {
+    color: #000000;
+    display: block;
+    text-decoration: none;
+    padding: 10px 10px;
+    transition: 0.3s;
+    font-size: 12px;
+    margin: 10px 10px 0px 10px;
+    border-radius: 3px;
+    background: #ffffff;
+    border: 1px solid #dedede;
+}
+
+.phrases-menu__block.hide {
+    display: none;
+}
+
+.phrases-menu:not(.local) .phrases-menu__block:hover {
+    color: #e81d08;
+    cursor: pointer;
+    border: 1px solid #e81d08;
+    text-decoration: none;
+}
+
+.phrases-menu__key {
+    font-size: 12px;
+    font-weight: 900;
+    margin-bottom: 11px;
+}
+
+.phrases-menu__phrase {
+    font-size: 13px;
+    margin-bottom: 11px;
+}
+
+.phrases-menu__phrase:last-child {
+    margin-bottom: 0;
+}
+
+.phrases-menu__path {
+    font-size: 12px;
+    color: #9a9a9a;
+    transition: 0.3s;
+}
+
+.phrases-menu:not(.local) .phrases-menu__block:hover .phrases-menu__path {
+    color: #e81d08;
+}
+
+.phrases-menu__footer {
+    text-align: center;
+    max-width: 75%;
+    margin: 25px auto 0;
+}
+
+.phrases-menu__footer h1 {
+    font-size: 18px;
+    color: #7b7b7b;
+}
+
+.phrases-menu__footer p {
+    font-size: 12px;
+    color: #9a9a9a;
+    line-height: 1.4;
+}
+
+.phrases-menu__footer a {
+    color: inherit;
+}
+
+.phrases-menu__footer a:hover {
+    color: #e81d08;
+}
+
+.open-phrases-menu-btn {
+    background-color: #F5F5F5;
+    color: #686866;
+    -webkit-box-shadow: 4px 3px 5px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 4px 3px 5px 0 rgba(0, 0, 0, 0.2);
+    display: block;
+    position: absolute;
+    right: -55px;
+    height: 45px;
+    width: 55px;
+    border-radius: 0 0 3px 0;
+    top: 0px;
+    cursor: pointer;
+}
+
+.phrases-menu__closebtn {
+    transition: 0.3s;
+    display: none;
+}
+
+.phrases-menu.open .phrases-menu__closebtn {
+    display: block;
+}
+
+.phrases-menu.open .phrases-menu__openbtn {
+    display: none;
+}
+
+.phrases-menu__closebtn img {
+    height: 20px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.phrases-menu__intro {
+    padding-left: 16px;
+    margin-bottom: 0;
+    font-size: 14px
+}
+
+.phrases-menu__search {
+    font-size: 14px;
+    padding: 9px 16px;
+    color: #807e7e;
+}
+
+.phrases-menu__openbtn img {
+    height: 30px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.database__field {
+    min-width: 100%;
+    max-height: 150px important !;
+}

app/controllers/rosetta/base_controller.rb

@@ -2,5 +2,10 @@
 
 module Rosetta
   class BaseController < ActionController::Base
+
+    layout 'rosetta/application'
+
+    protect_from_forgery with: :exception
+
   end
 end

app/controllers/rosetta/phrases_controller.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Rosetta
+  class PhrasesController < BaseController
+
+    def index
+      @selected_locale = (params[:locale] || I18n.default_locale).to_sym
+      @phrases = Rosetta.fetch_all_phrases(locale: @selected_locale)
+    end
+
+  end
+end

app/views/layouts/rosetta/application.html.erb

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Rosetta</title>
+
+  <meta charset="utf-8"/>
+  <%= stylesheet_link_tag 'rosetta/application' %>
+  <%= javascript_include_tag 'rosetta/application' %>
+</head>
+<body>
+  <%= yield %>
+</body>
+</html>