Angular material progression dialog - angularjs

Is there an angular material component to show a list of current items in progress or those completed just like when you perform download below? Or need to create my own?
I'm not asking about the progressLinear itself, I know that. What I'm asking is a component that will group all current tasks in progress and completed tasks in a dialog where you can see a cancel button, show all processes, just like when you are downloading.

There are no components that I am aware of that have the exact behavior you are looking for. Other than the native browser support for downloads (which is not what you want). I think it would be really easy to create a reusable component to achieve what you are looking for. A directive that can track a list of tasks and callback to the appropriate cancel function on a button click.
There are several progress bars you could use. If you want angular-material... https://material.angularjs.org/latest/demo/progressLinear
Bootstrap has some options as well...
https://angular-ui.github.io/bootstrap/

Related

What kind of component I should use to inform a user that an action has been completed successfully?

I have an app where the user can download a photo. After downloading it, I want to display a small message saying "Download successful". Initially I wanted to show Modal from https://reactnative.dev/docs/modal but then I wanted this info to disappear either in 5 sec, or if the user taps outside of the modal. So I thought I should wrap my Modal inside an Animated component https://reactnative.dev/docs/animations
Am I on the right track? Is this the way to show a user friendly message - wrapping modal inside animated. Or there is another component which I can use?
I think it will be better if you use SnackBar for such purposes.
You can use any snackbar library in your project. Your wrap it around with your project, Then whenever you need to throw information message or error message you just called the hook for that snackbar. Also it will automatically disappear after showing the message. you won't need to take care of seconds.
notistack package : https://www.npmjs.com/package/notistack
You can also checkout the Material UI Alerts.

Best practice for modal popup information page

I have an app where I want to click a button and up pops a modal information page, with text and diagrams. Each information page will have react/js since the content is dynamic. I have about 30 different information pages that I want to create and 30 different buttons to trigger each page.
What is the best way of doing this? Do I create 30 different files with the html for each modal popup and do it that way?
I am using Material UI. Not sure which modal option I should be using. They have Dialog, Drawer, Menu or Popover. Or perhaps another method is better.
I figure this must be a common requirement so hopefully I can find the best practice.

Correct way to add custom buttons with OpenTok

I'm building a video application for the web in React using OpenTok. OpenTok has built in buttons for muting the mic for the publisher and muting the audio for subscribers. In my case I also need buttons to mute the video for both the publisher and the subscriber.
I haven't seen anything about a mute video button in the documentation so I built the functionality myself using subscribeToVideo. The problem is that I want to add a button with this functionality next to the mute audio button, but I haven't found anything about custom buttons in the documentation.
So my question is: What's the best way to add custom buttons to OpenToks bar?
Of course I could append a button to the html and style it in place myself, but it feels ugly and I don't know what the consequences are. I guess this is my back up solution if there isn't any other way.
I will probably need to add other buttons as well in the future so I really hope OpenTok supports custom buttons and that it's just me that haven't found how to do it.
TokBox Developer Evangelist here.
We don't have any documentation on custom buttons, but you do have three options for the video and mute buttons on the video element.
If you want a custom button, you will have to append that to the HTML and toggle subscribeToVideo and subscribeToAudio properties like you said.
Here is a react sample that adds a mute video button https://opentok.github.io/opentok-web-samples/React-Basic-Video-Chat/
I would recommend that you just set the buttonDisplayMode to off and then recreate the mute audio button just using subscriber.subscribeToAudio() and publisher.publishAudio(). This way if eg. the opentok UI changes slightly it doesn't matter for you, plus you can make it all look however you want.

salesforce: Is it possible to override Salesforce global search?

There's a search box on the top of Salesforce. Is it possible to override(re-implement) it? Like catching the click event, popping up dialog, or customizing the search result page...
I went over the Visualforce development guide, it seems I can't do this with Visualforce. Any suggestions?
You'd need to use custom sidebar components.
In one of them place javascript that will intercept the events from the global search -> and make that event invoke whatever you want.

Flash --> Angular conversion: How can I have a child inject functionality to the parent?

I'm converting a Flash/Flex application into an angular application.
In flash, I have a header, toolbar above, and navigation to the left. When users click on the navigation, different modules are loaded into the applications main content pane. Most modules support New, Edit, Archive, and Un-archive actions. There are icons in the toolbar that execute the actions.
But there are some modules that support additional actions. In flex, when the child module loads, it loads a new button into the toolbar along with a callback function that will be called when the user clicks on the custom action button. When the module unloads, it removes the button from the toolbar.
So in angular, what could I use to achieve similar functionality? Is this a parent/child scope kind of thing or something else altogether? I'm new to angular and I'm not sure how to approach this problem.
Thanks in advance.

Resources