From d267d2befe66ac828910e58ec31d850fb62acfb1 Mon Sep 17 00:00:00 2001 From: hacklab Date: Mon, 19 Oct 2026 16:00:31 +0200 Subject: [PATCH] bienvenida: paso Perfil (workflow) de un toque, Activismo primero; Ajustes con la misma lista; fuera Personal/Social de la barra de arriba --- docs/USABILIDAD_PAD.txt | 8 ++ src/client/assets/styles/hive_acampada.css | 10 +- src/client/assets/styles/mobile_base.css | 8 -- src/client/assets/styles/mobile_ux.css | 9 +- src/client/assets/translations/i18n_fork.js | 132 ++++++++++++++++++++ src/models/fork_workflows.js | 7 +- src/views/hive_views.js | 11 +- src/views/mobile_ui.js | 32 ++++- src/views/settings_view.js | 5 +- src/views/welcome_view.js | 4 +- 10 files changed, 196 insertions(+), 30 deletions(-) diff --git a/docs/USABILIDAD_PAD.txt b/docs/USABILIDAD_PAD.txt index 52d397d..0eb5712 100644 --- a/docs/USABILIDAD_PAD.txt +++ b/docs/USABILIDAD_PAD.txt @@ -244,3 +244,11 @@ Con la navegación nueva (portada = actividad, pestaña Menú abajo). "Conversaciones" se partía a 360 px). En Ajustes, lo mismo, y la sección va justo después del idioma para encontrarla fácil. [vista propia + una línea en welcome_view y settings_view] +- Bienvenida: faltaba elegir para qué se usa Oasis (el backend del dev quita ese paso + en el móvil). Vuelve como paso "Perfil", el segundo, justo después de la identidad: + Activismo primero, luego Acampada y el resto, cada uno con una línea de para qué + sirve. Un toque y guardado. En Ajustes, la misma lista. [vista propia + una línea + en welcome_view y settings_view] +- Con el perfil Activismo (45 módulos) los botones Personal/Social de la barra de + arriba no cabían a 360 px y tapaban el logo. Ya no hacían falta (filtraban el + lanzador, que ahora está en la hoja del menú): quitados. [vista propia] diff --git a/src/client/assets/styles/hive_acampada.css b/src/client/assets/styles/hive_acampada.css index cc65393..588cf6d 100644 --- a/src/client/assets/styles/hive_acampada.css +++ b/src/client/assets/styles/hive_acampada.css @@ -472,19 +472,19 @@ label.welcome-ux-option:has(input:checked) { background: var(--a26-neon) !import .chat-reply-cancel, .chat-message-meta .chat-reply-btn { color: var(--a26-fg) !important; } -/* ---------- skins y workflows en Ajustes ---------- */ -.skin-card, .workflow-card { +/* ---------- skins en Ajustes ---------- */ +.skin-card { background: var(--a26-bg) !important; color: var(--a26-fg) !important; border: var(--a26-bd) !important; border-radius: var(--a26-radius) !important; box-shadow: 0 5px 0 var(--a26-fg) !important; } .skin-card .skin-shot { border: var(--a26-bd-fino); } -.skin-card .skin-name, .workflow-card { +.skin-card .skin-name { font-family: var(--a26-tit) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: .02em; font-size: 21px !important; } -.skin-card.is-current, .workflow-card.is-current { background: var(--a26-neon) !important; color: var(--a26-fg) !important; border: var(--a26-bd) !important; } -.skin-card:active, .workflow-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--a26-fg) !important; background: var(--a26-neon) !important; } +.skin-card.is-current { background: var(--a26-neon) !important; color: var(--a26-fg) !important; border: var(--a26-bd) !important; } +.skin-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--a26-fg) !important; background: var(--a26-neon) !important; } /* ---------- letra y botones mas grandes, para leer sin gafas ---------- */ body { font-size: 18px; } diff --git a/src/client/assets/styles/mobile_base.css b/src/client/assets/styles/mobile_base.css index 0089f58..e3c89ba 100644 --- a/src/client/assets/styles/mobile_base.css +++ b/src/client/assets/styles/mobile_base.css @@ -1000,11 +1000,3 @@ body:has(.oasis-nav-side-toggle) { padding-top: 84px !important; } .skin-card .skin-name { font-size: 17px; font-weight: 700; text-align: center; } .skin-card.is-current { border: 2px solid #FFD700 !important; background: #2a2412 !important; } .skin-card.is-current .skin-name::after { content: " \2713"; } -.workflow-pick { display: flex !important; flex-direction: column; gap: 10px; margin: 0; } -.workflow-card { - width: 100% !important; min-height: 56px !important; margin: 0 !important; padding: 10px 16px !important; - font-size: 18px !important; text-align: left !important; - background: #1c1c1c !important; color: #e6e6e6 !important; border: 1px solid #444 !important; border-radius: 14px !important; -} -.workflow-card.is-current { border: 2px solid #FFD700 !important; background: #2a2412 !important; color: #FFD700 !important; } -.workflow-card.is-current::after { content: " \2713"; } diff --git a/src/client/assets/styles/mobile_ux.css b/src/client/assets/styles/mobile_ux.css index e3318de..7408f0a 100644 --- a/src/client/assets/styles/mobile_ux.css +++ b/src/client/assets/styles/mobile_ux.css @@ -384,7 +384,7 @@ body .main-content > .main-column { padding-left: 0 !important; padding-right: 0 /* ---------- regla general de letra para botones ---------- */ /* todo boton en letra del sistema; Anton solo en el principal de cada pantalla (el negro, .create-button) y en las tarjetas de aspecto */ -.main-column :is(button, input[type="submit"], input[type="button"], .filter-btn, a.filter-btn):not(.create-button):not(.welcome-banner-start):not(.skin-card):not(.workflow-card):not(.btn-singleview) { +.main-column :is(button, input[type="submit"], input[type="button"], .filter-btn, a.filter-btn):not(.create-button):not(.welcome-banner-start):not(.skin-card):not(.ux-pick-card):not(.btn-singleview) { font-family: var(--ux-text) !important; font-weight: 700 !important; letter-spacing: .02em !important; @@ -610,12 +610,19 @@ body:has(#oasis-menu-toggle:checked) form.oasis-phone-state { display: none !imp .main-column .ux-pick-shot { display: block; flex: 0 0 76px; width: 76px; height: auto; border-radius: 8px; margin: 0 12px 0 0; border: 1px solid rgba(0, 0, 0, .2); } .main-column .ux-pick-label { flex: 1 1 auto; min-width: 0; text-align: left; font-size: 16px; font-weight: 700; line-height: 1.2; } .main-column .ux-pick-now { flex: 0 0 auto; margin-left: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } +/* perfil de uso: sin miniatura, nombre y una linea de para que sirve */ +.main-column .ux-pick-text { flex: 1 1 auto; min-width: 0; display: block; text-align: left; } +.main-column .ux-pick-text .ux-pick-label { display: block; } +.main-column .ux-pick-sub { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.3; opacity: .8; } +.main-column .wf-pick button.ux-pick-card { padding: 10px 14px !important; } +.main-column .wf-pick .ux-pick-grid { display: block !important; } @media (min-width: 700px) { .main-column .ux-pick-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 12px; } .main-column button.ux-pick-card { flex-direction: column; text-align: center; margin: 0 !important; padding: 10px !important; } .main-column .ux-pick-shot { width: 100%; flex: 0 0 auto; margin: 0 0 8px; } .main-column .ux-pick-now { margin: 4px 0 0; } } +@media (min-width: 700px) { .main-column .wf-pick button.ux-pick-card { flex-direction: row; text-align: left; margin: 0 0 10px !important; } } /* ---------- tabletas y pantallas anchas ---------- */ /* a 800dp todo se estiraba: lineas larguisimas y la hoja del menu con cinco iconos diff --git a/src/client/assets/translations/i18n_fork.js b/src/client/assets/translations/i18n_fork.js index 8d0573a..f5f3904 100644 --- a/src/client/assets/translations/i18n_fork.js +++ b/src/client/assets/translations/i18n_fork.js @@ -22,6 +22,18 @@ module.exports = { bbMenuClose: "Close", uxPickHint: "Tap one and it is saved. You can change it any time in Settings.", uxPickCurrent: "In use", + welcomeStepUseMobile: "Profile", + welcomeHintUseMobile: "What you use Oasis for. It turns on the modules you need.", + wfHint_activists: "Assemblies, tribes, votes, forums and shared documents", + wfHint_acampada: "Just what a camp needs: chats, rooms, committees and voting", + wfHint_full: "All modules", + wfHint_default: "All modules", + wfHint_social: "Feed, photos, events and friends", + wfHint_kids: "School, games and making things", + wfHint_night: "Blogs, music, videos and talk", + wfHint_jobs: "Work, projects, market and office", + wfHint_business: "Economy, banking, office and documents", + wfHint_mobile: "The basics for a phone", workflow_acampada: "Camp", tribeSectionsMore: "More", tribeSectionsLabel: "Sections", @@ -104,6 +116,18 @@ module.exports = { bbMenuClose: "Cerrar", uxPickHint: "Toca uno y queda guardado. Puedes cambiarlo cuando quieras en Ajustes.", uxPickCurrent: "En uso", + welcomeStepUseMobile: "Perfil", + welcomeHintUseMobile: "Para qué usas Oasis. Enciende los módulos que hacen falta.", + wfHint_activists: "Asambleas, tribus, votaciones, foros y documentos compartidos", + wfHint_acampada: "Lo justo para una acampada: chats, salas, comisiones y votar", + wfHint_full: "Todos los módulos", + wfHint_default: "Todos los módulos", + wfHint_social: "Feed, fotos, eventos y amistades", + wfHint_kids: "Escuela, juegos y hacer cosas", + wfHint_night: "Blogs, música, vídeos y charla", + wfHint_jobs: "Trabajo, proyectos, mercado y oficina", + wfHint_business: "Economía, banca, oficina y documentos", + wfHint_mobile: "Lo básico para el móvil", workflow_acampada: "Acampada", tribeSectionsMore: "Más", tribeSectionsLabel: "Secciones", @@ -192,6 +216,18 @@ module.exports = { bbMenuClose: "Fermer", uxPickHint: "Touchez-en un et c'est enregistré. Vous pouvez le changer à tout moment dans les Paramètres.", uxPickCurrent: "Actuel", + welcomeStepUseMobile: "Profil", + welcomeHintUseMobile: "À quoi vous sert Oasis. Active les modules nécessaires.", + wfHint_activists: "Assemblées, tribus, votes, forums et documents partagés", + wfHint_acampada: "Le nécessaire pour un campement : chats, salons, commissions et votes", + wfHint_full: "Tous les modules", + wfHint_default: "Tous les modules", + wfHint_social: "Fil, photos, événements et amis", + wfHint_kids: "École, jeux et création", + wfHint_night: "Blogs, musique, vidéos et discussions", + wfHint_jobs: "Travail, projets, marché et bureau", + wfHint_business: "Économie, banque, bureau et documents", + wfHint_mobile: "L'essentiel pour le téléphone", workflow_acampada: "Campement", tribeSectionsMore: "Plus", tribeSectionsLabel: "Sections", @@ -274,6 +310,18 @@ module.exports = { bbMenuClose: "Itxi", uxPickHint: "Bat ukitu eta gordeta geratzen da. Nahi duzunean alda dezakezu Ezarpenetan.", uxPickCurrent: "Erabiltzen", + welcomeStepUseMobile: "Profila", + welcomeHintUseMobile: "Oasis zertarako erabiltzen duzun. Behar diren moduluak pizten ditu.", + wfHint_activists: "Batzarrak, tribuak, bozketak, foroak eta dokumentu partekatuak", + wfHint_acampada: "Kanpaldi baterako behar dena: txatak, gelak, batzordeak eta bozkatzea", + wfHint_full: "Modulu guztiak", + wfHint_default: "Modulu guztiak", + wfHint_social: "Jarioa, argazkiak, ekitaldiak eta lagunak", + wfHint_kids: "Eskola, jolasak eta sortzea", + wfHint_night: "Blogak, musika, bideoak eta solasa", + wfHint_jobs: "Lana, proiektuak, merkatua eta bulegoa", + wfHint_business: "Ekonomia, banka, bulegoa eta dokumentuak", + wfHint_mobile: "Mugikorrerako oinarrizkoa", workflow_acampada: "Kanpaldia", tribeSectionsMore: "Gehiago", tribeSectionsLabel: "Atalak", @@ -356,6 +404,18 @@ module.exports = { bbMenuClose: "Schließen", uxPickHint: "Tippe eins an und es ist gespeichert. Du kannst es jederzeit in den Einstellungen ändern.", uxPickCurrent: "Aktiv", + welcomeStepUseMobile: "Profil", + welcomeHintUseMobile: "Wofür du Oasis nutzt. Schaltet die nötigen Module ein.", + wfHint_activists: "Versammlungen, Stämme, Abstimmungen, Foren und gemeinsame Dokumente", + wfHint_acampada: "Was ein Camp braucht: Chats, Räume, Arbeitsgruppen und Abstimmen", + wfHint_full: "Alle Module", + wfHint_default: "Alle Module", + wfHint_social: "Feed, Fotos, Termine und Freunde", + wfHint_kids: "Schule, Spiele und Selbermachen", + wfHint_night: "Blogs, Musik, Videos und Gespräche", + wfHint_jobs: "Arbeit, Projekte, Markt und Büro", + wfHint_business: "Wirtschaft, Bank, Büro und Dokumente", + wfHint_mobile: "Das Wichtigste fürs Handy", workflow_acampada: "Camp", tribeSectionsMore: "Mehr", tribeSectionsLabel: "Bereiche", @@ -438,6 +498,18 @@ module.exports = { bbMenuClose: "Chiudi", uxPickHint: "Toccane uno ed è salvato. Puoi cambiarlo quando vuoi nelle Impostazioni.", uxPickCurrent: "In uso", + welcomeStepUseMobile: "Profilo", + welcomeHintUseMobile: "A cosa ti serve Oasis. Attiva i moduli necessari.", + wfHint_activists: "Assemblee, tribù, votazioni, forum e documenti condivisi", + wfHint_acampada: "Il necessario per un accampamento: chat, stanze, commissioni e voto", + wfHint_full: "Tutti i moduli", + wfHint_default: "Tutti i moduli", + wfHint_social: "Feed, foto, eventi e amicizie", + wfHint_kids: "Scuola, giochi e creatività", + wfHint_night: "Blog, musica, video e chiacchiere", + wfHint_jobs: "Lavoro, progetti, mercato e ufficio", + wfHint_business: "Economia, banca, ufficio e documenti", + wfHint_mobile: "L'essenziale per il telefono", workflow_acampada: "Accampata", tribeSectionsMore: "Altro", tribeSectionsLabel: "Sezioni", @@ -520,6 +592,18 @@ module.exports = { bbMenuClose: "Fechar", uxPickHint: "Toque num e fica guardado. Pode mudá-lo quando quiser nas Definições.", uxPickCurrent: "Em uso", + welcomeStepUseMobile: "Perfil", + welcomeHintUseMobile: "Para que usa o Oasis. Liga os módulos necessários.", + wfHint_activists: "Assembleias, tribos, votações, fóruns e documentos partilhados", + wfHint_acampada: "O necessário para um acampamento: chats, salas, comissões e votar", + wfHint_full: "Todos os módulos", + wfHint_default: "Todos os módulos", + wfHint_social: "Feed, fotos, eventos e amizades", + wfHint_kids: "Escola, jogos e criar coisas", + wfHint_night: "Blogues, música, vídeos e conversa", + wfHint_jobs: "Trabalho, projetos, mercado e escritório", + wfHint_business: "Economia, banca, escritório e documentos", + wfHint_mobile: "O básico para o telemóvel", workflow_acampada: "Acampada", tribeSectionsMore: "Mais", tribeSectionsLabel: "Secções", @@ -602,6 +686,18 @@ module.exports = { bbMenuClose: "关闭", uxPickHint: "点一下即保存。随时可以在设置中更改。", uxPickCurrent: "使用中", + welcomeStepUseMobile: "用途", + welcomeHintUseMobile: "你用 Oasis 做什么。会打开需要的模块。", + wfHint_activists: "集会、部落、投票、论坛和共享文档", + wfHint_acampada: "营地所需：聊天、房间、小组和投票", + wfHint_full: "全部模块", + wfHint_default: "全部模块", + wfHint_social: "动态、照片、活动和朋友", + wfHint_kids: "学校、游戏和创作", + wfHint_night: "博客、音乐、视频和闲聊", + wfHint_jobs: "工作、项目、市场和办公", + wfHint_business: "经济、银行、办公和文档", + wfHint_mobile: "手机基本功能", workflow_acampada: "营地", tribeSectionsMore: "更多", tribeSectionsLabel: "板块", @@ -684,6 +780,18 @@ module.exports = { bbMenuClose: "إغلاق", uxPickHint: "المس واحدًا ويُحفظ. يمكنك تغييره في أي وقت من الإعدادات.", uxPickCurrent: "قيد الاستخدام", + welcomeStepUseMobile: "الملف", + welcomeHintUseMobile: "لماذا تستخدم Oasis. يفعّل الوحدات التي تحتاجها.", + wfHint_activists: "جمعيات وقبائل وتصويت ومنتديات ووثائق مشتركة", + wfHint_acampada: "ما يلزم للمخيم: دردشات وغرف ولجان وتصويت", + wfHint_full: "كل الوحدات", + wfHint_default: "كل الوحدات", + wfHint_social: "الموجز والصور والفعاليات والأصدقاء", + wfHint_kids: "المدرسة والألعاب والإبداع", + wfHint_night: "مدونات وموسيقى وفيديو ودردشة", + wfHint_jobs: "عمل ومشاريع وسوق ومكتب", + wfHint_business: "اقتصاد ومصرف ومكتب ووثائق", + wfHint_mobile: "الأساسيات للهاتف", workflow_acampada: "مخيم", tribeSectionsMore: "المزيد", tribeSectionsLabel: "الأقسام", @@ -766,6 +874,18 @@ module.exports = { bbMenuClose: "बंद करें", uxPickHint: "एक पर टैप करें और वह सेव हो जाएगा। सेटिंग्स में इसे कभी भी बदल सकते हैं।", uxPickCurrent: "चालू", + welcomeStepUseMobile: "प्रोफ़ाइल", + welcomeHintUseMobile: "आप Oasis किस लिए इस्तेमाल करते हैं। ज़रूरी मॉड्यूल चालू करता है।", + wfHint_activists: "सभाएँ, ट्राइब, मतदान, फ़ोरम और साझा दस्तावेज़", + wfHint_acampada: "शिविर के लिए ज़रूरी: चैट, कमरे, समितियाँ और मतदान", + wfHint_full: "सभी मॉड्यूल", + wfHint_default: "सभी मॉड्यूल", + wfHint_social: "फ़ीड, फ़ोटो, कार्यक्रम और दोस्त", + wfHint_kids: "स्कूल, खेल और रचना", + wfHint_night: "ब्लॉग, संगीत, वीडियो और बातचीत", + wfHint_jobs: "काम, प्रोजेक्ट, बाज़ार और दफ़्तर", + wfHint_business: "अर्थव्यवस्था, बैंकिंग, दफ़्तर और दस्तावेज़", + wfHint_mobile: "फ़ोन के लिए बुनियादी", workflow_acampada: "शिविर", tribeSectionsMore: "और", tribeSectionsLabel: "खंड", @@ -848,6 +968,18 @@ module.exports = { bbMenuClose: "Закрыть", uxPickHint: "Нажмите на вариант, и он сохранится. Изменить можно в любой момент в Настройках.", uxPickCurrent: "Сейчас", + welcomeStepUseMobile: "Профиль", + welcomeHintUseMobile: "Для чего вам Oasis. Включает нужные модули.", + wfHint_activists: "Собрания, племена, голосования, форумы и общие документы", + wfHint_acampada: "Всё для лагеря: чаты, комнаты, комиссии и голосование", + wfHint_full: "Все модули", + wfHint_default: "Все модули", + wfHint_social: "Лента, фото, события и друзья", + wfHint_kids: "Школа, игры и творчество", + wfHint_night: "Блоги, музыка, видео и общение", + wfHint_jobs: "Работа, проекты, рынок и офис", + wfHint_business: "Экономика, банк, офис и документы", + wfHint_mobile: "Основное для телефона", workflow_acampada: "Лагерь", tribeSectionsMore: "Ещё", tribeSectionsLabel: "Разделы", diff --git a/src/models/fork_workflows.js b/src/models/fork_workflows.js index 7163fae..4bc97ec 100644 --- a/src/models/fork_workflows.js +++ b/src/models/fork_workflows.js @@ -29,9 +29,10 @@ const register = () => { if (wf.WORKFLOWS.some(x => x.key === w.key)) continue; wf.WORKFLOWS.push(w); wf.WORKFLOW_KEYS.push(w.key); - // en el movil, la primera opcion del asistente - if (process.env.OASIS_MOBILE === '1') wf.WIZARD_WORKFLOWS.unshift(w.key); - else wf.WIZARD_WORKFLOWS.push(w.key); + // en el asistente, detras de activistas (en el movil mobile_ui.workflowPick pone + // Activismo y Acampada las primeras) + const at = wf.WIZARD_WORKFLOWS.indexOf('activists'); + wf.WIZARD_WORKFLOWS.splice(at === -1 ? wf.WIZARD_WORKFLOWS.length : at + 1, 0, w.key); } }; diff --git a/src/views/hive_views.js b/src/views/hive_views.js index 6d528f7..6a5421e 100644 --- a/src/views/hive_views.js +++ b/src/views/hive_views.js @@ -22,16 +22,13 @@ module.exports = ({ i18n }) => { const renderMobileTopbar = () => { // solo en movil: en escritorio manda la cabecera de upstream if (process.env.OASIS_MOBILE !== '1') return ""; - // FORK_IA_UX v3: Personal/Community VUELVEN al topbar (ya funcionan: la hoja cerrada es - // visibility:hidden y no bloquea los taps). Llena el top y da el filtro a un toque. - const hiveFilter = (typeof global !== "undefined" && global.__OASIS_HIVE_FILTER__) || ""; + // Personal/Social ya no van aqui: filtraban el lanzador, que ahora esta en la hoja + // del menu, y con muchos modulos (workflow activistas) no cabian a 360px y tapaban + // el logo. Queda el hueco para el boton de No molestar del telefono return div( { class: "oasis-mobile-topbar" }, a({ class: "omt-logo", href: "/" }, img({ src: "/assets/images/snh-oasis.jpg", alt: "Oasis" })), - isCompact() ? div({ class: "omt-menus" }) : div({ class: "omt-menus" }, - a({ class: hiveFilter === "personal" ? "oasis-menu-btn active" : "oasis-menu-btn", href: hiveFilter === "personal" ? "/activity" : "/activity?hive=personal" }, span(i18n.menuPersonal || "Personal")), - a({ class: hiveFilter === "community" ? "oasis-menu-btn active" : "oasis-menu-btn", href: hiveFilter === "community" ? "/activity" : "/activity?hive=community" }, span(i18n.menuSocial || "Social")) - ), + div({ class: "omt-menus" }), a({ class: "omt-avatar", href: "/profile" }, img({ src: (typeof global !== "undefined" && global.__OASIS_SELF_AVATAR__) || "/assets/images/default-avatar.png", alt: i18n.profile || "Profile" })) ); }; diff --git a/src/views/mobile_ui.js b/src/views/mobile_ui.js index 33dc310..c3448e3 100644 --- a/src/views/mobile_ui.js +++ b/src/views/mobile_ui.js @@ -157,6 +157,36 @@ const uxPick = (action, cfg, withHint) => { ); }; +// perfil de uso (workflow): igual, un boton por opcion con una linea de para que +// sirve. Activismo y Acampada primero; el resto en el orden del dev +const WORKFLOW_FIRST = ['activists', 'acampada']; +const workflowPick = (action, current, keys, withHint) => { + const i18n = t(); + const list = WORKFLOW_FIRST.filter(k => keys.includes(k)).concat(keys.filter(k => !WORKFLOW_FIRST.includes(k))); + const name = (k) => k === 'full' ? (i18n.welcomeWorkflow_full || k) : (i18n[`workflow_${k}`] || k); + return form({ method: 'POST', action, class: 'ux-pick wf-pick' }, + withHint ? p({ class: 'ux-pick-hint' }, i18n.uxPickHint || 'Tap one and it is saved. You can change it any time in Settings.') : null, + div({ class: 'ux-pick-grid' }, + ...list.map(k => button(Object.assign({ type: 'submit', name: 'workflow', value: k, class: k === current ? 'ux-pick-card is-current' : 'ux-pick-card' }, k === current ? { 'aria-current': 'true' } : {}), + span({ class: 'ux-pick-text' }, + span({ class: 'ux-pick-label' }, name(k)), + i18n[`wfHint_${k}`] ? span({ class: 'ux-pick-sub' }, i18n[`wfHint_${k}`]) : null), + k === current ? span({ class: 'ux-pick-now' }, i18n.uxPickCurrent || 'In use') : null + )) + ) + ); +}; + +// pasos de la bienvenida en el movil: el backend del dev quita el de uso en el movil; +// aqui vuelve, el segundo, justo despues de la identidad (/welcome/workflow es suyo) +const welcomeSteps = (usable) => { + if (usable.includes('workflow')) return usable; + const out = usable.slice(); + const at = out.indexOf('profile'); + out.splice(at === -1 ? 0 : at + 1, 0, 'workflow'); + return out; +}; + // ---------- acciones de tarjeta ---------- // borrar pide un segundo toque: la X abre "¿Borrar? Si, borrar" y solo ese boton @@ -200,6 +230,6 @@ const welcomeBannerAction = () => t().welcomeBannerActionMobile || t().welcomeBa module.exports = { isMobile, VOTE_KINDS, voteKindPicker, voteBars, voteOwnNote, tribeRow, tribeTabs, - settingsOrder, languagePick, uxPick, deleteConfirm, footerLine, + settingsOrder, languagePick, uxPick, workflowPick, welcomeSteps, deleteConfirm, footerLine, welcomeBannerHere, welcomeBannerText, welcomeBannerAction }; diff --git a/src/views/settings_view.js b/src/views/settings_view.js index 879766d..6ce4758 100644 --- a/src/views/settings_view.js +++ b/src/views/settings_view.js @@ -72,10 +72,7 @@ const settingsView = (params) => { ); const workflowPicker = () => section({ id: "workflows" }, div({ class: "tags-header" }, h2(i18n.workflowsTitle), p(i18n.workflowsDescriptionMobile)), - form({ action: "/settings/workflow", method: "POST", class: "workflow-pick" }, - ...WORKFLOWS.map(w => button({ type: "submit", name: "workflow", value: w.key, class: activeWorkflow === w.key ? "workflow-card is-current" : "workflow-card" }, - i18n[`workflow_${w.key}`] || w.key)) - ) + mobileUi.workflowPick("/settings/workflow", activeWorkflow, WORKFLOWS.map(w => w.key)) ); const workflowSection = isMobile ? workflowPicker() : section({ id: "workflows" }, diff --git a/src/views/welcome_view.js b/src/views/welcome_view.js index 1d408e4..7b39341 100644 --- a/src/views/welcome_view.js +++ b/src/views/welcome_view.js @@ -17,6 +17,7 @@ const SECTIONS = { community: ["welcomeStepCommunity", "welcomeHintCommunity"], greeting: ["welcomeStepIntro", "welcomeHintIntro"] } +if (mobileUi.isMobile()) SECTIONS.workflow = ["welcomeStepUseMobile", "welcomeHintUseMobile"] const submitRow = (text) => div({ class: "welcome-action" }, button({ type: "submit" }, text)) @@ -54,6 +55,7 @@ const stepAction = (key, profile, status) => { } if (key === "workflow") { const selected = WIZARD_WORKFLOWS.includes(status.workflow) ? status.workflow : "full" + if (mobileUi.isMobile()) return mobileUi.workflowPick("/welcome/workflow", WIZARD_WORKFLOWS.includes(status.workflow) ? status.workflow : null, WIZARD_WORKFLOWS, true) return form({ method: "POST", action: "/welcome/workflow", class: "welcome-select-form" }, select({ name: "workflow" }, WIZARD_WORKFLOWS.map(k => option({ value: k, ...(k === selected ? { selected: true } : {}) }, k === "full" ? i18n.welcomeWorkflow_full : (i18n[`workflow_${k}`] || k))) @@ -104,7 +106,7 @@ const stepAction = (key, profile, status) => { exports.welcomeView = async (status, profile = {}) => { const steps = status.steps || {} - const usable = status.usable || [] + const usable = mobileUi.isMobile() ? mobileUi.welcomeSteps(status.usable || []) : (status.usable || []) const opened = usable.find(key => !steps[key]) const html = template( i18n.welcomeTitle,