From 683a71d614dc4c6084113937ddf134265fb1683c Mon Sep 17 00:00:00 2001 From: Ali Hassan Date: Sun, 21 Jan 2024 21:49:42 +0500 Subject: [PATCH 1/2] Added sort icon and switch functionality --- src/node_modules/app-cover/app-cover.js | 2 +- src/node_modules/app-timeline/app-timeline.js | 4 +++- src/node_modules/buttons/sm-icon-button-alt.js | 5 +++-- src/node_modules/theme/dark-theme/index.js | 3 +++ src/node_modules/theme/lite-theme/index.js | 3 +++ src/node_modules/window-bar/window-bar.js | 4 ++-- 6 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/node_modules/app-cover/app-cover.js b/src/node_modules/app-cover/app-cover.js index 75681e7..4b941ee 100644 --- a/src/node_modules/app-cover/app-cover.js +++ b/src/node_modules/app-cover/app-cover.js @@ -84,7 +84,7 @@ function cover_app (opts = default_opts, protocol) { name: 'Cover.pdf', src: icon_pdf_reader_solid, action_buttons: [ - {text: 'TELL ME MORE', action: 'toggle_desc', toggle_able: true} + {text: 'TELL ME MORE', action: 'toggle_desc', activate: true} ], data } diff --git a/src/node_modules/app-timeline/app-timeline.js b/src/node_modules/app-timeline/app-timeline.js index 5fb06a8..acbd4b5 100644 --- a/src/node_modules/app-timeline/app-timeline.js +++ b/src/node_modules/app-timeline/app-timeline.js @@ -67,6 +67,8 @@ function app_timeline (opts = default_opts, protocol) { // Assigning all the icons const { img_src: { icon_folder_solid= `${prefix}/icon_folder_solid.svg`, + sort_down, + sort_up } } = data let cards_data = require(`../data/data.json`)['timeline'] @@ -146,7 +148,7 @@ function app_timeline (opts = default_opts, protocol) { name: 'TIMELINE', src: icon_folder_solid, icon_buttons: [ - { icon: icon_folder_solid, action: 'toggle_sorting' } + { icon: sort_down, icon_active: sort_up, action: 'toggle_sorting', toggle: true } ], data: data } diff --git a/src/node_modules/buttons/sm-icon-button-alt.js b/src/node_modules/buttons/sm-icon-button-alt.js index d385604..284a19b 100644 --- a/src/node_modules/buttons/sm-icon-button-alt.js +++ b/src/node_modules/buttons/sm-icon-button-alt.js @@ -27,7 +27,7 @@ function sm_icon_button_alt (opts = default_opts, protocol) { // ---------------------------------------- // OPTS // ---------------------------------------- - let { toggle, src, src_active } = opts + let { activate, toggle, src, src_active } = opts // ---------------------------------------- // PROTOCOL // ---------------------------------------- @@ -59,7 +59,8 @@ function sm_icon_button_alt (opts = default_opts, protocol) { }) if (!toggle) return if (src_active) sm_icon_button_alt.innerHTML = active_state ? src_active : src - sm_icon_button_alt.classList.toggle('active', active_state) + if(activate) + sm_icon_button_alt.classList.toggle('active', active_state) active_state = !active_state } } diff --git a/src/node_modules/theme/dark-theme/index.js b/src/node_modules/theme/dark-theme/index.js index 515397b..18f25fb 100644 --- a/src/node_modules/theme/dark-theme/index.js +++ b/src/node_modules/theme/dark-theme/index.js @@ -62,6 +62,9 @@ const dark_theme = { icon_arrow_up: ``, icon_arrow_down_light: ``, icon_arrow_up_light: ``, + sort: ``, + sort_down: ``, + sort_up: ``, // actions icon_search : ``, // images - @TODO: those images below should be svgs as well: diff --git a/src/node_modules/theme/lite-theme/index.js b/src/node_modules/theme/lite-theme/index.js index 5c6de07..78e5a71 100644 --- a/src/node_modules/theme/lite-theme/index.js +++ b/src/node_modules/theme/lite-theme/index.js @@ -62,6 +62,9 @@ const light_theme = { icon_arrow_up: ``, icon_arrow_down_light: ``, icon_arrow_up_light: ``, + sort: ``, + sort_down: ``, + sort_up: ``, // actions icon_search : ``, // images - @TODO: should be svgs as well diff --git a/src/node_modules/window-bar/window-bar.js b/src/node_modules/window-bar/window-bar.js index 3689fdb..b8100e3 100644 --- a/src/node_modules/window-bar/window-bar.js +++ b/src/node_modules/window-bar/window-bar.js @@ -106,10 +106,10 @@ function window_bar (opts = default_opts, protocol) { } { // icon buttons if (opts.icon_buttons) { - function make_element ({ icon, action: type }, i) { + function make_element ({ icon, icon_active, toggle, action: type }, i) { const on = { 'click': onclick } const protocol = use_protocol(`${type}_${i}`)({ state, on }) - const icon_opts = { src: icon } + const icon_opts = { src: icon, src_active: icon_active, toggle } const element = shadowfy()(sm_icon_button_alt(icon_opts, protocol)) return element function onclick (message) { From c1a8ea4bfee504928f64509bab81e5e60cde90b8 Mon Sep 17 00:00:00 2001 From: Ali Hassan Date: Sun, 21 Jan 2024 21:50:07 +0500 Subject: [PATCH 2/2] Bundled --- bundle.js | 76 ++++++++++++++++++++----------------------------------- 1 file changed, 27 insertions(+), 49 deletions(-) diff --git a/bundle.js b/bundle.js index 70001b6..6ce2296 100644 --- a/bundle.js +++ b/bundle.js @@ -1526,7 +1526,7 @@ function cover_app (opts = default_opts, protocol) { name: 'Cover.pdf', src: icon_pdf_reader_solid, action_buttons: [ - {text: 'TELL ME MORE', action: 'toggle_desc', toggle_able: true} + {text: 'TELL ME MORE', action: 'toggle_desc', activate: true} ], data } @@ -2881,6 +2881,8 @@ function app_timeline (opts = default_opts, protocol) { // Assigning all the icons const { img_src: { icon_folder_solid= `${prefix}/icon_folder_solid.svg`, + sort_down, + sort_up } } = data let cards_data = require(`../data/data.json`)['timeline'] @@ -2960,7 +2962,7 @@ function app_timeline (opts = default_opts, protocol) { name: 'TIMELINE', src: icon_folder_solid, icon_buttons: [ - { icon: icon_folder_solid, action: 'toggle_sorting' } + { icon: sort_down, icon_active: sort_up, action: 'toggle_sorting', toggle: true } ], data: data } @@ -3753,7 +3755,7 @@ function icon_button (opts = default_opts, protocol) { // ---------------------------------------- // PROTOCOL // ---------------------------------------- - const on = { 'activate': onactivate, 'inactivate': oninactivate } + const on = { 'activate': onactivate, 'deactivate': ondeactivate } const channel = use_protocol('up')({ protocol, state, on }) // ---------------------------------------- // TEMPLATE @@ -3787,7 +3789,7 @@ function icon_button (opts = default_opts, protocol) { return el - function oninactivate () { + function ondeactivate () { state.status.active = false icon_button.classList.toggle('active', state.status.active) if (svg_active) icon_button.replaceChildren(svg_icon) @@ -4382,7 +4384,7 @@ function sm_icon_button_alt (opts = default_opts, protocol) { // ---------------------------------------- // OPTS // ---------------------------------------- - let { toggle, src, src_active } = opts + let { activate, toggle, src, src_active } = opts // ---------------------------------------- // PROTOCOL // ---------------------------------------- @@ -4414,7 +4416,8 @@ function sm_icon_button_alt (opts = default_opts, protocol) { }) if (!toggle) return if (src_active) sm_icon_button_alt.innerHTML = active_state ? src_active : src - sm_icon_button_alt.classList.toggle('active', active_state) + if(activate) + sm_icon_button_alt.classList.toggle('active', active_state) active_state = !active_state } } @@ -4983,7 +4986,7 @@ function text_button (opts = default_opts, protocol) { // ---------------------------------------- // PROTOCOL // ---------------------------------------- - const on = { 'activate': onactivate, 'inactivate': oninactivate } + const on = { 'activate': onactivate, 'deactivate': ondeactivate } const channel = use_protocol('up')({ protocol, state , on }) // ---------------------------------------- // TEMPLATE @@ -5003,7 +5006,7 @@ function text_button (opts = default_opts, protocol) { return el - function oninactivate (message) { + function ondeactivate (message) { state.status.active = false text_button.classList.toggle('active', state.status.active) } @@ -7099,12 +7102,6 @@ function important_documents (opts = default_opts, protocol) { async function toggle_active_state (message) { const { active_state } = message.data if (active_state === 'active') important_documents_wrapper.style.display = 'none' - const channel = state.net[state.aka.up] - channel.send({ - head: [id, channel.send.id, channel.mid++], - type: 'deactivate_tick', - data: opts.name - }) } } // ---------------------------------------- @@ -7412,7 +7409,7 @@ function info_page (opts = default_opts, protocol) { function watch_scrollbar () { const channel = state.net[state.aka.scrollbar] - ro.observe(scrollbar_wrapper) + ro.observe(popup_wrapper) } function on_scroll (message) { const channel = state.net[state.aka.scrollbar] @@ -7517,7 +7514,7 @@ function get_theme () { top: 0; left: 0; z-index: 20; - height: 100%; + height: max-content; scrollbar-width: none; /* For Firefox */ } @@ -7542,8 +7539,7 @@ function get_theme () { } @container (min-width: 768px) { .main_wrapper .popup_wrapper { - padding: 30px; - padding-left: 100px; + padding: 30px 30px 0 100px; } } @container (min-width: 1200px) { @@ -7745,12 +7741,6 @@ function manifesto (opts = default_opts, protocol) { async function toggle_active_state (message) { const { active_state } = message.data if (active_state === 'active') mission_statement_wrapper.style.display = 'none' - const channel = state.net[state.aka.up] - channel.send({ - head: [id, channel.send.id, channel.mid++], - type: 'deactivate_tick', - data: opts.name - }) } } { // scrollbar @@ -8594,7 +8584,7 @@ function navbar (opts = default_opts, protocol) { channel.send({ head: [id, channel.send.id, channel.mid++], refs: { cause: message.head }, - type: state.status.dropdown_collapsed ? 'activate' : 'inactivate', + type: state.status.dropdown_collapsed ? 'activate' : 'deactivate', }) } } @@ -8711,7 +8701,7 @@ function navbar (opts = default_opts, protocol) { channel.send({ head: [id, channel.send.id, channel.mid++], refs: { cause: message.head }, - type: state.status.theme_dark ? 'activate' : 'inactivate', + type: state.status.theme_dark ? 'activate' : 'deactivate', }) } } @@ -8763,7 +8753,7 @@ function navbar (opts = default_opts, protocol) { if (ex_channel) ex_channel.send({ // old active nav button head: [id, ex_channel.send.id, ex_channel.mid++], refs: { cause: head }, - type: 'inactivate', + type: 'deactivate', }) if (be_channel) be_channel.send({ // new active nav button head: [id, be_channel.send.id, be_channel.mid++], @@ -8785,7 +8775,7 @@ function navbar (opts = default_opts, protocol) { if (ex_channel) ex_channel.send({ // old active nav button head: [id, ex_channel.send.id, ex_channel.mid++], refs: { cause: head }, - type: 'inactivate', + type: 'deactivate', }) if (be_channel) be_channel.send({ // new active nav button head: [id, be_channel.send.id, be_channel.mid++], @@ -8798,7 +8788,7 @@ function navbar (opts = default_opts, protocol) { const channel = state.net[state.aka.terminal_button] channel.send({ head: [id, channel.send.id, channel.mid++], - type: state.status.terminal_collapsed ? 'activate' : 'inactivate', + type: state.status.terminal_collapsed ? 'activate' : 'deactivate', }) } } @@ -9071,12 +9061,6 @@ function our_alumni (opts = default_opts, protocol) { async function toggle_active_state (message) { const { active_state } = message.data if (active_state === 'active') our_alumni_wrapper.style.display = 'none' - const channel = state.net[state.aka.up] - channel.send({ - head: [id, channel.send.id, channel.mid++], - type: 'deactivate_tick', - data: opts.name - }) } } { // scrollbar @@ -9347,12 +9331,6 @@ function our_members (opts = default_opts, protocol) { async function toggle_active_state (message) { const { active_state } = message.data if (active_state === 'active') our_members_wrapper.style.display = 'none' - const channel = state.net[state.aka.up] - channel.send({ - head: [id, channel.send.id, channel.mid++], - type: 'deactivate_tick', - data: opts.name - }) } } // ---------------------------------------- @@ -11693,6 +11671,9 @@ const dark_theme = { icon_arrow_up: ``, icon_arrow_down_light: ``, icon_arrow_up_light: ``, + sort: ``, + sort_down: ``, + sort_up: ``, // actions icon_search : ``, // images - @TODO: those images below should be svgs as well: @@ -11790,6 +11771,9 @@ const light_theme = { icon_arrow_up: ``, icon_arrow_down_light: ``, icon_arrow_up_light: ``, + sort: ``, + sort_down: ``, + sort_up: ``, // actions icon_search : ``, // images - @TODO: should be svgs as well @@ -12505,12 +12489,6 @@ function tools (opts = default_opts, protocol) { async function toggle_active_state (message) { const { active_state } = message.data if (active_state === 'active') tools_wrapper.style.display = 'none' - const channel = state.net[state.aka.up] - channel.send({ - head: [id, channel.send.id, channel.mid++], - type: 'deactivate_tick', - data: opts.name - }) } } // ---------------------------------------- @@ -12735,10 +12713,10 @@ function window_bar (opts = default_opts, protocol) { } { // icon buttons if (opts.icon_buttons) { - function make_element ({ icon, action: type }, i) { + function make_element ({ icon, icon_active, toggle, action: type }, i) { const on = { 'click': onclick } const protocol = use_protocol(`${type}_${i}`)({ state, on }) - const icon_opts = { src: icon } + const icon_opts = { src: icon, src_active: icon_active, toggle } const element = shadowfy()(sm_icon_button_alt(icon_opts, protocol)) return element function onclick (message) {