decidim-feeds_ui 1.0.0

data/README.md

@@ -0,0 +1,37 @@
+# Decidim::FeedsUi
+
+A mobile ui for the decidim feeds module.
+
+## Usage
+
+FeedsUi will add an overview over all users under /feeds_ui/allusers
+
+It will also overwrite the decidim layout for a more minimalistic and mobile first interface that is optimal for the [feeds](https://github.com/DecidimAustria/decidim-module-feeds) and [posts](https://github.com/DecidimAustria/decidim-module-posts) modules.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "decidim-feeds_ui"
+```
+
+And then execute:
+
+```bash
+bundle
+```
+
+## Contributing
+
+Contributions are welcome !
+
+We expect the contributions to follow the [Decidim's contribution guide](https://github.com/decidim/decidim/blob/develop/CONTRIBUTING.adoc).
+
+## Security
+
+Security is very important to us. If you have any issue regarding security, please disclose the information responsibly by sending an email to __alex [at] rusa [dot] at__ and not by creating a Github issue.
+
+## License
+
+This engine is distributed under the GNU AFFERO GENERAL PUBLIC LICENSE.

data/Rakefile

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "decidim/dev/common_rake"
+
+desc "Generates a dummy app for testing"
+task test_app: "decidim:generate_external_test_app"
+
+desc "Generates a development app."
+task development_app: "decidim:generate_external_development_app"

data/app/controllers/decidim/feeds_ui/admin/application_controller.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Decidim
+  module FeedsUi
+    module Admin
+      # This controller is the abstract class from which all other controllers of
+      # this engine inherit.
+      class ApplicationController < Decidim::Admin::ApplicationController
+        def permission_class_chain
+          [::Decidim::FeedsUi::Admin::Permissions] + super
+        end
+
+        def user_not_authorized_path
+          decidim.root_path
+        end
+
+        def user_has_no_permission_path
+          decidim.root_path
+        end
+      end
+    end
+  end
+end

data/app/controllers/decidim/feeds_ui/application_controller.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Decidim
+  module FeedsUi
+    # This controller is the abstract class from which all other controllers of
+    # this engine inherit.
+    class ApplicationController < Decidim::ApplicationController
+      helper Decidim::FeedsUi::ApplicationHelper
+
+      def permission_class_chain
+        [
+          ::Decidim::FeedsUi::Permissions,
+          ::Decidim::Permissions
+        ]
+      end
+      
+    end
+  end
+end

data/app/controllers/decidim/feeds_ui/users_controller.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Decidim
+  module FeedsUi
+    class UsersController < Decidim::FeedsUi::ApplicationController
+      helper Decidim::Messaging::ConversationHelper
+
+      helper_method :profile_holder, :active_content, :context_menu
+
+      def index
+        enforce_permission_to :read, :users
+        @users = confirmed_users
+      end
+
+      def user_profile
+        @user = confirmed_users.find(params[:id])
+        # Additional logic for displaying the user's profile
+      end
+
+      def profile_holder
+        return if params[:nickname].blank?
+
+        @profile_holder ||= Decidim::UserBaseEntity.find_by("LOWER(nickname) = ? AND decidim_organization_id = ?", params[:nickname].downcase, current_organization.id)
+      end
+
+      def filter_users
+        # @user = Decidim::User.find_by(name: params[:name], interest: params[:interest], apartment: params[:apartment])
+        query = params[:name].downcase
+        @users = confirmed_users.where("lower(name) LIKE ? OR lower(nickname) LIKE ?", "%#{query}%", "%#{query}%")
+        respond_to do |format|
+          format.js
+        end
+      end
+
+      private
+
+      def organization_users
+        Decidim::User.where(organization: current_organization)
+      end
+
+      def confirmed_users
+        organization_users.confirmed.not_deleted
+      end
+
+    end
+  end
+end

data/app/helpers/decidim/feeds_ui/application_helper.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Decidim
+  module FeedsUi
+    # Custom helpers, scoped to the feeds_ui engine.
+    #
+    module ApplicationHelper
+      def text_initials(name)
+        name.split(/[\s.]+/).map(&:chr).slice(0, 2).join.upcase
+      end
+
+      def avatar_url(user)
+        if user.avatar.attached?
+          user.attached_uploader(:avatar).path(variant: :thumb)
+        else
+          ActionController::Base.helpers.asset_pack_path("media/images/default-avatar.svg")
+        end
+      end
+    end
+  end
+end

data/app/models/decidim/feeds_ui/application_record.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Decidim
+  module FeedsUi
+    # Abstract class from which all models in this engine inherit.
+    class ApplicationRecord < ActiveRecord::Base
+      self.abstract_class = true
+    end
+  end
+end

data/app/packs/entrypoints/decidim_feeds_ui.js

@@ -0,0 +1,5 @@
+import 'src/decidim/feeds_ui/feeds_ui.js';
+
+require.context('../images', true);
+
+import "stylesheets/decidim/feeds_ui/feeds_ui.scss";

data/app/packs/images/decidim/feeds_ui/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35"><path d="M17.5 35A17.5 17.5 0 1 1 35 17.5 17.52 17.52 0 0 1 17.5 35zm0-33.06A15.56 15.56 0 1 0 33.06 17.5 15.57 15.57 0 0 0 17.5 1.94zm9.5 13.7H8a1 1 0 0 1 0-1.94h19a1 1 0 0 1 0 1.94zm0 3.68H8a1 1 0 0 1 0-1.94h19a1 1 0 0 1 0 1.94zM22.26 23H8a1 1 0 0 1 0-1.94h14.26a1 1 0 0 1 0 1.94z"/></svg>

data/app/packs/src/decidim/feeds_ui/feeds_ui.js

@@ -0,0 +1,41 @@
+document.addEventListener('DOMContentLoaded', function () {
+	console.log('Feeds UI loaded');
+	const filterOpenButton = document.getElementById(
+		'feedsUI__user_filterButton'
+	);
+	const filterDiv = document.getElementById('feedsUI__user_filter');
+	const userFilterForm = document.getElementById('feedsUI__user_filterForm');
+	const fields = userFilterForm.querySelectorAll('input');
+
+	filterOpenButton.addEventListener('click', function () {
+		filterDiv.classList.toggle('active');
+		const isExpanded = filterDiv.classList.contains('active');
+		filterOpenButton.setAttribute('aria-expanded', isExpanded);
+		if (isExpanded) {
+			// Focus on the name input when opening
+			const firstInput = filterDiv.querySelector('#feedsUI__user_name');
+			if (firstInput) {
+				firstInput.focus();
+			}
+		}
+	});
+
+	fields.forEach((field) => {
+		field.addEventListener('input', regenerateAjaxCall);
+	});
+
+	function regenerateAjaxCall() {
+		const name = document.querySelector('#feedsUI__user_name').value;
+		const interest = document.querySelector('#feedsUI__user_interest').value;
+		const apartment = document.querySelector('#feedsUI__user_apartment').value;
+		const params = new URLSearchParams({
+			name: name,
+			interest: interest,
+			apartment: apartment,
+		});
+		Rails.ajax({
+			url: '/feeds_ui/filter_users?' + params.toString(),
+			type: 'GET',
+		});
+	}
+});

data/app/packs/stylesheets/decidim/feeds_ui/feeds_ui.scss

@@ -0,0 +1,230 @@
+/* css for decidim_feeds_ui */
+
+/*
+* HEADER
+*/
+header {
+	.main-bar__avatar {
+		@apply border-0 shadow-feedMenu;
+	}
+	.main-bar__links-mobile-top {
+		@apply flex gap-2 lg:hidden;
+		> *:first-child {
+			@apply flex-grow flex gap-2 justify-center;
+		}
+		.links-mobile-top__item {
+			@apply flex gap-1 items-center text-xs font-medium rounded-2xl shadow-feedMenu py-1 px-2 w-fit;
+			svg {
+				@apply fill-black w-[16px] h-auto;
+			}
+			&[data-target*='dropdown'] {
+				span {
+					@apply text-xs font-medium;
+				}
+				svg {
+					@apply w-[16px] h-auto;
+				}
+			}
+			&.notification {
+				@apply shadow-feedNotification w-8 h-8 rounded-full;
+				svg {
+					@apply w-4 h-auto fill-feeds-notification;
+				}
+			}
+			&.active {
+				@apply shadow-feedNotification;
+				svg {
+					@apply fill-feeds-notification;
+				}
+			}
+		}
+	}
+	.main-bar__links-mobile {
+		@apply inset-x-2 bottom-2 w-auto rounded-2xl shadow-feedMenu;
+		.main-bar__links-mobile__item {
+			@apply justify-between w-1/5 text-xs;
+			svg {
+				@apply w-[24px] h-auto fill-black;
+			}
+			&.circle {
+				svg {
+					@apply w-[48px] h-auto fill-black rotate-45;
+				}
+			}
+			span {
+				@apply text-black;
+			}
+			&.active {
+				span {
+					@apply text-feeds-notification;
+				}
+				svg {
+					@apply fill-feeds-notification;
+				}
+			}
+			&.notification {
+				@apply gap-0 relative;
+				span.notification {
+					@apply absolute top-0 right-4 w-3 h-3 bg-feeds-notification rounded-full;
+				}
+			}
+		}
+	}
+}
+
+@media (max-width: 768px) {
+	header {
+		.main-bar {
+			@apply flex gap-4 items-center bg-white fixed left-0 right-0 z-30;
+			> *:last-child {
+				@apply grow;
+			}
+		}
+		.container:has(.flash) {
+			@apply absolute top-[72px] left-0 right-0 z-50 bg-white;
+			.flash {
+				@apply m-0 py-2;
+			}
+		}
+	}
+}
+
+@media (max-width: 1024px) {
+	header {
+		.main-bar {
+			.main-bar__search {
+				@apply hidden;
+			}
+		}
+		#menu-bar {
+			@apply hidden;
+		}
+	}
+}
+
+/*
+* Translation Bar
+*/
+.translation-bar {
+	@apply max-lg:pr-[91px] md:pr-[101px] lg:pr-0 w-full xl:max-w-screen-xl 2xl:max-w-screen-2xl mx-auto px-4 lg:px-16;
+	a {
+		@apply border-black p-0.5 max-lg:block max-w-fit mb-2;
+	}
+}
+
+/*
+* Content
+*/
+
+#content {
+	@apply max-lg:mt-[72px];
+}
+
+main.feeds__main {
+	@apply flex w-full xl:max-w-screen-xl 2xl:max-w-screen-2xl mx-auto p-4 lg:p-16 lg:pt-0 lg:flex-row lg:gap-4 lg:justify-between;
+}
+
+.feedsUI__user {
+	@apply w-full max-w-screen-2xl mx-auto p-4 lg:p-16;
+	.feedsUI__user_filter {
+		@apply h-0 invisible motion-safe:transition-transform;
+		&.active {
+			@apply h-auto visible;
+		}
+	}
+}
+
+/*
+FOOTER
+*/
+footer {
+	@apply mb-0;
+	.mini-footer {
+		position: relative;
+		z-index: 20;
+		background-color: #f6f8fa !important;
+		padding: 0;
+		padding-bottom: 80px;
+		color: #3c3934 !important;
+		* {
+			color: #3c3934 !important;
+		}
+		.row {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 0.5rem;
+			line-height: 1.5rem;
+			padding: 0.5rem 0;
+			transition: all ease 500ms;
+			@media (min-width: 1024px) {
+				padding: 1rem 0;
+				gap: 1rem;
+				a.small_logo {
+					margin: 0;
+				}
+			}
+
+			&.logos {
+				justify-content: space-between;
+				.external-link-indicator {
+					display: none;
+				}
+			}
+			a.small_logo {
+				margin: 0.5rem 0;
+			}
+			.external-link-container {
+				padding-left: 0.1rem;
+				padding-inline-start: 0.1rem;
+				padding-right: 0.1rem;
+				padding-inline-end: 0.1rem;
+			}
+			&.footer_mitgestalten {
+				font-size: 0.8rem;
+				font-weight: 500;
+				text-transform: uppercase;
+				.mitgestalten_logo {
+					max-height: 50px;
+				}
+			}
+			img {
+				max-width: 125px;
+			}
+		}
+		nav {
+			ul {
+				justify-content: center;
+				flex-direction: row;
+				gap: 1rem;
+				flex-wrap: wrap;
+			}
+			padding-block: 1rem;
+		}
+	}
+	.main-footer a,
+	.mini-footer a,
+	.footer-social .icon {
+		transition: color 0.2s ease-in;
+		&:hover {
+			text-decoration: none;
+		}
+	}
+	.main-footer a,
+	.mini-footer a :not(.icona) {
+		text-decoration: underline;
+	}
+	a.small_logo {
+		height: 1.5rem;
+		.svg-logo {
+			height: 1.5rem;
+			width: auto;
+			text-decoration: underline;
+			transition: color 0.2s ease-in;
+			margin: 0 0.5rem;
+			&:hover {
+				text-decoration: none;
+			}
+		}
+	}
+}

data/app/permissions/decidim/feeds_ui/admin/permissions.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Decidim
+  module FeedsUi
+    module Admin
+      class Permissions < Decidim::DefaultPermissions
+        def permissions
+          return permission_action if permission_action.scope != :admin
+          return permission_action unless user&.admin?
+
+          allow! if can_access?
+
+          permission_action
+        end
+
+        def can_access?
+          permission_action.subject == :feeds_ui &&
+            permission_action.action == :read
+        end
+      end
+    end
+  end
+end

data/app/permissions/decidim/feeds_ui/permissions.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Decidim
+  module FeedsUi
+    class Permissions < Decidim::DefaultPermissions
+      def permissions
+        return permission_action unless user
+
+        case permission_action.subject
+        when :users
+          case permission_action.action
+          when :read
+            allow! if can_access?
+          end
+        end
+
+        permission_action
+      end
+
+      private
+
+      def can_access?
+        user.present?
+      end
+    end
+  end
+end

data/app/views/decidim/feeds_ui/users/_users_list.html.erb

@@ -0,0 +1,26 @@
+<% if @users.empty? %>
+  <li class="pl-4 pr-6 py-4 m-4 bg-white rounded-2xl shadow text-md font-bold">
+    <%= t("decidim.components.feeds_ui.user.filter.noUser") %>
+  </li>
+<% else %>
+  <% @users.each do |user| %>
+    <li>
+      <%= link_to Decidim::UserPresenter.new(user).profile_url, class: "grow shrink basis-0 pl-4 pr-6 py-4 m-4 bg-white rounded-2xl shadow justify-between items-center gap-4 flex" do %>
+        <div class="py-2 flex-col justify-start items-start flex">
+          <span class="font-semibold"><%= user.name %></span>
+          <span>@<%= user.nickname %></span>
+        </div>
+        <span class="rounded-full w-[50px] h-[50px] overflow-hidden">
+          <% if user.avatar.attached? %>
+            <%= image_tag(
+                  user.attached_uploader(:avatar).path(),
+                  alt: decidim_sanitize(user.nickname), 
+                  class: 'block w-full h-full object-cover'
+                )
+            %>
+          <% end %>
+        </span>
+      <% end %>
+    </li>
+  <% end %>
+<% end %>

data/app/views/decidim/feeds_ui/users/filter_users.js.erb

@@ -0,0 +1,2 @@
+var usersDisplay = document.querySelector('.user_display ul');
+usersDisplay.innerHTML = '<%= j(render partial: "users_list", locals: { users: @users }) %>';

data/app/views/decidim/feeds_ui/users/index.html.erb

@@ -0,0 +1,30 @@
+<main class="feedsUI__user min-h-[calc(100vh-72px)]">
+  <button id="feedsUI__user_filterButton" class="justify-start items-center gap-1 inline-flex my-4 mx-2 p-2 font-bold text-md" aria-expanded="false" aria-controls="feedsUI__user_filter">
+    <%= icon "filter-2-line", class: "h-[20px] w-auto" %><span><%= t("decidim.components.feeds_ui.user.filter.title") %></span>
+  </button> 
+  <div id="feedsUI__user_filter" class="feedsUI__user_filter">
+    <%= form_tag(decidim_feeds_ui.allusers_path, method: :get, id: "feedsUI__user_filterForm", remote: true, class: "flex flex-col gap-4 px-4 pt-0 pb-4") do %>
+      <%= label_tag :name, class: "flex flex-col gap-1" do %>
+        <%= t("decidim.components.feeds_ui.user.filter.name") %>
+        <%= text_field_tag :name, params[:name], id: "feedsUI__user_name", class: "reset-defaults p-4 border border-gray rounded-md", autocomplete: "off" %>
+      <% end %>
+      <%= label_tag :interest, class: "flex flex-col gap-1 hidden" do %>
+        <%= t("decidim.components.feeds_ui.user.filter.interest") %>
+        <%= text_field_tag :interest, params[:interest], id: "feedsUI__user_interest", class: "reset-defaults p-4 border border-gray rounded-md hidden", autocomplete: "off" %>
+      <% end %>
+      <%= label_tag :apartment, class: "flex flex-col gap-1 hidden" do %>
+        <%= t("decidim.components.feeds_ui.user.filter.block") %>
+        <%= text_field_tag :apartment, params[:apartment], id: "feedsUI__user_apartment", class: "reset-defaults p-4 border border-gray rounded-md hidden", autocomplete: "off" %>
+      <% end %>
+    <% end %>
+  </div>
+  <div class="user_display" aria-live="polite">
+    <ul>
+      <%= render partial: "users_list", locals: { users: @users } %>
+    </ul>
+  </div>
+</main>
+<%= append_javascript_pack_tag "decidim_feeds_ui" %>
+<style>
+.decidim-accessibility-badge{display:none;}
+</style>

data/app/views/decidim/feeds_ui/users/user_profile.html.erb

@@ -0,0 +1,24 @@
+<main class="feedsUI__user px-4">
+  <div class="flex mt-4 gap-4">
+    <div class="w-1/2 flex flex-col">
+      <h1 class="text-xl font-bold h2"><%= @user.name %></h1>
+      <p class="text-base">@<%= @user.nickname %></p>
+      <%# if @user.direct_messages_enabled?(context) %>
+        <%= link_to current_or_new_conversation_path_with(@user), class: "flex gap-1 mt-4 items-center" do %>
+          <%= icon "mail-send-line" %>
+          <span><%= t("decidim.profiles.show.send_private_message") %></span>
+        <% end %>
+      <%# end %>
+    </div>
+    <div class="w-1/2">
+      <% if @user.avatar.attached? %>
+        <%= image_tag @user.attached_uploader(:avatar).path(), alt: t("decidim.author.avatar", name: decidim_sanitize(@user.name)), class: "w-[250px] h-[250px] object-cover rounded-md" %>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="py-8 px-4">
+    <%= @user.about.to_s%>
+  </div>
+
+</main>

data/app/views/layouts/decidim/_admin_links.html.erb

@@ -0,0 +1,3 @@
+<%
+# empty to overwrite the core admin_links partial
+%>

data/app/views/layouts/decidim/_logo.html.erb

@@ -0,0 +1,10 @@
+<% if current_user %>
+  <%= link_to decidim.account_path do %>
+    <span class="main-bar__avatar">
+      <%= image_tag(
+            Decidim::UserPresenter.new(current_user).avatar_url(:thumb),
+            alt: t("decidim.author.avatar", name: decidim_sanitize(current_user.nickname))
+          ) %>
+    </span>
+  <% end %>
+<% end %>

data/app/views/layouts/decidim/footer/_main.html.erb

@@ -0,0 +1,4 @@
+<% if current_user.present? %>
+  <%= render partial: "decidim/posts/posts/form.html" %>
+<% end %>
+<%= append_javascript_pack_tag "decidim_feeds" %>